Tweet
Tweet

Slide 1

Slide 1 text

HTML pages and CSS layout

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Disclaimer I'm still learning !

Slide 4

Slide 4 text

Who am I? Steve Barnett FED and UX consultant

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

HTML Structured Content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

CSS Presentation

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

JavaScript (nickname: JS) Interaction

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

HTML Structured Content CSS Presentation JavaScript Interaction

Slide 14

Slide 14 text

! bit.ly/ccbootstrap

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

display bit.ly/ccdisplay

Slide 18

Slide 18 text

position bit.ly/ccposition

Slide 19

Slide 19 text

float bit.ly/ccfloats

Slide 20

Slide 20 text

float bit.ly/ccbsfloats

Slide 21

Slide 21 text

Pros and cons of float for layout

Slide 22

Slide 22 text

flex bit.ly/ccbsflex

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Pros and cons of flex for layout

Slide 25

Slide 25 text

grid bit.ly/ccjengrid

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Pros and cons of grid for layout

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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