Simple Website Using HTML and CSS Only

Alizeh Codes August 21, 2025

Simple Website Using HTML and CSS Only

Creating a website might sound complicated, but with just HTML and CSS you can design a clean and attractive site without using any extra tools. In this tutorial, I will explain step by step how to build a simple website using HTML and CSS only. This guide is beginner-friendly and will help you create your first responsive website design.

What is a Website?

A website is a collection of web pages connected through links and styled with design. Websites can be created for different purposes such as:

Business or company websites
Personal portfolio websites
Blogs and magazine websites
Educational or informational websites

Websites allow you to share information, promote services, and connect with people online.

How to Make a Website Attractive:

A simple design can look professional if you follow some basic rules:

Use a maximum of three to four colors for a clean layout
Keep your website responsive so it works on mobile, tablet, and desktop screens
Use the same font family and text sizes consistently
Place important links inside the navigation bar
Add hover effects to buttons and links for better user experience

What We Will Build

In this tutorial, we will create a simple landing page with:

A full-screen background image
A navigation bar with a logo and menu links
Two call-to-action buttons in the center
Smooth hover effects for links and buttons

Simple Website Using HTML and CSS Only | Video Tutorial

You can watch the full step-by-step tutorial here:

Source Code for Simple Website

To create this project, you need two files:

index.html for structure

style.css for design

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bike Mania</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css" integrity="sha512-DxV+EoADOkOygM4IR9yXP8Sb2qwgidEmeqAEmDKIOfPRQZOWbXCzLC6vjbZyy0vPisbH2SyW27+ddLVCN+OMzQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <nav>
        <div class="menu">
            <div class="logo">
                <a href="#">BikeMania</a>
            </div>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Feedback</a></li>
            </ul>
        </div>
    </nav>
    <div class="img"></div>
    <div class="center">
        <div class="title">Create Amazing Website</div>
        <div class="sub-title">HTML & CSS Only</div>
        <div class="btns">
            <button>Learn More</button>
            <button>Buy Now</button>
        </div>
    </div>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Oswald:wght@200..700&family=Outfit:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Protest+Guerrilla&family=Roboto:ital,wght@0,100..900;1,100..900&family=Special+Gothic+Condensed+One&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
::selection{
    color: #000;
    background: #fff;
}
nav{
    position: fixed;
    background: #1b1b1b;
    width: 100%;
    padding: 10px 0;
    z-index: 12;
}
nav .menu{
    max-width: 1250px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}
.menu .logo a{
    text-decoration: none;
    color: #fff;
    font-size: 35px;
    font-weight: 600;
}
.menu ul{
    display: flex;
}
.menu ul li{
    list-style: none;
    margin-left: 7px;
}
.menu ul li:first-child{
    margin-left: 0px;
}
.menu ul li a{
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    padding: 0px 15px;
    border-radius: 5px;
    transition: all 0.3s ease;
}
.menu ul li a:hover{
    background-color: #fff;
    color: #000;
    padding: 10px 15px;
}
.img{
    background: url(images/bike.jpg) no-repeat;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    position: relative;
}
.img::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
}
.center{
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 20px;
    text-align: center;
}
.center .title{
    color: #fff;
    font-size: 55px;
    font-weight: 600;
}
.center .sub-title{
    color: #fff;
    font-size: 52px;
    font-weight: 600;
}
.center .btns{
    margin-top: 20px;
}
.center .btns button{
    height: 55px;
    width: 170px;
    border-radius: 5px;
    border: none;
    margin: 0 10px;
    border: 2px solid white;
    font-size: 20px;
    font-weight: 500;
    padding: 0 10px;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
}
.center .btns button:first-child{
    color: #fff;
    background: none;
}
.btns button:first-child:hover{
    background: #fff;
    color: #000;
}
.center .btns button:last-child{
    background-color: white;
    color: #000;
}

This was a complete step-by-step guide on how to create a simple website using HTML and CSS only. With just two files, you can build a responsive landing page that looks clean and professional. You can customize colors, fonts, and images according to your project.

If you want to add more advanced features in the future, you can integrate JavaScript for interactivity. For now, this basic design is the best way to start learning website development.

Post a Comment

0 Comments