Sigmo by Sigmaschool

Free precourse

Ready to start ~8 hours6 projects · ~40 min a day ↓

Precourse: 6 Projects in 6 Days

What you'll learn: HTML, CSS, JS

“I can build 6 small projects with HTML, CSS, and JavaScript, then bring those foundations together in a final PeakFit gym member dashboard.”

The brief

Gym members often use a dashboard to view important information in one place. In this project you'll build PeakFit, a gym member dashboard using HTML, CSS, and JavaScript. The page prompts the user for their name when it loads and shows a personalised greeting, plus the member's active membership status, personal trainers, and today's fitness classes. This project focuses on structuring pages with HTML, styling with CSS, and adding simple interactivity with JavaScript.

💡 After completing the requirements, feel free to improve the design or add extra styling. You should understand every line of code, especially how the user's name is collected and displayed, because you'll be asked to explain it during submission.

What you'll build

An example only, not a specification, yours can look different. Click to enlarge.

Tools & skills

What you'll learn

  • Build a multi-section page with HTML, the skeleton of every website
  • Style cards, images, and layout with CSS until it looks like a real product
  • Ask for the user's name with prompt() and greet them personally
  • Drop live values into sentences with template literals
  • Change what is on the page from code with querySelector() and textContent
Start lessons
Ch 1

Day 0: Start Here

0/3Start
  1. Welcome: build 6 real projects in 6 days3 min
  2. Meet your instructors2 min
  3. Your 6-day plan3 min
Ch 2

Will AI Take Your Job?

0/3Start
  1. If AI writes the code, why learn to code?3 min
  2. The study: what leaning on AI does to a learner3 min
  3. So will there still be jobs? What the data says3 min
Ch 3

Day 1: Resume

0/16Start
  1. What you are building2 min
  2. Your tool: StackBlitz2 min
  3. Create your Resume project3 min
  4. Clear the extra files2 min
  5. Put your name on the page3 min
  6. See your site live2 min
  7. What is HTML?3 min
  8. How HTML tags work3 min
  9. The page skeleton (boilerplate)3 min
  10. Add headings3 min
  11. Add sections with lines3 min
  12. Add lists3 min
  13. How to use code parts3 min
  14. Paragraphs, bold, and links4 min
  15. Add your contact details3 min
  16. Publish your resume3 min
Ch 4

Power-Ups: Crew & Free Tools

0/2Start
  1. You shipped! Now claim your crew3 min
  2. Your free arsenal: 3 tools + the full map3 min
Ch 5

Day 2: Link in Bio

0/16Start
  1. What you are building2 min
  2. Set up your Links in Bio project3 min
  3. Add your name3 min
  4. Style your first text3 min
  5. What is CSS?2 min
  6. How CSS connects to HTML3 min
  7. Read a CSS rule3 min
  8. Add your profile photo3 min
  9. The image tag3 min
  10. Make the photo a circle3 min
  11. Add a tagline2 min
  12. Center everything with Flexbox3 min
  13. Create a link3 min
  14. Turn the link into a button4 min
  15. One font for the whole page3 min
  16. Add more buttons and publish3 min
Ch 6

Day 3: Simple BMI

0/15Start
  1. What you are building2 min
  2. Set up your Simple BMI project3 min
  3. Build the page3 min
  4. Two new tags: button and script3 min
  5. What is JavaScript?3 min
  6. Variables: storing data3 min
  7. The console and console.log()3 min
  8. Functions are recipes2 min
  9. Ask the user with prompt()3 min
  10. Collect name, weight, and height3 min
  11. Calculate the BMI3 min
  12. Show the result with alert()3 min
  13. Connect the button to a function4 min
  14. The anatomy of a function3 min
  15. Ship your BMI calculator2 min
Ch 7

Fuel: Why Builders Get Hired

0/5Start
  1. The hiring formula3 min
  2. Competence you can prove3 min
  3. Likeability makes collaboration easy3 min
  4. Find urgency and stay ready3 min
  5. Proof beats promises3 min
Ch 8

Day 4: Better BMI

0/14Start
  1. What you are building2 min
  2. Set up your Better BMI project3 min
  3. The design: a form3 min
  4. Build the form3 min
  5. The form and label tags3 min
  6. Text and number inputs3 min
  7. Line breaks and styling3 min
  8. From popups to on-page results3 min
  9. The DOM: getElementById3 min
  10. Reading input values3 min
  11. Update the page with innerHTML3 min
  12. Template literals3 min
  13. Round with toFixed()2 min
  14. Ship your Better BMI2 min
Ch 9

Day 5: Quote Generator

0/12Start
  1. What you are building2 min
  2. Set up your project2 min
  3. Build the quote card3 min
  4. Style each part by id3 min
  5. Grab the elements and split a quote3 min
  6. Arrays: lists of values3 min
  7. Index: reading a value from an array3 min
  8. Store a list of quotes3 min
  9. Math.random() and length3 min
  10. Math.floor() for a whole index3 min
  11. Put it all together3 min
  12. Ship it, and an optional challenge3 min
Ch 10

Day 6: Quiz App

0/8Start
  1. What you are building2 min
  2. Set up your Quiz App project2 min
  3. Build the quiz page3 min
  4. Read the user's answer3 min
  5. Conditionals: making decisions3 min
  6. Show correct or incorrect3 min
  7. Handle any capitalisation3 min
  8. Ship it, and an optional challenge3 min
Ch 11

Day 7 (Bonus): Personality Quiz

0/8Start
  1. What you are building2 min
  2. Set up the Personality Quiz project3 min
  3. Build the quiz page3 min
  4. Meet Axios2 min
  5. Get your OpenRouter AI key3 min
  6. Wire up the AI request4 min
  7. Save your code with Git and GitHub6 min
  8. Publish with GitHub Pages4 min
Get stuck and you are not alone. A free account comes with Sigmo AI, your coding buddy on every lesson, plus the Discord community. Log in or sign up free →