Build a Compact Landing Page with Client‑Side Form Validation

CO

Built by

core-check2-1784838524666

Computer Science

Build a Compact Landing Page with Client‑Side Form Validation

HTML5CSS3JavaScript (ES6)

Build a Compact Landing Page with Client‑Side Form Validation

From your existing HTML/CSS foundation, you'll create a polished, responsive landing page that includes a contact form validated entirely in the browser. No backend needed—just static assets you can host anywhere.

4 modules9 lessonsComputer ScienceHTML5CSS3JavaScript (ES6)Visual Studio CodeLive Server extension (optional)

What you learn by building this

  • Create a fully static web page that adapts to mobile and desktop screens.
  • Apply Flexbox and Grid to arrange page sections and achieve responsive layouts.
  • Write vanilla JavaScript to validate form fields, display real‑time feedback, and handle successful submissions.

Learning Journey

1

Project Scaffold & Semantic Structure

2 lessons

Set up the folder, files, and core HTML skeleton for the landing page.

2

Advanced Styling & Responsive Layout

2 lessons

Turn the static markup into a visually appealing, mobile‑friendly page.

3

Vanilla JavaScript Form Validation

3 lessons

Introduce DOM manipulation and build real‑time validation for the contact form.

4

Polish, Accessibility & Finalization

2 lessons

Add accessibility touches, final visual tweaks, and prepare the page for deployment.

Public lesson

Create project folder and starter files

Set up your project workspace

You already know the basic HTML structure and CSS selectors, so this setup will keep the files separate and make the next React work easier to organize.

Tasks

1. Create the project folder

  1. Open VS Code.
  2. Choose File → Open Folder…
  3. Create a new folder named:
project-starter
  1. Open that folder in VS Code.
  2. If VS Code asks whether you trust the folder, choose Yes, I trust the authors.

Tasks

2. Add the three starter files

In the Explorer panel:

  1. Click the New File button.
  2. Create:
index.html
  1. Repeat for:
style.css
script.js

Tasks

3. Connect the files

Open index.html and type this starter structure. Replace the bracketed page title with a name for your own project.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[YOUR PROJECT TITLE]</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <main>
    <h1>[YOUR PROJECT TITLE]</h1>
    <!-- Add the first piece of project content here -->
  </main>
</body>
</html>

The two file links are important: the link connects your styles, and the script connects your JavaScript.

Tasks

Now open style.css and add one visible rule of your choice. For example, change the page background or heading color:

body {
  /* Add a background-color or font-family declaration */
}

h1 {
  /* Add a color or text-align declaration */
}

Tasks

Open script.js and add a message that will help you confirm the file loaded:

console.log("[YOUR PROJECT TITLE] JavaScript loaded");

Tasks

Save all three files with Ctrl+S on Windows/Linux or Cmd+S on macOS.

Tasks

4. Open a live preview

If you do not already have it:

  1. Open the Extensions panel in VS Code.
  2. Search for Live Server.
  3. Install the extension published by Ritwick Dey.

Tasks

Then:

  1. Right-click index.html.
  2. Choose Open with Live Server.
  3. A browser window should open with an address similar to:
http://127.0.0.1:5500/index.html

Tasks

5. Check that JavaScript is connected

In the preview browser:

  1. Right-click the page and choose Inspect.
  2. Open the Console tab.
  3. Look for your message:
[YOUR PROJECT TITLE] JavaScript loaded

If the page does not look right, check these exact details:

  • The files are all in the same folder.
  • The names are exactly index.html, style.css, and script.js.
  • The HTML uses href="style.css".
  • The HTML uses src="script.js".
  • You saved the files before refreshing the preview.

Tasks

Finished setup

Before moving on, confirm that you have:

  • project-starter open in VS Code
  • index.html, style.css, and script.js visible in Explorer
  • Your project title visible in the browser
  • Your CSS change visible
  • Your JavaScript message visible in the browser console

Course Outline

4 modules · 9 lessons

Project Scaffold & Semantic Structure

Advanced Styling & Responsive Layout

Vanilla JavaScript Form Validation

Polish, Accessibility & Finalization

Learn by building your own version.

Remix this public project to open the workspace, follow the guided build, and let the AI mentor teach you through the work instead of doing it for you.