Creating a static website might seem like a complex task, but it can actually be a straightforward and fun process. In this tutorial, we’ll guide you through building a basic static website using HTML for the structure, CSS for styling, and Python to serve the files locally through a web server.
By the end of this tutorial, you’ll know how to create a basic static website, style it using CSS, and serve it using Python’s built-in HTTP server.
Table of Contents
- What is a Static Website?
- Setting Up Your Environment
- Creating the HTML Structure
- Styling with CSS
- Serving the Website with Python
- Best Practices
- Conclusion
What is a Static Website?
A static website consists of fixed content — it’s made up of files that do not change unless manually edited. The content is the same for all visitors, unlike dynamic websites that show different content based on user interactions.
The main components of a static website are:
- HTML (Hypertext Markup Language): Defines the structure and content of the website.
- CSS (Cascading Style Sheets): Defines the presentation (look and feel) of the website.
- JavaScript (optional): Adds interactivity (though it’s not necessary for a basic static website).
In this tutorial, we’ll focus on creating a static website using HTML and CSS, and we’ll use Python to serve the website locally on your computer.
Setting Up Your Environment
Before we start coding, let’s ensure that your environment is ready:
1. Install Python
Python comes pre-installed on many operating systems, but if you don’t have it yet, you can download it from python.org.
Make sure Python is installed by running this command in the terminal:
python --versionYou should see something like:
Python 3.x.x2. Set Up Your Project Directory
To keep things organized, create a new directory (folder) for your website project. You can name it static_website or anything you like.
In the terminal, navigate to where you want to create the project and run:
mkdir static_website
cd static_websiteCreating the HTML Structure
HTML is the backbone of your website. It defines the elements like headers, paragraphs, links, images, etc.
1. Create an HTML File
Inside the static_website directory, create a new file called index.html. This will be the main page of your website.
touch index.html2. Write the Basic HTML Structure
Open the index.html file in a text editor (like Visual Studio Code or Sublime Text), and write the following HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Static Website</title>
</head>
<body>
<header>
<h1>Welcome to My Static Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section>
<h2>About Us</h2>
<p>This is a simple static website built with HTML and CSS.</p>
</section>
<footer>
<p>© 2025 My Static Website</p>
</footer>
</body>
</html>Explanation:
- The
<!DOCTYPE html>declaration tells the browser that this is an HTML5 document. - The
<html>tag wraps all the content on the page. - The
<head>section contains metadata about the website, like the character set and the title. - The
<body>contains the visible content, such as headers, paragraphs, and navigation links.
At this point, you’ve created a basic webpage structure with a navigation menu and some content.
Styling with CSS
CSS (Cascading Style Sheets) is used to control the presentation and layout of the website. It allows you to customize fonts, colors, spacing, and more.
1. Create a CSS File
Now, let’s style the website by creating a CSS file. Inside the static_website directory, create a new file called styles.css:
touch styles.css2. Add Basic Styles
Open the styles.css file and add the following CSS code:
/* Reset default margin and padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
padding: 20px;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
section {
margin: 20px 0;
}
footer {
text-align: center;
font-size: 14px;
color: #777;
}Explanation:
- The
*selector resets all elements’ margin and padding to ensure consistent styling across browsers. - The
bodyselector sets the font family, background color, and text color. - The
headersection has a dark background with white text, making it stand out. - The
navstyles create an inline navigation menu with links. - The
footersection is centered with a smaller font size.
3. Link the CSS File to the HTML
To apply the CSS styles, we need to link the styles.css file to the index.html file. Inside the <head> section of index.html, add the following line:
<link rel="stylesheet" href="styles.css">Your index.html file should now look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Static Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Static Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section>
<h2>About Us</h2>
<p>This is a simple static website built with HTML and CSS.</p>
</section>
<footer>
<p>© 2025 My Static Website</p>
</footer>
</body>
</html>Serving the Website with Python
Now that we’ve built the website, let’s serve it locally using Python. This step will allow you to view your website in the browser just like it would appear on the internet.
1. Open the Terminal or Command Prompt
Navigate to the static_website folder using the terminal:
cd path/to/static_website2. Run Python’s Built-in HTTP Server
If you’re using Python 3.x, you can start the server by running:
python -m http.serverThis will start a local web server at http://localhost:8000. Open this URL in your browser, and you should see your static website.
Best Practices
- Organize Your Files: As your website grows, consider organizing your files. For example, place all CSS files in a
cssfolder, JavaScript files in ajsfolder, and images in animagesfolder. - Responsive Design: Make your website responsive by using media queries to adjust the layout for different screen sizes (e.g., mobile, tablet, desktop).
- Use External Libraries: If you’re looking to add more advanced styling or interactivity, consider using libraries like Bootstrap for responsive design or jQuery for easier JavaScript handling.
- Valid HTML and CSS: Make sure your code is properly structured and adheres to best practices by using tools like W3C HTML Validator and CSS Validator.
Conclusion
Congratulations! You’ve now created a simple static website using HTML, CSS, and Python. You learned how to structure a webpage with HTML, style it with CSS, and serve it locally using Python’s built-in HTTP server.
This is just the beginning. As you continue to learn, you can add more pages, improve the design, and eventually deploy your website online for the world to see.
Happy coding!
One response
Very nice post. I just stumbled upon your weblog
and wished to say that I’ve truly enjoyed surfing around your blog posts.
In any case I’ll be subscribing to your feed and I hope you write again very
soon!