Scribd
Upload
12 views

90 Days Roadmap for BasiFy..

The document outlines a 90-day roadmap for a Front-End Development Course, divided into three phases: HTML & CSS Mastery, JavaScript Basics & DOM Manipulation, and Advanced JavaScript & Front-End Frameworks. Each phase consists of weekly topics, daily lessons, and mini projects to reinforce learning. The course culminates in a capstone project and job readiness preparation.

Uploaded by

arfin habib
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
12 views

90 Days Roadmap for BasiFy..

The document outlines a 90-day roadmap for a Front-End Development Course, divided into three phases: HTML & CSS Mastery, JavaScript Basics & DOM Manipulation, and Advanced JavaScript & Front-End Frameworks. Each phase consists of weekly topics, daily lessons, and mini projects to reinforce learning. The course culminates in a capstone project and job readiness preparation.

Uploaded by

arfin habib
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/ 6

Follow us on facebook: https://www.facebook.

com/share/18R8FCe6hQ/
Subscribe to our YouTube channel: https://youtube.com/@basifydotorg?si=UzNBMTe1vWD-ZFDI

90 Days Roadmap for BasiFy Front-End Development Course

Phase 1: HTML & CSS Mastery (Days 1-30)

📅 Week 1: HTML Fundamentals


➢ Day 1: Introduction to Front-End Development
➢ Day 2: HTML Basics (Structure, Tags, Attributes)
➢ Day 3: Forms & Input Elements
➢ Day 4: Semantic HTML
➢ Day 5: HTML Tables & Multimedia
➢ Day 6: Accessibility Basics
➢ Day 7: Mini Project - Personal Portfolio Structure

📅 Week 2: CSS Basics

➢ Day 8: Introduction to CSS (Syntax, Selectors)


➢ Day 9: Box Model & Display Properties
➢ Day 10: Positioning & Flexbox
➢ Day 11: CSS Grid Basics
➢ Day 12: Colors, Typography & Responsive Units
➢ Day 13: Media Queries & Responsive Design
➢ Day 14: Mini Project - Responsive Blog Layout.

📅 Week 3: Advanced CSS

➢ Day 15: CSS Variables & Custom Properties


➢ Day 16: Animations & Transitions
➢ Day 17: CSS Preprocessors (SASS Basics)
➢ Day 18: CSS Frameworks (Bootstrap/Tailwind)
➢ Day 19: CSS Best Practices & Performance Optimization
➢ Day 20: Mini Project - Animated Landing Page
➢ Day 21: Review & Practice

📅 Week 4: Building Real Projects


➢ Day 22: Project Setup & File Structure
➢ Day 23: Building a Responsive Website
➢ Day 24: Adding CSS Animations & Effects
➢ Day 25: Mobile Optimization
➢ Day 26: Debugging & Testing CSS
➢ Day 27: Finalizing & Deploying the Project
➢ Day 28-30: Project - Complete Portfolio Website
Phase 2: JavaScript Basics & DOM Manipulation (Days 31-60)

📅 Week 5: JavaScript Foundations

➢ Day 31: Introduction to JavaScript


➢ Day 32: Variables & Data Types
➢ Day 33: Operators & Expressions
➢ Day 34: Functions & Scope
➢ Day 35: Loops & Conditionals
➢ Day 36: Arrays & Objects
➢ Day 37: Mini Project - To-Do List

📅 Week 6: DOM & Events

➢ Day 38: Introduction to the DOM


➢ Day 39: Querying & Modifying Elements
➢ Day 40: Event Listeners & Handling User Input
➢ Day 41: Forms & Validation
➢ Day 42: Local Storage & Session Storage
➢ Day 43: Fetch API & Basic API Requests
➢ Day 44: Mini Project - Weather App

📅 Week 7: ES6+ & Best Practices

➢ Day 45: Let, Const, Arrow Functions


➢ Day 46: Template Literals & Destructuring
➢ Day 47: Spread & Rest Operators
➢ Day 48: Modules & Imports
➢ Day 49: Async/Await & Promises
➢ Day 50: JavaScript Debugging & Error Handling
➢ Day 51: Mini Project - Notes App with Local Storage

📅 Week 8: JavaScript in Real-World Projects

➢ Day 52: Building a Dynamic Web App


➢ Day 53: API Integration & Fetching Data
➢ Day 54: State Management with JavaScript
➢ Day 55: Advanced Event Handling
➢ Day 56: Refactoring & Code Optimization
➢ Day 57-60: Project - Interactive Dashboard
Phase 3: Advanced JavaScript & Front-End Frameworks (Days 61-90)

📅 Week 9: JavaScript Deep Dive

➢ Day 61: Closures & Hoisting


➢ Day 62: Higher-Order Functions & Callbacks
➢ Day 63: Prototypes & Object-Oriented JS
➢ Day 64: Functional Programming Basics
➢ Day 65: JavaScript Performance Optimization
➢ Day 66: Mini Project - Custom Framework-Like Library
➢ Day 67: Review & Practice

📅 Week 10: Introduction to React.js

➢ Day 68: Understanding React & Virtual DOM


➢ Day 69: JSX & Components
➢ Day 70: Props & State
➢ Day 71: React Hooks (useState, useEffect)
➢ Day 72: React Router & Single Page Applications
➢ Day 73: Working with APIs in React
➢ Day 74: Mini Project - React Movie App

📅 Week 11: Advanced React & State Management

➢ Day 75: Context API & Global State


➢ Day 76: Redux Basics
➢ Day 77: Performance Optimization in React
➢ Day 78: React Testing Basics
➢ Day 79: Deploying React Applications
➢ Day 80-81: Project - Full-Stack Dashboard (React + API)
📅 Week 12: Capstone Project & Job Readiness

➢ Day 82-85: Final Project - Build & Deploy a Full Website


➢ Day 86: Preparing for Front-End Interviews
➢ Day 87: Git & GitHub Collaboration
➢ Day 88: Resume & Portfolio Building
➢ Day 89: Mock Interviews & Practice
➢ Day 90: Graduation Day - Showcase Your Projects!

You might also like