New Project | Tangeble

Built by

core-check2-1784838524666

Computer Science

Semantic Landing Page with Client‑Side Validation

HTML5CSS3JavaScript (ES6)

Semantic Landing Page with Client‑Side Validation

Build a modern, accessible landing page using HTML5, CSS3, and vanilla JavaScript. The project stays static—no backend—yet provides a fully‑validated contact form and can be deployed to GitHub Pages.

4 modules11 lessonsComputer ScienceHTML5CSS3JavaScript (ES6)GitGitHub Pages

What you learn by building this

Create a fully semantic HTML5 structure for a marketing landing page
Apply modern CSS techniques (Flexbox, media queries, CSS variables) for responsive layout
Write vanilla JavaScript to validate form inputs and display inline error messages
Ensure accessibility compliance (ARIA, keyboard navigation, colour contrast)
Publish a static site on GitHub Pages directly from a Git repository

Learning Journey

Project Setup & Semantic Structure

2 lessons

Lay the foundation: folder layout, index.html, and semantic sections that give the page meaning and SEO value.

Styling & Responsive Layout

3 lessons

Turn the raw markup into a polished, mobile‑first design using CSS variables, Flexbox, and media queries.

JavaScript Form Validation

3 lessons

Add a contact form and make it work entirely in the browser, giving users immediate feedback on errors.

Polish, Accessibility, & Deployment

3 lessons

Finalize the page, ensure it meets accessibility standards, test responsiveness, and make it publicly reachable.

Public lesson

Initialize project folder and add index.html

You already know the HTML structure, so this lesson keeps that part brief: create a clean project folder, turn it into a Git repository, and establish the first HTML file.

Tasks

Open your terminal and run:

mkdir core-check-project
cd core-check-project

mkdir core-check-project
cd core-check-project

Tasks

From inside the project folder, run:

git init

git init

Tasks

Create the file:

touch index.html

touch index.html

If you are using Windows PowerShell and touch is unavailable, use:

New-Item index.html

New-Item index.html

Tasks

Open index.html in your editor and complete this structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Add the character encoding meta tag -->
    <!-- Add the responsive viewport meta tag -->
    <title><!-- Write a title for this project --></title>
  </head>
  <body>
    <!-- Leave a note about what the page will become -->
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Add the character encoding meta tag -->
    <!-- Add the responsive viewport meta tag -->
    <title><!-- Write a title for this project --></title>
  </head>
  <body>
    <!-- Leave a note about what the page will become -->
  </body>
</html>

Use:

a UTF-8 character encoding declaration
a viewport declaration for responsive sizing
a title that identifies your project

Tasks

Open index.html in your browser.

The page itself may look blank because the body has no visible content yet. That is expected at this stage.

Tasks

Back in the terminal, run:

git status

git status

Tasks

Finally, confirm the file exists:

ls

ls

On Windows PowerShell:

Get-ChildItem

Get-ChildItem

Done when

A new project folder exists.
Git is initialized in that folder.
index.html contains the doctype and a valid head with meta tags.
The browser recognizes the page and displays its title.
git status lists index.html as an untracked file.

Course Outline

4 modules · 11 lessons

Project Setup & Semantic Structure

Styling & Responsive Layout

JavaScript Form Validation

Polish, Accessibility, & 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.