An overview of HTML pages and ways to use CSS to lay out a page. Give at Color Code: http://colorcode.org.za/.
HTML pagesandCSS layout
View Slide
Agenda1. What are web pagesmade of?2. How do I positionthings on a web page?
DisclaimerI'm still learning !
Who am I?Steve BarnettFED and UX consultant
What are the threetechnologies that everyweb page is made of?
HTMLStructured Content
CSSPresentation
JavaScript(nickname: JS)Interaction
HTML Structured ContentCSS PresentationJavaScript Interaction
!bit.ly/ccbootstrap
Mini-agenda2.1 display, position2.2 float2.3 flex2.4 grid
displaybit.ly/ccdisplay
positionbit.ly/ccposition
floatbit.ly/ccfloats
floatbit.ly/ccbsfloats
Pros and cons offloat for layout
flexbit.ly/ccbsflex
flexflexboxpatterns.comflexboxfroggy.comRef: bit.ly/csstricks-flex
Pros and cons offlex for layout
gridbit.ly/ccjengrid
gridcssgridgarden.combit.ly/ccjengridRef: bit.ly/csstricks-grid
Pros and cons ofgrid for layout
!Tiny retro!What was the mostimportant thingyou learned?Share with one person
All The Things!One layout,done several waysbit.ly/ccmanygrid