HTML pages and CSS lay out

An overview of HTML pages and ways to use CSS to lay out a page. Give at Color Code: http://colorcode.org.za/.

Transcript

1. HTML pages and CSS layout
2. Agenda 1. What are web pages made of? 2. How do I position things on a web page?
3. Disclaimer I'm still learning !
4. Who am I? Steve Barnett FED and UX consultant
5. Agenda 1. What are web pages made of? 2. How do I position things on a web page?
6. What are the three technologies that every web page is made of?
7. HTML Structured Content
9. CSS Presentation
11. JavaScript (nickname: JS) Interaction
13. HTML Structured Content CSS Presentation JavaScript Interaction
14. ! bit.ly/ccbootstrap
15. Agenda 1. What are web pages made of? 2. How do I position things on a web page?
16. Mini-agenda 2.1 display, position 2.2 float 2.3 flex 2.4 grid
17. display bit.ly/ccdisplay
18. position bit.ly/ccposition
19. float bit.ly/ccfloats
20. float bit.ly/ccbsfloats
21. Pros and cons of float for layout
22. flex bit.ly/ccbsflex
23. flex flexboxpatterns.com flexboxfroggy.com Ref: bit.ly/csstricks-flex
24. Pros and cons of flex for layout
25. grid bit.ly/ccjengrid
26. grid cssgridgarden.com bit.ly/ccjengrid Ref: bit.ly/csstricks-grid
27. Pros and cons of grid for layout
28. Agenda 1. What are web pages made of? 2. How do I position things on a web page?
29. ! Tiny retro! What was the most important thing you learned? Share with one person
30. All The Things! One layout, done several ways bit.ly/ccmanygrid