EdTechJoker Spring 2020 - Lecture 4 - HTML

Week 4
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 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.

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

Prep - Week 5 Topic:
Content Management
Systems via Reclaim
Hosting
Looking ahead
Bryan Ollendyke
[at]btopro

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

EdTechJoker Spring 2020 - Lecture 4 - HTML

More Related Content

What's hot (20)

Similar to EdTechJoker Spring 2020 - Lecture 4 - HTML (20)

More from Bryan Ollendyke (20)

Recently uploaded (20)

EdTechJoker Spring 2020 - Lecture 4 - HTML

Editor's Notes