Scribd
Upload
10 views7 pages

15-Week Full Stack Web Development Study Plan

The document outlines a comprehensive 15-week study plan for full stack web development, detailing daily goals and activities focused on various technologies such as HTML, CSS, JavaScript, and backend frameworks. Each week includes video lectures, structured practice, coding projects, and review days to reinforce learning and retention. The plan emphasizes active practice, quizzes, and building a portfolio to showcase skills, culminating in full-stack integration with Next.js.

Uploaded by

raunakedutube1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views7 pages

15-Week Full Stack Web Development Study Plan

The document outlines a comprehensive 15-week study plan for full stack web development, detailing daily goals and activities focused on various technologies such as HTML, CSS, JavaScript, and backend frameworks. Each week includes video lectures, structured practice, coding projects, and review days to reinforce learning and retention. The plan emphasizes active practice, quizzes, and building a portfolio to showcase skills, culminating in full-stack integration with Next.js.

Uploaded by

raunakedutube1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

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/

You might also like