01 Build in VS Code
HTML describes structure, not program logic
HTML is a markup language, not a programming language. It describes what content is: a heading, paragraph, link, image, or section. The browser reads that structure and displays a document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Project Hub</title>
</head>
<body>
<h1>My Project Hub</h1>
<p>Welcome to my project dashboard.</p>
</body>
</html>
A document starts with <!DOCTYPE html>, then has one html element containing head and body. The head holds document information such as the title and character encoding; visible content belongs in the body.
An element usually has an opening tag, content, and a closing tag: <h1>My Project Hub</h1>. Attributes add information, such as lang="en" or id="projects". For Serbian content, use lang="sr".
↳Start locally: Save this as index.html in a my-project-hub folder and open it directly in a browser. Django is not needed yet.
Anatomy of an HTML element<h1>My Project Hub</h1>
└─ opening tag └─ content └─ closing tag
Tags mark the element; the content gives it meaning. Some elements, such as img, use attributes and do not wrap text content.
HTML document structurehtml
├── head
│ ├── meta
│ └── title
└── body
├── header + nav
├── main + section
└── footer
Use semantic elements such as header, nav, main, section, and footer when they describe the content better than a generic div.
Code → browserindex.html → browser reads HTML → visible page
DevTools Elements lets you inspect the displayed HTML. A temporary edit there does not automatically change your saved index.html file.
Links and images<a href="#projects">View projects</a>
<section id="projects">...</section>
<img src="project-board.png" alt="Project board with three cards">
A fragment link uses href="#projects" to find an element with id="projects". An image needs src; its alt describes meaningful information, while a decorative image can use an empty alt.
Build with structure in mind
- Choose headings for hierarchyUse one
h1 for the page topic, then h2 and h3 for subsections. Do not choose headings only for their visual size.
- Use lists for related itemsUse
ul for an unordered project list, ol when order matters, and li for every item.
- Add meaningful navigationLink Home, About, and Projects with fragment links on this one page. External links use a complete URL.
- Prefer meaning over generic containersSemantic HTML helps readers, assistive technology, and future developers understand your page.
Common first-page mistakes
- A heading is just big textHeadings communicate document structure, not only a visual size.
- DevTools saves my fileDevTools is excellent for inspection, but save changes in VS Code to change the source file.
02 Open in your browser
Guided Lab — Build Along
Create a single <code>index.html</code> file in <code>my-project-hub</code>. Build each small step yourself; do not paste a finished page all at once.
Your first local web pagemy-project-hub/
└── index.html
Open the my-project-hub folder in VS Code. You need only index.html, a browser, and saved changes—no package, Python server, Django, or VS Code extension.
Open your HTML page
Use the direct file method for your first try. Live Server is optional and simply makes repeated browser checks more convenient.
Recommended first try
Open HTML directly
- In VS Code, create the
my-project-hub folder and the index.html file inside it. - Save
index.html, then open my-project-hub in Finder (macOS) or File Explorer (Windows). - Double-click
index.html. It should open in your default browser; if it does not, use Open With / Otvori pomoću and choose a browser. - After each code change, save with Ctrl+S (Windows/Linux) or Cmd+S (macOS), then refresh the browser.
A local file address such as file:///.../my-project-hub/index.html is normal. This method does not need Django, a Python server, or a VS Code extension.
Optional for development
Open with Live Server
- In VS Code, open Extensions, search for
Live Server, and choose the extension by Ritwick Dey. Install extensions only from sources you trust and check the author. - Open
index.html, then choose Open with Live Server from the context menu or Go Live if it is available. - Your browser will open a local address, often similar to
http://127.0.0.1:5500/index.html. The port can be different. - Save a change in VS Code and check whether the browser refreshes automatically.
Live Server is not Django’s development server and is not required for this lesson. It is a convenient local preview for simple HTML, CSS, and JavaScript files; later Django lessons use Django’s own development server.
Seven small building steps
- Create the documentIn
my-project-hub, create and open index.html. Replace the empty file with this complete HTML5 starting document, then set an accurate lang value and save it.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Project Hub</title>
</head>
<body>
<h1>My Project Hub</h1>
<p>Welcome to my project dashboard.</p>
</body>
</html>
- Add page sectionsKeep the existing
html, head, and body. In index.html, add this main element inside body, below the existing heading and introduction. Save, refresh, and confirm that About and Projects appear below the introduction.<main>
<section id="about"><h2>About</h2></section>
<section id="projects"><h2>Projects</h2></section>
</main>
- List three projectsKeep the existing document and sections. Inside
<section id="projects">, below its h2, add this list. Save and refresh; you should see three project names in a bulleted list.<ul>
<li>Reading tracker</li>
<li>Study planner</li>
<li>Project board</li>
</ul>
- Link the navigationKeep the existing
main and sections. Near the top of body, above main, add this navigation. Do not duplicate the target sections. Save, refresh, and confirm that each link moves to the matching section.<nav>
<a href="#about">About</a>
<a href="#projects">Projects</a>
</nav>
- Add an optional imageThis step is optional. If
project-board.png exists in the same folder as index.html, add this image below the project list. If you place it in an images folder, use src="images/project-board.png". If no image is available, skip this step and continue. Save and refresh; if it does not appear, check the file name, extension, and path.<img src="project-board.png" alt="Project board with three cards">
- Use semantic landmarksKeep every element you have written; do not create a second
nav or main. Reorganize the existing heading and navigation inside header, keep the sections inside main, and add a small footer after main. Save and refresh to confirm that the page still shows the same content. - Inspect and refreshUse either method above to open the saved
index.html file in a browser. Test the links, inspect Elements in DevTools, change one line in VS Code, save with Ctrl+S or Cmd+S, and refresh if needed. DevTools edits are temporary; only saved changes in index.html change your source file.
↳Browser check: index.html → headings, list, links, and sections appear If the page is blank or a link does not move, first check closing tags, matching ids, and whether the file was saved.
When the page does not look right
- A fragment link does not moveCheck that <code>href="#projects"</code> matches <code>id="projects"</code> exactly.
- The image does not appearCheck the file name and relative path. Keep the <code>alt</code> text useful even while you fix the image.
- The browser shows old contentSave <code>index.html</code> in VS Code, then refresh the browser.
↳Next you will learn CSS and browser tools that can improve how this structured page looks.
