Month 1: Foundations of HTML, CSS, and JavaScript

Week 1: HTML & Basic Web Structure

Day 1 - 3: HTML Fundamentals

 Learn:
o Basic HTML structure, elements, tags, and attributes.
o Headings, paragraphs, lists, links, images.
 Tasks:
o Build a simple webpage (e.g., personal introduction page).
o Explore SEO basics and accessibility.
 Project:
o Create a personal homepage using semantic HTML.

Day 4 - 6: HTML Forms & Semantic HTML

 Learn:
o Forms: input types, buttons, checkboxes, radio buttons.
o Semantic HTML: <header>, <footer>, <nav>, <article>, etc.
o Best practices for accessibility.
 Tasks:
o Build a contact form.
o Research HTML5 semantic tags and use them to structure your page.
 Project:
o Enhance the personal homepage with a contact form and semantic HTML.

Day 7: Review and Practice HTML

 Tasks:
o Review everything learned about HTML so far.
o Refactor existing HTML code for better accessibility and semantics.
 Project:
o Create a small multi-page website (e.g., a blog or portfolio homepage).

Week 2: Introduction to CSS

Day 8 - 10: Basic CSS Styling

 Learn:
o CSS syntax, selectors (class, id, element), properties.
o Styling text, fonts, colors, margins, padding.
 Tasks:
o Practice styling your HTML page.
 Project:
o Apply basic styles to your personal homepage, including fonts, colors, and layout
adjustments.

Day 11 - 13: Box Model & CSS Layout Techniques

 Learn:
o Box model: margin, padding, border.
 o Layout techniques: inline, block, float, flexbox.
 Tasks:
o Create a two-column layout using Flexbox.
 Project:
o Refactor your homepage to use Flexbox for layout.

Day 14: CSS Positioning and Z-Index

 Learn:
o CSS positioning: static, relative, absolute, fixed, sticky.
o Z-index for layer ordering.
 Tasks:
o Experiment with positioning to create unique layouts.
 Project:
o Create a fixed navigation bar and apply positioning to your layout.

Week 3: Advanced CSS Techniques

Day 15 - 17: Responsive Design with Media Queries

 Learn:
o Responsive design principles.
o Media queries for different screen sizes.
 Tasks:
o Add media queries to make your webpage responsive.
 Project:
o Ensure your homepage is responsive across multiple devices (desktop, tablet,
mobile).

Day 18 - 19: Flexbox Deep Dive

 Learn:
o Flexbox properties (justify-content, align-items, flex-wrap, etc.).
o Advanced layout techniques with Flexbox.
 Tasks:
o Build a more complex layout using Flexbox.
 Project:
o Create a responsive, multi-section homepage using Flexbox.

Day 20 - 21: CSS Grid Introduction

 Learn:
o CSS Grid layout system: rows, columns, grid-template.
 Tasks:
o Create a complex grid-based layout.
 Project:
o Rebuild your homepage using CSS Grid for more precise layout control.
Week 4: CSS Animations and Advanced Styling

Day 22 - 24: CSS Transitions & Animations

 Learn:
o Transitions: duration, timing functions.
o Animations: keyframes and animation properties.
 Tasks:
o Add hover effects and animations to your page.
 Project:
o Create smooth transitions and animations for buttons, images, and sections.

Day 25 - 27: CSS Variables and Preprocessors (Sass)

 Learn:
o CSS variables for reusability.
o Introduction to Sass: nesting, variables, mixins, partials.
 Tasks:
o Refactor your CSS using variables and Sass.
 Project:
o Apply Sass to your stylesheets for better organization and maintainability.

Day 28 - 30: Review & Portfolio Page

 Tasks:
o Review all CSS concepts.
o Refactor previous projects for better design and responsiveness.
 Project:
o Build a complete portfolio landing page using HTML, CSS, Flexbox, Grid, and
Sass.

Month 2: JavaScript Mastery

Day 1 - 3: JavaScript Fundamentals

 Learn:
o JavaScript syntax, variables, data types (numbers, strings, booleans).
o Operators and expressions.
 Tasks:
o Practice basic JavaScript functions and output results in the browser.
 Project:
o Add basic JavaScript interactions to your portfolio (e.g., form validation).

Day 4 - 6: JavaScript Functions & Control Structures

 Learn:
o Functions: declarations, arguments, return values.
o Conditionals: if/else, switch statements.
o Loops: for, while.
 Tasks:
o Write a JavaScript function that validates user input.
  Project:
o Add dynamic form validation to your contact form using JavaScript.

Day 7: Review and Practice

 Tasks:
o Review everything learned in JavaScript basics.
o Refactor previous code to include more functions and control structures.
 Project:
o Enhance your portfolio with more interactive features using JavaScript.

Week 2: DOM Manipulation

Day 8 - 10: DOM Elements and Selectors

 Learn:
o DOM tree, accessing elements (getElementById, querySelector).
o Changing HTML content and styles dynamically.
 Tasks:
o Practice modifying DOM elements using JavaScript.
 Project:
o Add dynamic content updates to your webpage (e.g., show/hide sections).

Day 11 - 13: DOM Events

 Learn:
o Event handling: click, keypress, mouseover, etc.
o Event listeners: addEventListener, event delegation.
 Tasks:
o Create interactive elements with event-driven code.
 Project:
o Add event listeners to buttons and forms on your webpage.

Day 14: Review and DOM-Based Project

 Tasks:
o Review DOM manipulation and events.
o Build a simple project (e.g., an interactive gallery or a todo list).
 Project:
o Add a DOM-based interactive feature to your portfolio.

Week 3: JavaScript Arrays & Objects

Day 15 - 17: Arrays & Array Methods

 Learn:
o Arrays: declaration, access, iteration.
o Common array methods (map, filter, reduce, push, pop).
 Tasks:
o Practice using arrays and methods to manipulate data.
  Project:
o Build a todo list or a gallery using JavaScript arrays.

Day 18 - 20: Objects & Object Methods

 Learn:
o Objects: properties, methods.
o Working with objects in loops and functions.
 Tasks:
o Create and manipulate objects.
 Project:
o Add a feature to your portfolio that uses JavaScript objects (e.g., a product or user
database).

Day 21: JavaScript ES6 Features

 Learn:
o ES6 syntax: let, const, arrow functions, template literals, destructuring.
o Modern array/object methods.
 Tasks:
o Refactor previous code to use ES6 syntax.
 Project:
o Update your portfolio’s JavaScript code using ES6 features.

Week 4: Asynchronous JavaScript & APIs

Day 22 - 24: Asynchronous JavaScript (Promises & Fetch API)

 Learn:
o Asynchronous programming: callbacks, promises, async/await.
o Fetch API for making HTTP requests.
 Tasks:
o Fetch data from an external API and display it on your webpage.
 Project:
o Add a feature to your portfolio that fetches data from an API (e.g., a weather app or
GitHub user data).

Day 25 - 27: JSON & Working with APIs

 Learn:
o Working with JSON data.
o Parsing and displaying JSON data in JavaScript.
 Tasks:
o Practice making HTTP requests and handling responses.
 Project:
o Build a dynamic section on your webpage that loads external data (e.g., user
comments or blog posts).

Day 28 - 30: Review & Build a JavaScript Project

 Tasks:
o Review all JavaScript topics.
 o Build a complete JavaScript project (e.g., a calculator, a quiz, or a simple game).
 Project:
o Add the final interactive JavaScript feature to your portfolio.

Month 3: Advanced JavaScript, React, and Projects

Day 1 - 3: JavaScript Closures, Prototypes, and Classes

 Learn:
o Advanced JavaScript topics: closures, prototypes, classes.
 Tasks:
o Implement closure-based functions and prototype-based objects.
 Project:
o Refactor existing JavaScript code using advanced techniques like prototypes and
classes.

Day 4 - 6: Git & Version Control

 Learn:
o Git basics: commits, branches, merges.
o Using GitHub for version control and collaboration.
 Tasks:
o Set up Git for all your projects.
 Project:
o Push all your portfolio code to GitHub and track changes using Git.

Day 7: Review and Practice Git

 Tasks:
o Review everything learned in Git.
o Practice collaborating on a project using Git branches and pull requests.

Week 2: Introduction to React

Day 8 - 10: React Basics

 Learn:
o What is React? Components, JSX, props.
o Introduction to create-react-app.
 Tasks:
o Build a basic React app with components.
 Project:
o Create a simple React component (e.g., a header or a card) for your portfolio.

Day 11 - 13: React State & Props

 Learn:
o React state: useState, props, event handling.
 Tasks:
 o Create a dynamic component using React state and props.
 Project:
o Add interactivity to your React app by using state and props (e.g., a form or todo
list).

Day 14: React Hooks (useEffect)

 Learn:
o React hooks: useEffect for handling side effects like data fetching.
 Tasks:
o Fetch data in React using useEffect.
 Project:
o Build a dynamic app that fetches external data (e.g., API data) using React hooks.

Week 3: Advanced React

Day 15 - 17: React Router and Single Page Applications (SPA)

 Learn:
o React Router: building a single-page app (SPA) with multiple views.
 Tasks:
o Create routes for different pages in your app.
 Project:
o Convert your portfolio into a React SPA with navigation.

Day 18 - 20: Advanced State Management (Context API, Redux Intro)

 Learn:
o Managing global state in React with Context API.
o Introduction to Redux for state management.
 Tasks:
o Implement global state management in your React app.
 Project:
o Use React Context API or Redux to manage complex state in your project.

Day 21: Review and React Project

 Tasks:
o Review React concepts: components, state, hooks, routing.
o Refactor your app for better state management and performance.
 Project:
o Build a complete React app (e.g., a dashboard or blog) using everything learned so
far.

Week 4: Final Projects & Deployment

Day 22 - 24: Project Work

 Tasks:
 o Build or finalize a major front-end project (e.g., an e-commerce site, portfolio, or
blog).
 Project:
o Develop a full-scale project incorporating all HTML, CSS, JavaScript, and React
skills.

Day 25 - 26: Website Deployment

 Learn:
o How to deploy a website (GitHub Pages, Netlify, Vercel).
 Tasks:
o Deploy your portfolio and projects online.
 Project:
o Finalize and deploy your portfolio with all your completed projects.

Day 27 - 30: Review and Polish Portfolio

 Tasks:
o Review all key concepts from the 3-month roadmap.
o Polish your portfolio and fix any remaining bugs or issues.
 Project:
o Ensure your portfolio showcases all your skills and is ready for job applications or
client work.