Build Your First Website from Scratch

Overview

You're going to build a complete, responsive landing page for a fictional design studio using nothing but HTML and CSS. No React. No Tailwind. No build tools. Just two files and a browser.

By the end of this tutorial, you'll understand semantic HTML structure, CSS custom properties, flexbox and grid layouts, media queries for responsive design, and how to deploy a static site to Vercel. These fundamentals underpin every framework you'll ever use — understanding them deeply makes you a better developer regardless of your stack.

The finished page includes a navigation bar, hero section, services grid, testimonials carousel (CSS-only), and a footer. It scores 100 on Lighthouse accessibility and performance.

Step 1: Project Setup and HTML Boilerplate

Create a project folder and two files: index.html and styles.css.

Start with proper HTML5 structure. Every element here matters — the lang attribute enables screen readers, the viewport meta tag enables responsive behavior, and the charset ensures special characters render correctly.

Notice the semantic elements: <header>, <nav>, <main>, <footer>. Screen readers use these landmarks to help users navigate the page. The aria-label on the nav distinguishes it from other navigation regions. The role="list" on <ul> restores list semantics that some CSS resets strip away.

Step 2: CSS Reset and Custom Properties

Before writing any visual styles, establish a clean baseline. Browser default styles are inconsistent — a reset normalizes behavior across Chrome, Firefox, and Safari.

Custom properties defined on :root act as your design tokens. Change --color-accent in one place and every button, link, and highlight updates simultaneously. This is the same principle behind design systems in larger codebases.

Step 3: Navigation Bar

The nav needs to be horizontally centered, spaced between the logo and links, and sticky on scroll.

The backdrop-filter: blur() creates a frosted glass effect. Combined with a semi-transparent background, the nav feels layered without obscuring content beneath it. The sticky position keeps it visible during scroll without JavaScript.

Step 4: Hero Section

The hero is the first thing visitors see. It needs a strong headline, supporting text, and a call to action.

The clamp() function on the heading creates fluid typography — it scales smoothly between 2.5rem on mobile and 5rem on desktop without a single media query.

Step 5: Services Grid

A CSS Grid section showcasing what the studio offers. Three columns on desktop, stacking to one on mobile.

The repeat(auto-fit, minmax(280px, 1fr)) pattern is one of the most useful CSS Grid techniques. Cards are at least 280px wide and automatically reflow based on available space. No media query needed.

Step 6: Testimonials Section

A horizontally scrollable testimonial strip using CSS scroll snap.

Step 7: Responsive Media Queries

While clamp() and auto-fit handle most responsive behavior, the navigation needs a mobile layout.

Mobile-first means your base styles target small screens. The @media (max-width: 768px) here overrides desktop patterns that need structural changes — the nav stacks vertically, the hero centers its content. Everything else adapts automatically through fluid units.

Step 8: Deploy to Vercel

Your site is two static files — deployment is trivial.

Vercel auto-detects a static site (no package.json or framework config needed). It assigns a URL, provisions HTTPS, and deploys to a global CDN. Your landing page loads in under 200ms from any continent.

For custom domains, run:

To set up continuous deployment, push your project to a GitHub repository and link it in the Vercel dashboard. Every push to main triggers a new deployment automatically.

Open Chrome DevTools, run a Lighthouse audit, and verify your scores. With semantic HTML, no render-blocking JavaScript, and optimized CSS, you should see 100 across Performance, Accessibility, Best Practices, and SEO. That's what building on fundamentals gets you — a perfect score with zero dependencies.