Frontend in 1 Week (Crash Plan)
A 7-day crash plan to get your hands dirty with HTML, CSS, JavaScript, and React on real BigDevSoon projects. For developers who want to ship something tangible by the end of the week.
Week-by-week plan
1 Week 1: From zero to shipped — in 7 days
Day 1–2: HTML semantics + CSS layout (Flexbox + Grid) · Day 3: JavaScript fundamentals (variables, functions, DOM) · Day 4: API calls + async/await · Day 5: First React component with useState · Day 6–7: Ship a real project end-to-end
Week 1: From zero to shipped — in 7 days
Day 1–2: HTML semantics + CSS layout (Flexbox + Grid) · Day 3: JavaScript fundamentals (variables, functions, DOM) · Day 4: API calls + async/await · Day 5: First React component with useState · Day 6–7: Ship a real project end-to-end
Goals
- • Day 1–2: HTML semantics + CSS layout (Flexbox + Grid)
- • Day 3: JavaScript fundamentals (variables, functions, DOM)
- • Day 4: API calls + async/await
- • Day 5: First React component with useState
- • Day 6–7: Ship a real project end-to-end
Projects
- → Business Card — /projects/business-card/ (Day 2 — pure HTML/CSS warm-up)
- → Todo App — /projects/todo-app/ (Day 5–7 — your Week 1 flagship)
Challenges
- → Day 1: Profile Card — /challenges/profile-card/
- → Day 2: Mobile Navigation — /challenges/mobile-navigation/
- → Day 3: Contact Us — /challenges/contact-us/
- → Day 4: Recipe — /challenges/recipe/
- → Day 5: Sign Up Page — /challenges/sign-up-page/
Practice Problems
- → Reverse String — /problems/reverse-string/
- → Sum Array — /problems/sum-array/
- → Count Vowels — /problems/count-vowels/
One week. Seven days. Real shipped work. This crash plan is for developers who already program in any language and want to bootstrap their frontend skills fast — by building, not watching tutorials.
Who this is for
- You write code in any language (Python, Java, Go, anything) but have never touched the frontend
- You have 2–3 hours per day for the next 7 days
- You want to ship something real by Sunday — not memorize syntax
If you want depth and you have more time, jump straight to Frontend in 1 Month or Frontend in 3 Months.
The plan
Day 1 — HTML semantics (~2 hours)
- Read the Profile Card challenge spec and implement it with semantic HTML only (no styling). Use
<header>,<main>,<article>,<button>. - Drill: Reverse String practice problem to warm up your JavaScript muscle.
Day 2 — CSS layout (~3 hours)
- Build Business Card — your first real BDS project. Pure HTML + CSS, Figma design provided.
- Drill: Mobile Navigation to practice responsive layouts.
Day 3 — JavaScript fundamentals (~3 hours)
- Learn variables, functions, control flow, arrays/objects, event listeners.
- Drill: Contact Us — add form validation in vanilla JS.
- Practice: Sum Array and Count Vowels.
Day 4 — Async + the DOM (~3 hours)
- Learn
fetch, promises,async/await. Manipulate the DOM withquerySelectorandaddEventListener. - Drill: Recipe — fetch and render data from a fake API.
Day 5 — React basics (~3 hours)
- Learn components, props, JSX,
useState. Just those four. - Drill: Sign Up Page — same form as Day 3, now in React with controlled inputs.
Day 6 — Start your flagship (~3 hours)
- Open Todo App on BigDevSoon. This is your Week 1 final project.
- Build the basic structure: input + add button + list. Use
useStatefor the todos array. Don’t worry about persistence yet. - Get it working before pretty.
Day 7 — Ship your flagship (~3–4 hours)
- Add: delete, toggle complete, filter (all/active/done), and localStorage persistence.
- Polish the styling to match the Figma design.
- Deploy to Vercel or Netlify (15 minutes — both are free, drag-and-drop).
- Share the live URL on Twitter/Dev.to with a one-line “Day 7 of frontend in a week — built this!” — public commitment compounds learning.
What you’ll have at the end of Week 1
- Two shipped projects you can put on a portfolio: Business Card + Todo App
- Five completed daily challenges
- Three practice problems solved
- A live URL to share
- A working understanding of HTML, CSS, vanilla JS, and React basics
Is this enough for a junior frontend job? No. Is this enough to keep going with confidence? Absolutely yes. This is the proof that you can ship real work — now go deeper.
Next steps after Week 1
- Don’t stop. Move straight to Frontend in 1 Month — Week 1 of that plan reinforces the fundamentals you just rushed through.
- Drill more practice problems at /problems/ — daily. Even 15 minutes a day builds JavaScript fluency fast.
- Try the editor with Merlin AI — open the live editor and use the AI tutor to explain anything that confused you this week.
Ready to start Day 1? Open Profile Card challenge and let’s go.