Skip to content
What happens when you open a website?
Follow the journey from an address to a page on your screen.
Article · ± 4 minutes
PROGRAMMING & DEVELOPMENT · PATH 01
HTML
Fundamentals.
Structure gives meaning to web pages. This course covers HTML foundations through explanations and practice.
BeginnerEnglishEstimated 7–10 hoursLocal preview
No coding experience required. Start learning without installation.
FROM CURIOSITYTO YOUR FIRST CREATION.
08progressive chapters
32lessons with practice
07Chapter Trial
01website of your own
READY TO BEGIN
My Learning ↗0 / 32 lessons complete
LEARNING GOALS
Understanding becomes visible in practice.
- Structure HTML documents with an appropriate page language, title, and metadata.
- Write text, lists, links, images, and tables suited to their content.
- Choose semantic elements that give meaning to page structure.
- Make pages easier to use with headings, alt text, and labels.
- Build demonstration forms with native browser validation.
- Repair markup and create a two-page HTML website.
CURRICULUM
Clear foundations shape understanding.
All chapters, lessons, Trials, and the final project are open. The curriculum provides a suggested order; progress records completed practice.
01Web FoundationsUnderstand the web’s language and create your first document.Available0 / 4 lessons
- 1What is HTML?Distinguish the roles of HTML, CSS, and JavaScript, then mark up headings and paragraphs with HTML.
- 2Your First HTML DocumentWrite an HTML document skeleton with doctype, html, head, and body in their appropriate places.
- 3Inside the HeadComplete the tab title, UTF-8 charset, and viewport in a document's head.
- 4Edit, Preview, RepeatEdit an HTML document and distinguish changes in body from metadata in head.
- Chapter Trial — First Page4 concept questions + 1 coding task · retry without penalty
02Elements, Attributes & SyntaxRead code structure and fix small mistakes with confidence.Available0 / 4 lessons
- 1Tags vs. ElementsDistinguish opening tags, content, and closing tags, then write two complete elements.
- 2Understanding AttributesAdd id, class, and title attributes with appropriate values to opening tags.
- 3Nesting & Void ElementsRepair nesting and use void elements and boolean attributes correctly.
- 4Comments & Character ReferencesWrite comments and display special characters without having them interpreted as HTML tags.
- Chapter Trial — Repair the Markup4 concept questions + 1 coding task · retry without penalty
03Meaningful Text & ListsTurn text into content with structure and meaning.Available0 / 4 lessons
- 1Headings & ParagraphsArrange one main heading, nested subheadings, and paragraphs according to the content hierarchy.
- 2Emphasis, Importance & QuotesChoose strong, em, blockquote, and q according to a sentence's intent.
- 3ListsCreate ordered and unordered lists, including a correctly related nested list.
- 4Text with MeaningGive meaning to code snippets, dates, and abbreviations in text.
- Chapter Trial — Structure an Article4 concept questions + 1 coding task · retry without penalty
04Links, Images & MediaConnect pages, locate files, and give media context.Available0 / 4 lessons
- 1Links & URLsCreate absolute, relative, and fragment links with clear destination text.
- 2Files, Folders & NavigationConnect two HTML files with navigation in both directions and understand folder paths.
- 3Images & Alternative TextAdd images with a source, dimensions, and alternative text suited to their context.
- 4Figures, Audio & Video BasicsGroup images with captions and recognize the need for controls, captions, and transcripts in media.
- Chapter Trial — Connected Pages4 concept questions + 1 coding task · retry without penalty
05Semantic Page StructureGive every part of a page a clear role.Available0 / 4 lessons
- 1Page LandmarksReplace generic wrappers with appropriate header, nav, main, and footer elements.
- 2Sections & ArticlesChoose section, article, and aside according to content relationships and independence.
- 3Div, Span, ID & ClassUse div and span for generic purposes while keeping ids unique and classes reusable.
- 4Accessible NavigationCreate navigation with clear text, a skip link, and a coherent heading structure.
- Chapter Trial — Semantic Refactor4 concept questions + 1 coding task · retry without penalty
06Data TablesPresent related data in tables that are easy to read.Available0 / 4 lessons
- 1When to Use a TableChoose tables for two-dimensional data and lists for information that needs no columns.
- 2Rows & CellsWrite table rows, header cells, and data cells in a consistent arrangement.
- 3Captions & HeadingsGive a table a caption and group header and data rows with thead and tbody.
- 4Accessible TablesConnect headers to data using scope col and row in a simple table.
- Chapter Trial — Build a Data Table4 concept questions + 1 coding task · retry without penalty
07Forms & InputsBuild clear, labeled forms that guide users when a field is incorrect.Available0 / 4 lessons
- 1Forms & LabelsCreate a form with labels connected to controls through for and id.
- 2Inputs & Field ValuesChoose type, name, value, radio, and checkbox according to the information requested.
- 3More Form ControlsArrange forms with textarea, select, buttons, and fieldset groups named by legend.
- 4Built-in Validation & SubmissionAdd native HTML validation and explain the limits of forms without a backend.
- Chapter Trial — Accessible Feedback Form4 concept questions + 1 coding task · retry without penalty
08Build, Check & ShipPlan, build, and refine your own HTML website.Available0 / 4 lessons
- 1Plan Your WebsitePlan the content, audience, and division into two pages before writing the project.
- 2Build the StructureBuild two complete, semantic documents that link to each other.
- 3Add Media & FormsComplete pages with an informative image and a labeled demo form without promising submission.
- 4Validate, Debug & ReviewFind markup errors, repair important relationships, and record your project review.
- Final Challenge — My First HTML WebsiteTwo HTML pages · 100-point rubric · self-review
FINAL CHALLENGE
Practice connects concepts.
Create a website about an interest or a fictional community. Arrange content, connect pages, add an illustration and demo form, then download your HTML project.
HTML onlyNo deadlineSelf-assessed
View Final Challenge ↗MY-FIRST-SITE/
├── index.html
├── about.html
├── assets/
│ └── observatory.svg
└── README.txt
A static website you can open on your computer.
Learning conditions.
Must every answer be correct immediately?
No. Reread, open hints, and retry without penalty. A lesson is complete when its independent task meets the goals; a Trial requires at least 80/100 and correct core practice.
Is progress saved to an account?
There is no account yet. Code, answers, and progress are saved in this browser and device, separately for each language. Clearing site data clears progress. Download the final project to keep a copy of its files.
Is the result a certificate?
No. The final project uses basic structural checks and a self-review rubric labeled self-assessed. The result records your learning journey, rather than verified certification.
What comes after HTML?
CSS helps with appearance, JavaScript adds behavior, and accessibility deepens the user experience. Those follow-up courses are not available yet. For an introduction, read HTML, CSS, and JavaScript in Library.
LADDER ↔ LIBRARY ↔ LEXICON
Context deepens understanding.
These readings and concepts are referenced in the course material.
Read a web address without getting lost
Domain, path, query, and fragment: small parts with different jobs.
Article · ± 3 minutes
Three languages behind one page
Understand structure, appearance, and behavior without memorizing code.
Article · ± 4 minutes
Clear images, lighter pages
Why format, size, transparency, and alternative text all matter.
Article · ± 4 minutes