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 a solid HTML/CSS foundation to a polished, accessible landing page that validates a contact form using only vanilla JavaScript. No backend, no paid services—just a static site you can host for free.
Project Foundations & Semantic Structure
3 lessonsSet up the project folder, initialize a clean HTML skeleton, and lay out the page using semantic sections.
Accessible Contact Form Markup
3 lessonsDesign a contact form that follows WCAG guidelines, using proper labels, ARIA attributes, and error message placeholders.
Vanilla JavaScript Validation
4 lessonsWrite lightweight, dependency‑free JS that validates each field on input and on submit, showing friendly error messages.
Responsive Design & Finishing Touches
4 lessonsMake the landing page look great on mobile, tablet, and desktop using Flexbox/Grid and media queries.
Deploy and Showcase
3 lessonsPublish the static site to GitHub Pages and verify that validation works in the live environment.
Public lesson
You already know the structure of an HTML document, so this time focus on creating the project cleanly and checking that the browser can load it.
Tasks
Open a terminal and move to the place where you keep your projects. Then create and enter a new folder:
mkdir core-check-site
cd core-check-site
mkdir core-check-site
cd core-check-site
Tasks
Check that you are inside the new folder:
pwd
pwd
Tasks
On Windows PowerShell, use:
Get-Location
Get-Location
The displayed path should end with core-check-site.
index.htmlTasks
Create a file named exactly index.html:
touch index.html
touch index.html
Tasks
If touch is unavailable, create a new empty file in your editor and save it as index.html inside core-check-site.
Tasks
Open the folder in your editor, then add this document structure. Choose your own page title in place of the comment:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><!-- write your page title here --></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><!-- write your page title here --></title>
</head>
<body>
</body>
</html>
Tasks
Replace the comment with a short title, such as Core Check, so the browser tab is identifiable.
Your file should now have:
<!DOCTYPE html> before everything elsehtml elementhead and body inside ittitle inside headTasks
From your editor’s file explorer, right-click index.html and choose Open in Browser.
Tasks
If that option is not available, open your computer’s file manager, find core-check-site/index.html, and double-click it.
The page should appear blank. That is expected: the body does not contain visible content yet.
Tasks
Check two things:
Tasks
Right-click the blank page and choose Inspect or View Page Source.
Tasks
In the source, verify that:
head contains your titlebody is present, even though it is emptyWhen all three are visible, the new project folder and its starting HTML document are ready for the next step.
5 modules · 17 lessons
Project Foundations & Semantic Structure
Accessible Contact Form Markup
Vanilla JavaScript Validation
Responsive Design & Finishing Touches
Deploy and Showcase
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.