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

Steve Barnett

June 30, 2018
Tweet

More Decks by Steve Barnett

Other Decks in Programming

Transcript

  1. HTML pages
    and
    CSS layout

    View Slide

  2. Agenda
    1. What are web pages
    made of?
    2. How do I position
    things on a web page?

    View Slide

  3. Disclaimer
    I'm still learning !

    View Slide

  4. Who am I?
    Steve Barnett
    FED and UX consultant

    View Slide

  5. Agenda
    1. What are web pages
    made of?
    2. How do I position
    things on a web page?

    View Slide

  6. What are the three
    technologies that every
    web page is made of?

    View Slide

  7. HTML
    Structured Content

    View Slide

  8. View Slide

  9. CSS
    Presentation

    View Slide

  10. View Slide

  11. JavaScript
    (nickname: JS)
    Interaction

    View Slide

  12. View Slide

  13. HTML Structured Content
    CSS Presentation
    JavaScript Interaction

    View Slide

  14. !
    bit.ly/ccbootstrap

    View Slide

  15. Agenda
    1. What are web pages
    made of?
    2. How do I position
    things on a web page?

    View Slide

  16. Mini-agenda
    2.1 display, position
    2.2 float
    2.3 flex
    2.4 grid

    View Slide

  17. display
    bit.ly/ccdisplay

    View Slide

  18. position
    bit.ly/ccposition

    View Slide

  19. float
    bit.ly/ccfloats

    View Slide

  20. float
    bit.ly/ccbsfloats

    View Slide

  21. Pros and cons of
    float for layout

    View Slide

  22. flex
    bit.ly/ccbsflex

    View Slide

  23. flex
    flexboxpatterns.com
    flexboxfroggy.com
    Ref: bit.ly/csstricks-flex

    View Slide

  24. Pros and cons of
    flex for layout

    View Slide

  25. grid
    bit.ly/ccjengrid

    View Slide

  26. grid
    cssgridgarden.com
    bit.ly/ccjengrid
    Ref: bit.ly/csstricks-grid

    View Slide

  27. Pros and cons of
    grid for layout

    View Slide

  28. Agenda
    1. What are web pages
    made of?
    2. How do I position
    things on a web page?

    View Slide

  29. !
    Tiny retro!
    What was the most
    important thing
    you learned?
    Share with one person

    View Slide

  30. All The Things!
    One layout,
    done several ways
    bit.ly/ccmanygrid

    View Slide