Tangy is building your next step
Shaping the lesson around what you want to make.
Tangy is building your next step
Shaping the lesson around what you want to make.
Computer Science
Build a production‑ready, mobile‑first landing page using semantic HTML, responsive CSS, and vanilla JavaScript validation. The project ends as a static site you can host on GitHub Pages, showcasing modern accessibility practices and responsive design.
Project Foundations
2 lessonsSet up the file structure and lay out the semantic HTML skeleton.
Responsive Layout
2 lessonsBuild a mobile‑first layout and enhance it for larger screens.
Accessible Contact Form Markup
2 lessonsCreate a fully accessible contact form using proper HTML and ARIA attributes.
Client‑Side Validation
2 lessonsAdd JavaScript that validates input fields and announces errors accessibly.
Feedback & Deployment
2 lessonsShow success feedback, reset the form, and publish the site.
Public lesson
You already know how to structure a document semantically. This time, make a clean project folder that you can build on for the React app.
Tasks
Open your terminal and run:
mkdir react-fullstack-app
cd react-fullstack-app
touch index.html
mkdir react-fullstack-app
cd react-fullstack-app
touch index.html
Tasks
Confirm you are in the new folder:
pwd
ls
pwd
ls
You should see the project path and an index.html file.
Tasks
Open index.html. Start with this skeleton, then fill in the missing semantic sections:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>__________</title>
</head>
<body>
<!-- Add the page header here -->
<header>
<!-- Add a short site or project name -->
<h1>__________</h1>
<!-- Add navigation with at least two links -->
<nav aria-label="__________">
<a href="__________">__________</a>
<a href="__________">__________</a>
</nav>
</header>
<!-- Add the page's primary content here -->
<main>
<!-- Create a placeholder hero section -->
<section>
<h2>__________</h2>
<p>__________</p>
<a href="__________">__________</a>
</section>
</main>
<!-- Add a simple footer -->
<footer>
<p>__________</p>
</footer>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>__________</title>
</head>
<body>
<!-- Add the page header here -->
<header>
<!-- Add a short site or project name -->
<h1>__________</h1>
<!-- Add navigation with at least two links -->
<nav aria-label="__________">
<a href="__________">__________</a>
<a href="__________">__________</a>
</nav>
</header>
<!-- Add the page's primary content here -->
<main>
<!-- Create a placeholder hero section -->
<section>
<h2>__________</h2>
<p>__________</p>
<a href="__________">__________</a>
</section>
</main>
<!-- Add a simple footer -->
<footer>
<p>__________</p>
</footer>
</body>
</html>
Use content that fits the app you plan to build. The links do not need to lead to finished pages yet, but their href values should be meaningful, such as #features or #contact.
Tasks
Open index.html in your browser.
Check that:
Tasks
Then inspect the page:
body
├── header
│ ├── h1
│ └── nav
├── main
│ └── section
└── footer
body
├── header
│ ├── h1
│ └── nav
├── main
│ └── section
└── footer
If the browser shows all four page regions and the inspector shows this structure, your semantic starting point is ready.
5 modules · 10 lessons
Project Foundations
Responsive Layout
Accessible Contact Form Markup
Client‑Side Validation
Feedback & 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.