Codelab: Build a Contact Form
Follow along step-by-step to build a complete, styled, accessible contact form from scratch in your code editor and browser.
Step 1: Set up your project
In this codelab, you'll build a real contact form from scratch — no frameworks, no build tools, just an HTML file and a browser. This is exactly how professional web developers started, and it's the best way to internalize how forms work.
What you'll build: A "Contact Us" form for a fictional design agency. It will include text inputs, an email field, a dropdown, a textarea, validation, accessibility features, and polished CSS styling.
Setup instructions:
- Open your terminal (Terminal on Mac, or press
Ctrl+Alt+Ton Linux) - Create a project folder:
mkdir contact-form && cd contact-form - Create an HTML file:
touch index.html - Open the file in your code editor (VS Code:
code index.html)
Start with this HTML boilerplate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us - PixelCraft Agency</title>
</head>
<body>
<h1>Contact Us</h1>
</body>
</html>
Save the file and open index.html in your browser (double-click the file, or drag it into a browser window). You should see "Contact Us" as a heading. Keep both your editor and browser open side by side — you'll be switching between them frequently.