Creating a responsive website is an essential skill for modern web developers. A responsive design ensures that your website looks great on all devices, from large desktop screens to tablets and smartphones. In this guide, we’ll walk through a simple project to build a basic responsive website using HTML and CSS.
Project Overview
We’ll build a multi-section website with the following components:
- Header: Contains the site’s logo and navigation.
- Hero Section: A large banner with a background image and text.
- About Section: A section describing the website or company.
- Services Section: A grid layout showcasing different services or products.
- Contact Section: A simple form for users to contact the site owner.
- Footer: A footer with links and social media icons.
Step 1: Setting Up the Project Structure
First, create a folder for your project and inside it, create the following files:
index.html: The main HTML file.styles.css: The CSS file for styling the website.images/: A folder to store images (if needed).
Your project structure should look like this:
/project-folder
/images
index.html
styles.css
Step 2: Writing the HTML
We’ll start by writing the basic HTML structure in index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="container">
<h1 class="logo">MyWebsite</h1>
<nav>
<ul>
<li><a href="#hero">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section id="hero" class="hero">
<div class="container">
<h2>Welcome to MyWebsite</h2>
<p>Your solution to everything.</p>
<a href="#services" class="btn">Explore Services</a>
</div>
</section>
<section id="about" class="about">
<div class="container">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat.</p>
</div>
</section>
<section id="services" class="services">
<div class="container">
<h2>Our Services</h2>
<div class="service-grid">
<div class="service-item">Service 1</div>
<div class="service-item">Service 2</div>
<div class="service-item">Service 3</div>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<h2>Contact Us</h2>
<form action="#">
<input type="text" placeholder="Name" required>
<input type="email" placeholder="Email" required>
<textarea placeholder="Message" required></textarea>
<button type="submit">Send</button>
</form>
</div>
</section>
<footer>
<div class="container">
<p>© 2024 MyWebsite. All Rights Reserved.</p>
</div>
</footer>
</body>
</html>
Step 3: Styling with CSS
Now, let’s add the CSS in styles.css to style the website and make it responsive.
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
font-size: 16px;
line-height: 1.6;
color: #333;
}
/* Container */
.container {
width: 90%;
max-width: 1200px;
margin: auto;
}
/* Header */
header {
background: #333;
color: #fff;
padding: 20px 0;
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo {
font-size: 24px;
font-weight: bold;
}
header nav ul {
display: flex;
list-style: none;
}
header nav ul li {
margin-left: 20px;
}
header nav ul li a {
color: #fff;
text-decoration: none;
padding: 5px 10px;
transition: background 0.3s;
}
header nav ul li a:hover {
background: #555;
border-radius: 5px;
}
/* Hero Section */
.hero {
background: url('images/hero.jpg') no-repeat center center/cover;
color: #fff;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
}
.hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.hero .container {
position: relative;
z-index: 2;
}
.hero h2 {
font-size: 3rem;
margin-bottom: 20px;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 30px;
}
.hero .btn {
display: inline-block;
padding: 10px 20px;
color: #fff;
background: #ff6600;
border-radius: 5px;
text-decoration: none;
transition: background 0.3s;
}
.hero .btn:hover {
background: #e65c00;
}
/* About Section */
.about {
padding: 60px 0;
background: #f9f9f9;
text-align: center;
}
.about h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.about p {
font-size: 1rem;
max-width: 800px;
margin: auto;
}
/* Services Section */
.services {
padding: 60px 0;
}
.services h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 40px;
}
.service-grid {
display: flex;
justify-content: space-between;
gap: 20px;
}
.service-item {
flex: 1;
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
}
.service-item:hover {
transform: translateY(-10px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
/* Contact Section */
.contact {
padding: 60px 0;
background: #333;
color: #fff;
}
.contact h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 20px;
}
.contact form {
max-width: 600px;
margin: auto;
display: flex;
flex-direction: column;
gap: 20px;
}
.contact form input,
.contact form textarea {
padding: 15px;
border: none;
border-radius: 5px;
}
.contact form button {
padding: 15px;
background: #ff6600;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
.contact form button:hover {
background: #e65c00;
}
/* Footer */
footer {
padding: 20px 0;
background: #222;
color: #fff;
text-align: center;
}
/* Responsive Styles */
@media (max-width: 768px) {
header .container {
flex-direction: column;
text-align: center;
}
header nav ul {
flex-direction: column;
margin-top: 10px;
}
header nav ul li {
margin-left: 0;
margin-top: 10px;
}
.hero h2 {
font-size: 2.5rem;
}
.service-grid {
flex-direction: column;
}
}
Code Explanation
HTML Structure
Header: This section includes the site’s logo and navigation menu. The navigation links (
<a>) point to different sections of the page using IDs (e.g.,#hero,#about).Hero Section: This is the introductory section of the website, often used to grab the user’s attention with a large banner image and key text.
About Section: This section provides information about the website or company.
Services Section: A grid layout is used here to display different services or products offered by the site. Each service is placed in its own div (
service-item), making it easy to manage and style.Contact Section: A simple form is included here, allowing users to send a message directly from the website.
Footer: The footer contains the copyright notice and can include additional links or social media icons.
CSS Styling
Header
- Flexbox is used to align the logo and navigation menu side by side, making it easier to manage responsive layouts.
- Hover effects on navigation links provide visual feedback to users.
- The header is now fully responsive, stacking vertically on smaller screens.
Hero Section
- The hero section includes a background image that covers the entire section, with an overlay to make the text more readable.
- The text and a call-to-action button are centered using Flexbox, creating a focal point.
- Hover effects on the button make it interactive.
About Section
- The about section is given padding and a background color for differentiation.
- The text is centered and limited in width for better readability.
Services Section
- Services are displayed in a flex grid, with each service card having a hover effect that lifts the card slightly, adding depth.
- Box shadows and rounded corners give the service items a modern, card-like appearance.
Contact Section
- The contact section has a dark background and is styled with a simple, clean form layout.
- Hover effects on the submit button improve user experience.
- Form elements are given a consistent style, making the form easy to fill out.
Footer
- The footer has a simple and clean design, with centered text and padding.
Responsive Design
- Media queries ensure the website is mobile-friendly, adjusting the layout when the screen width is below 768px.
- Flexbox is used throughout to manage layouts easily in both desktop and mobile views.
You’ve now built a basic responsive website using HTML and CSS. This project serves as a great starting point to dive deeper into responsive web design. You can expand on this by adding more complex layouts, incorporating interactive elements with JavaScript, or experimenting with different design styles.
By following this guide, you’ll gain a solid understanding of the fundamental principles of responsive web design. Happy coding!
