Step-by-Step Guide to Building Your First Responsive Website
This step-by-step guide will help you create your first responsive page using HTML, CSS, and a little JavaScript. The result is a clean, modern landing page that looks great on your phone, tablet, and computer.
Step 1. Plan
Identify the purpose of the page: for example, a personal portfolio or a service landing page. Draw on paper or in Figma: a header with a logo and menu, a hero section with a large title, a benefits block (3–4 cards), a contact form, a footer. This will take 10–15 minutes, but it will save you from the chaos of coding.
Step 2. HTML structure
Create index.html:
HTML<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My first site</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Welcome!</h1>
<nav>...</nav>
</header>
<main>
<section class="hero">...</section>
<section class="features">...</section>
<section class="contact">...</section>
</main>
<footer>...</footer>
<script src="script.js"></script>
</body>
</html>
Step 3. Basic styles (style.css)
CSS* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: system-ui, sans-serif;
line-height: 1.5;
color: #333;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
Step 4. Header and Navigation (Flexbox)
CSSheader {
background: #1a1a1a;
color: white;
padding: 1rem 0;
}
nav ul {
display: flex;
gap: 2rem;
list-style: none;
}
Step 5. Hero Section
Large Header + Button. Use min-height: 80vh; and centered text.
Step 6. Benefits Block (CSS Grid)
CSS.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
padding: 4rem 0;
}
.card {
padding: 2rem;
border: 1px solid #ddd;
border-radius: 12px;
}
Step 7. Adaptability (Mobile-first)
CSS@media (min-width: 768px) {
nav ul { justify-content: flex-end; }
.hero h1 { font-size: 4rem; }
}
Step 8. Contact Form
HTML<form id="contact">
<input type="text" placeholder="Name" required>
<input type="email" placeholder="Email" required>
<textarea placeholder="Message" required></textarea>
<button type="submit">Send</button>
</form>
Step 9. Simple interactivity (script.js)
JavaScriptdocument.getElementById("contact").addEventListener("submit", e => {
e.preventDefault();
alert("Thank you! We'll get back to you.");
e.target.reset();
});
Step 10. Test and finalize
Open in browser → F12 → switch devices (mobile/tablet).
Check speed (Lighthouse).
Add alt to images, text contrast.
Upload to GitHub Pages or Vercel.
Congratulations — you have your first responsive page! In Qelvaramixe courses you will find hundreds of such examples, more detailed explanations and gradual complication to professional projects. Start with Free Key to consolidate these basic steps.