3 Months Beginner

Frontend in 3 Months

A structured 12-week roadmap mapped to real BigDevSoon projects, daily challenges, and practice problems. From zero to a portfolio that lands junior frontend interviews. For people who want to do it right.

Week-by-week plan

Week 1: Web fundamentals + semantic HTML

How browsers parse and render HTML/CSS · Semantic HTML by default · Set up your local dev environment (editor, Git, terminal)

Goals

• How browsers parse and render HTML/CSS
• Semantic HTML by default
• Set up your local dev environment (editor, Git, terminal)

Projects

→ Business Card — /projects/business-card/

Challenges

→ Profile Card — /challenges/profile-card/
→ Mobile Navigation — /challenges/mobile-navigation/

Week 2: CSS layout: Flexbox

Box model and positioning · 1D layouts with Flexbox · Cascade and specificity

Goals

• Box model and positioning
• 1D layouts with Flexbox
• Cascade and specificity

Projects

→ The Veggie King — /projects/the-veggie-king/

Challenges

→ Add To Bag — /challenges/add-to-bag/
→ Music Events — /challenges/music-events/

Week 3: CSS layout: Grid + responsive

2D layouts with CSS Grid · Responsive patterns with media queries · Fluid typography with clamp(), aspect-ratio

Goals

• 2D layouts with CSS Grid
• Responsive patterns with media queries
• Fluid typography with clamp(), aspect-ratio

Projects

→ Character Generator — /projects/character-generator/

Challenges

→ Recipe — /challenges/recipe/
→ Hotel Booking — /challenges/hotel-booking/
→ Pricing Plans — /challenges/pricing-plans/

Week 4: JavaScript basics

Variables, types, control flow · Functions, scope, and closures · Arrays and objects

Goals

• Variables, types, control flow
• Functions, scope, and closures
• Arrays and objects

Projects

→ Calculator — /projects/calculator/

Challenges

→ Contact Us — /challenges/contact-us/
→ Sign Up Page — /challenges/sign-up-page/

Practice Problems

→ Reverse String — /problems/reverse-string/
→ Sum Array — /problems/sum-array/
→ Count Vowels — /problems/count-vowels/
→ Multiply — /problems/multiply/
→ Is Even — /problems/is-even/

Week 5: DOM manipulation + events

Select and modify DOM elements · Handle events (click, input, submit) · Forms, validation, localStorage

Goals

• Select and modify DOM elements
• Handle events (click, input, submit)
• Forms, validation, localStorage

Projects

→ Todo App — /projects/todo-app/

Challenges

→ Password Generator — /challenges/password-generator/
→ Card Wallet — /challenges/card-wallet/

Practice Problems

→ Two Sum — /problems/two-sum/
→ Find Max — /problems/find-max/
→ Find Min — /problems/find-min/

Week 6: Async JavaScript + APIs

Promises, async/await, the event loop · Fetch API, JSON, error handling · Loading states and optimistic UI

Goals

• Promises, async/await, the event loop
• Fetch API, JSON, error handling
• Loading states and optimistic UI

Projects

→ Just Weather — /projects/just-weather/

Challenges

→ Image Carousel — /challenges/image-carousel/
→ Article Slider — /challenges/article-slider/

Practice Problems

→ Palindrome — /problems/palindrome/
→ Sort Array — /problems/sort-array/
→ Factorial — /problems/factorial/

Week 7: React fundamentals

Components, props, JSX · useState and event handling · Lists, keys, conditional rendering

Goals

• Components, props, JSX
• useState and event handling
• Lists, keys, conditional rendering

Projects

→ Quiz App — /projects/quiz-app/

Challenges

→ Notifications — /challenges/notifications/
→ Movie Ticket — /challenges/movie-ticket/

Practice Problems

→ Three Sum — /problems/three-sum/
→ Best Time Buy Sell Stock — /problems/best-time-buy-sell-stock/

Week 8: React effects, hooks, data fetching

useEffect and cleanup · useRef, useMemo, useCallback, useReducer · Data fetching with loading + error states

Goals

• useEffect and cleanup
• useRef, useMemo, useCallback, useReducer
• Data fetching with loading + error states

Projects

→ Pokedex — /projects/pokedex/

Challenges

→ Job Board — /challenges/job-board/
→ Leaderboards — /challenges/leaderboards/

Practice Problems

→ Merge Sorted Lists — /problems/merge-sorted-lists/
→ Max Subarray — /problems/max-subarray/

Week 9: React routing + forms

Multi-page apps with React Router · Controlled inputs and form state · Form validation with helpful errors

Goals

• Multi-page apps with React Router
• Controlled inputs and form state
• Form validation with helpful errors

Projects

→ Blog — /projects/blog/

Challenges

→ User Profile — /challenges/user-profile/
→ FAQ — /challenges/faq/

Practice Problems

→ Group Anagrams — /problems/group-anagrams/
→ Merge Intervals — /problems/merge-intervals/

Week 10: State management + context

When to lift state vs colocate · Context API for theme, auth, locale · Intro to external stores (Zustand)

Goals

• When to lift state vs colocate
• Context API for theme, auth, locale
• Intro to external stores (Zustand)

Projects

→ Notely — /projects/notely/ (notes app with global state)

Challenges

→ Task Board — /challenges/task-board/
→ Shopping List — /challenges/shopping-list/

Practice Problems

→ Top K Frequent Elements — /problems/top-k-frequent-elements/
→ Product Except Self — /problems/product-except-self/

Week 11: Performance + deployment

Code splitting with React.lazy + Suspense · Memoization and React DevTools profiler · Deploy to Vercel with custom domain

Goals

• Code splitting with React.lazy + Suspense
• Memoization and React DevTools profiler
• Deploy to Vercel with custom domain

Projects

→ Dashboard — /projects/dashboard/

Challenges

→ Dashboard — /challenges/dashboard/
→ Invoices — /challenges/invoices/

Practice Problems

→ Longest Consecutive — /problems/longest-consecutive/
→ Container Most Water — /problems/container-most-water/

Week 12: Ship your portfolio flagship

Take a flagship Figma design and build it end-to-end · Deploy with a custom domain · Write a case study README · Share publicly and gather feedback

Goals

• Take a flagship Figma design and build it end-to-end
• Deploy with a custom domain
• Write a case study README
• Share publicly and gather feedback

Projects

→ Find Movies — /projects/find-movies/ (full-stack flagship — your portfolio piece)

Practice Problems

→ Word Break — /problems/word-break/

Three months gets you from zero to “I can build real frontend projects and explain how they work.” This plan is for people who want to do it right — proper fundamentals, no rushed CSS, no hand-wavey React.

Who this is for

You’re brand new to frontend (or brand new to programming entirely)
You have 1–2 hours per day, 6 days per week
You want depth, not surface familiarity
You want a portfolio that gets you hired at a junior role by Week 12

If you already know HTML/CSS and just want to learn React, skip to Weeks 7–12.

How to use this plan

One week at a time. The weeks stack. Skipping creates gaps.
Ship the weekly project. Even ugly. Even buggy. Done > perfect.
Drill the practice problems. 15–30 minutes each. They build JavaScript fluency faster than reading.
Use Merlin AI as a tutor. Open the live editor and ask the AI to explain. Don’t ask it to write your project — you’ll learn nothing.
Get feedback publicly. Share Week 4, 8, and 12 projects on Twitter/Dev.to/Reddit. Feedback catches blind spots.

Milestones

End of Week 3: Build a responsive landing page from a Figma design
End of Week 6: Build an interactive vanilla JS app with API calls
End of Week 9: Build a multi-page React app with forms, routing, and global state
End of Week 12: Ship a portfolio flagship — Find Movies or Notely — with live URL and case study

After Week 12

Start applying for junior roles. Your portfolio is ready.
Drill the Frontend Interview Playbook 2026 and React Interview Playbook 2026
Try Full-Stack in 1 Month — extend your shipped projects with backends
Keep shipping. One side project every 2–3 weeks
Contribute to open source — start with docs or small bug fixes

Ready to start Week 1? Open Business Card and let’s go. Twelve weeks from now you’ll have a portfolio you’d hire yourself for.

Ready to start Week 1?

Get full access with a 7-day free trial.

Start 7-Day Free Trial