Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML pages and CSS lay out

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/.

28a7165396905ffabc4d1f45609efc39?s=128

Steve Barnett

June 30, 2018
Tweet

More Decks by Steve Barnett

Other Decks in Programming

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

  8. None
  9. CSS Presentation

  10. None
  11. JavaScript (nickname: JS) Interaction

  12. None
  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