Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
100 Days of Web Development
This 100 Days of Web Development is a structured path to learning web development in 100 days. This study plan breaks down web development concepts into daily tasks, starting with HTML, CSS, and JavaScript and covering modern web frameworks, web security concepts, and full-stack deployment. So, if you want a complete overview of web development, read this article, and for a detailed overview on each topic, visit the attached hyperlinks.
What is Web Development?
Web development is the process of creating and maintaining websites on the Internet. It involves three parts: first front-end development, which focuses on developing user interfaces; then back-end development, which involves creating server-side logic; and finally, database management, which stores and retrieves user data.
Web Development = Front-End + Back-End + DataBase
Table of Content
Foundation Phase (Days 1-25): HTML & CSS Basics
HTML and CSS are key part of web development. To learn web development first you need to start with HTML markup language, which is used to add structure to webpages.
Week 1: HTML Fundamentals
In the first week, you need to cover basic HTML concepts, how to display text, headings, hyperlinks, etc. Here is day-wise breakdown.
- Day 1: On the first day, learn what is HTML and why it is used for web development. Then cover basic tags in HTML using the reference below.
- Day 2: Cover tags related to handling texts in webpages like paragraphs, headers, sections, etc.
- Day 3: On the third day, learn how to add background color, set font color, types of color functions, and image handling in HTML.
- Day 4: On the fourth day, learn about ordered and unordered lists in HTML. Also covers hyperlinking, which involves linking pages together, linking images to web pages, and generating email links.
- Day 5: Learn how to design a table in HTML. Cover tags related to tables ( <td>, <tr>, <th>, <body>, and <thead>) and learn how to span multiple columns and rows to create complex tables.
- Day 6: Learn how to build forms in HTML. This should cover types of input elements, submit buttons, and their use cases. Also, learn about basic validation techniques without using JavaScript.
- Day 7: Now it's time to build a simple HTML project. Use the following reference to create a portfolio website, which will help you revise all the previous topics.
Week 2: CSS Fundamentals
In the second week, start learning basic CSS concepts like commonly used properties and selectors.
- Day 8: Start with learning about CSS selectors and their types, including class, id, and element selectors. Understand how to link a CSS file to an HTML file.
- Day 9: Learn the box model in CSS. Also cover properties like margin, padding, border, and how they affect layout.
- Day 10: Study colors and typography. Learn how to set background colors, text colors, and use CSS to style fonts.
- Day 11: Understand display properties and positioning. Learn about block, inline, inline-block elements, and positioning techniques like relative, absolute, and fixed.
- Day 12: Learn how to use Flexbox to arrange items horizontally and vertically in a container.
- Day 13: After learning Flexbox, start learning the Grid layout system, which has more features to arrange items and can be used for two-dimensional grid-based designs.
- Day 14: Apply your knowledge by styling the HTML project created earlier. Use CSS to improve the design of your portfolio website.
Week 3: Responsive Design
In the third week, start learning concepts of responsive web design, This includes media queries, container queries, responsive units, and responsive viewport.
- Day 15: Start with an introduction to responsive web design, learn what are the benefits of it, why it is used, etc. Also, go through what are the popular frameworks used for responsive design.
- Day 16: Learn about media queries, container queries, and breakpoints, which allow you to create designs that adapt to different screen sizes.
- Day 17: Learn how to make images and videos responsive using CSS properties like `max-width` and `height: auto`.
- Day 18: Explore different CSS units like em, rem, vh, and vw, which are essential for creating responsive layouts. Also, learn how to use media queries for specifying print page styles.
- Day 19: Create a responsive landing page as a project. Use the following reference for guidance:
Week 4: Advanced CSS
In the fourth week, learn advanced CSS techniques and best practices to create professional and scalable designs.
- Day 20: Learn about CSS variables and how to define and use custom properties. Learn Specificity to understand preference order for CSS rules. Also, learn about how to control overflowing texts in a container.
- Day 21: Next day, learn how to create visual effects using CSS animations and transitions.
- Day 22: Using animations and transitions, learn to build loaders and image gallery
- Day 23: Learn what are the common styles used for tables and images. Learn how to design a multi-column text layout.
- Day 24: Learn about popular CSS frameworks like Tailwind and Bootstrap. Learn what are the benefits of using it.
- Day 25: Work on creating the first version of your portfolio website. Combine all concepts learned so far to complete this project.
Interactive Phase (Days 26-50): JavaScript Fundamentals
This phase introduces JavaScript, the programming language that makes web pages interactive. You'll start with the basics and gradually move to advanced concepts and projects.
Week 5: JavaScript Basics
Learn the fundamental concepts of JavaScript and how it works.
- Day 26: Understand variables, data types, and operators. Learn how to declare variables using `var`, `let`, and `const`.
- Day 27: Learn control structures like `if/else` and loops (`for`, `while`) to control the flow of your program.
- Day 28: Understand functions, how to define them, and how scope works in JavaScript.
- Day 29: Study objects, their properties, and methods. Learn how to create and use objects in JavaScript. Types of Objects( Arrays, strings, etc)
- Day 30: Learn about arrays and strings, their methods, and how to manipulate array elements.
- Day 31: Get introduced to the Document Object Model (DOM) and how to manipulate HTML elements using JavaScript.
-
Day 32: Create a project for interactive form validation using all the topics learned so far.
- Interactive Form Validation Project
Week 6: Advanced JavaScript
In week 6, focus on more advanced features of JavaScript like ES6 features, Event Handling, Storage APIs, and Errors Handling. Here is day-wise breakdown.
- Day 33: Learn event handling in JavaScript to respond to user actions like clicking, hovering, and pressing keyboard switches.
- Day 34: Understand local storage and session storage for storing data in the browser. Learn to write storage script in Javascript and try to apply to an HTML page.
- Day 35: Explore modern ES6+ features like arrow functions and destructuring.
- Day 36: Learn about promises and async/await for handling asynchronous tasks.
- Day 37: Learn to use the Fetch API and understand how AJAX works for communicating with servers.
- Day 38: Understand error handling in JavaScript using `try`, `catch`, and `finally`.
-
Day 39: Create a weather app project that uses 'openWeatherMap API' to fetch weather details and display them in the browser.
- Weather App Project
Week 7: Modern JavaScript
Dive into advanced concepts and modern JavaScript practices.
- Day 40: Learn what are JavaScript modules and how to import/export them.
- Day 41: Understand Object-Oriented Programming (OOP) concepts and how to use classes in JavaScript.
- Day 42: Learn about Map, Set, and WeakMap for storing collections of data.
- Day 43: Explore regular expressions for pattern matching in text and validation.
- Day 44: Study how to manipulate dates and times in JavaScript.
- Day 45: Learn how to work with JSON, including parsing and stringifying data.
-
Day 46: Build a task management app to practice modern JavaScript concepts.
- Task Management App
Week 8: Developer Tools
Learn essential tools and practices for modern JavaScript development.
- Day 47: Learn how to debug JavaScript using ChromeDev Tools.
- Day 48: Understand npm for package management and how to install and use packages in your projects.
- Day 49: Learn about Webpack and its role in bundling JavaScript files.
-
Day 50: Complete the second version of your portfolio website by adding interactivity using JavaScript.
- Portfolio Website v2.0
Framework Phase (Days 51-75): Modern Web Development
This phase focuses on learning modern frameworks and backend basics to create full-stack applications.
Week 9: React Basics
React is a popular JavaScript library for building user interfaces. Although you can build UI with plain HTML and CSS, for advanced features and functionalities, React is a must. So it is important to learn React.
- Day 51: Set up a React application and learn JSX, the syntax for writing HTML-like code in JavaScript.
- Day 52: Understand components, props, and how to pass data between them.
- Day 53: Learn about states and state management in React, then learn what are hooks and the different types of hooks in React.
- Day 54: The useState and useEffect hooks are commonly used hooks in React for state management and API calls. So dedicate a full day to learning both `useEffect` and `useState` hooks.
- Day 55: Learn how to add events and handle events in React. Cover arrow method and bind method to pass arguments to the event handler.
- Day 56: Learn how to build application forms in React and manage form data, validation, and other features.
-
Day 57: Create a project: A Todo app in React to practice these concepts.
- React Todo App Project
Week 10: Advanced React
Start learning advanced features of React, such as context APIs, custom hooks, state management with Redux, etc. Here is day-wise breakdown.
- Day 58: Start learning the Context API in React. Understand how to pass information from the parent component to all its children without using props.
- Day 59: Learn how to create custom hooks in React. Understand the use of custom hooks to reuse logic across multiple components.
- Day 60: Learn to use React Router to implement navigation and routing in your application.
- Day 61: Learn how to use the useEffect hook to integrate APIs to fetch data from external sources and update the rendered content in real-time.
- Day 62: Learn the advanced state management principles using the Redux library of React. Understand how to use Redux API for state management in complex components.
- Day 63: Dedicate this day to learn all the concepts related to testing react applications. Learn what is JEST, how to use @testing-library library etc.
-
Day 64: Create a project: An e-commerce product page using React.
- E-commerce Product Page
Week 11: Backend Basics
Now it's time to start learning backend development and build RESTful APIs for communication with frontend frameworks.
- Day 65: For backend development, start learning the fundamentals of Node.js, create a javascript runtime using Node js, Try to set up a NodeJS environment and create your your first application using Node js backend.
- Day 66: After Node JS, start learning the Express.js web application framework. Learn to develop express js environment, then create a simple Hello World App, and then learn to manage REST APIs in express JS.
- Day 67: Learn more about the basic principles of RESTful API design, types of REST APIs, methods, and how to use rest API in a JavaScript environment.
- Day 68: Start learning MongoDB, which is a NoSQL database, used for storing and managing user data. Learn how to create a database, create collections, update date etc. Also learn how to integrate MongoDB into a JavaScript environment.
- Day 69: Learn to perform CRUD (Create, Read, Update, Delete) operations using MongoDB and Express.
-
Day 70: Implement user authentication using JSON Web Tokens (JWT).
- JWT Authentication
-
Day 71: Create a project: Build a RESTful API for a simple application.
- RESTful API Project
Project Phase (Days 76-100): Full Stack Development
This phase brings together your frontend, backend, and deployment skills to create complete full-stack applications with advanced features.
Week 12: Full Stack Integration
Learn to integrate the frontend with the backend and handle common challenges in full-stack development. Here is day-wise breakdown.
- Day 72: Learn how to connect the frontend with the backend using APIs. Cover different types of HTTP methods to call APIs, from front-end and back-end.
- Day 73: Learn how to set scaling for your webpage when large amounts of users are visiting your page at a time. This feature is required only if you are developing fully functional production-ready web applications.
- Day 74: Learn basic concepts of DBMS for designing proper database schemas. Learn how to normalize your database to consume less storage and retrieve data quickly.
- Day 75: Learn file systems in Node JS, how to handle uploaded files from users, store the file in minimum storage space etc.
- Day 76: Learn to implement error handling and logging mechanisms for quick debugging.
- Day 77: Learn what are the concepts required to optimize application performance for faster loading and responsiveness.
-
Day 78: Create a project: A Database management project with features like CRUD operations, authentication, and file uploads.
- Library Management System Project
Week 13: Advanced Features
Enhance applications with real-time updates, search, security, and other advanced features.
- Day 79: Learn how to implement real-time updates using WebSocket API. These are useful if you are building real-time applications like ChatApp, Video Call App, etc
-
Day 80: Learn how to add search functionality to filter content. Some search functionality can be implemented in the front-end itself using JavaScript. But sometimes data may be stored in backend, and need to be fetched from the server to be displayed to the user. So learn to implement optimized searching algorithms.
- Client-Side Searching
- Server Side Searching
- Day 81: Learn how to implement Pagination for your webpage. Pagination is the process of creating multiple chunks of large web pages and displaying those one-by-one to the end user.
- Day 82: Learn how to optimize images using image sprites and other methods for faster load times and better performance.
- Day 83: Learn the basics of SEO to improve search engine visibility. This will help your webpage to get ranked higher on google search results.
- Day 84: Learn what are the security best practices to safeguard your application.
-
Day 85: Create a project: A chat application with real-time messaging.
- Chat Application Project
Week 14: Deployment & DevOps
Deploy your applications to the web and learn the basics of DevOps for better software delivery.
- Day 86: Learn how to control different versions of web pages using Git and how to manage multiple repositories using Github. Learn to use GitHub copilot for simplify the web development process and manage code in GitHub.
- Day 87: Understand the basics of Continuous Integration and Continuous Deployment (CI/CD).
- Day 88: Learn Docker basics to containerize your applications.
- Day 89: Learn to deploy applications to cloud platforms like Heroku or Vercel.
- Day 90: Learn how to set up domains and configure DNS for your applications.
- Day 91: Learn what is SSL Certificates, why it is used, and install it in your projects.
- Day 92: Create a project: Deploy a full-stack application with all these components.
Week 15: Final Project
This week is dedicated to building and deploying a complete web application. Here is day-wise breakdown.
- Day 93: Plan the project, define requirements, and set up the development environment.
- Day 94-95: Develop the backend, APIs, database integration, and authentication.
- Day 96-97: Build the frontend with user interfaces for all types of screen sizes.
- Day 98: Connect frontend with backend and test the application for any potential issues.
- Day 99: Deploy the application to a live server like Heroku or Vercel.
- Day 100: Add final touches, write documentation, and present the project.
Project Ideas for Practice
-
Blog Platform: Create a blogging platform where users can write, edit, and publish articles. Add features like user authentication, comments, and tags, etc.
- Front-end: Use React.js, it can build dynamic components for blogging pages.
- Back-end: Use Django, a Python-based backend, easy to use.
- Database: Use PostgreSQL, which stores structured data like articles.
Example: Tutorialspoint Articles Section, This is a platform where users can write, read, publish, and review articles.
-
Booking System: Create a booking app for services like appointments or event registrations. Add features like availability checks and confirmation notifications.
- Front-end: Use Angular, It can handle dynamic forms.
- Back-end: Use Node.js, to manage multiple requests.
- Database: Use MongoDB, which stores flexible data.
Example: Google Flight Booking System, IRCTC Train Booking System
-
Personal Portfolio: Create a personal portfolio website to showcase your skills, projects, and experience.
- Front-end: Use HTML and Bootstrap CSS, for quick and responsive design.
- Back-end: Not needed.
- Database: Not needed
Example: Portfolio Website, This is a simple portfolio website designed using HTML and CSS, displaying work experience.
-
E-commerce Site: Build an online store with features like product listings, a shopping cart, and checkout. Use payment gateway APIs for handling payments.
- Front-end: Use Vue.js, It has reactive product listings.
- Back-end: Use Express.js, which can handle APIs efficiently.
- Database: Use MySQL, for relational data management.
Example: Flipkart, Amazon
-
Social Media Clone: Create a simplified version of a social media platform where users can create profiles, post updates, and interact with others through likes and comments.
- Front-end: Use React Js and React Native, For building web and mobile apps simultaneously.
- Back-end: Use Django
- Database: Use Firebase.
Example: Instagram, Facebook
-
Task Management App: Develop an app to manage tasks, set deadlines, and track progress. Add features like priority levels and reminders for better usability.
- Front-end: Use React.js
- Back-end: Use Flask
- Database: Use SQLite
Example: Google Tasks, A task management application developed by Google, which is included in Google Workspace.
-
Weather Application: Build a weather app that displays real-time weather data for location input. Use OpenWeatherMap or any other APIs to collect real-time weather data.
- Front-end: Use Vanilla JavaScript.
- Back-end: Use Node.js, Easy to handle API requests.
- Database: Not Needed.
Example: AccuWeather, Google Weather
-
Real-time Chat Application: Develop a chat app that supports real-time messaging using WebSocket. Add user authentication and group chat features, etc.
- Front-end: Use React.js, Easy to build real-time chat UI.
- Back-end: Use Socket.IO, WebSocket-based messaging.
- Database: Use MongoDB or Firebase, Easy to store chat messages.
Example: WhatsApp, Telegram, Google Chat
-
Job Board: Build a job portal where employers can post job openings, and users can search and apply for jobs. Include filtering and resume upload features for convenience.
- Front-end: Use Vue.js
- Back-end: Use Django.
- Database: Use PostgreSQL.
Example: Tutorialspoint Job Portal
Daily Practice Guidelines
- Spend at least 2 hours on each day's topic
- Build something small every day
- Document your learning
- Commit code to GitHub daily
- Review previous days' concepts regularly
Updated on: 2024-11-21T12:40:57+05:30
294 Views
Advertisements