We'll get our feet wet with HTML and CSS and JS. Where these things came from, play with some things on codepen and learn about topics that surround the technologies prior to digging in.

1. HTML / CSS / Javascript
The web
HTML
Codepen.io
Bryan Ollendyke
[at]btopro
Developer Activist

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)

11. html5rocks.com – Mozilla Gecko (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

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

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

23. ”Vanilla” JavaScript
vs
jQuery

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

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