Frontend in 1 Month
An accelerated 4-week plan with real BigDevSoon projects, challenges, and problems. From HTML semantics to a shipped React portfolio piece. Designed for developers who can commit 2–3 hours per day.
Week-by-week plan
1 Week 1: HTML, CSS, and the web fundamentals
Semantic HTML — when to use header, main, article, section, button · Box model, positioning, stacking contexts · Flexbox for 1D layouts, Grid for 2D layouts · Responsive design with media queries and clamp()
Week 1: HTML, CSS, and the web fundamentals
Semantic HTML — when to use header, main, article, section, button · Box model, positioning, stacking contexts · Flexbox for 1D layouts, Grid for 2D layouts · Responsive design with media queries and clamp()
Goals
- • Semantic HTML — when to use header, main, article, section, button
- • Box model, positioning, stacking contexts
- • Flexbox for 1D layouts, Grid for 2D layouts
- • Responsive design with media queries and clamp()
Projects
- → Business Card — /projects/business-card/
- → The Veggie King — /projects/the-veggie-king/
Challenges
- → Profile Card — /challenges/profile-card/
- → Mobile Navigation — /challenges/mobile-navigation/
- → Recipe — /challenges/recipe/
- → Add To Bag — /challenges/add-to-bag/
2 Week 2: JavaScript core and the DOM
Variables, scope, closures, and `this` binding · Async/await, promises, and the event loop · DOM manipulation, events, forms, localStorage · Array/object methods (map, filter, reduce, spread)
Week 2: JavaScript core and the DOM
Variables, scope, closures, and `this` binding · Async/await, promises, and the event loop · DOM manipulation, events, forms, localStorage · Array/object methods (map, filter, reduce, spread)
Goals
- • Variables, scope, closures, and
thisbinding - • Async/await, promises, and the event loop
- • DOM manipulation, events, forms, localStorage
- • Array/object methods (map, filter, reduce, spread)
Projects
- → Todo App — /projects/todo-app/
- → Calculator — /projects/calculator/
Challenges
- → Contact Us — /challenges/contact-us/
- → Sign Up Page — /challenges/sign-up-page/
- → Password Generator — /challenges/password-generator/
- → Image Carousel — /challenges/image-carousel/
Practice Problems
- → Reverse String — /problems/reverse-string/
- → Sum Array — /problems/sum-array/
- → Count Vowels — /problems/count-vowels/
- → Two Sum — /problems/two-sum/
- → Find Max — /problems/find-max/
3 Week 3: React fundamentals
Components, props, and JSX · useState, useEffect, and event handling · Lists, keys, and conditional rendering · Data fetching with loading and error states
Week 3: React fundamentals
Components, props, and JSX · useState, useEffect, and event handling · Lists, keys, and conditional rendering · Data fetching with loading and error states
Goals
- • Components, props, and JSX
- • useState, useEffect, and event handling
- • Lists, keys, and conditional rendering
- • Data fetching with loading and error states
Projects
- → Quiz App — /projects/quiz-app/
- → Just Weather — /projects/just-weather/
Challenges
- → Card Wallet — /challenges/card-wallet/
- → Pricing Plans — /challenges/pricing-plans/
- → Movie Ticket — /challenges/movie-ticket/
Practice Problems
- → Palindrome — /problems/palindrome/
- → Sort Array — /problems/sort-array/
- → Multiply — /problems/multiply/
4 Week 4: Ship your flagship project
Take a Figma design and build it end-to-end · Deploy to Vercel or Netlify · Add the project to your portfolio with a live URL and case study · Get community feedback on your solution
Week 4: Ship your flagship project
Take a Figma design and build it end-to-end · Deploy to Vercel or Netlify · Add the project to your portfolio with a live URL and case study · Get community feedback on your solution
Goals
- • Take a Figma design and build it end-to-end
- • Deploy to Vercel or Netlify
- • Add the project to your portfolio with a live URL and case study
- • Get community feedback on your solution
Projects
- → Pokedex — /projects/pokedex/ (flagship — full React app with API)
Challenges
- → Notifications — /challenges/notifications/
- → Article Slider — /challenges/article-slider/
Practice Problems
- → Best Time Buy Sell Stock — /problems/best-time-buy-sell-stock/
One month is aggressive — but doable with 2–3 focused hours a day and a willingness to ship before you feel ready. By Week 4 you’ll have a deployed React app with API integration on a live URL. Real work, not “Hello World.”
Who this is for
- You have basic programming experience (any language)
- 2–3 hours per day, 5–6 days per week
- You want to learn frontend specifically — not full-stack
- You care more about shipping than understanding every edge case
If you’re brand new to programming, Frontend in 3 Months gives you the depth you need.
How to use this plan
- Don’t skip ahead. Each week builds on the previous. Week 3 React assumes you can write vanilla JS from Week 2.
- Ship the weekly project. Non-negotiable. Done > perfect.
- Use Merlin AI as a tutor, not a crutch. Open the live editor and ask the AI to explain concepts. Don’t ask it to write your project.
- Get feedback. Share your Week 4 project on Twitter/Dev.to. Public commitment compounds learning.
What you’ll have at the end
- 5 shipped projects with live URLs (Business Card, The Veggie King, Todo App, Calculator, Quiz App, Just Weather, Pokedex as flagship)
- 11 daily challenges completed
- 9 practice problems solved
- A working understanding of HTML, CSS, JavaScript, and React
- A portfolio with real work an employer can verify
This is enough to start applying for junior frontend roles.
After Week 4
- Drill more practice problems at /problems/ — JavaScript fluency is the biggest interview filter
- Read the Frontend Interview Playbook 2026 and the React Interview Playbook 2026
- Move to a more advanced project: Find Movies or Notely
- Keep shipping. One project every 1–2 weeks. The momentum is the point.
Ready to start Week 1? Open Business Card on BigDevSoon. Let’s go.