Becoming a web development "hero" involves mastering a range of skills and technologies. Here's a road map to guide you from scratch to a proficient web developer: 1. Fundamentals: HTML/CSS: Learn the basics of creating structured documents and styling them. JavaScript: Master the fundamentals of JavaScript, which is essential for web interactivity. 2. Frontend Development: Responsive Design: Understand how to create websites that work well on various devices and screen sizes. Frameworks: Learn popular frontend frameworks such as React, Angular, or Vue.js. State Management: Understand state management in the context of frontend frameworks. Build Tools: Familiarize yourself with tools like Webpack, Babel, and npm. 3. Backend Development: Node.js: Learn server-side JavaScript with Node.js. Express.js: Build web applications using the Express.js framework. Databases: Learn about databases; start with basics like SQLite and progress to more robust systems like MongoDB, MySQL, or PostgreSQL. ORMs: Understand Object-Relational Mapping with tools like Sequelize or Mongoose. 4. Full Stack Development: Integration: Learn how to integrate frontend and backend systems. RESTful APIs: Understand the principles of REST and how to create RESTful APIs. Authentication and Authorization: Implement user authentication and authorization mechanisms. 5. Advanced Frontend: Advanced Framework Features: Deepen your knowledge of React, Angular, or Vue.js. Web Performance Optimization: Learn techniques for optimizing website performance. Websockets: Understand real-time communication between the client and server. 6. DevOps: Version Control: Learn tools like Git for version control. CI/CD: Understand Continuous Integration and Continuous Deployment. Docker: Familiarize yourself with containerization for easy deployment. Cloud Platforms: Learn how to deploy applications on platforms like AWS, Azure, or Google Cloud. 7. Security: Web Security: Understand common web vulnerabilities and how to secure your applications. HTTPS: Learn about SSL/TLS and secure communication over the web. 8. Soft Skills and Best Practices: Documentation: Develop the habit of well-documented code. Testing: Understand the importance of testing and practice writing unit and integration tests. Collaboration: Learn how to work in a team and use collaboration tools. 9. Continuous Learning: Stay Updated: Web development is a rapidly evolving field, so continue learning about new technologies and best practices. Remember, becoming a "hero" is a continuous journey, and practical application of knowledge is as crucial as theoretical understanding. Build real projects, contribute to open source, and don't be afraid to explore new technologies as you progress.

1. Delta : Full Stack Web Development
MERN Stack (Mongo, Express, React, Node)
' Let not the fruit of action be your motive to action. Your
concern is with action alone, not with the fruit of action. '
- The Bhagavad Gita
APNA
COLLEGE

2. APNA
COLLEGE
What's new?
Our experience tells us that students on
average are 3 times more serious in a paid
batch. The completion of course and watch
time of students increases exponentially.
MERN
Full Stack Web Development
Live
500+
videos. Classes on
alternate days for next 4.5
months
12+ Hours of Live Sessions

3. Batch Overview
Complete Frontend Development
APNA
COLLEGE
Complete Backend Development
Complete Database (SQL & MongoDB)
Complete MERN Stack (MongoDB, Express, React,
Node)
500+
video
lectures
12+
Hours of Live
Sessions
Real Life and Industry Grade Projects
LIVE sessions on how to get a job, resume,
freelance, open source & more
Duration : 4.5 Months
Course access is for Two Years

4. Topics
APNA
COLLEGE
CATEGORY CHAPTERS OVERVIEW
Introduction
What is Web?
Client-Server Architecture
Setting Developer Environment
Understanding how and who built the web
General architecture used by websites; requires & response
Setting our environment on our laptop/computer
where we'll do coding
HTML
Intro to CSS
Selectors in CSS
Structure
Tags in HTML
Block v/s Inline
Tables
Forms
Introduction
Understanding Selectors
Selector Specificity
How to create the structure of a web page
Learning about various tags in HTML like <h1>, <p>, <a>, <img> etc
Understand the difference between inline and block HTML
elements
Learn to create tables in HTML
Learn about forms and form fields
What is CSS & how to use it in HTML, different styles of writing
Element, Class & Id selectors etc., combinators, pseudo
classes, pseudo elements, specificity in CSS
Understanding the specificity & priority of CSS selectors
Frontend

5. APNA
COLLEGE
CATEGORY
Styling with CSS
More CSS
Flexbox
Responsive Designs
Bootstrap
Tailwind CSS
CHAPTERS
Box Model
CSS Units
CSS Transition
CSS Transforms
Intro to Flex
Flex properties
Media Queries
Animations & 3d Space
Frontend frameworks
Components
Layouts(Grid system)
What is Tailwind?
OVERVIEW
Understanding the CSS box model
Learning about various CSS units used to style HTML elements, absolute &
relative
Understanding element transitions in CSS along with shorthand
Understanding element transformations in CSS along with shorthand
Understanding flexbox layout, cross axis, main axis etc.
flexbox direction, justify content, align items, align self, flexwrap, flex sizing,etc.
Learn about Media Queries & Viewport
Basics of CSS animation and how to animate HTML elements using animate.css
What are frontend frameworks and how to use one
Using various bootstrap elements like Navbar, buttons, cards etc
Learning about grid system of bootstrap
Understanding Tailwind as a Framework
Frontend

6. APNA
COLLEGE
CATEGORY CHAPTERS OVERVIEW
Tailwind CSS
Major Project
Starting with Javascript
Functions and
Arrays in JS
Objects and Timing
Events
Understanding DOM
Components
Creating Responsive Designs
CSS Major Project
Intro to JS
Variables, operators, conditional, loops
Scope
Hoisting
Functions expressions v/s
Function declaration
Arrays and its usage
Intro to Objects
Object functions
DOM
Covering button, navbar, fonts, margin, padding etc.
Understanding responsiveness in tailwind, @apply, @layer etc.
Focus on using concepts we have learn to build our project
What is JS and use of JS
Learning the basics of the language
Understanding scope in JS
What is hoisting and its application
Difference between function expression and declaration
What are arrays and using array functions like splice, slice etc.
What are objects, how to create them and using di erent notations to access object’s
data
Learn to iterate over objects, delete object properties, creating nested objects
Understanding DOM, what it is, how to access elements from the DOM
Frontend

7. APNA
COLLEGE
CATEGORY
Understanding DOM
Closures
Constructors and
Prototypes
Ashyncronous
JavaScript
jQuery
Ajax
CHAPTERS
Events
IIFE
Closures
Arrow functions
“this” keyword
Prototypes
Class
Promises, Callback
Timed Events
Async Await
Intro to jQuery
Event handling in jQuery
Intro to AJAX
OVERVIEW
How to manipulate DOM events in JS
What are immediately invoked function expressions
What are closures and its application
Learning about arrow functions and bindings in arrow functions
How does the “this” keyword works in JS
Discussing what are prototypes in JS, why do we use them and its application
Learning about using classes in JS and how to deal with class inheritance in JS
What are promises and callbacks in Javascript, Why to use
What is setTimeout, Event loops in javascript
What are Async Await in Javascript, Why that is important
What is jQuery and what is the need for it
Handling various JS events with jQuery and exploring the library
What are async requests, what is API and JSON
Frontend

8. APNA
COLLEGE
CATEGORY
Ajax
CHAPTERS OVERVIEW
Ajax requests with jQuery Making ajax requests with jQuery and handling errors
Promises
Git
Terminal
Major Project
Intro to promises
Intro to Git
Branches Git
workflow
Mastering Terminal
JS Major Project
What is a promise, how do we use promises and chaining promises
What is git and why it's helpful
Exploring branches in Git. How to create branches.
Understanding push, commits, pull requests and using git for teams and individual
Directories, Commands, paths, operations on files etc.
Create something classic by using the concept learn in JS
Frontend

9. APNA
COLLEGE
CATEGORY
Node.js
Writing Our First
Server
Creating Express
Apps
Intro to Databases
MongoDb
CHAPTERS
Intro to Node
Setting up
Intro to servers
Setting up node server
nodemon
MVC
Express
Ejs
Middleware
Database
SQL
MongoDB
DB operations
OVERVIEW
Introduction to the course, hello world with nodejs
Setting up tools and the project
What are servers and how one can use them
Beginning the project by setting up the very first node server
Introducing nodemon to monitor changes made to the server
MVC architecture for our server
What are frameworks, using express with node
What are template engines, setting up and working with Ejs
What is a middleware and how to use one
What are databases & why do we need them
what is SQL, SQL queries etc.
What is MongoDB, how to use it and setting up MongoDB for the project
CRUD operations for MongoDB
Backend

10. Working on our Mega Project
Mongoose
CHAPTERS
React Project
Components, Styling,
Redux & more
CHAPTERS
COLLEGE
CATEGORY OVERVIEW
MongoDb Linking MongoDB using Mongoose
Mega Project APIs, error handling, validation, express router, authentication,
deployment & many more concepts to be covered
React
CATEGORY OVERVIEW
React What is React, installation, react components, styling in react, component lifecycle
methods, react hooks, redux, redux toolkit etc.
Major Project Using the concepts we have learnt to build our project
APNA
Backend

11. APNA
COLLEGE
Lectures will be uploaded on Alternate Days
Till then, keep learning & keep exploring ❤
Start Data : 7th June, 2023