Websites & Frontend

HTML: Build it

The skeleton of every web page.

8 chapters · 35 lessons · free

Try a free lesson Create your free account

What you will learn

1. Hello, Web!

Write your first tags, then see what happens when one is missing and how browsers react to mistakes.

  • Your very first tag Try it A tag has an opening <h1> and a closing </h1>. Your text lives in between.
  • Add a paragraph Exercise <p> is for normal text. Every paragraph starts on its own line in the browser.
  • The runaway bold Debug Every opening tag needs a closing tag. Forget one and the browser guesses, usually wrong.
  • Make one word bold Exercise Nesting means a tag inside another tag. Close the inner one first, then the outer one.
  • Secret notes Exercise Comments are notes for humans. Browsers skip right over them.
  • Quick check Quiz Tags come in pairs, they can nest, and browsers guess when you forget one.

2. Text & Structure

Headings, bold, italic and lists. The building blocks of every article and menu.

  • Big to small Try it Use one <h1> for the page title and the smaller levels for sections inside it.
  • Important and stressed Exercise <strong> means important and <em> means stressed. Browsers show them bold and italic, and screen readers change their voice.
  • Lines and breaks Exercise <br> and <hr> have no closing tag. Tags like that are called void tags.
  • A bulleted list Exercise <ul> is the list and <li> is each item. Items always go inside a list tag.
  • A numbered list Exercise Use <ol> when order matters and <ul> when it does not. The <li> items stay the same.
  • The list that is not a list Debug List items need a list around them. If something has no bullets, check the parent tag.
  • Quick check Quiz Headings, emphasis, breaks and lists cover most of the text you will ever write.

3. Links & Images

Connect pages together and add pictures. Plus what happens when a picture goes missing.

  • Your first link Exercise <a href="...">text</a>: the text is what people click, and href is where it takes them.
  • A little menu Exercise Tags nest: links live inside list items, which live inside a list. Real pages are made of nesting.
  • Open in a new tab Exercise A tag can have several attributes. target="_blank" opens a new tab, and rel="noopener" keeps the new page from controlling yours.
  • Add a picture Exercise <img src="..." alt="...">. Always write a real alt: screen readers read it aloud, and it shows when the picture cannot load.
  • The missing picture Debug alt is the safety net for every image: broken file, slow connection, or a visitor who cannot see.
  • Quick check Quiz Links and images are made of attributes: extra information inside the opening tag.

4. Page Anatomy

What every real page is made of: head, body, title and friendly structural tags.

  • The page skeleton Exercise <head> is for information about the page. <body> is for everything visitors see.
  • Name your page Exercise Always give a page a <title>. Visitors see it on the tab, and it is the blue link in search results.
  • Say what each part is Exercise Tags with a meaning are called semantic. Use them for the big parts of a page, and <div> only when nothing fits.
  • div and span Exercise class gives a tag a name to style later. <div> groups blocks; <span> groups words inside a line.
  • Quick check Quiz A page = doctype + html + head + body. Semantic tags describe the parts inside the body.

5. Forms & Inputs

Text boxes, buttons, checkboxes and dropdowns. Let visitors type things in.

  • A box and its label Exercise A label's for must equal the input's id. Then clicking the label focuses the box, and screen readers know what it is for.
  • Input types Exercise One tag, many behaviors: type decides. Phones even show the right keyboard for email.
  • Send it Exercise <button type="submit"> sends the form. Later, a server (or JavaScript) receives what people typed.
  • Dropdowns and big boxes Exercise <select> lets people pick one of your options. <textarea> is for long text and has a closing tag.
  • The label that does nothing Debug Always connect a label with for and id. It is a small detail that makes forms usable for everyone.
  • Quick check Quiz Forms are labels + inputs + a button. Connect labels with for and id.

6. Project: All About Me

Put it all together and build your own personal profile page from scratch.

  • Stage 1: the header Exercise Start a page with the big parts. Then fill each part in.
  • Stage 2: about you Exercise Semantic tags, a list and an image: a page that already looks like a profile.
  • Stage 3: contact and finish Exercise Headings, lists, links, images, forms and a page structure: you now know the whole HTML toolbox.

7. HTML exam

Ten questions about everything in this course. Pass with 8 right answers.

  • The HTML exam Exam Tags, structure, links, images, lists and forms: you can build the skeleton of any page.

8. Final project

Build a complete web page of your own, from scratch, and send it for review.

  • Your own web page Final project Header, main and footer, headings, paragraphs, images, lists and links: a whole page, built by you.

How the course works

You learn by doing: each lesson explains one idea, then you write real code in the editor and see the result right away. The first lesson is free to try without an account; sign up to save your progress and continue.

  • Try it

    Change working code and see the result immediately.

  • Exercise

    Complete a task. A checklist confirms each requirement as you type.

  • Debug

    Fix code that is broken on purpose, and learn why it failed.

  • Quiz

    Check your understanding at the end of a chapter.

More in Websites & Frontend