SlideShare a Scribd company logo
HTML / CSS / Javascript
The web
HTML
Codepen.io
Bryan Ollendyke
[at]btopro
Developer Activist
Today’s Topic / What you'll learn about
- basics of HTML, CSS, JavaScript
- Where all this came from
- How to use the Inspector to modify web
pages
- Security implications of JavaScript and
past exploits that brought down github
- Writing some basics and modifying
existing HTML
- Forking and modifying a basic resume on
codepen.io
HTML
CSS
JS
Terms / definitions for today
- HTML – Hyper Text Markup Language
- CSS – Cascading Style Sheets
- JS – JavaScript
- DOM – Document Object Model
- IDE - Integrated development environment
- W3C – World Wide Web Consortium
- WHATWG - Web Hypertext Application
Technology Working Group
- DOS – Denial of Service
- DDOS – Distributed Denial of Service
- HTTP - hypertext transfer protocol
HTML
CSS
JS
Who’s using these
- HTML / CSS, every webpage on the internet
- JS... Damn near everyone unless disabled
on purpose
HTML
CSS
JS
blockmetry.com – web analytics for “ethical marketers”
Are there differences between browsers?
- Sadly, yes.
- Used to be dramatic differences in CSS
and JavaScript processing capabilities
- W3C founded to establish and help people
implement standards in a uniform way
- Web Hypertext Application Technology
Working Group (2004) founded by browser
vendors to push HTML further than the
W3C was able to do at that time (HTML5)
- 2019 – these orgs have committed to
merging efforts!
HTML
CSS
JS
pcninja.com – just an amazing google search here
statcounter.com – great browser usage reporting engine
html5rocks.com – Webkit (Safari, 2011)
html5rocks.com – Mozilla Gecko (2011)
The hierarchy of the document
Document Object Model (DOM)
What is HTML
- HTML Defines the structure and order
of the web page (DOM)
HTML
CSS
JS
What CSS does
- CSS styles the structure by applying
attributes directly to “selectors”
HTML
CSS
JS
Responsive design / @media queries
https://developers.google.com/web/fundamentals/design-and-ux/responsive/
CSS Design frameworks
- Bootstrap – open sourced by twitter
- https://getbootstrap.com/
- describes their visual language for
presenting interfaces
- Many (too many) have adopted it as a
replacement for design variability
- Canvas is built on this for example
- Clean defaults + basic javascript
elements
HTML
CSS
JS
CSS Abstraction
- SASS - Sass is the most mature, stable,
and powerful professional grade CSS
extension language in the world.
- https://sass-lang.com/
- personal note: I’m not a huge fan of
languages that MUST be preprocessed
in order to work. I’d recommend learning
css long before SASS
however, there are many who make a living
just doing this so it’s legit.
HTML
CSS
JS
The “Script” part in JavaScript is
- What immediately complicates the web
- Leads to heavy abstractions and people
leveraging libraries in order to write
less code but do more
- jQuery != JavaScript
(though extremely popular)
- $ is a dead give away of jQuery
- Popular with those getting started
- https://jquery-tutorial.net/introduction/hello-world/
HTML
CSS
JS
What JavaScript screws up makes possible
- JavaScript allows for applying scripting
and interactivity to the HTML structure
to dynamically modify the DOM / HTML
HTML
CSS
JS
”Vanilla” JavaScript
vs
jQuery
JavaScript CDNs are popular
- Javascript loaded via a “CDN”
content delivery network
Security
Time
JavaScript CDNs are popular
- Javascript loaded via a “CDN”
content delivery network
Security
Time
JavaScript CDNs are popular an attack vector
- Javascript loaded via a “CDN”
content delivery network
- Web pages are as secure as the JavaScript
loaded into them.
- XSS – Cross Site Script Attacks are
legit things to worry about and often
not terribly complicated to execute
Security
Time
CDNs are amazing though, don’t mistake
- CDNs must be from trusted source
- All modern businesses leverage CDNs
- CDNs serve content faster then traditional
server methods
- Faster content === more business
- We’ll talk more about CDNs in the future
- https://www.youtube.com/watch?time_continue=8&v=QCEid2WCszM
Security
Time
Let’s Hack Penn State
Ok well.. Not really.
The hierarchy of the document
Document Object Model (DOM)
The hierarchy of the document
Document Object Model (DOM)
Useful links / learning more
- https://www.quackit.com/html/tutorial/
- Google HTML or CSS cheat sheet
- Learn HTML in 12 Minutes
https://www.youtube.com/watch?v=bWPMSSsVdPk
- search https://codepen.io/ for tutorial
- https://caniuse.com – Spec search
- Mozilla JavaScript basics
https://developer.mozilla.org/en-
US/docs/Learn/Getting_started_with_the_web/JavaScript_basics
HTML
CSS
JS
What we’ll do now
- Mess with Inspector to modify psu.edu
- Play with and explore CodePen.io
- Fork a pen of mine that we’ll step
through together
- Ask questions, this is just a foot
in the door to this topic and we’ll
be exploring other technologies and
related platforms as the semester
progresses
HTML
CSS
JS
Lab
- Start modifying a pen to reverse engineer
a resume boilerplate
- Fork Reflection Pen
- write your reflection post there
- add a link to your video response there
Reflection topic (pick at least one)
- Explaining styling an element in CSS
- Explain how to use JavaScript and
getElementById to add a click event to
an element in an existing codepen
- Value of CodePen as a platform
CodePen.io
Quick break and then..
CodePen
Editing and understanding
code pen
HTML
CodePen.io
Bryan Ollendyke
[at]btopro

More Related Content

What's hot

WPO @ PubCon 2010
WPO @ PubCon 2010WPO @ PubCon 2010
WPO @ PubCon 2010
Stoyan Stefanov
 
JS in Rural Communities
JS in Rural CommunitiesJS in Rural Communities
JS in Rural Communities
Matt Keas
 
PrairieDevCon 2014 - Web Doesn't Mean Slow
PrairieDevCon 2014 -  Web Doesn't Mean SlowPrairieDevCon 2014 -  Web Doesn't Mean Slow
PrairieDevCon 2014 - Web Doesn't Mean Slow
dmethvin
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
brucelawson
 
VolgaCTF 2018 - Neatly bypassing CSP
VolgaCTF 2018 - Neatly bypassing CSPVolgaCTF 2018 - Neatly bypassing CSP
VolgaCTF 2018 - Neatly bypassing CSP
Дмитрий Бумов
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overview
Diacode
 
Fecc 12517-sd
Fecc 12517-sdFecc 12517-sd
Fecc 12517-sd
Thinkful
 
Velocity dust
Velocity dustVelocity dust
Velocity dust
Veena Basavaraj
 
Pop quiz, hotshot how fast can your word press site go
Pop quiz, hotshot  how fast can your word press site goPop quiz, hotshot  how fast can your word press site go
Pop quiz, hotshot how fast can your word press site go
Robert Bailey
 
Harder, Better, Faster, Stronger
Harder, Better, Faster, StrongerHarder, Better, Faster, Stronger
Harder, Better, Faster, Stronger
David Engel
 
Christmas Trees Made with HTML CSS and JS
Christmas Trees Made with HTML CSS and JSChristmas Trees Made with HTML CSS and JS
Christmas Trees Made with HTML CSS and JS
Niamh Foley
 
Making Web Fun
Making Web FunMaking Web Fun
Making Web Fun
Rajasekar Murugan
 
Html5 Fit: Get Rid of Love Handles
Html5 Fit:  Get Rid of Love HandlesHtml5 Fit:  Get Rid of Love Handles
Html5 Fit: Get Rid of Love Handles
Chris Love
 
Crushing content without links
Crushing content without linksCrushing content without links
Crushing content without links
William Eadie
 
Introduction to Optimizing WordPress for Website Speed
Introduction to Optimizing WordPress for Website SpeedIntroduction to Optimizing WordPress for Website Speed
Introduction to Optimizing WordPress for Website Speed
Nile Flores
 
How to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPressHow to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPress
Gerald Glynn
 
Performance & Responsive Web Design
Performance & Responsive Web DesignPerformance & Responsive Web Design
Performance & Responsive Web DesignZach Leatherman
 
When dynamic becomes static : the next step in web caching techniques
When dynamic becomes static : the next step in web caching techniquesWhen dynamic becomes static : the next step in web caching techniques
When dynamic becomes static : the next step in web caching techniques
Wim Godden
 
Webmonkey
WebmonkeyWebmonkey
Webmonkey
isac Lagerblad
 
Html5 - short intro
Html5 - short introHtml5 - short intro
Html5 - short introjeiseman
 

What's hot (20)

WPO @ PubCon 2010
WPO @ PubCon 2010WPO @ PubCon 2010
WPO @ PubCon 2010
 
JS in Rural Communities
JS in Rural CommunitiesJS in Rural Communities
JS in Rural Communities
 
PrairieDevCon 2014 - Web Doesn't Mean Slow
PrairieDevCon 2014 -  Web Doesn't Mean SlowPrairieDevCon 2014 -  Web Doesn't Mean Slow
PrairieDevCon 2014 - Web Doesn't Mean Slow
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
 
VolgaCTF 2018 - Neatly bypassing CSP
VolgaCTF 2018 - Neatly bypassing CSPVolgaCTF 2018 - Neatly bypassing CSP
VolgaCTF 2018 - Neatly bypassing CSP
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overview
 
Fecc 12517-sd
Fecc 12517-sdFecc 12517-sd
Fecc 12517-sd
 
Velocity dust
Velocity dustVelocity dust
Velocity dust
 
Pop quiz, hotshot how fast can your word press site go
Pop quiz, hotshot  how fast can your word press site goPop quiz, hotshot  how fast can your word press site go
Pop quiz, hotshot how fast can your word press site go
 
Harder, Better, Faster, Stronger
Harder, Better, Faster, StrongerHarder, Better, Faster, Stronger
Harder, Better, Faster, Stronger
 
Christmas Trees Made with HTML CSS and JS
Christmas Trees Made with HTML CSS and JSChristmas Trees Made with HTML CSS and JS
Christmas Trees Made with HTML CSS and JS
 
Making Web Fun
Making Web FunMaking Web Fun
Making Web Fun
 
Html5 Fit: Get Rid of Love Handles
Html5 Fit:  Get Rid of Love HandlesHtml5 Fit:  Get Rid of Love Handles
Html5 Fit: Get Rid of Love Handles
 
Crushing content without links
Crushing content without linksCrushing content without links
Crushing content without links
 
Introduction to Optimizing WordPress for Website Speed
Introduction to Optimizing WordPress for Website SpeedIntroduction to Optimizing WordPress for Website Speed
Introduction to Optimizing WordPress for Website Speed
 
How to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPressHow to Build a Bespoke Page Builder in WordPress
How to Build a Bespoke Page Builder in WordPress
 
Performance & Responsive Web Design
Performance & Responsive Web DesignPerformance & Responsive Web Design
Performance & Responsive Web Design
 
When dynamic becomes static : the next step in web caching techniques
When dynamic becomes static : the next step in web caching techniquesWhen dynamic becomes static : the next step in web caching techniques
When dynamic becomes static : the next step in web caching techniques
 
Webmonkey
WebmonkeyWebmonkey
Webmonkey
 
Html5 - short intro
Html5 - short introHtml5 - short intro
Html5 - short intro
 

Similar to HTML / CSS / JS Web basics

Html5 & less css
Html5 & less cssHtml5 & less css
Html5 & less css
Graham Johnson
 
State of modern web technologies: an introduction
State of modern web technologies: an introductionState of modern web technologies: an introduction
State of modern web technologies: an introduction
Michael Ahearn
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
Sadaaki HIRAI
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
Nilesh Bafna
 
Scaling 101
Scaling 101Scaling 101
Scaling 101
Chris Finne
 
Death of a Themer
Death of a ThemerDeath of a Themer
Death of a Themer
James Panton
 
Testable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascriptTestable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascript
Timothy Oxley
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Cantina
 
Frontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser renderingFrontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser rendering
Manuel Garcia
 
Get Ahead with HTML5 on Moible
Get Ahead with HTML5 on MoibleGet Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moible
markuskobler
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
Gareth Saunders
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
Christian Heilmann
 
DrupalCampLA 2011 - Drupal frontend-optimizing
DrupalCampLA 2011 - Drupal frontend-optimizingDrupalCampLA 2011 - Drupal frontend-optimizing
DrupalCampLA 2011 - Drupal frontend-optimizing
Ashok Modi
 
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 201210 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
Bastian Grimm
 
Building Performance - ein Frontend-Build-Prozess für Java mit Maven
Building Performance - ein Frontend-Build-Prozess für Java mit MavenBuilding Performance - ein Frontend-Build-Prozess für Java mit Maven
Building Performance - ein Frontend-Build-Prozess für Java mit Maven
Oliver Ochs
 
Bootstrap 3 Basic - Bangkok WordPress Meetup
Bootstrap 3 Basic - Bangkok WordPress MeetupBootstrap 3 Basic - Bangkok WordPress Meetup
Bootstrap 3 Basic - Bangkok WordPress Meetup
Woratana Perth Ngarmtrakulchol
 
6 css week12 2020 2021 for g10
6 css week12 2020 2021 for g106 css week12 2020 2021 for g10
6 css week12 2020 2021 for g10
Osama Ghandour Geris
 
Crash Course HTML/Rails Slides
Crash Course HTML/Rails SlidesCrash Course HTML/Rails Slides
Crash Course HTML/Rails Slides
Udita Plaha
 
Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsday
Francesco Fullone
 

Similar to HTML / CSS / JS Web basics (20)

Html5 & less css
Html5 & less cssHtml5 & less css
Html5 & less css
 
State of modern web technologies: an introduction
State of modern web technologies: an introductionState of modern web technologies: an introduction
State of modern web technologies: an introduction
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
 
Scaling 101 test
Scaling 101 testScaling 101 test
Scaling 101 test
 
Scaling 101
Scaling 101Scaling 101
Scaling 101
 
Death of a Themer
Death of a ThemerDeath of a Themer
Death of a Themer
 
Testable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascriptTestable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascript
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
 
Frontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser renderingFrontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser rendering
 
Get Ahead with HTML5 on Moible
Get Ahead with HTML5 on MoibleGet Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moible
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
 
DrupalCampLA 2011 - Drupal frontend-optimizing
DrupalCampLA 2011 - Drupal frontend-optimizingDrupalCampLA 2011 - Drupal frontend-optimizing
DrupalCampLA 2011 - Drupal frontend-optimizing
 
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 201210 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
 
Building Performance - ein Frontend-Build-Prozess für Java mit Maven
Building Performance - ein Frontend-Build-Prozess für Java mit MavenBuilding Performance - ein Frontend-Build-Prozess für Java mit Maven
Building Performance - ein Frontend-Build-Prozess für Java mit Maven
 
Bootstrap 3 Basic - Bangkok WordPress Meetup
Bootstrap 3 Basic - Bangkok WordPress MeetupBootstrap 3 Basic - Bangkok WordPress Meetup
Bootstrap 3 Basic - Bangkok WordPress Meetup
 
6 css week12 2020 2021 for g10
6 css week12 2020 2021 for g106 css week12 2020 2021 for g10
6 css week12 2020 2021 for g10
 
Crash Course HTML/Rails Slides
Crash Course HTML/Rails SlidesCrash Course HTML/Rails Slides
Crash Course HTML/Rails Slides
 
Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsday
 

More from btopro

ELMS:LN 2020 update @ Apereo
ELMS:LN 2020 update @ ApereoELMS:LN 2020 update @ Apereo
ELMS:LN 2020 update @ Apereo
btopro
 
EdTechJoker Open Activism Project
EdTechJoker Open Activism ProjectEdTechJoker Open Activism Project
EdTechJoker Open Activism Project
btopro
 
Lecture13 Containers
Lecture13   ContainersLecture13   Containers
Lecture13 Containers
btopro
 
Ed techjoker faculty presentation
Ed techjoker faculty presentationEd techjoker faculty presentation
Ed techjoker faculty presentation
btopro
 
IST 402 Presentation by Sonya
IST 402 Presentation by SonyaIST 402 Presentation by Sonya
IST 402 Presentation by Sonya
btopro
 
Lecture11 - Accessibility
Lecture11  - AccessibilityLecture11  - Accessibility
Lecture11 - Accessibility
btopro
 
EdTechJoker - HAXTheWeb
EdTechJoker - HAXTheWebEdTechJoker - HAXTheWeb
EdTechJoker - HAXTheWeb
btopro
 
Drupal
DrupalDrupal
Drupal
btopro
 
ClassicPress / WordPress
ClassicPress / WordPressClassicPress / WordPress
ClassicPress / WordPress
btopro
 
Grav CMS
Grav CMSGrav CMS
Grav CMS
btopro
 
HAX camp 2019 - HAX The Camp address
HAX camp 2019 - HAX The Camp addressHAX camp 2019 - HAX The Camp address
HAX camp 2019 - HAX The Camp address
btopro
 
HAX camp 2019 - Welcome
HAX camp 2019 - WelcomeHAX camp 2019 - Welcome
HAX camp 2019 - Welcome
btopro
 
Web components and Package managers
Web components and Package managersWeb components and Package managers
Web components and Package managers
btopro
 
Background info on git / github
Background info on git / githubBackground info on git / github
Background info on git / github
btopro
 
EdTechJoker IST 402 - Syllabus day
EdTechJoker IST 402 - Syllabus dayEdTechJoker IST 402 - Syllabus day
EdTechJoker IST 402 - Syllabus day
btopro
 
Future proofing design work with Web components
Future proofing design work with Web componentsFuture proofing design work with Web components
Future proofing design work with Web components
btopro
 
The case for Web components - Drupal4Gov webinar
The case for Web components - Drupal4Gov webinarThe case for Web components - Drupal4Gov webinar
The case for Web components - Drupal4Gov webinar
btopro
 
HAX - Chaotic Good
HAX - Chaotic GoodHAX - Chaotic Good
HAX - Chaotic Good
btopro
 
HAXTheWeb @ Apereo 19
HAXTheWeb @ Apereo 19HAXTheWeb @ Apereo 19
HAXTheWeb @ Apereo 19
btopro
 
Open Apereo - Web components workshop
Open Apereo - Web components workshopOpen Apereo - Web components workshop
Open Apereo - Web components workshop
btopro
 

More from btopro (20)

ELMS:LN 2020 update @ Apereo
ELMS:LN 2020 update @ ApereoELMS:LN 2020 update @ Apereo
ELMS:LN 2020 update @ Apereo
 
EdTechJoker Open Activism Project
EdTechJoker Open Activism ProjectEdTechJoker Open Activism Project
EdTechJoker Open Activism Project
 
Lecture13 Containers
Lecture13   ContainersLecture13   Containers
Lecture13 Containers
 
Ed techjoker faculty presentation
Ed techjoker faculty presentationEd techjoker faculty presentation
Ed techjoker faculty presentation
 
IST 402 Presentation by Sonya
IST 402 Presentation by SonyaIST 402 Presentation by Sonya
IST 402 Presentation by Sonya
 
Lecture11 - Accessibility
Lecture11  - AccessibilityLecture11  - Accessibility
Lecture11 - Accessibility
 
EdTechJoker - HAXTheWeb
EdTechJoker - HAXTheWebEdTechJoker - HAXTheWeb
EdTechJoker - HAXTheWeb
 
Drupal
DrupalDrupal
Drupal
 
ClassicPress / WordPress
ClassicPress / WordPressClassicPress / WordPress
ClassicPress / WordPress
 
Grav CMS
Grav CMSGrav CMS
Grav CMS
 
HAX camp 2019 - HAX The Camp address
HAX camp 2019 - HAX The Camp addressHAX camp 2019 - HAX The Camp address
HAX camp 2019 - HAX The Camp address
 
HAX camp 2019 - Welcome
HAX camp 2019 - WelcomeHAX camp 2019 - Welcome
HAX camp 2019 - Welcome
 
Web components and Package managers
Web components and Package managersWeb components and Package managers
Web components and Package managers
 
Background info on git / github
Background info on git / githubBackground info on git / github
Background info on git / github
 
EdTechJoker IST 402 - Syllabus day
EdTechJoker IST 402 - Syllabus dayEdTechJoker IST 402 - Syllabus day
EdTechJoker IST 402 - Syllabus day
 
Future proofing design work with Web components
Future proofing design work with Web componentsFuture proofing design work with Web components
Future proofing design work with Web components
 
The case for Web components - Drupal4Gov webinar
The case for Web components - Drupal4Gov webinarThe case for Web components - Drupal4Gov webinar
The case for Web components - Drupal4Gov webinar
 
HAX - Chaotic Good
HAX - Chaotic GoodHAX - Chaotic Good
HAX - Chaotic Good
 
HAXTheWeb @ Apereo 19
HAXTheWeb @ Apereo 19HAXTheWeb @ Apereo 19
HAXTheWeb @ Apereo 19
 
Open Apereo - Web components workshop
Open Apereo - Web components workshopOpen Apereo - Web components workshop
Open Apereo - Web components workshop
 

Recently uploaded

Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXXPhrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
MIRIAMSALINAS13
 
Palestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptxPalestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptx
RaedMohamed3
 
Synthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptxSynthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptx
Pavel ( NSTU)
 
Additional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdfAdditional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdf
joachimlavalley1
 
Guidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th SemesterGuidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th Semester
Atul Kumar Singh
 
Model Attribute Check Company Auto Property
Model Attribute  Check Company Auto PropertyModel Attribute  Check Company Auto Property
Model Attribute Check Company Auto Property
Celine George
 
Instructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptxInstructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptx
Jheel Barad
 
Digital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and ResearchDigital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and Research
Vikramjit Singh
 
The Challenger.pdf DNHS Official Publication
The Challenger.pdf DNHS Official PublicationThe Challenger.pdf DNHS Official Publication
The Challenger.pdf DNHS Official Publication
Delapenabediema
 
Language Across the Curriculm LAC B.Ed.
Language Across the  Curriculm LAC B.Ed.Language Across the  Curriculm LAC B.Ed.
Language Across the Curriculm LAC B.Ed.
Atul Kumar Singh
 
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
MysoreMuleSoftMeetup
 
Operation Blue Star - Saka Neela Tara
Operation Blue Star   -  Saka Neela TaraOperation Blue Star   -  Saka Neela Tara
Operation Blue Star - Saka Neela Tara
Balvir Singh
 
A Strategic Approach: GenAI in Education
A Strategic Approach: GenAI in EducationA Strategic Approach: GenAI in Education
A Strategic Approach: GenAI in Education
Peter Windle
 
1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx
JosvitaDsouza2
 
CACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdfCACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdf
camakaiclarkmusic
 
Acetabularia Information For Class 9 .docx
Acetabularia Information For Class 9  .docxAcetabularia Information For Class 9  .docx
Acetabularia Information For Class 9 .docx
vaibhavrinwa19
 
The approach at University of Liverpool.pptx
The approach at University of Liverpool.pptxThe approach at University of Liverpool.pptx
The approach at University of Liverpool.pptx
Jisc
 
Introduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp NetworkIntroduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp Network
TechSoup
 
678020731-Sumas-y-Restas-Para-Colorear.pdf
678020731-Sumas-y-Restas-Para-Colorear.pdf678020731-Sumas-y-Restas-Para-Colorear.pdf
678020731-Sumas-y-Restas-Para-Colorear.pdf
CarlosHernanMontoyab2
 
TESDA TM1 REVIEWER FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
TESDA TM1 REVIEWER  FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...TESDA TM1 REVIEWER  FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
TESDA TM1 REVIEWER FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
EugeneSaldivar
 

Recently uploaded (20)

Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXXPhrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
 
Palestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptxPalestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptx
 
Synthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptxSynthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptx
 
Additional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdfAdditional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdf
 
Guidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th SemesterGuidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th Semester
 
Model Attribute Check Company Auto Property
Model Attribute  Check Company Auto PropertyModel Attribute  Check Company Auto Property
Model Attribute Check Company Auto Property
 
Instructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptxInstructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptx
 
Digital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and ResearchDigital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and Research
 
The Challenger.pdf DNHS Official Publication
The Challenger.pdf DNHS Official PublicationThe Challenger.pdf DNHS Official Publication
The Challenger.pdf DNHS Official Publication
 
Language Across the Curriculm LAC B.Ed.
Language Across the  Curriculm LAC B.Ed.Language Across the  Curriculm LAC B.Ed.
Language Across the Curriculm LAC B.Ed.
 
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
 
Operation Blue Star - Saka Neela Tara
Operation Blue Star   -  Saka Neela TaraOperation Blue Star   -  Saka Neela Tara
Operation Blue Star - Saka Neela Tara
 
A Strategic Approach: GenAI in Education
A Strategic Approach: GenAI in EducationA Strategic Approach: GenAI in Education
A Strategic Approach: GenAI in Education
 
1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx1.4 modern child centered education - mahatma gandhi-2.pptx
1.4 modern child centered education - mahatma gandhi-2.pptx
 
CACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdfCACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdf
 
Acetabularia Information For Class 9 .docx
Acetabularia Information For Class 9  .docxAcetabularia Information For Class 9  .docx
Acetabularia Information For Class 9 .docx
 
The approach at University of Liverpool.pptx
The approach at University of Liverpool.pptxThe approach at University of Liverpool.pptx
The approach at University of Liverpool.pptx
 
Introduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp NetworkIntroduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp Network
 
678020731-Sumas-y-Restas-Para-Colorear.pdf
678020731-Sumas-y-Restas-Para-Colorear.pdf678020731-Sumas-y-Restas-Para-Colorear.pdf
678020731-Sumas-y-Restas-Para-Colorear.pdf
 
TESDA TM1 REVIEWER FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
TESDA TM1 REVIEWER  FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...TESDA TM1 REVIEWER  FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
TESDA TM1 REVIEWER FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
 

HTML / CSS / JS Web basics

  • 1. HTML / CSS / Javascript The web HTML Codepen.io Bryan Ollendyke [at]btopro Developer Activist
  • 2.
  • 3. Today’s Topic / What you'll learn about - basics of HTML, CSS, JavaScript - Where all this came from - How to use the Inspector to modify web pages - Security implications of JavaScript and past exploits that brought down github - Writing some basics and modifying existing HTML - Forking and modifying a basic resume on codepen.io HTML CSS JS
  • 4. Terms / definitions for today - HTML – Hyper Text Markup Language - CSS – Cascading Style Sheets - JS – JavaScript - DOM – Document Object Model - IDE - Integrated development environment - W3C – World Wide Web Consortium - WHATWG - Web Hypertext Application Technology Working Group - DOS – Denial of Service - DDOS – Distributed Denial of Service - HTTP - hypertext transfer protocol HTML CSS JS
  • 5. Who’s using these - HTML / CSS, every webpage on the internet - JS... Damn near everyone unless disabled on purpose HTML CSS JS
  • 6. blockmetry.com – web analytics for “ethical marketers”
  • 7. Are there differences between browsers? - Sadly, yes. - Used to be dramatic differences in CSS and JavaScript processing capabilities - W3C founded to establish and help people implement standards in a uniform way - Web Hypertext Application Technology Working Group (2004) founded by browser vendors to push HTML further than the W3C was able to do at that time (HTML5) - 2019 – these orgs have committed to merging efforts! HTML CSS JS
  • 8. pcninja.com – just an amazing google search here
  • 9. statcounter.com – great browser usage reporting engine
  • 10. html5rocks.com – Webkit (Safari, 2011)
  • 12. The hierarchy of the document Document Object Model (DOM)
  • 13. What is HTML - HTML Defines the structure and order of the web page (DOM) HTML CSS JS
  • 14. What CSS does - CSS styles the structure by applying attributes directly to “selectors” HTML CSS JS
  • 15.
  • 16.
  • 17. Responsive design / @media queries https://developers.google.com/web/fundamentals/design-and-ux/responsive/
  • 18. CSS Design frameworks - Bootstrap – open sourced by twitter - https://getbootstrap.com/ - describes their visual language for presenting interfaces - Many (too many) have adopted it as a replacement for design variability - Canvas is built on this for example - Clean defaults + basic javascript elements HTML CSS JS
  • 19.
  • 20. CSS Abstraction - SASS - Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. - https://sass-lang.com/ - personal note: I’m not a huge fan of languages that MUST be preprocessed in order to work. I’d recommend learning css long before SASS however, there are many who make a living just doing this so it’s legit. HTML CSS JS
  • 21. The “Script” part in JavaScript is - What immediately complicates the web - Leads to heavy abstractions and people leveraging libraries in order to write less code but do more - jQuery != JavaScript (though extremely popular) - $ is a dead give away of jQuery - Popular with those getting started - https://jquery-tutorial.net/introduction/hello-world/ HTML CSS JS
  • 22. What JavaScript screws up makes possible - JavaScript allows for applying scripting and interactivity to the HTML structure to dynamically modify the DOM / HTML HTML CSS JS
  • 24. JavaScript CDNs are popular - Javascript loaded via a “CDN” content delivery network Security Time
  • 25. JavaScript CDNs are popular - Javascript loaded via a “CDN” content delivery network Security Time
  • 26. JavaScript CDNs are popular an attack vector - Javascript loaded via a “CDN” content delivery network - Web pages are as secure as the JavaScript loaded into them. - XSS – Cross Site Script Attacks are legit things to worry about and often not terribly complicated to execute Security Time
  • 27.
  • 28.
  • 29. CDNs are amazing though, don’t mistake - CDNs must be from trusted source - All modern businesses leverage CDNs - CDNs serve content faster then traditional server methods - Faster content === more business - We’ll talk more about CDNs in the future - https://www.youtube.com/watch?time_continue=8&v=QCEid2WCszM Security Time
  • 30. Let’s Hack Penn State Ok well.. Not really.
  • 31. The hierarchy of the document Document Object Model (DOM)
  • 32. The hierarchy of the document Document Object Model (DOM)
  • 33. Useful links / learning more - https://www.quackit.com/html/tutorial/ - Google HTML or CSS cheat sheet - Learn HTML in 12 Minutes https://www.youtube.com/watch?v=bWPMSSsVdPk - search https://codepen.io/ for tutorial - https://caniuse.com – Spec search - Mozilla JavaScript basics https://developer.mozilla.org/en- US/docs/Learn/Getting_started_with_the_web/JavaScript_basics HTML CSS JS
  • 34. What we’ll do now - Mess with Inspector to modify psu.edu - Play with and explore CodePen.io - Fork a pen of mine that we’ll step through together - Ask questions, this is just a foot in the door to this topic and we’ll be exploring other technologies and related platforms as the semester progresses HTML CSS JS
  • 35. Lab - Start modifying a pen to reverse engineer a resume boilerplate - Fork Reflection Pen - write your reflection post there - add a link to your video response there Reflection topic (pick at least one) - Explaining styling an element in CSS - Explain how to use JavaScript and getElementById to add a click event to an element in an existing codepen - Value of CodePen as a platform CodePen.io
  • 36. Quick break and then.. CodePen Editing and understanding code pen HTML CodePen.io Bryan Ollendyke [at]btopro

Editor's Notes

  1. Icon created by Creative Stall from the Noun Project
  2. Icon created by Creative Stall from the Noun Project
  3. Icon created by Creative Stall from the Noun Project
  4. Icon created by Creative Stall from the Noun Project
  5. Icon created by Creative Stall from the Noun Project
  6. Icon created by Creative Stall from the Noun Project
  7. Icon created by Creative Stall from the Noun Project
  8. Icon created by Creative Stall from the Noun Project
  9. Icon created by Creative Stall from the Noun Project