Webario rhino mascotWebario
🛠️

Build Projects

Projects are the only proof that you can code. Build things that solve real problems, push them to GitHub, and host them live.

1What makes a project impressive?

Depth beats quantity. A single deployed project you can explain in detail is worth more than ten half-finished tutorial clones.

  • It solves a real problem you actually care about.
  • It's deployed live at a URL anyone can visit.
  • You can explain every decision and trade-off.
  • It works on mobile and handles errors gracefully.

2How to plan before you code

Spend 15 minutes writing down the smallest version that's still useful:

A one-paragraph project brief
Project: Recipe Keeper
Problem: I forget recipes friends recommend.
MVP (v1):
  - Add a recipe (title, ingredients, steps)
  - See a list of recipes
  - Open one recipe
Later (v2): search, tags, share links
Ship the MVP first. Build the smallest thing that works, deploy it, then add features. A live v1 beats a perfect v3 that never launches.

3Pick your challenge

Portfolio Website

Beginner

Your own site with bio, skills, projects, and contact info. The first thing employers open.

Weather App

Beginner

Fetch weather from a public API and display it beautifully. Practise async/await and API integration.

Task Manager

Intermediate

Add, edit, delete, and filter tasks. Store data in a database and add authentication.

Blog Platform

Intermediate

Create posts, list them, and add a detail page. Include an admin dashboard for writing.

E-Commerce Store

Advanced

Products, cart, and checkout. A classic full-stack challenge that shows real-world skills.

SaaS App

Advanced

A subscription tool with accounts, billing, and a real problem to solve. Great for founders.

4Document it with a great README

A reviewer should understand and try your project in under a minute:

README.md
# Recipe Keeper

Save and organize recipes your friends recommend.

🔗 Live demo: https://recipe-keeper.example.com

## Features
- Add, view, and search recipes
- Works offline

## Run locally
npm install
npm run dev

Portfolio rules

  • Only include projects you can explain line by line.
  • Host every project on a live URL, not just GitHub.
  • Write a clear README with a live link and screenshots.
  • Make it work on mobile — employers open your site on their phone.
Next: turn projects into a job

Knowledge Check

Test what you learned. Each correct answer earns XP. up to 65 XP

1. What makes a portfolio project impressive to employers?

2. Which is the best FIRST project for a beginner?

3. Why should every project live on GitHub?

4. What belongs in a good project README?

5. You finished a tutorial project. What's the highest-value next step?