Learning on Web Dev Open is free for all.

Build First > Your first shipped siteRebuild one section by hand
Phase 00Your first shipped site20 of 434

Rebuild one section by hand

Pick the smallest section of your page, delete it, and write it again yourself. The first thing in this course you will have genuinely made.

Build35 minAI off

Pick the smallest section of your page. The footer, or the header. Not the hero.

Copy the whole file to backup.html so nothing is at risk. Then delete that section from the original and write it again yourself.

It will be slow and it will look worse. Both are expected and neither is the measurement.

When you are stuck, look at the backup, read the line and make sure you understand it. Then close the backup and type your own version. Copying may finish the section faster, but it does not tell you whether you understood it.

When it works, compare the two. Yours is probably shorter. It may well be more semantic, because you are thinking about what the thing is rather than producing the average of everything.

Then write three sentences in your repo: what was harder than expected, what was easier, and what you want to learn next. That last sentence gives you a useful direction for the next piece of work.

Done when

  • One section rebuilt from scratch with the model closed
  • A backup kept, read but not copied
  • The page still works and looks broadly right
  • A written comparison with the generated version
  • Three sentences: harder, easier, and what you want to learn next

Nobody marks this for you. It goes into your phase checkpoint, where a person does.

Build this in your own editor

This one runs on your machine rather than in the browser workbench. Work to the outcomes below, then come back and mark it complete.

You should now be able to

  • Write working HTML and CSS from scratch
  • Find out precisely where your understanding stops
  • Compare your version with the generated one on substance
Ask the community

Loading…