Semantic Landing Page with Client‑Side Validation
Computer Science
Semantic Landing Page with Client‑Side Validation
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.
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 lessonsLay the foundation: folder layout, index.html, and semantic sections that give the page meaning and SEO value.
Styling & Responsive Layout
3 lessonsTurn the raw markup into a polished, mobile‑first design using CSS variables, Flexbox, and media queries.
JavaScript Form Validation
3 lessonsAdd a contact form and make it work entirely in the browser, giving users immediate feedback on errors.
Polish, Accessibility, & Deployment
3 lessonsFinalize 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.htmlcontains the doctype and a valid head with meta tags.- The browser recognizes the page and displays its title.
git statuslistsindex.htmlas 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.