HTML bootcamp

Question on the left. Your HTML on the right. Check it.

Each lab is one problem: read the spec, write a solution, press Preview, then Check. Hints stay closed. The correct code is there when you need it. Check reads the live DOM.

Start lab 01HTML tutorial

50 labs · 33 easy · 17 medium · progress stays in this browser.

  1. Read the questionInput, output, and a short example. Same shape as a classroom worksheet.
  2. Write HTML, then PreviewThe starter is a skeleton. Change it, then see what happens.
  3. Check, or open a hintCheck runs every test. Hint and correct code stay folded until you open them.

Labs

Work them in order, or jump ahead when you are ready.

  1. 01easy

    A page heading

    Headings · 5 min

    Open lab
  2. 02easy

    Heading and paragraph

    Paragraphs · 8 min

    Open lab
  3. 03easy

    A real link

    Links · 8 min

    Open lab
  4. 04easy

    Image with alt

    Images · 8 min

    Open lab
  5. 05easy

    Menu list

    Lists · 10 min

    Open lab
  6. 06medium

    Two-column table

    Tables · 12 min

    Open lab
  7. 07medium

    Email form

    Forms · 12 min

    Open lab
  8. 08medium

    Semantic article

    Semantics · 12 min

    Open lab
  9. 09easy

    Navigation bar

    Navigation · 10 min

    Open lab
  10. 10easy

    Numbered steps

    Lists · 8 min

    Open lab
  11. 11easy

    Bold and italic meaning

    Formatting · 8 min

    Open lab
  12. 12medium

    A cited quotation

    Quotations · 10 min

    Open lab
  13. 13medium

    Figure with caption

    Images · 10 min

    Open lab
  14. 14medium

    A page section

    Semantics · 10 min

    Open lab
  15. 15easy

    A checkbox option

    Input Types · 8 min

    Open lab
  16. 16medium

    A select dropdown

    Form Elements · 12 min

    Open lab
  17. 17easy

    A message box

    Form Elements · 8 min

    Open lab
  18. 18medium

    An embedded video

    Media · 12 min

    Open lab
  19. 19easy

    A button

    Forms · 8 min

    Open lab
  20. 20easy

    A thematic break

    Formatting · 5 min

    Open lab
  21. 21easy

    A line break

    Formatting · 5 min

    Open lab
  22. 22easy

    Strong importance

    Formatting · 5 min

    Open lab
  23. 23easy

    Inline code

    Formatting · 5 min

    Open lab
  24. 24easy

    Preformatted block

    Formatting · 8 min

    Open lab
  25. 25easy

    A div wrapper

    Div · 8 min

    Open lab
  26. 26easy

    A span label

    Inline · 5 min

    Open lab
  27. 27easy

    Header and footer

    Semantics · 10 min

    Open lab
  28. 28easy

    Main landmark

    Semantics · 8 min

    Open lab
  29. 29easy

    An aside note

    Semantics · 8 min

    Open lab
  30. 30medium

    A description list

    Lists · 10 min

    Open lab
  31. 31easy

    Email input

    Input Types · 8 min

    Open lab
  32. 32easy

    Password input

    Input Types · 8 min

    Open lab
  33. 33easy

    Number input

    Input Types · 8 min

    Open lab
  34. 34medium

    Radio choices

    Form Elements · 12 min

    Open lab
  35. 35easy

    Required field

    Form Attributes · 8 min

    Open lab
  36. 36easy

    Placeholder text

    Form Attributes · 5 min

    Open lab
  37. 37easy

    Open in new tab

    Links · 8 min

    Open lab
  38. 38easy

    Photo with alt text

    Images · 8 min

    Open lab
  39. 39medium

    Table caption

    Tables · 10 min

    Open lab
  40. 40easy

    Nav list

    Lists · 10 min

    Open lab
  41. 41easy

    Charset meta

    Head · 8 min

    Open lab
  42. 42easy

    Document title

    Page Title · 5 min

    Open lab
  43. 43easy

    Subheadings

    Headings · 5 min

    Open lab
  44. 44easy

    Abbreviation

    Formatting · 8 min

    Open lab
  45. 45medium

    A time element

    Semantics · 10 min

    Open lab
  46. 46medium

    Progress bar

    Form Elements · 10 min

    Open lab
  47. 47medium

    Details disclosure

    Semantics · 10 min

    Open lab
  48. 48medium

    Audio player

    Media · 10 min

    Open lab
  49. 49medium

    An iframe

    Iframes · 10 min

    Open lab
  50. 50medium

    Label for id

    Forms · 10 min

    Open lab

FAQ: HTML Bootcamp Labs

Common questions about this page.

What is the StudyGrid HTML tutorial?

The StudyGrid HTML tutorial is a full beginner track: tags, headings, links, images, tables, layout, forms, and media. Each chapter has copy-and-run examples.

Should I run html bootcamp labs examples locally for better learning?

Yes. Use the browser editor on StudyGrid for a quick check, then Download the example and run it on your computer. Local runs show real errors and the real toolchain, which is one of the fastest ways to learn html bootcamp labs in this HTML Labs HTML lesson (HTML Bootcamp Labs).

Is the HTML editor the same as Try Python?

No. Try HTML is a live page preview at /html/try. Try Python stays at /try and runs Python. HTML lessons never open the Python editor.

Do I need to install anything to learn HTML?

No. Open a chapter, click Try it in HTML, and the page preview updates in the browser. You can also download a .html file and open it locally.

Where should I start the HTML tutorial?

Start at HTML Intro, then Basic, Elements, and Attributes. After the first document, continue to headings, links, and forms. Use Next at the bottom of each chapter.

Is the HTML tutorial free?

Yes. The HTML studio on StudyGrid (studygrid.in) is free: dashboard, chapters, and the live preview editor.