Acetians Technologies Pvt Ltd

JEP - WEB DEVELOPMENT

Month 1: Introduction to Web Development & HTML/CSS

Introduction to Web Development (overview of the web, front-end vs back-end)

Week 1: Setting up development environment (VSCode, Git, basic command line usage)
Basic structure of HTML (tags, elements, attributes)
Advanced HTML (forms, tables, media)
Week 2: Introduction to CSS (selectors, properties, box model)
Styling text, layout, and links
CSS Flexbox and Grid for layout
Week 3:
Responsive design principles (media queries, mobile-first approach)
Basic introduction to CSS frameworks (Bootstrap or Tailwind)
Week 4:
Project: Simple multi-page static website

Month 2: JavaScript Basics

Introduction to JavaScript (syntax, variables, data types)

Week 1:
Operators, conditionals, and loops
Functions and scope
Week 2:
DOM manipulation (selecting elements, event handling)
JavaScript arrays and objects
Week 3:
Introduction to ES6+ features (arrow functions, let/const, template literals)
JavaScript modules and imports/exports
Week 4:
Basic form validation with JavaScript

Month 3: Advanced JavaScript & Front-End Frameworks

Asynchronous JavaScript (callbacks, promises, async/await)

Week 1:
Fetch API for making HTTP requests
Introduction to front-end frameworks (React or Vue.js)
Week 2:
Setting up a simple project (using Create React App or Vue CLI)
React/Vue components, props, and state
Week 3:
Handling events and user input
React/Vue Router for single-page applications (SPA)
Week 4:
Project: Build a small dynamic front-end web app

Month 4: Introduction to Back-End Development

Introduction to server-side development

Week 1: Overview of Node.js and Express.js
Setting up a basic Express server
RESTful APIs (GET, POST, PUT, DELETE)
Week 2:
Handling routes and middleware in Express
Introduction to templating engines (EJS, Pug) for dynamic web pages
Week 3:
Form handling and validation on the server-side
Introduction to authentication (sessions, cookies, JWT)
Week 4:
Project: Basic API with Express.js and handling user authentication

Month 5: Databases and Full-Stack Development

Introduction to databases (SQL vs NoSQL)

Week 1: Setting up a relational database (MySQL/PostgreSQL)
Basic SQL queries (CRUD operations)
Setting up a NoSQL database (MongoDB)
Week 2:
Week 2:
Basic MongoDB queries (CRUD operations)
Connecting Express.js to a database (SQL/NoSQL)
Week 3:
Using an ORM/ODM (Sequelize/Mongoose) for database interaction
Full-stack project structure
Week 4:
Project: Build a full-stack app (front-end + back-end + database)

Month 6: Advanced Topics and Final Project

Week 1: Introduction to WebSockets and real-time communication (Socket.io)

API rate limiting, security best practices
Week 2: Deployment (hosting platforms like Heroku, Netlify, or Vercel)
Continuous Integration and Deployment (CI/CD)
Week 3: Version control and collaboration with Git & GitHub (branches, pull requests)
Code quality (linting, formatting, testing with Jest/Mocha)
Week 4: Final project presentations and code review
Project: Full-stack application using all covered technologies

Key Projects:

Static multi-page website

Dynamic front-end app (React/Vue)
Full-stack app with authentication and database interaction
Month 1: Introduction to Web Development & HTML/CSS

Day 1: Introduction to Web Development (Overview: what is frontend and backend)

Day 2: How websites work: browsers, servers, HTTP, and DNS
Week 1: Introduction to Web Development Day 3: Setting up a development environment (VSCode, Git, Command Line basics)
Day 4: HTML basics: Structure of a webpage (HTML tags, elements, attributes)
Day 5: Semantic HTML (header, footer, main, section, article)
Day 6: Working with forms (input fields, buttons, labels)
Day 7: Creating tables and embedding media (images, videos, audio)
Week 2: HTML & CSS Day 8: Introduction to CSS: Selectors, properties, values
Day 9: Styling text (fonts, colors, text alignment)
Day 10: Box Model in CSS (margins, borders, padding)
Day 11: CSS Flexbox: Creating flexible layouts
Day 12: CSS Grid: Structuring content with Grid
Week 3: Advanced CSS Day 13: Responsive Design: Media queries for different screen sizes
Day 14: Mobilefirst design principles
Day 15: CSS units (rem, em, vw, vh) and when to use them
Day 16: Introduction to Bootstrap or Tailwind CSS (basic components)
Day 17: Customizing Bootstrap/Tailwind (overriding styles)
Week 4: CSS Frameworks and Project Day 18: Project: Planning the static multipage website
Day 19: Building the homepage of the website (HTML structure)
Day 20: Building other pages (links, navigation, and forms)

Month 2: JavaScript Basics

Day 21: Introduction to JavaScript (basic syntax, variables)

Day 22: Data types in JavaScript (numbers, strings, booleans)
Week 1: JavaScript Fundamentals Day 23: Operators in JavaScript (arithmetic, comparison, logical)
Day 24: Conditional statements (if, else, switch)
Day 25: Loops (for, while)
Day 26: Functions in JavaScript (defining, invoking, parameters)
Day 27: Function scope and hoisting
Week 2: Functions and DOM Manipulation Day 28: Introduction to the DOM (Document Object Model)
Day 29: Selecting and manipulating elements (querySelector, innerHTML, etc.)
Day 30: Event listeners (click, change, submit events)
Day 31: Arrays (methods like push, pop, map, filter)
Day 32: Objects (keyvalue pairs, methods, object manipulation)
Week 3: Arrays, Objects, and ES6+ Day 33: Arrow functions, template literals (ES6+ features)
Day 34: Destructuring objects and arrays
Day 35: Spread and rest operators in JavaScript
Day 36: JavaScript modules (import, export)
Day 37: Working with JavaScript modules in projects
Week 4: Modules and Validation Day 38: Basic form validation (checking empty fields, email format)
Day 39: Dynamic error messages with JavaScript
Day 40: Final review and practice exercises

Month 3: Advanced JavaScript & Front-End Frameworks

Day 41: Understanding asynchronous programming (why it matters)

Day 42: Callbacks in JavaScript (examples and use cases)
Week 1: Asynchronous JavaScript Day 43: Promises (then, catch, finally)
Day 44: Async/Await syntax and when to use it
Day 45: Fetch API for making HTTP requests
Day 46: Introduction to React or Vue.js (what and why)
Day 47: Setting up a React/Vue project (Create React App or Vue CLI)
Week 2: Introduction to FrontEnd Frameworks Day 48: Components and props in React/Vue
Day 49: State management in React/Vue
Day 50: Event handling in React/Vue (onClick, onInput)
Day 51: React/Vue Router: Singlepage applications (SPA)
Day 52: Lifecycle methods/hooks in React/Vue
Week 3: Advanced Framework Concepts Day 53: Forms and controlled components
Day 54: Fetching data in React/Vue and displaying it
Day 55: Introduction to state management libraries (Redux or Vuex)
Day 56: Planning a small dynamic frontend web app
Day 57: Building out the app’s structure
Week 4: FrontEnd Project Day 58: Implementing user interaction and events
Day 59: Connecting the app to an API
Day 60: Project review and improvements

Month 4: Introduction to Back-End Development

Day 61: Introduction to serverside development (what is the backend?)

Day 62: Overview of Node.js and Express.js
Week 1: ServerSide Development Day 63: Setting up a basic Express server
Day 64: Handling HTTP requests (GET, POST, PUT, DELETE)
Day 65: Middleware in Express.js
Day 66: Understanding RESTful API architecture
Day 67: Building your first RESTful API in Express.js
Week 2: RESTful APIs Day 68: Working with route parameters and query strings
Day 69: Error handling in APIs
Day 70: Testing API endpoints with Postman
Day 71: Introduction to templating engines (EJS, Pug)
Day 72: Creating dynamic pages with EJS/Pug
Week 3: Templating Engines and Forms Day 73: Handling forms on the server (form validation)
Day 74: Saving form data to a database (mock implementation)
Day 75: Project: Build a basic API with Express.js
Day 76: Introduction to authentication methods (cookies, sessions, JWT)
Day 77: Implementing sessionbased authentication
Week 4: Authentication Day 78: Implementing JWTbased authentication
Day 79: Securing routes with authentication
Day 80: Project: User authentication in a web app

Month 5: Databases and Full-Stack Development

Day 81: Introduction to relational databases (SQL)

Day 82: Setting up a MySQL/PostgreSQL database
Week 1: SQL Databases Day 83: Basic SQL queries (SELECT, INSERT, UPDATE, DELETE)
Day 84: SQL relationships (onetomany, manytomany)
Day 85: Query optimization and indexing basics
Day 86: Introduction to NoSQL (MongoDB)
Day 87: Setting up MongoDB and basic CRUD operations
Week 2: NoSQL Databases
Week 2: NoSQL Databases Day 88: Collections and documents in MongoDB
Day 89: Working with MongoDB queries
Day 90: Differences between SQL and NoSQL databases
Day 91: Connecting Express.js to a database (SQL/NoSQL)
Day 92: Using Sequelize/Mongoose for database interaction
Week 3: FullStack App Development Day 93: Designing the fullstack application architecture
Day 94: Building the backend API
Day 95: Connecting the frontend to the API
Day 96: Planning the fullstack project (requirements, structure)
Day 97: Building the frontend of the app
Week 4: FullStack Project Day 98: Building the backend of the app
Day 99: Integrating the database into the app
Day 100: Project review and improvements

Month 6: Advanced Topics and Final Project

Day 101: Introduction to WebSockets (realtime communication with Socket.io)

Day 102: API rate limiting and security best practices
Week 1: Advanced Topics Day 103: Introduction to OAuth and thirdparty login (Google, Facebook)
Day 104: File upload handling in Node.js
Day 105: API testing and validation with tools like Jest or Mocha
Day 106: Introduction to deployment (Heroku, Netlify, Vercel)
Day 107: Setting up automatic deployment (CI/CD)
Week 2: Deployment Day 108: Deploying a full-stack app to Heroku/Netlify
Day 109: Environment variables and configuration in production
Day 110: Project deployment and live testing
Day 111: Advanced Git (branches, merging, rebasing)
Day 112: Collaborative workflows with GitHub (pull requests, code reviews)
Week 3: Collaboration and Version Control Day 113: Code quality checks (linting, formatting, style guides)
Day 114: Writing unit tests for JavaScript code
Day 115: Continuous Integration setup for automated testing
Day 116: Project planning and defining scope
Day 117: Building out the project (back-end setup)
Week 4: Final Project Day 118: Building out the project (front-end setup)
Day 119: Completing the full-stack project
Day 120: Final project presentations and code review