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
A hands‑on, project‑driven course that takes you from your existing HTML/CSS knowledge to a complete, deployable static site featuring a polished contact form that validates input in the browser.
Project Foundations
3 lessonsDefine the site purpose, plan layout, and create the initial HTML skeleton.
Styling the Landing Page
3 lessonsTurn the raw markup into a polished, responsive design using modern CSS.
Interactive Form Validation
3 lessonsAdd vanilla JavaScript to validate user input in the browser and give immediate feedback.
Polish, Test, and Deploy
3 lessonsFinalize accessibility, optimise assets, and publish the site for free.
Public lesson
Your React app is ready for a plan before you build more components. Today, you’ll decide what the landing page should help a visitor do and sketch the page’s structure.
Tasks
First, name the visitor and the one action you want them to take. Keep the goal focused on the visitor, not on the technology.
Use this sentence frame:
This landing page helps [type of visitor] understand [main value or problem] and [one action you want them to take].
Write your own version:
This landing page helps __________________ understand __________________ and __________________.
Tasks
Your sentence is ready when it:
Tasks
If you have listed several actions, choose the most important one for now. Other actions can wait.
Tasks
List the sections your goal requires. Start with no more than five.
For each section, write what it should accomplish:
| Section | What the visitor should learn or do |
|---|---|
| __________________ | __________________ |
| __________________ | __________________ |
| __________________ | __________________ |
| __________________ | __________________ |
| __________________ | __________________ |
A useful landing page often has a beginning that explains the value, a middle that builds understanding or trust, and an ending that gives the visitor a next step. Use only the sections your project actually needs.
Tasks
Read your goal again. You should be able to point to a section that supports the main action. Remove any section that does not help the visitor reach that action.
Draw boxes on paper or in a drawing tool. Do not worry about colors, fonts, images, or exact spacing yet. Label each box with its content or purpose.
Use this structure as a starting point, replacing the labels with your own:
┌─────────────────────────────────────┐
│ Header: [brand] [navigation] │
├─────────────────────────────────────┤
│ Hero: │
│ [main message] │
│ [short explanation] │
│ [primary action] │
├─────────────────────────────────────┤
│ [section name] │
│ [what this section shows] │
├─────────────────────────────────────┤
│ [section name] │
│ [what this section shows] │
├─────────────────────────────────────┤
│ Final action: [ ] │
├─────────────────────────────────────┤
│ Footer: [ ] │
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│ Header: [brand] [navigation] │
├─────────────────────────────────────┤
│ Hero: │
│ [main message] │
│ [short explanation] │
│ [primary action] │
├─────────────────────────────────────┤
│ [section name] │
│ [what this section shows] │
├─────────────────────────────────────┤
│ [section name] │
│ [what this section shows] │
├─────────────────────────────────────┤
│ Final action: [ ] │
├─────────────────────────────────────┤
│ Footer: [ ] │
└─────────────────────────────────────┘
Tasks
Your sketch can be rough. Use rectangles, arrows, and words. If a section contains cards, show three small boxes rather than designing the cards.
Tasks
Trace the visitor’s path from top to bottom:
Tasks
If the main action appears in several places, mark one as the primary action and make the others secondary or remove them.
Tasks
Look at the landing page you already have, if one exists. Write two short notes:
Then mark your wireframe with one ★ beside the section you expect to build first. Choose a section small enough to render and inspect on its own, such as the header or hero.
Tasks
You have completed this lesson when you have:
4 modules · 12 lessons
Project Foundations
Styling the Landing Page
Interactive Form Validation
Polish, Test, and Deploy
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.