Up

Web Programming Workshop

Agenda

0

Introductions
Who are you? Why are you here?! Also here’s the syllabus

1

Not a Lecture
Why I love websites

2

Tutorial
How to code

3

Workshop
Making things pretty on the web

4

Exercise
CSS Zen Garden

5

Homework
Start Project 1

Workshop

Website Template

HTML Tags

<p> <br> <strong> <em> <h1> – <h6> <li>, <ul>, <ol> <a> <img> <table> <div> <head> <body> <span> <iframe> Most Common HTML Tags

Styling Typography

Using CSS Styles CSS Class Selectors "font-size" "color" "text-align" "letter-spacing" "word-spacing" "font-weight" "text-shadow" "text-transform" "text-decoration" "line-height" "font-family" "@font-face" Web-safe Fonts

Moving Things Around

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

Other Fun Styles

"opacity" "background" "filter" "box-shadow" "border-radius" "cursor"

Interactives

":hover" ":active" "transition" "@keyframes" "animation" "scroll-behavior"

Some Technical Things

File Paths IDs HTML Comments CSS Comments