A mini site in one page
blog/ and /contact/ are folders: on a real server they open each folder's index.html.
A website is a folder of files, and every link, image and stylesheet finds its file through a path; relative paths start from the current page's folder, index.html is the default page of a folder, and on real servers letter case and spaces matter.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Your site has index.html, css/main.css, images/hero.jpg and pages/contact.html. Write the <link> and <img> tags for pages/contact.html using relative paths.
In css/main.css, write a rule that sets body's background to images/hero.jpg.
Rename these files safely: Team Photo.PNG, About Us.html, Price List (2026).pdf.
Explain it without notes
How does the browser work out where a relative path points?
What is the difference between images/a.png, ./images/a.png, ../images/a.png and /images/a.png?
Why does a site that works on your laptop sometimes break when deployed?
Why is index.html special?
Preview
Console
Nothing logged yet.