Course Outline: Full stack Web Development

Duration: 6 months (24 weeks)

Technologies to be covered: Development (HTML, CSS, JavaScript, React.js,
Firebase, Node.js, Express.js, MongoDb, GSAP and Framer Motion)

Sessions: 4 days per week

Total Sessions: 96

Phase 1: HTML Fundamentals (8 Classes)

Week 1: Introduction to HTML

 Class 1:
 Introduction to web development
 Overview of the course structure
 Classwork: Discuss the significance of web development and its career opportunities.
 Assignment: Write a short essay on the importance of web development.
 Class 2:
 Introduction to HTML
 Basic HTML structure (doctype, html, head, body)
 Introduction to version control with Git
 Hosting using Netlify, GitHub Pages, and Vercel
 Classwork: Create a basic HTML document.
 Assignment: Create a basic HTML document with a heading, paragraph, and list.

 Class 3:
 HTML elements and tags
 Meta tags and their uses
 Text formatting tags (headings, paragraphs, bold, italic, quotes, abbreviation)
 Lists (ordered, unordered, descriptive)
 Classwork: Create a nested list.
 Assignment: Create a nested list with different list types.
 Class 4:
 Links and anchor tags
 Images and multimedia
 Tables (basic structure, rows, columns)
 Classwork: Create a webpage with links, images, and a table.
 Assignment: Create a webpage with links, images, and a table.
Week 2: Advanced HTML

 Class 5:
 Forms (input fields, labels, buttons)
 Form attributes and validation
 Classwork: Create a registration form.
 Assignment: Create a registration form with different input types and validation.
 Class 6:
 HTML5 semantic elements (header, footer, article, section)
 Classwork: Enhance a webpage using semantic elements.
 Assignment: Enhance a webpage using semantic elements.
 Class 7:
 Revision of key concepts
 Classwork: Q&A session and review of previous assignments.
 Assignment: Prepare for project presentation.
 Class 8:
 Presentation Day: Students present their HTML projects (simple HTML webpage with
text, tables, images, etc).
 Classwork: Present and review projects.
 Assignment: Reflect on feedback and write a summary.

Phase 2: CSS Fundamentals (8 Classes)

Week 3: Introduction to CSS

 Class 9:
 Introduction to CSS
 CSS syntax and selectors
 Inline, internal, and external CSS
 Classwork: Style a simple HTML document.
 Assignment: Style a simple HTML document using inline and external CSS.
 Class 10:
 CSS properties (color, background, font)
 Box model (margin, border, padding, content)
 Classwork: Apply different CSS properties together.
 Assignment: Apply different CSS properties to an HTML document
 Class 11:
 CSS layout (display, position)
 Classwork: create a simple layout using positioning, and display properties.
 Assignment: create a simple layout using positioning, and display properties.
  Class 12:
 Flexbox basics
 Creating simple layouts using Flexbox
 Classwork: Create a complex layout using CSS Flexbox.
 Assignment: Create a simple layout using Flexbox.

Week 4: Advanced CSS

 Class 13:
 CSS Grid basics
 Creating simple layouts with Grid
 Classwork: Create a complex layout using CSS Grid.
 Assignment: Create a complex layout using CSS Grid.
 Class 14:
 Responsive design principles
 Media queries
 Classwork: Make a webpage responsive together.
 Assignment: Make a webpage responsive using media queries.
 Class 15:
 CSS transitions and animations
 Classwork: Add transitions and animations to a webpage.
 Assignment: Add transitions and animations to a webpage.
 Class 16:
 Presentation Day: Students present their HTML/CSS projects (simple responsive landing
page).
 Classwork: Present and review projects.
 Assignment: Reflect on feedback and write a summary.

Week 5: Create a Responsive Landing Page

 Class 17:
 Classwork: Writing HTML markup and CSS styles.
 Assignment: Provide the markup and HTML styles for certain parts of the project.
 Class 18:
 Classwork: Writing HTML markup and CSS styles.
 Assignment: Provide the markup and HTML styles for certain parts of the project.
 Class 19:
 Classwork: Writing HTML markup and CSS styles.
 Assignment: Provide the markup and HTML styles for certain parts of the project.
 Class 20:
 Classwork: Writing HTML markup and CSS styles.
 Assignment: Provide the markup and HTML styles for certain parts of the project.
Phase 3: JavaScript Fundamentals (12 Classes)
Week 6:

 Class 21:
 Introduction to JavaScript
 Variables and data types
 Classwork: Create a simple script that uses variables and data types.
 Assignment: Create a simple script that uses variables and data types
 Class 22:
 Operators and expressions
 Conditionals and loops
 Classwork: Create a simple program using conditionals and loops.
 Assignment: Create a simple program using conditionals and loops.
 Class 23:
 Functions and scope
 Classwork: Write functions for common tasks.
 Assignment: Write functions for common tasks.
 Class 24:
 Arrays and objects
 Array and object methods
 Classwork: Manipulate arrays and objects with JavaScript methods.
 Assignment: Manipulate arrays and objects with JavaScript methods.

Week 7:

 Class 25:
 Introduction to the DOM
 Selecting and manipulating DOM elements
 Classwork: Create a simple interactive webpage using DOM manipulation.
 Assignment: Create a simple Calculator using DOM manipulation.
 Class 26:
 Event handling
 Classwork: Build an interactive tip calculator application.
 Assignment: Build an interactive to-do list application.
 Class 27:
 Introduction to asynchronous programming (callbacks, promises)
 Fetch API basics
 Classwork: Fetch data from TMDB API and FakeStore API.
 Assignment: Fetch data from an API and display it on a webpage.
 Class 28:
 Error handling in JavaScript
 Classwork: Create a program with proper error handling.
 Assignment: handle all the errors in the landing page.
Week 8:

 Class 29:
 Form validation with JavaScript
 Implement authentication with firebase.
 Classwork: Build a form with validation together.
 Assignment: Authenticate users with sign up and login form using Firebase.
 Class 30:
 Local storage and session storage
 Classwork: Add and Retrieve Items from the local storage.
 Assignment: Enhance the to-do list with local storage.
 Class 31:
 Revision
 Classwork: Q&A session and review of previous assignments.
 Assignment: Prepare for project presentation.
 Class 32:
 Presentation Day: Students present their JavaScript projects.
 Classwork: Present and review projects.
 Assignment: Reflect on feedback and write a summary.

Week 9: TASK TRACKER APP

 Class 33:
 Build the UI for a Task Tracking App
 Assignment: Build the authentication pages.
 Class 34:
 Build the UI for a Task Tracking App
 Adding Authentication to the Task Tracker App
 Class work: Handle all Form Validations and errors
 Class 35:
 Introduction to Firebase Storage
 Adding and retrieving tasks products to firestore.
 Assignment: Make the App responsive.
 Class 36:
 Code Review and Presentation
 Assignment: Build a component using hooks.
Phase 4: React Fundamentals (20 Classes)
Week 10:

 Class 37:
 Introduction to React
 Setting up a React development environment
 Classwork: Set up a simple React project
 Assignment: Set up a simple React project for the Task Tracker App.
 Class 38:
 JSX and components
 Props and state
 Classwork: Create a simple React component
 Assignment: Create React components for your Task tracker App.
 Class 39:
 Functional vs. class components
 Handling events in React
 Classwork: Create an interactive component with state and event handling
 Assignment: Add state and event handling to the task tracker App.
 Class 40:
 Lifecycle methods
 Using hooks (useState, useEffect)
 Classwork: Build a component using hooks
 Assignment: Add React hooks to the Task Tracker App.

Week 11:

 Class 41:
 React Router basics
 Setting up routes and navigation
 Classwork: Create a multi-page React application.
 Assignment: Implement basic routing within the task tracker app.
 Class 42:
 Nested routes
 Classwork: Add nested routes to a React application
 Assignment: Add nested routing within the task tracker app.
 Class 43:
 Context API for state management
 Classwork: Use Context API in a project.
 Assignment: Add nested routing within the task tracker app.
 Class 44:
 Higher-order components
 Render props
 Classwork: Implement higher-order components and render props.
  Assignment: Implement higher-order components and render props in the task tracker
app.

Week 12:

 Class 45:
 Redux basics
 Setting up Redux in a React application
 Classwork: Create a small app with Redux.
 Assignment: Use Redux for state management in your project.
 Class 46:
 Connecting React with APIs using Axios
 Classwork: Build a weather app using Axios.
 Assignment: handle API calls in your Task Tracker App using Axios.
 Class 47:
 Form handling in React
 Classwork: Create a signup/login form
 Assignment: Perform signup and login on your Task tracker app.
 Class 48:
 Code splitting and lazy loading
 Memoization techniques
 Classwork: Optimize a React application.
 Assignment: Optimize your Task tracker application.

Week 13: ECOMMERCE WEBSITE - FRONTEND

 Class 49:
 Project planning and design
 Classwork: Plan the frontend of an e-commerce site together.
 Assignment: Set up the initial project structure.
 Class 50:
 Project development
 Class 51:
 Project development
 Class 52:
 Project development

Week 14: ECOMMERCE WEBSITE - FRONTEND

 Class 53:
 Project development
 Class 54:
 Project development
 Class 55:
 Project development
 Class 56:
  Project development

Phase 5: Backend Development with Node.js, Express, MongoDB (8

Weeks, 16 Classes)
WEEK 15:

 Class 57:
 Introduction to backend Development
 Definition of key terms
 Installation of necessary tools.
 Class 58:
 Introduction to Node.js
 Setting up a Node.js environment
 Classwork: Create a simple server with Node.js.
 Assignment: Create a simple server with Node.js for the task tracker app.

 Class 59:
 Introduction to Express.js
 Building routes and middleware
 Classwork: Build routes and middleware with Express.js.
 Assignment: Build routes and middleware with Express.js for the task tracker app.

 Class 60:
 Introduction to MongoDB
 Setting up a MongoDB database
 Designing the backend
 Classwork: Set up a MongoDB database.
 Assignment: Set up a MongoDB database for the task tracker app.

WEEK 16:

 Class 61:
 CRUD operations with MongoDB
 Classwork: Perform CRUD operations with MongoDB.
 Assignment: Perform CRUD operations with MongoDB in your task tracker app.

 Class 62:
 Connecting Node.js with MongoDB using Mongoose
 Classwork: Connect Node.js with MongoDB using Mongoose.
 Assignment: Connect Node.js with MongoDB using Mongoose.
 Class 63:
 Routes and controllers
  Classwork: Build key routes and controllers for a project.
 Assignment: Build key routes and controllers for task tracker app.
 Class 64:
 User authentication and authorization
 Classwork: Implement user authentication with JWT.
 Assignment: Implement user authentication with JWT in your task tracker app

WEEK 17:

 Class 65:
 Protected routes
 Classwork: Build protected routes and controllers for a project.
 Assignment: Build protected routes and controllers for task tracker app.

 Class 66:
 Connecting with the frontend
 Classwork: Connect the backend with the React frontend.
 Assignment: Connect the backend with the React frontend of your task tracker app.
 Class 67:
 File uploads and handling
 Classwork: Implement file uploads with Multer.
 Assignment: Implement file uploads with Multer.
 Class 68:
 Project development: Final touches and optimizations
 Classwork: Optimize and finalize the project.
 Assignment: Optimize and finalize the task tracker app.

Week 18 - 20: ECOMMERCE WEBSITE – BACKEND (STUDENT PROJECT)

Week 21: ANIMATION LIBRARY (GSAP/ FRAMER MOTION)

Week 22-24: FINAL GROUP PROJECT