Route Front-end Course

Session	Session Topics
Merged PDF of All Sessions	This PDF contains all the sessions notes in one file.
Session 1	HTML Intro SEO Images Links Tables Lists Some HTML attributes
Session 2	Forms Form attributes Input elements & attributes Input types HTML Markup Validation
Session 3	CSS Intro Placing CSS Code CSS Selectors Calculating Specificiy Block & Inline Elements Replaced Elements
Session 4	Float & Clear Margin & Padding Margin Collapse Problem Some CSS Font Properties Using External Fonts Background Property
Session 5 (Not Final Version)	Border & Border Types CSS Sprites Background Clip Viewport Units Positioning in CSS Stacking Context
Session 6	Box Sizing Hover Psuedo Class Transition Transform Overflow IFrames
Session 7 (NFV)	Shadow Gradient Before and After pseudo-elements Animation media queries
Session 8 (NFV)	Flex Box & Its Properties
Session 9	Grid Layout & Its Properties
Session 10	Psuedo Classes CSS Combinators Extra CSS Selectors Scroll Behavior Object Fit Nesting Selectors !important Inherit and Initial Solving Compatibility Issues Semantic HTML Font Awesome Icons
Session 11 (NFV)	rem & em Units Calc Function Bootstrap Intro
Session 12	Bootstrap Cont.
Session 13 (NFV)	Meta tags for SEO SVG
Session 14 (NFV)	Lighthouse in DevTools Video & Audio Tags JS Intro Placing JS Code
Session 15	Operators in JS Conditional Statements Truthy & Falsy Values Loops in JS
Session 16 (NFV)	JS Implicit Type Conversion Functions in JS Return in Functions Function Types Hoisting Important Interview Questions Scope Self Invoking Functions Expression (IIFE)
Session 17	Objects JS Built-in Objects Arrays Functional Programming in JS
Session 18	Built-in Array Methods CRUD Intro
Session 19	CRUD Cont. Local Storage Session Storage Storing and Retrieving Objects Accepting File Inputs String Methods Searching in CRUD System
Session 20	DOM Selecting Elements in DOM Event Listeners Event Object Common Events Changing Styles With JS Get, Set, and Remove Attributes ClassList
Session 21	Image Slider Example Event Propagation Regex Conditional Operator (Ternary Operator) Safe Navigation Operator
Session 22	innerHTML and innerText Creating Elements Appending & Prepending Elements (Child) Add Element Before or After Another (Sibling) DOM Traversal NodeList VS HTML Collection Browser Object Model (BOM) DOM VS BOM BOM Methods & Properties API JSON Free APIs Terms Related to APIs How to Use an API Displaying Data from an API
Session 23	Synchrounous & Asynchronous Code How JavaScript Works Execution stack, Event Loop, Callback Queue, and Web API Controlling Code Execution Flow Callback & Callback Hell Promise & Promise Methods Async & Await Fetch API Handling Errors
Session 24	"use strict" let and const Default Parameter Value Template Literal Destructuring Assignment Arrow Functions this Keyword Set Map
Session 25	Spread Operator Spread in Arrays Spread in Objects Rest Parameter Shallow Copy vs Deep Copy Shallow Copy Deep Copy Deep Copy Using `JSON.parse` and `JSON.stringify` Deep Copy Using `structuredClone` Higher-Order Functions `forEach` `map` `filter` `reduce` `find` Prototype Prototypal Inheritance `Object`
Session 26	Higher Order Functions Prototype Object Oriented Programming (OOP) Class based OOP Prototype based OOP Constructor Functions Sugar Syntax Main OOP Concepts Inheritance Polymorphism Access Modifiers Modules
Session 27	Revision JQuery Library vs Framework Why JQuery? How to use JQuery? Selecting elements Effects Effects With Callbacks Custom Effects With `animate()` DOM Manipulation With JQuery Get and Set Add and Remove Traversing
Session 28	Example Website Event Functions Getting Element Offset Getting Element Height Scrolling with jQuery Scroll Events Page Load Events Package Manager (npm) Installing Packages Managing Package Versions Closure in JavaScript
Session 29	NPM Continued Bundlers (e.g., Webpack) devDependencies Installing devDependencies with `-D` flag Tailwind CSS Utility-first CSS framework Tailwind UI Performance benefits Installation via CLI Configuration (`tailwind.config.js`) Customizing colors Customizing spacing Width and height classes Hover, focus, and active states Valid and invalid input styling Required and disabled input styling First and last child styling Even and odd child styling Group hover effects Peer hover effects Container for responsive design Background customization
Session 30	CSS Layers Defining Layers with `@layer` Directive Order of Layers CSS Rules Outside Layers Layer & `!important` Layers in Tailwind CSS `@tailwind` Directives Adding Styles to Existing Layers Creating New Utility Classes `@apply` Directive `@config` Directive `theme()`, `screens()` Functions Responsive Tailwind Example Custom Screen Sizes Arbitrary Values Dark Mode Tailwind Plugins Some Tailwind Utilities

Assignment	Code	Preview
Bakery	Code	Preview
Fokir	Code	Preview
Mealify	Code	Preview
Grid	Code	Preview
Devfolio	Code	Preview
JS Problem Solving	Code
Quotes	Code	Preview
Daniels	Code	Preview
Bookmarker	Code	Preview
Login System	Code	Preview
Data Visualization	Code	Preview
Game Over	Code	Preview
Todo App	Code	Preview
E-Commerce	Code	Preview

Route Front-End Notes & Projects Index