MAP
STREET
MAP
All 34 weeks: what each one builds and why it is there
web.selah-hcs.org
web design for kids // html5 + css3
one day academy
« back to the street
GROUNDWORK
Before the code: what the web is and how to think about design
W01
Welcome to the Street
Claim your lot. Meet the street. Find out what a web designer actually does all day.
W02
Why Build for the Web
Find out why this skill pays rent, and watch what people who code actually make.
W03
Before There Were Screens
Walk the timeline from room-sized calculators to the phone in your pocket.
W04
Inside the Box
Open the case (with your eyes) and learn what each part actually does.
W05
How the Internet Happened
Learn how a Cold War experiment became the street your shop will stand on.
W06
Street Smarts
Learn the safety rules of the neighborhood before you start building in it.
W07
Shops That Talk: Blogs
Meet the kind of website that speaks in posts, and plan what yours could say.
W08
What Makes a Shop Look Right
Learn the design elements every good storefront uses, before you touch code.
W09
Drawing the Floor Plan
Sketch where everything on your page will live before a single tag gets typed.
W10
Files, Folders, and Not Losing Your Work
Build the folder your whole website will live in, and learn to never lose a file again.
FRAMING: HTML
The building material: structure, text, images, links, lists, tables, nav
W11
The Skeleton of Every Page
Type the frame that every web page on earth stands on.
W12
Opening Day: Your First Page
Create index.html in your folder and put real words on the real web page.
W13
Headlines and Paragraphs
Give your words shape: headings that shout in order and paragraphs that breathe.
W14
Pictures on the Wall
Hang the first images in your shop and write the words blind visitors will hear instead.
W15
Making Pictures Behave
Resize and crop images so your pages load fast and look sharp.
W16
Doors Between Pages: Links
Cut the doors that connect your pages to each other and to the wider street.
W17
Lists: Ordered and Otherwise
Stack your content into tidy lists, numbered when order matters, bulleted when it does not.
W18
Tables: Data in Rows and Columns
Build honest tables for things that are truly grids: schedules, scores, price lists.
W19
The Navigation Bar
Give every page of your shop the same row of doors along the top.
W20
Color, By the Numbers
Learn how the browser names sixteen million colors, and pick your shop's palette.
PAINT: CSS
The style layer: rules, color, backgrounds, text, fonts, links, lists, tables
W21
Meet CSS
Stop decorating tag by tag and start writing style rules that paint the whole shop at once.
W22
Writing CSS Rules
Learn the grammar cold: selectors, braces, colons, semicolons, no mercy for typos.
W23
Backgrounds
Paint the walls: background colors and background images with readable text on top.
W24
Placing Text
Align, indent, and space your words like a printed page instead of a ransom note.
W25
Fonts
Choose your shop's typefaces and load them so every visitor's browser can draw them.
W26
Dressing Up Links
Style your links in all four of their moods: unvisited, visited, hover, active.
W27
Styling Lists
Swap bullets, tuck numbers, and turn a plain list into a menu that matches your shop.
W28
Table Style and Code Comments
Make your tables handsome and start leaving notes to your future self in the code.
THE FINAL BUILD
Your own six-page site, planned, built, styled, and presented
W29
The Final Build Begins
The big Street Job opens: plan and start the final website you will present to the street.
W30
Putting Your Shop on the Street
Learn what web hosting is and how a folder on your computer becomes a site the world can visit.
W31
Build Workshop I
Heads down. Frame every page of your final site: structure first, paint later.
W32
Build Workshop II
Content week: real words, real images, honest alt text, working links, everywhere.
W33
Build Workshop III
Paint week: your palette, your fonts, your styles, applied everywhere, plus final fixes.
W34
Grand Opening
Present your finished site to the street. Walk us through what you built and what you learned.