TechTutorZone

Build a responsive site — HTML & CSS

Published: · Reading ~10 min

In this tutorial you'll build a small, responsive website from scratch using plain HTML and CSS. The goal is to create a semantic structure, a responsive layout that looks good on phones and desktops, and accessible forms and images. We'll keep assets minimal and focus on best practices.

Project layout

Create a project folder with the following structure:

my-site/
  index.html
  css/
    style.css
  images/
    hero.jpg

Semantic HTML

Start with semantic elements which help both accessibility and SEO:

<header><nav><main><article><aside><footer>

Example minimal page:

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>My Site</title></head>
<body>
  <header><h1>My Site</h1></header>
  <main><article><h2>Welcome</h2><p>Start here.</p></article></main>
  <footer><p>© You</p></footer>
</body>
</html>

Responsive layout with CSS Grid

Use a mobile-first approach. Below is a compact CSS snippet that creates a two-column layout on wider screens and a single-column layout on small devices:

main { display:grid; grid-template-columns: 1fr; gap:1rem; }
@media(min-width:880px){
  main { grid-template-columns: 2fr 1fr; align-items:start; }
}

Combine Grid with utility styles for cards and readable typography. Keep line-length comfortable (60–80 characters) and ensure headings scale with viewport width.

Images and performance

Use properly sized images and modern formats (WebP/AVIF where supported). Prefer <img loading="lazy"> for non-critical images. Example:

<img src="images/hero-800.jpg" alt="Screenshot of the project" loading="lazy" width="1200">

Accessible forms

Always include labels and validation hints for forms:

<label for="email">Email</label>
<input id="email" type="email" required aria-describedby="email-help">
<div id="email-help">We'll only use this to contact you.</div>

Deployment

For static sites, GitHub Pages is free and easy: push your repo, enable Pages, and your site is live with HTTPS. For custom domains, add a CNAME file and configure DNS. Use GitHub Actions to automate builds if you use a static site generator.

Troubleshooting & tips

  • Check responsive breakpoints by resizing the browser or using device emulator in devtools.
  • Test with keyboard only and screen reader (NVDA/VoiceOver).
  • Use Lighthouse to measure performance and accessibility.

That's a complete roadmap. If you'd like, I can generate a downloadable starter template (HTML + CSS + images) zipped so you can clone and deploy instantly.