01 : Introduction to Web Development
Live Classes: 1
- What is web development?
- Static vs dynamic website
- Who is front-end developer?
- Who is backend developer?
- Who is full-stack developer?
02 : HTML
Live Classes: 3, Assignment
- Introduction to HTML
- Opening and closing tags
- HTML page structure
- How to create HTML file?
- Basic HTML tags
- Image tag and attributes
- Anchor tag, email tag, tel tag
- HTML lists
- Ordered and Unordered Lists
- Creating website homepage using basic tags
- Table tags in HTML
- Table attributes in HTML
- Designing a calendar using HTML table
- HTML Div Tag
- HTML form elements
- HTML input types
- HTML input attributes
03 : CSS
Live Classes: 12, Projects: 3, Assignment: 7
- Introduction to Cascading Style Sheet (CSS)
- Types of CSS (types of CSS (external, internal, inline))
- CSS selector (CSS selector (class, id, tagName))
- Using Internal CSS
- Basic CSS properties
- Border properties
- Creating professional webpage using HTML & CSS
- CSS Spacing properties (Margin & Padding)
- Margin properties
- Padding properties
- CSS measurement units
- CSS box model browser
- Background image property
- External CSS
- Border-radius property
- How to comment HTML or CSS code?
- Full-width vs fixed-width web design
- Setting width in percentage
- CSS clear property
- Creating full-width section
- CSS hover
- CSS transition property
- CSS position (fixed, relative, sticky) properties
- Absolute positioning
- CSS display property
- CSS overflow property
- CSS z-index properties
- CSS opacity
- CSS flexbox
- CSS Grid
- Pseudo classes and elements
- Display properties
- Concept of one-page website
- CSS #id selector
- CSS cursor properties
- CSS scroll properties
04 : CSS3
Live Classes: 4, Projects: 3, Assignment: 4
- Introduction to CSS3
- Box-shadow & text-shadow
- Google Fonts & FontAwesome
- CSS3 transition
- CSS transform: scale
- Compatibility and vendor prefixes
- Calc function
- CSS transform: translate
- Column properties
- Figma To HTML
- CSS3 Animation
- CSS3 new features
- After & before selector
- CSS skew
- Multiple background images
- CSS Media Queries
- Creating responsive layout
- Creating section from Figma file
- @import mystyle.css
- Responsiveness across all devices
- 3D transforms
- Max and min height
- Background gradient
- CSS transform: rotate
- CSS hover
- Max and min width
05 : HTML5
Live Classes: 4, Projects: 2
- Introduction to HTML5
- HTML5 semantic & non-semantic elements
- Basic HTML5 structure
- Structural and semantic tags
- Text-level semantic tags
- Media and interaction tags
06 : JavaScript
Live Classes: 16, Projects: 4, Assignment: 7
- Introduction to JavaScript
- JavaScript data types
- Scope and lifetime
- JavaScript variables
- JavaScript arrays
- Uses of JavaScript
- JavaScript conditional statements
- Functions in JavaScript
- Window object functions
- Ways to embed JS
- JavaScript loops
- Object in JavaScript
- JavaScript promises
- JavaScript DOM
- Events in JavaScript
- Math operations
- Show/hide password using JS DOM
- Changing image using this function
- JavaScript Operators
- Product cart system to Increase/decrease quantity
- Building random code generator
- Creating JavaScript calculator
- Creating responsive menu
- Creating to-do list
- Creating password generator
- Different types of patterns using nested loop
- JavaScript array methods
- Weather app using promise with free API
- Most useful functions in JS
- JavaScript exception handling for of loop and for in loop
- Mini e-commerce app using promise with free API
- Data swipe using JavaScript DOM
- Date object in JavaScript
- Local Storage in JS
07 : jQuery
Assignment
- What is library?
- What is jQuery?
- How to add jQuery to your project?
- What is CDN?
- Adding jQuery CDN to HTML page
- jQuery Events
- Selectors and HTML functions in jQuery
- Functions in jQuery and event handling
- jQuery dimension methods
- Traversing in jQuery
- jQuery Owl carousel
- jQuery LightBox
- Introduction to Gsap
- Introduction to Locomotive
08 : Bootstrap
Live Classes, Projects
- Introduction to Bootstrap
- Setting up Bootstrap environment
- Bootstrap Breakpoints
- Bootstrap containers
- Bootstrap grid system
- Bootstrap responsive layout
- Bootstrap auto column layout
- Bootstrap typography and color classes
- Bootstrap button, border, and background classes
- Bootstrap forms and form control
- Bootstrap navbar, collapse, dropdown, off-canvas
- Bootstrap carousel and card
- Bootstrap accordion
- Creating website sections using Bootstrap classes
- Bootstrap spacing classes
- Bootstrap modals
- Bootstrap dropdowns
- Bootstrap tabs
- Bootstrap collapse
- Bootstrap tooltips
- Bootstrap popovers
- Bootstrap alerts
09 : Tailwind CSS
Live Classes, Projects: 3
- Introduction to Tailwind CSS
- Setting up Tailwind CSS environment
- Tailwind CSS Breakpoints and customization
- Tailwind CSS Grid layout
- Tailwind CSS Flexbox
- Alignment in Tailwind CSS
- Tailwind CSS Spacing, margin, and padding
- Sizing in Tailwind CSS
- Typography in Tailwind CSS
- Backgrounds in Tailwind CSS
- Tailwind CSS Shadow and opacity effects
- Tailwind CSS Transforms
- Tailwind CSS Animation
- Creating website section using Tailwind CSS
10 : Git and Bitbucket
Live Classes
- Introduction to Git
- Introduction to Bitbucket
- How to create project?
- How to create repository, branch, and clone?
- Git pull, push, merge, commit
- Learning to use Bitbucket practically
11 : ReactJS
Live Classes, Projects, Assignment
- Important JavaScript concepts for ReactJS
- Key features of ReactJS
- Revisiting functions and parameters
- Revisiting variables and values
- Flow and cycle of React app
- Uses and applications of ReactJS
- Import and export
- Creating ReactJS project
- Introduction to ReactJS
- What is ReactJS?
- Benefits of using ReactJS
- Arrow functions
- List rendering in ReactJs
- Adding JS to a page and how ReactJS projects differ
- Installing create-react-app
- JavaScript destructuring
- Bidirectional data transfer in ReactJS
- Creating to-do list app
- ReactJS components
- React component life cycle
- Installing Firebase
- Fetching external API in React
- Adding & fetching data to Firebase
- Realtime Database
- Creating User Management feature using Firebase
- Firebase social login
- Context API
- Creating e-commerce project
- Redux toolkit
- Next.js folder structure
- Introduction to Next.js
- Discussing LMS website development project
- React Route DOM
- Controlled Components in React
- Form handling in ReactJS
- Introduction to Firebase
- Creating show/hide password feature using useState
- Creating show/hide modal using useState
- Styled components, React package
- External styling library
- Creating user dashboard using ReactJS
- Back slider in ReactJS
- CRUD operations using APIs
- Local Storage in To-do list and User dashboard
- Creating weather search app
- Creating quiz app
12 : NodeJS and ExpressJS
Live Classes, Assignment
- Introduction to NodeJS
- Routing params: Request & Response
- Nodemon package
- Package.json file
- Introduction to ExpressJS
- Creating Node server
- How NodeJS works?
- Installing Node package manager
- Simple and basic API
- JavaScript fundamentals in NodeJS
- Getting input from command line
- Removing extension from URL and 404 page
- Creating HTML page
- EJS template engine
- Dynamic page with ExpressJS
- Creating video module in admin panel using ReactJS and NodeJS
- Creating password forgot/reset functionality
- Route-level middleware
- Using relation objects in admin panel
- Creating course module in admin panel using ReactJS and NodeJS
- Using raw queries in admin panel
- Payment gateway interaction in ReactJS using NodeJS API
- Creating transaction listing module in admin panel
- Connect Register API with ReactJS
- Node.js and JWT token authentication
- ExpressJS middleware
- Creating login/logout functionality in admin panel
- Display file list from folder
- Asynchronous programming
- Handling asynchronous data
- Rendering HTML and JSON
13 : MongoDB
Live Classes, Assignment
- Introduction to MongoDB
- MongoDB installation
- Update and delete data in MongoDB
- Connecting MongoDB with NodeJS
- Delete API to delete data in MongoDB
- CRUD operations in MongoDB
- PUT API to update data in MongoDB
- Installing MongoDB
- GET API in MongoDB
- Basics of MongoDB
- POST API for inserting data in MongoDB
- PUT API for Mongoose
- CRUD with Mongoose
- Node mailer for sending emails
- Select query methods
- REST
- Events and Event Emitter
- Mongoose with NodeJS
- File upload using multer
- GET API with Mongoose
- DELETE API with Mongoose
14 : AWS Server Setup
- Introduction to AWS
- Creating EC2 instance
- Security groups in AWS
- How to deploy project in AWS?
💼 Prerequisites for this Course:
Able to come to the offline classes (or) Access to Smart Phone / Computer
Dedication and confidence to clear any exam or Interview
Good Internet Speed (Wifi/3G/4G)
Good Quality Earphones / Speakers
Basic Understanding of English & Tamil