HTML Project
In this page:
Structuring Your Project Folder
Before writing your code, you must organize your workspace. A proper web project starts with a clean folder structure where your homepage, stylesheets, scripts, and media live in distinct folders.
Note: Create a root directory named after your app, then make subfolders called css, js, and images inside it.
Warning: Always use lowercase letters for all folder and file names to prevent broken paths when hosting your site on Linux servers.
Example: Structuring Your Project Folder
<!-- Project structure:
/project
index.html
/css
/js
/images
-->Creating the Homepage (index.html)
Every web server automatically searches for a file named index.html when visitors load your domain. This file acts as the front door and core hub of your entire multi-page web project.
Note: Keep your index.html clean and modular, offloading custom logic to external script and style files.
Warning: Never name your home file index.HTML in uppercase, as many operating systems will fail to serve it as the default homepage.
Example: Creating the Homepage (index.html)
<!-- Save this file as: index.html -->
<!DOCTYPE html>
<html>
</html>Linking Project Assets
An HTML document is just plain text. To turn your project into a styled app, you must link your external stylesheets and image folders. Relative paths ensure that your local assets remain linked even when your project folder moves.
Note: Use relative file paths starting with a dot-slash to cleanly link folders within your root directory.
Warning: Avoid using absolute paths like C:/Users/Projects/styles.css because those links will break completely once your project is published online.
Example: Linking Project Assets
<link rel="stylesheet" href="./css/styles.css">
<img src="./images/logo.png" alt="Logo">Adding a Navigation Bar
As your project expands from a single tool to a multi-page utility hub, you need a navigation bar. A consistent navigation menu connects your HTML documents together, allowing users to move seamlessly between services.
Note: Wrap your navigation links in semantic nav and ul elements to help search engines understand your site structure.
Warning: Ensure all linked pages actually exist inside your project directory to avoid frustrating 404 page errors.
Example: Adding a Navigation Bar
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>Testing Your Project Locally
You do not need to purchase expensive web hosting to run your web project. You can test your code locally by opening your index.html file directly in any browser, showing you exactly how it will perform online.
Note: Install a live preview extension in your code editor to instantly see design changes as you type them.
Warning: Be aware that local file:// protocols do not support some advanced features like cookie management or active API requests.
Example: Testing Your Project Locally
<!-- Open this file directly in your browser: file:///path/to/index.html -->
<!DOCTYPE html>
<html>
</html>- Using absolute desktop paths in your code, which breaks the styles and images once published online.
- Spelling filenames with uppercase characters, leading to broken navigation on Linux-based web servers.
- Attempting to test advanced features like user logins using local file:// protocols instead of a testing server.
- A complete HTML project requires structured folders for organizing pages, styles, scripts, and images.
- The main entry page of every web project must be named index.html in lowercase.
- Relative file paths ensure that all assets remain linked together when moving or publishing the project directory.
Multi-page local and hosted HTML project structures are supported by all web browsers.
Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: