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
Guided, bite‑size modules that take you from your current HTML/CSS/React basics to a polished, responsive landing page featuring a fully‑validated contact form—all built with plain HTML, CSS, and vanilla JavaScript.
Project Setup & Review
2 lessonsEnsure the existing codebase is clean, versioned, and ready for the new landing page work.
Semantic HTML & Basic Styling
3 lessonsBuild the landing page markup using semantic tags and style it with clean, responsive CSS.
Client‑Side Form Validation
3 lessonsCreate a contact form and implement JavaScript validation that gives immediate feedback to users.
Public lesson
You’re about to work beside an in-progress React app, so the first job is to understand what is already there and isolate your landing-page work from the app’s existing branch.
Open a terminal and move to the folder where you keep projects:
Tasks
cd path/to/your/projects
cd path/to/your/projects
Tasks
Clone the repository. Replace the URL with your project’s actual repository URL:
git clone <repository-url>
cd <repository-folder>
git clone <repository-url>
cd <repository-folder>
Tasks
Check that Git recognizes the project:
git remote -v
git status
git remote -v
git status
You should see:
originmain or masterFind the bug
Something's wrong — can you spot it?
If Git says the folder is not a repository, stop there and check that you ran cd with the correct folder name.
Tasks
Run these commands:
git branch --show-current
git status --short
git log -1 --oneline
git branch --show-current
git status --short
git log -1 --oneline
Write down:
git status --short printed anything:A fresh clone should normally have no uncommitted changes. That gives you a clean starting point for the landing page.
Find the bug
Something's wrong — can you spot it?
If git status --short prints file names, do not delete or reset them. Those changes may belong to someone else or may be important to the in-progress app.
From the repository root, list the top-level files and folders:
Tasks
find . -maxdepth 2 \
-not -path './.git' \
-not -path './node_modules' \
-print | sort
find . -maxdepth 2 \
-not -path './.git' \
-not -path './node_modules' \
-print | sort
Now inspect the project’s package scripts:
cat package.json
cat package.json
Look for clues such as:
src/ — commonly where React components and application code livepublic/ — commonly where static files livesrc/components/ — a likely home for reusable interface piecessrc/pages/ or src/views/ — possible page-level componentsvite.config.*, webpack.config.*, or similar — build setupdev, build, and testDo not move or rename anything yet. This audit is meant to show you where the existing app begins and where a landing page could fit without guessing.
Tasks
Create a short note somewhere outside the repository, or in your project notes, with this shape:
Project:
Current branch:
Start commit:
App entry file:
React components folder:
Page/view folder:
Development command:
Build command:
Project:
Current branch:
Start commit:
App entry file:
React components folder:
Page/view folder:
Development command:
Build command:
Fill it from what you found rather than copying the example names.
Use the development script shown in package.json. For many React projects, it will be one of these:
Tasks
npm install
npm run dev
npm install
npm run dev
or:
npm install
npm start
npm install
npm start
Only run the command that actually appears in the scripts section.
Tasks
Open the local URL printed by the terminal. Check that the existing React app loads before you create the landing-page branch.
Visible check:
Ctrl+C returns you to the shellThis separates an existing project problem from anything you do next.
Because this is a fresh clone with a clean starting point, create the new branch from the current project branch:
Tasks
git switch -c landing-page
git switch -c landing-page
Verify the branch change:
git branch --show-current
git status
git branch --show-current
git status
The first command should print:
landing-page
landing-page
The working tree should still be clean. Creating the branch does not alter the existing branch; it gives your landing-page work its own name and history.
Tasks
List all local branches:
git branch
git branch
You should see both the original branch and landing-page. The * should be beside landing-page.
Tasks
Now compare the two branches:
git diff <original-branch>...landing-page
git diff <original-branch>...landing-page
Replace <original-branch> with the branch name you recorded earlier, such as main.
The command should produce no output because the new branch currently points to the same commit as the original branch.
Tasks
Finally, save the branch setup:
git status
git log --oneline --decorate -1
git status
git log --oneline --decorate -1
Your final check should show:
landing-pageHEAD -> landing-pageAt this point, the repository has been audited and the landing-page work has a safe place to begin.
3 modules · 8 lessons
Project Setup & Review
Semantic HTML & Basic Styling
Client‑Side Form Validation
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.