Save 37% off PRO during our Black Friday Sale! »

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

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