How to Create a Simple Website Using HTML and CSS

By /
Reading Time: 2 minutes

Creating a website from scratch can be a fun and rewarding experience. In this guide, you’ll learn how to create a simple, responsive website using HTML for structure and CSS for styling. Let’s get started!

Step 1: Set Up Your Project Files

Before you start coding, create a new folder on your computer where you will store your project files. Name the folder SimpleWebsite (or anything you prefer).

Inside this folder, create two files:

  1. index.html (for the HTML code)
  2. style.css (for the CSS code)

Step 2: Write the Basic HTML Structure

Open the index.html file in a text editor (like VS Code or Notepad). Add the following code to create a basic HTML structure:



My Simple Website

<header>
    <h1>Welcome to My Simple Website</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

<section id="home">
    <h2>Home</h2>
    <p>This is the home section of the website.</p>
</section>

<section id="about">
    <h2>About</h2>
    <p>Learn more about this simple website and its creator.</p>
</section>

<section id="contact">
    <h2>Contact</h2>
    <p>Get in touch with us through this section.</p>
</section>

<footer>
    <p>&copy; 2024 SimpleWebsite. All rights reserved.</p>
</footer>

This code creates a simple page with a header, navigation menu, three sections (home, about, contact), and a footer.

Step 3: Style the Website with CSS

Open the style.css file and add the following CSS code to style your website. This will give your website a clean, simple look.

/* Reset default styles */

  • {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

/* Style the body */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}

/* Header styles */
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}

header h1 {
margin-bottom: 10px;
}

nav ul {
list-style: none;
}

nav ul li {
display: inline;
margin-right: 20px;
}

nav ul li a {
color: #fff;
text-decoration: none;
font-weight: bold;
}

/* Section styles */
section {
padding: 20px;
margin: 20px 0;
}

section h2 {
color: #333;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}

This CSS will:

Style the header with a dark background and white text.

Make the navigation menu horizontal.

Add padding and margins to each section for better spacing.

Style the footer to always stay at the bottom of the page.

Step 4: View Your Website

  1. Save both the index.html and style.css files.
  2. Open the index.html file in any web browser (e.g., Chrome, Firefox).
  3. You should see a simple webpage with a header, navigation menu, three sections, and a footer.

Step 5: Make It Responsive (Optional)

To make your website mobile-friendly, add this code to the style.css file under the existing styles:

/* Make the layout responsive */
@media (max-width: 768px) {
nav ul {
text-align: center;
}

nav ul li {
    display: block;
    margin-bottom: 10px;
}

}

This CSS code ensures that the navigation menu turns into a vertical layout when viewed on smaller screens (e.g., mobile phones).

Conclusion

Congratulations! You’ve created a simple website using HTML and CSS. This is just the beginning. With more advanced techniques, you can add more features, improve the design, and even integrate JavaScript to make your website interactive.

Goto home

Related Posts

Scroll to Top