Semantic Landing Page with Client‑Side Validation

CO

Built by

core-check2-1784838524666

Computer Science

Semantic Landing Page with Client‑Side Validation

HTML5CSS3Vanilla JavaScript (ES6)

Semantic Landing Page with Client‑Side Validation

Guide Core Check from a solid HTML/CSS foundation to a polished, accessible landing page that validates a contact form using only vanilla JavaScript. No backend, no paid services—just a static site you can host for free.

5 modules17 lessonsComputer ScienceHTML5CSS3Vanilla JavaScript (ES6)GitGitHub Pages

What you learn by building this

  • Create a fully semantic HTML5 landing page structure
  • Implement ARIA‑enhanced, accessible form markup
  • Write vanilla JavaScript to validate form fields in real time
  • Apply CSS Flexbox/Grid for responsive design without frameworks
  • Deploy a zero‑dependency static site to a free hosting service

Learning Journey

1

Project Foundations & Semantic Structure

3 lessons

Set up the project folder, initialize a clean HTML skeleton, and lay out the page using semantic sections.

2

Accessible Contact Form Markup

3 lessons

Design a contact form that follows WCAG guidelines, using proper labels, ARIA attributes, and error message placeholders.

3

Vanilla JavaScript Validation

4 lessons

Write lightweight, dependency‑free JS that validates each field on input and on submit, showing friendly error messages.

4

Responsive Design & Finishing Touches

4 lessons

Make the landing page look great on mobile, tablet, and desktop using Flexbox/Grid and media queries.

5

Deploy and Showcase

3 lessons

Publish the static site to GitHub Pages and verify that validation works in the live environment.

Public lesson

Create project folder and basic index.html

Lesson: Start a fresh web project

You already know the structure of an HTML document, so this time focus on creating the project cleanly and checking that the browser can load it.

1. Create the project folder

Tasks

Open a terminal and move to the place where you keep your projects. Then create and enter a new folder:

mkdir core-check-site
cd core-check-site

Tasks

Check that you are inside the new folder:

pwd

Tasks

On Windows PowerShell, use:

Get-Location

The displayed path should end with core-check-site.

2. Create index.html

Tasks

Create a file named exactly index.html:

touch index.html

Tasks

If touch is unavailable, create a new empty file in your editor and save it as index.html inside core-check-site.

Tasks

Open the folder in your editor, then add this document structure. Choose your own page title in place of the comment:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><!-- write your page title here --></title>
  </head>
  <body>
  </body>
</html>

Tasks

Replace the comment with a short title, such as Core Check, so the browser tab is identifiable.

Your file should now have:

  • <!DOCTYPE html> before everything else
  • one html element
  • head and body inside it
  • a non-empty title inside head

3. Open the page in a browser

Tasks

From your editor’s file explorer, right-click index.html and choose Open in Browser.

Tasks

If that option is not available, open your computer’s file manager, find core-check-site/index.html, and double-click it.

The page should appear blank. That is expected: the body does not contain visible content yet.

Tasks

Check two things:

  1. The browser loads the file without an error page.
  2. The browser tab shows the title you wrote.

4. Confirm the structure in the browser

Tasks

Right-click the blank page and choose Inspect or View Page Source.

Tasks

In the source, verify that:

  • the doctype is present at the top
  • the head contains your title
  • the body is present, even though it is empty

When all three are visible, the new project folder and its starting HTML document are ready for the next step.

Course Outline

5 modules · 17 lessons

Project Foundations & Semantic Structure

Accessible Contact Form Markup

Vanilla JavaScript Validation

Responsive Design & Finishing Touches

Deploy and Showcase

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.