Summary: Your Finished Website and an Outlook on CSS

~9 Min. Lesezeit Zuletzt aktualisiert am August 8, 2026

Congratulations! You've made it to the very last chapter. Let's wrap up by looking at everything you've achieved, and what could come next.

Your finished project

You've built a complete, multi-page website:

my-website/
  index.html      Home page with About Me, Hobbies, Club, Photos, Video, Audio
  players.html    Table with favourite players
  contact.html    Complete contact form
  images/         Photos for the whole website

Cheat sheet: all elements at a glance

An overview of every element you learned in this tutorial, sorted by topic:

Boilerplate: <!DOCTYPE html>, <html>, <head>, <body>, <title>, <meta>
Text: <h1>-<h6>, <p>, <br>, <hr>, <strong>, <em>, <small>, <mark>, <del>, <ins>
Lists: <ul>, <ol>, <li>, <dl>, <dt>, <dd>
Links: <a> with href, target, rel
Images/multimedia: <img>, <figure>, <figcaption>, <video>, <audio>, <source>
Tables: <table>, <tr>, <td>, <th>, <thead>, <tbody>, <caption>
Forms: <form>, <input>, <label>, <textarea>, <select>, <option>, <button>, <fieldset>, <legend>
Structure: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, <div>, <span>
Attributes: id, class, href, src, alt, type, name, value, required, placeholder, width/height

Ten rules of thumb from this tutorial

Choose heading levels by meaning, not by the size you want.
Every <img> needs a meaningful alt attribute.
Every <label> belongs connected to its field via for/id.
Use semantic elements (<nav>, <main>, ...) instead of meaningless <div> soup, wherever a fitting one exists.
id is unique, class may appear multiple times.
Watch capitalisation carefully in file and folder names.
Avoid link text like "click here".
After making a change, always check: did you save, and reload in the browser?
When something's wrong: view the page source and read it from top to bottom.
HTML describes structure and meaning - how something looks is CSS's job.

What's still missing: CSS and JavaScript

Remember the house analogy from chapter 1? You've now built the complete raw structure - walls, windows, doors, everything in the right place, everything meaningfully labelled. What's still missing:

CSS would give your website colours, a nice font, spacing, a layout with multiple columns side by side, rounded corners, and much more - all purely visual, without changing the HTML content itself.
JavaScript would give your website real behaviour: the contact form could actually send a message, clicking a button could change something on the page without reloading, and much more.

The good news: because you built your HTML clean and semantic from the start, you'll have a much easier time learning CSS and JavaScript than someone who starts from <div> soup with no structure. Semantic HTML is an investment that pays off at every step from here.

Congratulations!

In this tutorial you didn't just learn individual commands - you built a complete, multi-page, semantically clean, and accessible website entirely from scratch yourself - with text, images, videos, tables, and a real form. That's a great achievement for a very first step into programming. Good luck on the rest of your journey!

Tipp: Tip for anyone who wants to keep going right away: check out our other tutorials once you're ready for CSS or JavaScript - you'll find the same principles from this tutorial there too (complete examples, one continuous project, step by step).

Vorheriges Kapitel Common Mistakes and How to Find Them Serie abgeschlossen Zurück zur Übersicht