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

CO

Built by

core-check2-1784838524666

Computer Science

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

HTML5CSS3JavaScript (ES6)

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

Guide Core Check from their current proficiency in HTML, CSS, and React components to a polished, static landing page that uses semantic markup, responsive design, and vanilla‑JS validation, ready to be deployed on GitHub Pages.

4 modules11 lessonsComputer ScienceHTML5CSS3JavaScript (ES6)GitGitHub Pages

What you learn by building this

  • Create a clean, semantic HTML skeleton for a marketing landing page
  • Apply CSS Grid/Flexbox to build a responsive layout that works on mobile, tablet, and desktop
  • Develop an accessible contact form with live JavaScript validation
  • Publish a static site to GitHub Pages using Git

Learning Journey

1

Foundations: Project Scaffold & Semantic Markup

2 lessons

Set up the project folder, create the HTML entry point, and lay out a fully semantic page structure.

2

Styling & Responsiveness

3 lessons

Turn the static markup into a responsive, modern layout using CSS variables, Flexbox, Grid, and media queries.

3

Interactive Contact Form

3 lessons

Create an accessible contact form and add client‑side validation using vanilla JavaScript.

4

Polish & Publish

3 lessons

Finalize SEO/meta tags, run accessibility checks, and deploy the static site to GitHub Pages.

Public lesson

Initialize project folder and index.html

Lesson 3-1: Give Your App a Home

You already know the structure of an HTML document. This time, you’ll create the project’s home folder and put that structure under Git version control so later React work has a clean starting point.

Tasks

1. Choose a project folder name

In your terminal, move to the place where you keep coding projects. Then create a folder for this app and enter it.

Replace the bracketed name with your own project name:

mkdir [project-name]
cd [project-name]

Tasks

Check that you are inside the new folder:

pwd

The path printed should end with your project name.

Tasks

2. Start Git tracking

Initialize a Git repository in this folder:

git init

Tasks

Check that Git sees an empty working directory:

git status

You should see a message saying you are on a branch and that there are no commits yet.

Tasks

3. Create index.html

Create a file named index.html in the project folder, then add this document structure. Fill in the missing document type and page title yourself:

[document type declaration]
<html>
  <head>
    <meta charset="UTF-8">
    <title>[a title for your app]</title>
  </head>
  <body>
  </body>
</html>

Save the file.

The meta and title elements give the browser useful document information; the body can remain empty for now because the app has not been built yet.

Tasks

4. Check the document in the browser

Open index.html in your browser.

You should see a blank page, but the browser tab should show the title you chose. Open the browser’s developer tools and check the Console as well. There should be no HTML parsing errors.

If the tab title is missing, check the text inside your <title> element. If the page is not found, check that the file is named exactly index.html.

Tasks

5. Check Git’s view of the project

Return to the terminal and run:

git status

You should see index.html listed as an untracked file.

Tasks

Now stage it:

git add index.html

Tasks

Run the status check again:

git status

This time, index.html should appear under changes ready to be committed.

Tasks

6. Verify the finished starting point

Before moving on, confirm all four items:

  • Your terminal is inside the new project folder.
  • The folder contains a .git directory and index.html.
  • Opening index.html shows the chosen tab title.
  • git status shows index.html staged.

You now have the plain HTML entry point that the React setup will build on next.

Course Outline

4 modules · 11 lessons

Foundations: Project Scaffold & Semantic Markup

Styling & Responsiveness

Interactive Contact Form

Polish & Publish

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.