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
Guide Core Check from their current proficiency in HTML, CSS, and React components to a polished, static landing page that uses semantic markup, responsive design, and vanilla‑JS validation, ready to be deployed on GitHub Pages.
Foundations: Project Scaffold & Semantic Markup
2 lessonsSet up the project folder, create the HTML entry point, and lay out a fully semantic page structure.
Styling & Responsiveness
3 lessonsTurn the static markup into a responsive, modern layout using CSS variables, Flexbox, Grid, and media queries.
Interactive Contact Form
3 lessonsCreate an accessible contact form and add client‑side validation using vanilla JavaScript.
Polish & Publish
3 lessonsFinalize SEO/meta tags, run accessibility checks, and deploy the static site to GitHub Pages.
Public lesson
You already know the structure of an HTML document. This time, you’ll create the project’s home folder and put that structure under Git version control so later React work has a clean starting point.
Tasks
In your terminal, move to the place where you keep coding projects. Then create a folder for this app and enter it.
Replace the bracketed name with your own project name:
mkdir [project-name]
cd [project-name]
mkdir [project-name]
cd [project-name]
Tasks
Check that you are inside the new folder:
pwd
pwd
The path printed should end with your project name.
Tasks
Initialize a Git repository in this folder:
git init
git init
Tasks
Check that Git sees an empty working directory:
git status
git status
You should see a message saying you are on a branch and that there are no commits yet.
Tasks
index.htmlCreate a file named index.html in the project folder, then add this document structure. Fill in the missing document type and page title yourself:
[document type declaration]
<html>
<head>
<meta charset="UTF-8">
<title>[a title for your app]</title>
</head>
<body>
</body>
</html>
[document type declaration]
<html>
<head>
<meta charset="UTF-8">
<title>[a title for your app]</title>
</head>
<body>
</body>
</html>
Save the file.
The meta and title elements give the browser useful document information; the body can remain empty for now because the app has not been built yet.
Tasks
Open index.html in your browser.
You should see a blank page, but the browser tab should show the title you chose. Open the browser’s developer tools and check the Console as well. There should be no HTML parsing errors.
If the tab title is missing, check the text inside your <title> element. If the page is not found, check that the file is named exactly index.html.
Tasks
Return to the terminal and run:
git status
git status
You should see index.html listed as an untracked file.
Tasks
Now stage it:
git add index.html
git add index.html
Tasks
Run the status check again:
git status
git status
This time, index.html should appear under changes ready to be committed.
Tasks
Before moving on, confirm all four items:
.git directory and index.html.index.html shows the chosen tab title.git status shows index.html staged.You now have the plain HTML entry point that the React setup will build on next.
4 modules · 11 lessons
Foundations: Project Scaffold & Semantic Markup
Styling & Responsiveness
Interactive Contact Form
Polish & Publish
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.