What should my very first portfolio project be?

The classics are a ToDo List, a Pomodoro Timer, or a Weather App fetching API data. You might think 'But everyone builds those!' - true, but employers look at *how* you built it. Clean code, bug-free forms, and a responsive mobile layout on a 'basic' app are way more impressive than a broken 'innovative' app.

What's the right way to Google errors when I get stuck?

Don't type 'my JS button is broke'. Copy the exact red error message from your console, like 'Uncaught TypeError Cannot read properties of null', and search that. Better yet, just paste your entire broken function and the error into ChatGPT or Claude. It's the modern way.

Does hosting (deploying) my app cost money?

If you're deploying static HTML/CSS/JS, platforms like GitHub Pages, Netlify, Vercel, and Cloudflare Pages offer incredibly generous 'Free Tiers'. Unless you're buying a custom domain name (like myname.com) or getting millions of hits, it's 100% free forever.

I finished the roadmap! What do I need to learn to get hired?

Congrats! The next 'Big Three' are: 1. A framework (React is king, Vue is great too). 2. TypeScript (JavaScript with strict rules to prevent bugs). 3. Git/GitHub (so you can collaborate with teams). Welcome to the real grind!

Ship function first; polish UI with a CSS framework later.

Shareable URL on your resume—reviewers can click and test.

🚀

Final Project

2 weeks Advanced

Applying everything to build an app.

Overview

What is this?

Build a complete web app combining HTML, CSS, and JS.

Why is it important?

Solidifies your skills. Great for your portfolio.

What you'll learn

Project Design
Incremental implementation
Deployment

Detailed Explanation

Design Process

Idea → Feature List → Priority → Build small.

Deployment

Host for free on GitHub Pages, Netlify, or Vercel.

Practical Steps

1
Sketch the Wireframes 10 mins

Before writing a single line of code, plan 'what it does' and 'how it looks' on paper.
- Decide what app to build (e.g. ToDo list)
- List the required data (task name, isCompleted)
- Draw rough boxes and buttons on physical paper
2
Build an Ugly Mockup First Hours

Prioritize making the JavaScript work before you waste time on CSS gradients.
- Connect HTML buttons to JS functions even if they look terrible
- Finish the core CRUD (Create, Read, Update, Delete) logic
- Only start polishing the CSS when there are no red errors in the Console
3
Deploy to the Internet 15 mins

Put your creation on a server so anyone in the world can see it.
- Create a GitHub account
- Upload your files to a 'Repository'
- Go to Settings -> Pages and turn on deployment
- Open the generated link on your phone

Career & real-world context

Capstone projects anchor portfolios and live-coding interviews.

Industry examples

Personal portfolio sites
Internal tool prototypes
Hackathon MVPs

Recommended study plan

Finish TODO → add localStorage → optional API → deploy to GitHub Pages.

Prerequisites

Capstone projects anchor portfolios and live-coding interviews.…

Frequently Asked Questions

What should my very first portfolio project be?: The classics are a ToDo List, a Pomodoro Timer, or a Weather App fetching API data. You might think 'But everyone builds those!' - true, but employers look at *how* you built it. Clean code, bug-free forms, and a responsive mobile layout on a 'basic' app are way more impressive than a broken 'innovative' app.
What's the right way to Google errors when I get stuck?: Don't type 'my JS button is broke'. Copy the exact red error message from your console, like 'Uncaught TypeError Cannot read properties of null', and search that. Better yet, just paste your entire broken function and the error into ChatGPT or Claude. It's the modern way.
Does hosting (deploying) my app cost money?: If you're deploying static HTML/CSS/JS, platforms like GitHub Pages, Netlify, Vercel, and Cloudflare Pages offer incredibly generous 'Free Tiers'. Unless you're buying a custom domain name (like myname.com) or getting millions of hits, it's 100% free forever.
I finished the roadmap! What do I need to learn to get hired?: Congrats! The next 'Big Three' are: 1. A framework (React is king, Vue is great too). 2. TypeScript (JavaScript with strict rules to prevent bugs). 3. Git/GitHub (so you can collaborate with teams). Welcome to the real grind!
Weak at design?: Ship function first; polish UI with a CSS framework later.
Why GitHub Pages?: Shareable URL on your resume—reviewers can click and test.

① Read the explanation. Next: ② Do exercises.

Congratulations! You are job-ready.

Consider learning a framework like React or Vue next.

② Do exercises (5 problems)

ツール一覧