100 Days of Frontend Development

What You'll Learn

Core Technologies

Master the essential skills for modern frontend development

HTML5 - Structure of web pages

CSS3 - Styling and layout

JavaScript - Interactivity and dynamic content

React - Building complex UIs

Strategy

How to Approach the Challenge

Follow these guidelines to make the most of your 100-day journey

Set Clear Goals

Define what you want to achieve by the end of the 100 days (e.g., build a portfolio, learn a specific framework, get a job).

Allocate Time

Dedicate a specific time each day for coding. Consistency is key to building lasting skills!

Choose Projects

Select projects that align with your goals and skill level. Start simple and gradually increase complexity.

Track Progress

Use a journal, blog, or social media to document your daily achievements and learning.

Seek Feedback

Share your work with others and ask for constructive criticism to improve faster.

Stay Flexible

Adjust your plan as needed. If you find a topic challenging, spend more time on it.

Curriculum

Project Ideas & Daily Tasks

A structured path from beginner to advanced frontend development

Beginner Level

Day 1-10: HTML & CSS Basics

Day 1: Set up your development environment (code editor, browser). Learn about HTML structure (tags, elements).
Day 2: Build a simple HTML page with headings, paragraphs, and lists.
Day 3: Learn about CSS selectors (element, class, ID) and apply basic styling (colors, fonts).
Day 4: Create a CSS stylesheet and link it to your HTML page. Practice styling text and backgrounds.
Day 5: Learn about the box model (margin, padding, border) and how it affects layout.
Day 6: Build a simple landing page with a navigation bar and a main content section.
Day 7: Create a personal portfolio website (static) with an "About Me" section and a list of projects.
Day 8: Design a responsive navigation menu using media queries.
Day 9: Recreate a basic webpage layout from a screenshot using HTML and CSS.
Day 10: Practice your HTML and CSS skills by building a simple blog layout.

Day 11-20: JavaScript Fundamentals

Day 11: Learn about JavaScript variables, data types, and operators.
Day 12: Practice using conditional statements (if/else) and loops (for, while).
Day 13: Learn about JavaScript functions and how to define and call them.
Day 14: Build a to-do list application with add, delete, and mark as complete functionality.
Day 15: Create a simple calculator that can perform basic arithmetic operations.
Day 16: Learn about JavaScript arrays and objects and how to manipulate them.
Day 17: Develop a quiz game with multiple-choice questions and scoring.
Day 18: Build a tip calculator that calculates the tip amount and total bill based on user input.
Day 19: Learn about DOM manipulation and how to access and modify HTML elements using JavaScript.
Day 20: Practice your JavaScript skills by building a simple interactive form.

Day 21-30: Responsive Design & CSS Frameworks

Day 21: Learn about responsive design principles and how to use media queries.
Day 22: Make your previous projects responsive by adding media queries to your CSS.
Day 23: Learn about CSS frameworks like Bootstrap or Tailwind CSS.
Day 24: Build a website using Bootstrap and its grid system.
Day 25: Create a website using Tailwind CSS and its utility classes.
Day 26: Build a grid-based layout for a blog using CSS Grid.
Day 27: Create a responsive e-commerce site layout with product listings and a shopping cart.
Day 28: Learn about CSS animations and transitions and add them to your projects.
Day 29: Practice your responsive design skills by building a website that looks good on different screen sizes.
Day 30: Refine your CSS skills by building a more complex layout, such as a dashboard or a single-page application.

Intermediate Level

Day 31-40: Asynchronous JavaScript & APIs

Day 31: Learn about asynchronous JavaScript and callbacks.
Day 32: Understand Promises and how to use them for asynchronous operations.
Day 33: Learn about Fetch API and how to make HTTP requests.
Day 34: Fetch data from a public API (e.g., JSON Placeholder) and display it on a page.
Day 35: Build a weather app that uses a weather API to display current weather conditions.
Day 36: Learn about error handling in asynchronous JavaScript and how to handle API errors.
Day 37: Create a simple chat application using a real-time API (e.g., Firebase Realtime Database).
Day 38: Implement a search feature that filters data from an API based on user input.
Day 39: Learn about API authentication and how to make requests to protected APIs.
Day 40: Practice your API skills by building a more complex application that uses multiple APIs.

Day 41-50: Introduction to React

Day 41: Set up a React development environment (using Create React App).
Day 42: Learn about React components and how to create and render them.
Day 43: Build a simple React component (e.g., a button, a card) and pass data to it using props.
Day 44: Create a counter application with React using the useState hook.
Day 45: Build a form with React and handle user input using the useState hook.
Day 46: Learn about React JSX and how to use it to write HTML-like code in JavaScript.
Day 47: Convert your to-do list app to React and manage state using useState.
Day 48: Learn about React component lifecycle methods (or useEffect hook).
Day 49: Practice building React components by creating a small application with multiple components.
Day 50: Refine your React skills by building a more complex UI, such as a multi-step form or a dashboard.

Day 51-60: State Management

Day 51: Learn about state management in React using useState and useContext.
Day 52: Build a shopping cart application with React and manage state using useContext.
Day 53: Learn about the useReducer hook for more complex state management.
Day 54: Create a blog with multiple pages using React Router and manage state.
Day 55: Learn about global state management solutions like Redux or Zustand.
Day 56: Implement Redux in a simple React application.
Day 57: Connect your React app to a backend API and manage data flow using Redux.
Day 58: Learn about advanced Redux concepts like middleware and selectors.
Day 59: Practice your state management skills by building a more complex application with nested components.
Day 60: Refine your state management skills by optimizing the performance of your React application.

Advanced Level

Day 61-70: Advanced React Concepts

Day 61: Learn about custom hooks and how to create reusable logic.
Day 62: Build a custom hook for fetching data from an API.
Day 63: Learn about higher-order components (HOCs) and how to use them.
Day 64: Create a HOC for adding authentication to your React components.
Day 65: Learn about render props and how to use them for code sharing.
Day 66: Build a more complex application, like a social media dashboard, using advanced React concepts.
Day 67: Implement user authentication in your React app using Firebase Authentication.
Day 68: Learn about server-side rendering (SSR) with Next.js.
Day 69: Build a simple SSR application with Next.js.
Day 70: Practice your advanced React skills by contributing to an open-source React project.

Day 71-80: Testing and Optimization

Day 71: Learn about unit testing with Jest and React Testing Library.
Day 72: Write unit tests for your custom hooks and HOCs.
Day 73: Learn about integration testing and how to test component interactions.
Day 74: Write integration tests for your React application.
Day 75: Learn about performance optimization techniques like memoization and code splitting.
Day 76: Optimize the performance of your web applications using Chrome DevTools.
Day 77: Learn about accessibility best practices for React applications.
Day 78: Implement accessibility features like ARIA roles and keyboard navigation.
Day 79: Learn about web security best practices and common vulnerabilities.
Day 80: Audit and improve an existing React application for testing, optimization, and accessibility.

Day 81-90: Full-Stack Basics

Day 81: Learn about backend development and how it works with frontend.
Day 82: Choose a backend technology (Node.js with Express, Python with Flask/Django).
Day 83: Create a simple API using your chosen backend technology.
Day 84: Connect your frontend React application to your backend API.
Day 85: Learn about databases (SQL or NoSQL) and how to integrate them.
Day 86: Build a full-stack application (e.g., a blog with a database).
Day 87: Learn about user authentication and authorization in full-stack apps.
Day 88: Learn about deployment and hosting platforms.
Day 89: Deploy your full-stack application to a hosting platform (Heroku, Netlify, AWS).
Day 90: Practice your full-stack skills by building a more complex application.

Day 91-100: Portfolio and Final Projects

Day 91: Review your previous projects and select the best ones for your portfolio.
Day 92: Refine your portfolio website and make it visually appealing.
Day 93: Write detailed descriptions of your projects highlighting your contributions.
Day 94: Add your portfolio to your GitHub profile and make it easy to find.
Day 95: Work on a challenging personal project that demonstrates your skills.
Day 96: Get feedback on your personal project from other developers.
Day 97: Prepare for job interviews by practicing common frontend questions.
Day 98: Start applying for frontend development jobs or internships.
Day 99: Continue to learn and explore new technologies.
Day 100: Celebrate your achievements and share your 100-day journey!

Learning Resources