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
   

   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