Up

Web Programming Workshop

Agenda

1

Critique
Project 1 (look you made a website!)

3

Workshop
Putting things in place

4

Tutorial
How is Figma actually useful to us?

5

Exercise
Flexbox Froggy and Grid Garden

6

Homework
Start Project 2

Demos

Student Websites

Review from Week 1

Units "width" "min-width" "max-width" "height" "min-height" "max-height" Box Model ("margin", "border", "padding") "position" "float" "transform"

Putting Things in Place

Holy Grail Layout "display" "block" vs "inline" "inline-block" Flexbox ("display: flex") Flex Container (Parent) Flex Items (Children) All Flexbox Properties Grid ("display: grid") Grid Container (Parent) Grid Items (Children) All Grid Properties

Meta Tags

Site Info ("description", "keywords", "author") "viewport" "icon" (Favicon) "og" (Open Graphc)

Custom Demos

IDs and Anchor Links Layout Template 1 Layout Template 2 Grid Example Multiple Scrolling Sections Horizontally Scrolling Page