Build a Compact, Semantic Landing Page with Client‑Side Form Validation

CO

Built by

core-check2-1784838524666

Computer Science

Build a Compact, Semantic Landing Page with Client‑Side Form Validation

HTML5CSS3Vanilla JavaScript (ES6)

Build a Compact, Semantic Landing Page with Client‑Side Form Validation

Guided, bite‑size modules that take you from your current HTML/CSS/React basics to a polished, responsive landing page featuring a fully‑validated contact form—all built with plain HTML, CSS, and vanilla JavaScript.

3 modules8 lessonsComputer ScienceHTML5CSS3Vanilla JavaScript (ES6)VS Code (or any code editor)Git (for version control, optional)

What you learn by building this

  • Create a fully semantic HTML layout for a landing page
  • Apply simple, responsive CSS to style the page consistently
  • Write vanilla JavaScript to validate form fields and display user feedback
  • Integrate the new page into your existing project repository without breaking existing work

Learning Journey

1

Project Setup & Review

2 lessons

Ensure the existing codebase is clean, versioned, and ready for the new landing page work.

2

Semantic HTML & Basic Styling

3 lessons

Build the landing page markup using semantic tags and style it with clean, responsive CSS.

3

Client‑Side Form Validation

3 lessons

Create a contact form and implement JavaScript validation that gives immediate feedback to users.

Public lesson

Audit current repository and create a new landing‑page branch

Lesson: Audit the project and create a safe landing-page branch

You’re about to work beside an in-progress React app, so the first job is to understand what is already there and isolate your landing-page work from the app’s existing branch.

1. Clone the project

Open a terminal and move to the folder where you keep projects:

Tasks

cd path/to/your/projects

Tasks

Clone the repository. Replace the URL with your project’s actual repository URL:

git clone <repository-url>
cd <repository-folder>

Tasks

Check that Git recognizes the project:

git remote -v
git status

You should see:

  • the repository URL under origin
  • a clean working tree, or a message saying there are no commits yet
  • the branch you were cloned on, usually main or master

Find the bug

Something's wrong — can you spot it?

If Git says the folder is not a repository, stop there and check that you ran cd with the correct folder name.

2. Record the repository’s starting point

Tasks

Run these commands:

git branch --show-current
git status --short
git log -1 --oneline

Write down:

  • current branch:
  • whether git status --short printed anything:
  • latest commit:

A fresh clone should normally have no uncommitted changes. That gives you a clean starting point for the landing page.

Find the bug

Something's wrong — can you spot it?

If git status --short prints file names, do not delete or reset them. Those changes may belong to someone else or may be important to the in-progress app.

3. Examine the folder layout

From the repository root, list the top-level files and folders:

Tasks

find . -maxdepth 2 \
  -not -path './.git' \
  -not -path './node_modules' \
  -print | sort

Now inspect the project’s package scripts:

cat package.json

Look for clues such as:

  • src/ — commonly where React components and application code live
  • public/ — commonly where static files live
  • src/components/ — a likely home for reusable interface pieces
  • src/pages/ or src/views/ — possible page-level components
  • vite.config.*, webpack.config.*, or similar — build setup
  • scripts such as dev, build, and test

Do not move or rename anything yet. This audit is meant to show you where the existing app begins and where a landing page could fit without guessing.

Tasks

Audit checkpoint

Create a short note somewhere outside the repository, or in your project notes, with this shape:

Project:
Current branch:
Start commit:
App entry file:
React components folder:
Page/view folder:
Development command:
Build command:

Fill it from what you found rather than copying the example names.

4. Confirm the existing app still runs

Use the development script shown in package.json. For many React projects, it will be one of these:

Tasks

npm install
npm run dev

or:

npm install
npm start

Only run the command that actually appears in the scripts section.

Tasks

Open the local URL printed by the terminal. Check that the existing React app loads before you create the landing-page branch.

Visible check:

  • the browser shows the current app
  • the terminal does not show a build error
  • stopping the server with Ctrl+C returns you to the shell

This separates an existing project problem from anything you do next.

5. Create the dedicated branch

Because this is a fresh clone with a clean starting point, create the new branch from the current project branch:

Tasks

git switch -c landing-page

Verify the branch change:

git branch --show-current
git status

The first command should print:

landing-page

The working tree should still be clean. Creating the branch does not alter the existing branch; it gives your landing-page work its own name and history.

6. Prove the app branch was not changed

Tasks

List all local branches:

git branch

You should see both the original branch and landing-page. The * should be beside landing-page.

Tasks

Now compare the two branches:

git diff <original-branch>...landing-page

Replace <original-branch> with the branch name you recorded earlier, such as main.

The command should produce no output because the new branch currently points to the same commit as the original branch.

Tasks

Finally, save the branch setup:

git status
git log --oneline --decorate -1

Your final check should show:

  • you are on landing-page
  • there are no uncommitted changes
  • the latest commit is marked with HEAD -> landing-page
  • the original app branch is still listed separately

At this point, the repository has been audited and the landing-page work has a safe place to begin.

Course Outline

3 modules · 8 lessons

Project Setup & Review

Semantic HTML & Basic Styling

Client‑Side Form Validation

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.