This full‑stack development course by freeCodeCamp (Tomi Tokko & Beau Carnes) is an excellent foundation. Here's how you can break it into actionable practice units and get obsessed with it:
🎯 Weekly Learning Plan with Projects
Week 1–2: HTML & CSS
Topics: Semantic HTML, box model, Flexbox, CSS Grid, responsive design, basic accessibility. Practice: Build a personal portfolio homepage: header, hero, about section, project cards. Watch the HTML/CSS sections of the video. Code along literally – replicate examples on your own. Then add modifications: new sections, different layouts, choose fonts/colors. Week 3–4: JavaScript Fundamentals
Topics: Variables, data types, functions, DOM manipulation, events, fetch API. Practice: Create a dynamic to‑do list or weather widget. Watch JS basics segments. Pause and rebuild examples: event listeners, DOM updates. Build your own variant: e.g. to‑do list with add/delete/toggle features. Week 5–6: Version Control & Deployment
Topics: Git basics, GitHub, Replit or Netlify deployment. Practice: Push your portfolio and JS projects to GitHub, deploy your site. Watch version control & deployment segment of the video. Install Git, init repo, make commits, push to GitHub. Deploy portfolio via GitHub Pages or Replit as shown. Week 7–9: Backend with Node.js
Topics: Node.js, Express.js, REST API, middleware. Practice: Build a simple notes API (CRUD operations). Watch the backend portion of the course. Code along to build endpoints (GET /notes, POST /notes, etc.). Test with Postman or fetch from a minimal frontend. Week 10–12: Database Integration
Topics: MongoDB or SQLite, schema design, Mongoose/ORM. Practice: Connect the notes API to a database. Watch data storage section. Design a Note schema (title, content, date). Implement create/read/update/delete with data persistence. Week 13–14: Full‑Stack Integration
Practice: Combine your portfolio frontend with your notes API. Build a small UI: form + list of notes. Use fetch to GET/POST to your Express/MongoDB backend. Deploy backend (Heroku/Render) and frontend (Netlify/Replit). Ongoing: Advanced Topics & Job Prep
Topics: Authentication (JWT/Passport), React/Vue, testing, CI/CD. Practice: Improve your projects step by step; add user login, use React. Job skills: Build a capstone project, add README, polish UI, write technical blog posts. 📆 Daily Practice Routine
Watch & Code: Watch ~30 min, code for 60 min. No passive watching. Reflect & Extend: Think how you’d customize examples. Try it! Version Control Every Day: Commit daily. Write meaningful commit messages. Deploy Frequently: Whenever something is working, deploy it. Iterate & Document: Add README updates, project screenshots, & record key lessons. ✅ Track Your Progress
---------------------------------
💡 Tips to Stay Obsessed
Mini‑challenges: style your app, add animations, improve accessibility. Time‑boxed deep dives: spend 30 min digging into browser DevTools, JS quirks, CSS tips. Peer feedback: share code on Discord, Reddit r/learnprogramming, or GitHub. Reflect weekly: write a quick blog post or journal entry summarizing what you learned. Mock interviews: Practice algorithms on LeetCode and system design basics. 🚀 Getting Your First Job
Start applying around Week 10–12—once you have real projects to showcase. Tailor your portfolio to roles you’re targeting (e.g. front‑end, full‑stack). Use LinkedIn, local meetups, and dev Slack communities to network. Practice soft skills: explain your project, talk through your code, show enthusiasm. 
