Benchmark Course | Tangeble

Built by

core-check2-1784838524666

Computer Science

Build a Semantic, Responsive Landing Page with Accessible JavaScript Contact Form

HTML5CSS3vanilla JavaScript

Build a Semantic, Responsive Landing Page with Accessible JavaScript Contact Form

A compact, hands‑on course that takes you from your current HTML/CSS foundation to a production‑ready landing page. You’ll create semantic markup, apply mobile‑first Flexbox/Grid layouts, add an accessible contact form with vanilla‑JS validation, and publish the site for free.

4 modules8 lessonsComputer ScienceHTML5CSS3vanilla JavaScriptGitGitHub Pages

What you learn by building this

Create semantic HTML5 layout for a landing page
Apply responsive design techniques with Flexbox and CSS Grid
Design accessible form controls and ARIA attributes
Write vanilla JavaScript validation logic and display success/error messages
Deploy a static site to a free hosting service

Learning Journey

Project Setup & Semantic Markup

2 lessons

Lay the foundation with a clean project folder and semantic HTML sections.

Responsive Layout with Flexbox & Grid

2 lessons

Build the hero and features sections that adapt across screen sizes.

Accessible Contact Form & Validation

2 lessons

Add a fully accessible contact form and implement client‑side validation with feedback.

Polish, Accessibility Checks & Deployment

2 lessons

Finalize responsive images, improve accessibility, and publish the site.

Public lesson

Create project folder and index.html with semantic sections

You’ve already shown that you can build semantic HTML. This time, focus on making the project reproducible: create its own folder, give it Git history, and put the page structure in one clearly named file.

Tasks

Open a terminal in your practice workspace. Choose a short folder name for this project, then replace PROJECT_FOLDER below with that name.

mkdir "$PROJECT_FOLDER"
cd "$PROJECT_FOLDER"
git init
touch index.html

mkdir "$PROJECT_FOLDER"
cd "$PROJECT_FOLDER"
git init
touch index.html

Tasks

Check that you are in the new folder and that Git recognizes it:

pwd
git status

pwd
git status

Tasks

Open index.html. Keep the document structure below, but replace every uppercase placeholder with content for your own page.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>REPLACE WITH A PAGE TITLE</title>
</head>
<body>
  <header>
    <h1>REPLACE WITH THE MAIN PAGE HEADING</h1>

    <nav aria-label="Primary navigation">
      <a href="#FIRST_SECTION_ID">FIRST LINK LABEL</a>
      <a href="#SECOND_SECTION_ID">SECOND LINK LABEL</a>
    </nav>
  </header>

  <main>
    <section id="FIRST_SECTION_ID">
      <h2>REPLACE WITH THE FIRST SECTION HEADING</h2>
      <p>REPLACE WITH CONTENT FOR THIS SECTION.</p>
    </section>

    <section id="SECOND_SECTION_ID">
      <h2>REPLACE WITH THE SECOND SECTION HEADING</h2>
      <p>REPLACE WITH CONTENT FOR THIS SECTION.</p>
    </section>
  </main>

  <footer>
    <p>REPLACE WITH FOOTER CONTENT.</p>
  </footer>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>REPLACE WITH A PAGE TITLE</title>
</head>
<body>
  <header>
    <h1>REPLACE WITH THE MAIN PAGE HEADING</h1>

    <nav aria-label="Primary navigation">
      <a href="#FIRST_SECTION_ID">FIRST LINK LABEL</a>
      <a href="#SECOND_SECTION_ID">SECOND LINK LABEL</a>
    </nav>
  </header>

  <main>
    <section id="FIRST_SECTION_ID">
      <h2>REPLACE WITH THE FIRST SECTION HEADING</h2>
      <p>REPLACE WITH CONTENT FOR THIS SECTION.</p>
    </section>

    <section id="SECOND_SECTION_ID">
      <h2>REPLACE WITH THE SECOND SECTION HEADING</h2>
      <p>REPLACE WITH CONTENT FOR THIS SECTION.</p>
    </section>
  </main>

  <footer>
    <p>REPLACE WITH FOOTER CONTENT.</p>
  </footer>
</body>
</html>

Tasks

Make sure each navigation link’s href exactly matches the id of its target section. For example, a link to #about must point to an element with id="about".

Tasks

Open index.html in your browser.

Verify these behaviors:

The page has one prominent h1.
Both section headings appear below it as h2 headings.
Clicking each navigation link moves to its matching section.
The footer appears after the main content.
The browser tab shows the title you chose.

Tasks

Then inspect the HTML in the browser’s developer tools. Confirm that header, main, and footer are separate elements—not just div elements with similar class names.

Tasks

Return to the terminal and run:

git status --short

git status --short

Tasks

Now save the first version:

git add index.html
git commit -m "Create semantic page structure"

git add index.html
git commit -m "Create semantic page structure"

Tasks

Finally, run:

git status

git status

Course Outline

4 modules · 8 lessons

Project Setup & Semantic Markup

Responsive Layout with Flexbox & Grid

Accessible Contact Form & Validation

Polish, Accessibility Checks & Deployment

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.