gwecode

courses / html / level 1

level 1 · easy

html for
beginners.

Build real web pages from scratch. Every tag explained, every example rendered, one idea per lesson.

  • 28 lessons
  • 7 units
  • 3 h 17 m in all
  • £0, for good
start level 1

what’s inside.

For people who have never written a line of code. Nothing is assumed: every new word is explained the moment it appears.

HTML Level 1 assumes nothing. In 28 short lessons you go from what a web page is to building a whole page of your own, with a guess, a hands-on task and a fix-the-bug challenge in every lesson. It ends with a level check: an about me page you build yourself.

every lesson goes the same way.

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

unit 1

First tags

Write your first web page, one label at a time.

4 lessons · 24 min

  1. What a web page really is5 minFind out what a web page is made of and show your first heading.
  2. Tags open and close6 minLearn how tags mark where each part of a page starts and stops.
  3. Headings, big to small6 minGive your page a main title and sections with six levels of heading.
  4. Paragraphs and spaces7 minWrite paragraphs and see what the browser does with spaces.

unit 2

Words with meaning

Spot mistakes, make words stand out and add details.

4 lessons · 28 min

  1. When it goes wrong8 minSee how browsers guess when your HTML has a mistake, and find the bug.
  2. Tags inside tags7 minMake important words bold and stressed words slope, inside a paragraph.
  3. Breaks and lines6 minStart new lines inside a paragraph and draw lines across the page.
  4. Attributes add details7 minAdd extra details to a tag and give a paragraph a pop-up note.

unit 3

Links and pictures

Join pages together and add pictures that speak.

4 lessons · 27 min

  1. Making a link7 minMake words people can click to visit another page.
  2. Adding a picture6 minPut pictures on your page by naming their files.
  3. Words for pictures7 minDescribe pictures with alt text so everyone knows what they show.
  4. Pictures that are links7 minTurn pictures into links and write link text people can trust.

unit 4

Lists

Group things in bullet lists, numbered lists and menus.

4 lessons · 27 min

  1. Bullet lists6 minGroup things together in a bullet list.
  2. Numbered lists6 minNumber the steps of a list when their order matters.
  3. Lists inside lists8 minTuck smaller lists inside the items of a bigger list.
  4. Lists of links7 minPut links in a list to build a menu.

unit 5

A proper page

Give your page a skeleton, a name and tidy boxes.

4 lessons · 30 min

  1. The page skeleton8 minBuild a whole web page with a head and a body.
  2. Name your page7 minName your page on the browser tab and say which language it uses.
  3. Boxes with div and span7 minGroup parts of a page with div and wrap words with span.
  4. Name tags: class and id8 minGive elements group names and single names, and jump to them.

unit 6

Signposts and tables

Signpost the parts of a page and set out facts in rows.

4 lessons · 28 min

  1. Page landmarks7 minMark the top, middle and bottom of a page with landmarks.
  2. A menu with nav7 minWrap your main menu in a nav so people can find their way.
  3. A first table8 minLay out facts in a grid of rows and cells.
  4. Table headings6 minName each column of a table with header cells.

unit 7

Forms and your own page

Ask visitors questions, then build a page all about you.

4 lessons · 33 min

  1. A first form8 minAsk visitors a question with a labelled box to type in.
  2. Buttons and kinds of input8 minChoose the right kind of box and add a button to send the form.
  3. Pages for everyone8 minCheck your page works for everyone, including screen reader users.
  4. Your personal page9 minPlan and build a whole page about you, from skeleton to footer.
end of level 1 level check: an about me page Build one small project with everything from this level. Pass it and your face levels up. see the check

next, level 2

intermediate
html.

Build forms, tables and pages that work for everyone, then bring them together in a real booking page.

see level 2