15-Week Full Stack Web Development Study Plan
This plan divides 15 weeks into clear milestones, with 3 hours of study per day (1.5h video lectures, 1h structured
practice, 30–40m coding projects). It leverages active practice and regular review to improve retention 1 2 . For
example, writing code and building projects “is one of the most effective ways to cement new coding concepts in
your memory” 1 , and taking quizzes or self-tests (“retrieval practice”) greatly enhances retention 2 . Weekly
buffer/review days apply spaced repetition to reinforce learning 3 . Each week below has a theme (HTML, CSS,
JavaScript, etc.), with daily goals for video topics, hands-on exercises (e.g. FreeCodeCamp), and coding projects.
Built-in quizzes/assignments and buffer days are included to ensure steady progress and long-term mastery.
Week 1: Web Fundamentals & HTML
• Day 1: Video (1.5h): Course intro and web fundamentals (Internet, HTTP, browsers) 4 . Practice (1h):
FreeCodeCamp – Basic HTML and HTML5 challenges 5 . Coding (0.5h): Create a simple
index.html with basic structure (doctype, <head> , <body> ).
• Day 2: Video: HTML tags (headings, paragraphs, lists, links). Practice: FCC – HTML tags & links. Coding:
Add headings, paragraphs, images, and links to your page (e.g. a personal intro).
• Day 3: Video: More HTML (images, forms, tables). Practice: FCC – HTML forms. Coding: Build a contact
form (name/email inputs) on the page.
• Day 4: Video: Semantic HTML (div, span, block vs inline). Practice: FCC – HTML5 semantic sectioning.
Coding: Organize your page into semantic sections ( <header> , <nav> , <main> , <footer> ).
• Day 5: Video: Review HTML and deploy to browser. Practice: FCC – Responsive images, tables. Coding:
Finalize a basic multipage site: add an “About” page with navigation links to it.
• Day 6: Video: CSS Introduction (selectors, colors, font basics). Practice: FCC – Basic CSS styling. Coding:
Add a <style> to index.html : set background colors, fonts, margins.
• Day 7 (Review): Practice: Revisit tricky HTML topics; complete any course quizzes on HTML/CSS 2 .
Coding: Refine your site, fix bugs, and commit progress to GitHub.
Week 2: CSS & Tailwind Basics
• Day 1: Video: CSS Box Model (margin, padding, border). Practice: FCC – CSS box model exercises.
Coding: Adjust your page layout: add padding/margins so sections don’t overlap.
• Day 2: Video: CSS Layout (Flexbox introduction). Practice: FCC – Flexbox challenges. Coding: Use
Flexbox to layout navigation or a multi-column section on your site.
• Day 3: Video: Advanced CSS (grid layout or media queries). Practice: FCC – CSS Grid or media queries.
Coding: Make your site responsive: add a media query to adjust layout on smaller screens.
• Day 4: Video: Introduction to Tailwind CSS (utility classes). Practice: Tailwind’s interactive tutorial or
documentation. Coding: Convert one section of your site to use Tailwind classes (e.g. add utility
classes for padding/color).
• Day 5: Video: Tailwind – responsive design and customizing. Practice: Tailwind Playground – try
building a simple component (e.g. button) with classes. Coding: Build a navbar or card component
using Tailwind.
1
• Day 6: Video: CSS/Tailwind review. Practice: Practice debugging CSS issues. Coding: Work on a mini UI
project: e.g. create a responsive card grid or feature section using Tailwind.
• Day 7 (Review): Practice: Review CSS and Tailwind docs; take the course CSS quiz. Coding: Polish
styling on your site (consistent fonts/colors).
Week 3: JavaScript Fundamentals
• Day 1: Video: JavaScript basics (variables, data types). Practice: FCC – Basic JavaScript (variables,
console.log). Coding: Add a <script> to your site: declare variables and log to console.
• Day 2: Video: Control flow (if/else, loops). Practice: FCC – JS conditions and loops. Coding: Use JS to
loop through an array and display items on the page (e.g. list hobbies).
• Day 3: Video: Functions and Arrays. Practice: FCC – JS functions and arrays. Coding: Write a function to
add new list items (e.g. a to-do) dynamically to your site.
• Day 4: Video: DOM Manipulation basics. Practice: FCC – DOM challenges. Coding: Use
document.querySelector to select an element and change its content or style (e.g. toggle a
class on click).
• Day 5: Video: Events and interactivity (click events, form events). Practice: Mini exercises on event
listeners. Coding: Enhance your site: add a button that shows/hides a section or validates the contact
form.
• Day 6: Video: ES6+ features (let/const, arrow functions). Practice: FCC – ES6+ syntax. Coding: Refactor
previous JS code to use modern syntax (e.g. arrow functions).
• Day 7 (Review): Practice: Complete a JavaScript quiz; revisit any confusing concepts 2 . Coding: Build
a small interactive widget (e.g. a simple calculator or trivia prompt) to reinforce DOM skills.
Week 4: Advanced JS & Introduction to Backend
• Day 1: Video: Asynchronous JS – Promises and async/await. Practice: Online tutorial or FCC on
Promises. Coding: Write a function that fetches JSON from a public API and logs it.
• Day 2: Video: LocalStorage and JSON. Practice: FCC – practice storing data in localStorage. Coding:
Create a feature that saves user input (e.g. form data) to localStorage and retrieves it.
• Day 3: Video: Node.js introduction (runtime, npm, modules). Practice: Setup Node environment
locally. Coding: Build a “Hello World” Node server: initialize npm , install Express, write a simple
server ( app.get('/', ...) ).
• Day 4: Video: Express.js – routes and middleware. Practice: Follow an Express tutorial to create routes.
Coding: Extend your server with an API route (e.g. /api/hello that returns JSON).
• Day 5: Video: MongoDB/Mongoose introduction. Practice: MongoDB University basics or Atlas
quickstart. Coding: Connect to a MongoDB (e.g. Atlas free tier) and save a document (e.g. user
signup).
• Day 6: Video: User Authentication basics (JWT or sessions). Practice: Tutorial on JWT flow. Coding:
Implement a simple auth route (e.g. /login ) that returns a dummy token.
• Day 7 (Review): Practice: Test all API endpoints using Postman or Insomnia. Take any backend
quizzes. Coding: Finalize a mini backend project (e.g. a notes API) and push code to GitHub (start
using Git for version control).
2
Week 5: Review & Consolidation (Buffer Week)
• Day 1: Practice/Project: Review HTML/CSS/JS topics. Work on a portfolio website – plan its pages/
features. (CloudCannon notes that building a portfolio to showcase your skills is vital 6 .)
• Day 2: Practice: Revisit difficult topics (e.g. any JS or CSS concept you struggled with). Coding:
Continue building your portfolio site or personal project (add sections like “Projects” and “Contact”).
• Day 3: Practice: Do any leftover course quizzes/assignments on HTML/CSS/JS 2 . Coding: Add more
interactive elements (e.g. slideshow of projects, form validation).
• Day 4: Practice: Take timed coding challenges (e.g. solve 2–3 algorithmic problems on FreeCodeCamp
or Codewars). Coding: Debug and improve your projects – focus on code quality and organization.
• Day 5: Practice: Learn Git basics if not done: git init , commits, GitHub (recommend early use
7 ). Coding: Initialize a Git repository for your portfolio project; push it to GitHub.
• Day 6: Practice: Briefly explore advanced topics if needed (e.g. revisit Tailwind docs). Coding: Finalize
portfolio site – ensure mobile-responsive and polished UI.
• Day 7 (Review): Rest/Review: Light day. Browse notes, finalize any incomplete sections of your
projects, and commit all work.
Week 6: Node.js & Express (Backend Development)
• Day 1: Video: Deep dive into Node.js – modules, file system, environment variables. Practice: Try
reading/writing a file with Node. Coding: Build a basic Express REST API (routes for GET, POST).
• Day 2: Video: Express.js middleware and routing. Practice: Follow a tutorial to handle JSON body
parsing. Coding: Add middleware for JSON parsing and CORS; create an Express route that accepts
POST data and saves it.
• Day 3: Video: MongoDB and Mongoose – schemas and models. Practice: Mongoose quickstart guide.
Coding: Define a Mongoose model (e.g. User or Task ) and implement create/read endpoints.
• Day 4: Video: Building an authentication flow. Practice: Experiment with JSON Web Tokens (JWT).
Coding: Secure one of your API routes so it only returns data when given a valid token (even if it’s a
hardcoded token).
• Day 5: Video: Project structure and error handling. Practice: Learn about organizing Node projects.
Coding: Refactor your API into separate route and controller files; add error handling.
• Day 6: Video: Introduction to version control with Git (recommendation: learn Git early 7 ). Practice:
Work with branches and merges. Coding: Use Git: create a feature branch, make changes, merge
back to main.
• Day 7 (Review): Practice: Use Postman to test all endpoints and cover edge cases. Coding: Push your
backend project to GitHub; document API endpoints in a README.
Week 7: Databases & Advanced Backend (SQL, ORMs)
• Day 1: Video: Relational Databases – PostgreSQL basics. Practice: Use an online SQL editor to write
basic SELECT/INSERT queries. Coding: If possible, spin up a local Postgres or use a cloud DB; practice
connecting.
• Day 2: Video: Prisma ORM introduction (schema, migrations). Practice: Follow Prisma docs to set up a
model. Coding: Add Prisma to your Node app; create a schema, run migration to create tables (e.g. a
Post table).
• Day 3: Video: Drizzle ORM (alternative to Prisma). Practice: Quickstart guide. Coding: Try writing a
query with Drizzle (optional). Note: Focus on one ORM (Prisma) if time is tight.
3
• Day 4: Video: Handling authentication (JWT continued, hashing). Practice: Tutorial on hashing
passwords. Coding: Update your auth route to hash a password before saving a “User” in the
database.
• Day 5: Video: Deploying Node + Database locally. Practice: If using Docker, try a Postgres container.
Coding: Write a Dockerfile for your Node app (to prepare for containerization).
• Day 6: Practice: Work on a small full-stack API project (e.g. a simple blog engine: users, posts).
Coding: Implement create/read routes for blog posts and link them to user accounts.
• Day 7 (Review): Practice: Solve any remaining quizzes. Coding: Review your database models and API
code; ensure everything is committed and documented.
Week 8: Git & Docker Introduction
• Day 1: Video: Git and GitHub – basic workflow (clone, commit, push). Practice: Make new branches,
merge them. Coding: Collaborate: simulate teamwork by branching and merging your own code.
• Day 2: Video: Git advanced (rebasing, pull requests, GitHub Actions intro). Practice: Create a repo on
GitHub and push existing projects. Coding: Set up a simple GitHub Actions workflow (optional).
• Day 3: Video: Docker basics – images, containers. Practice: Install Docker Desktop and run hello-
world container. Coding: Write a basic Dockerfile to containerize your Node API (using node base
image).
• Day 4: Video: Docker for development – volumes and networks. Practice: Launch a database
container (e.g. Mongo or Postgres). Coding: Use docker-compose.yml to run your API and
database together (link them via network).
• Day 5: Video: Docker Compose essentials. Practice: Follow a tutorial to compose a multi-container
setup. Coding: Extend your Docker Compose: include a frontend or a second service.
• Day 6: Practice: Troubleshoot container issues; review Docker concepts. Coding: Containerize your
React frontend (if built) or create a small container with Nginx serving your portfolio site.
• Day 7 (Review): Practice: Run through all git and docker commands used so far. Coding: Build and
push a Docker image of your app to a registry (optional).
Week 9: React Fundamentals
• Day 1: Video: Introduction to React.js – JSX, components. Practice: CodeSandbox – build a simple
component. Coding: Create a new React app (using create-react-app or Vite) with a basic
component.
• Day 2: Video: State and props. Practice: Small exercises managing state in CodeSandbox. Coding: Add
a stateful component (e.g. a counter or toggle button) to your app.
• Day 3: Video: React Router – routing and navigation. Practice: Implement simple routes. Coding: Set
up a multi-page structure: e.g. Home and About routes with react-router-dom .
• Day 4: Video: Fetching data in React (useEffect, fetch API). Practice: Example: fetch data from a public
API (e.g. JSONPlaceholder). Coding: Write a component that fetches and displays a list of items (e.g.
posts).
• Day 5: Video: Forms and controlled components. Practice: Create a controlled form in a sandbox.
Coding: Add a form to your React app (e.g. a to-do input) and handle its submission/state.
• Day 6: Project: Build a small React project (e.g. a to-do list or weather widget). Coding: Focus on
completing that app: dynamic state updates, styling with Tailwind/CSS as needed.
• Day 7 (Review): Practice: Review key React concepts; debug any issues. Coding: Polish your React
project and commit it to GitHub.
4
Week 10: React Advanced (State Management)
• Day 1: Video: Context API for global state. Practice: Implement a simple Context (e.g. theme or auth).
Coding: Use Context in your app (pass a value to multiple components).
• Day 2: Video: Redux (Redux Toolkit) or Zustand introduction. Practice: Follow a basic Redux tutorial.
Coding: Integrate Redux into your app to manage one piece of state (e.g. a cart or login status).
• Day 3: Video: React Hooks (useEffect, useMemo, useCallback). Practice: Refactor code to use hooks
where appropriate. Coding: Optimize a component by applying useMemo or useCallback .
• Day 4: Video: React performance (code splitting, lazy loading). Practice: Example of React.lazy. Coding:
Lazy-load a route or component in your app.
• Day 5: Video: Testing React (Jest, React Testing Library basics). Practice: Write a simple unit test for a
component. Coding: Add one or two tests to your React project.
• Day 6: Coding Project: Connect your React app to the backend API you built (fetch from your Node
server). Coding: Show real data from your API in the React interface.
• Day 7 (Review): Practice: Take any React quizzes or review tutorials. Coding: Debug integration issues
and ensure the front-end state flow is smooth.
Week 11: Next.js & Full-Stack Integration
• Day 1: Video: Next.js fundamentals – Pages, SSR vs SSG. Practice: Create a basic Next.js app. Coding:
Build a couple of pages ( index.js , about.js ) and navigate between them.
• Day 2: Video: API Routes in Next.js. Practice: Write a sample API route (e.g. /api/hello ). Coding:
Move one of your backend endpoints into a Next API route to call it directly in Next.
• Day 3: Video: Data fetching in Next (getStaticProps, getServerSideProps). Practice: Example of pre-
rendering. Coding: Fetch data from an external API (or your own) using getServerSideProps and
display it.
• Day 4: Video: Dynamic routing in Next.js. Practice: Set up a dynamic route (e.g. [id].js ). Coding:
Create a page that displays details for an item (e.g. a blog post) based on dynamic route.
• Day 5: Video: Styling in Next (CSS Modules, Tailwind with Next). Practice: Configure Tailwind in Next.js.
Coding: Style your Next pages using Tailwind or CSS Modules.
• Day 6: Project: Build a small full-stack Next.js project (e.g. a blog or portfolio with API). Coding:
Integrate everything: fetch from your database using Next API routes, show list/detail pages.
• Day 7 (Review): Practice: Review Next.js docs on deployment. Coding: Test SSR vs SSG behavior;
ensure dynamic routes and data are working.
Week 12: Docker & DevOps Fundamentals
• Day 1: Video: Docker recap – building images. Practice: Use docker build to create an image of
your Node API. Coding: Run your API container locally to verify it works.
• Day 2: Video: Dockerizing Frontend (React/Next). Practice: Write a Dockerfile for your React or Next
app (serve it with Nginx or built-in server). Coding: Build and run the frontend image.
• Day 3: Video: Docker Compose for multi-container. Practice: Define services for frontend, backend,
and database in docker-compose.yml . Coding: Launch all services together and test connectivity
(e.g. Next calls Node API).
• Day 4: Video: DevOps introduction – CI/CD concepts. Practice: Browse GitHub Actions docs. Coding:
Create a basic GitHub Actions workflow that builds and tests your app on each push.
5
• Day 5: Video: Cloud services overview (AWS ECS/ECR, Heroku). Practice: Sign up for a cloud free tier
(AWS/GCP). Coding: Push your Docker image to Docker Hub or AWS ECR (practice authentication).
• Day 6: Practice: Ensure your compose setup is production-ready (volumes, env vars). Coding: Try
deploying your containers on a free platform (like Heroku with Docker or AWS Elastic Beanstalk).
• Day 7 (Review): Practice: Test your apps in containers; fix any networking issues. Coding: Document
the deployment steps in your README for reference.
Week 13: Deployment & Cloud Infrastructure
• Day 1: Video: AWS EC2 basics (spinning up a VM). Practice: Launch a free-tier EC2 instance. Coding:
SSH into it, install Node and run your API server manually.
• Day 2: Video: AWS ECR/ECS (container registry and service). Practice: Push an image to Amazon ECR.
Coding: Configure an ECS task to run your container (or use ECS Fargate).
• Day 3: Video: Frontend deployment (Vercel, Netlify, or S3). Practice: Deploy your Next.js/React app on
Vercel or Netlify. Coding: Link your GitHub repo to the hosting service and build.
• Day 4: Video: DNS & SSL (domain setup). Practice: Use a custom domain (or free one) and add HTTPS
via Let’s Encrypt (if on a server). Coding: Point your domain to the deployed apps.
• Day 5: Video: CI/CD pipeline example (GitHub Actions for AWS). Practice: Set up a pipeline that builds
and deploys to AWS on push to main. Coding: Automate deployment: on commit, update your live
app.
• Day 6: Project: Final full-stack project – deploy a complete app (e.g. a small e-commerce or social
feed). Coding: Ensure frontend and backend both live, using your domain or subdomains.
• Day 7 (Review): Practice: Test production deployment; monitor logs for errors. Coding: Optimize and
document the deployment (e.g. add health checks).
Week 14: Portfolio Projects & Refinement
• Day 1: Planning: List portfolio project ideas (blog, to-do app, e-commerce demo). Plan one big project
and smaller demos. Coding: Sketch out the layout of your portfolio site (showcase project links).
• Day 2: Coding: Start one major project (e.g. full-stack blog with Next.js + Mongo). Set up repositories.
• Day 3: Coding: Continue building the project: create backend models and corresponding frontend
pages.
• Day 4: Coding: Add authentication or other advanced feature to the project (e.g. user login for your
blog).
• Day 5: Coding: Polish the project’s UI/UX; ensure mobile-responsiveness. Deploy it (Vercel/AWS).
• Day 6: Coding: Work on your portfolio site itself: populate it with your bio, skills, and links to all
projects. Style it nicely using Tailwind or CSS frameworks.
• Day 7 (Review): Practice: Do a final pass on all projects: check for bugs, add documentation and
comments. Coding: Push final updates to GitHub; deploy portfolio site (Netlify, Vercel, or GitHub
Pages).
Week 15: Final Review & Catch-Up
• Day 1: Review: Identify any missed topics (e.g. Git branching, a JS concept, a React hook). Spend 30–
40m each on quick tutorials. Coding: Refine code where needed.
• Day 2: Coding: Improve any project’s features (add a bonus feature or optimization). Practice: Do one
more quiz or coding challenge to solidify weak areas.
6
• Day 3: Coding: Prepare for portfolio interviews: write clean README’s for projects, update your
LinkedIn/GitHub profiles. Practice: Research and write down answers for common interview
questions related to your projects.
• Day 4: Practice: Take a mock test (e.g. a full FCC module or timed quiz on a topic). Coding: Debug any
remaining issues in deployed apps.
• Day 5: Project: Add finishing touches to portfolio site (animations, SEO meta tags). Coding: Deploy
final version of portfolio; double-check all project links.
• Day 6: Practice: Review the entire curriculum; skim notes. Coding: Pack up source code, organize it
into a presentable format (GitHub repos, portfolio links).
• Day 7: Final Reflection: Rest and reflect on what you've learned. Celebrate completing the plan and
ensure your portfolio is ready to share 6 .
Each week’s daily goals balance theory (video) and hands-on practice, enforcing learning by doing 1 .
Weekly review days and quizzes use retrieval practice to lock in knowledge 2 . Building projects
(especially a portfolio) throughout the plan ensures you have real-world artifacts to demonstrate your
skills, as recommended for new developers 6 . Following this structured schedule and adjusting as needed
will keep you on track to finish the course in 3.5 months with a strong, interview-ready portfolio.
Sources: Effective learning strategies and web dev curriculum advice 1 2 7 4 6 .
1 Strategies for Retaining Coding Knowledge
https://www.linkedin.com/advice/0/what-do-you-youre-struggling-retain-information-sdz6c
2 The benefits of using quizzes in online courses | Canvas & Learning Tech Resources
https://u.osu.edu/gladden-9/2021/09/14/the-benefits-of-using-quizzes-in-online-courses/
3 Why Spaced Repetition Is Critical for Learner Retention
https://www.ottolearn.com/post/101-why-spaced-repetition-is-critical-for-learner-retention
4 5 6 7 Learning web development: a self-guided roadmap | CloudCannon
https://cloudcannon.com/blog/learning-web-development-a-self-guided-roadmap/
