Autoplay
Autocomplete
Previous Lesson
Complete and Continue
CSS Foundations Deep Dive
About
About This Course
Telegram Group for This Course
What is CSS and Why? 🚀🎨
What CSS Is and Why It’s Used – The Language of Style! 🚀🎨
❓Quiz
Setup Environment
Tools & Materials Required for CSS Deep Dive 🔧💻
Types of CSS Styling 🚀🎨
Types of CSS Styling 🚀🎨 (4:52)
❓Quiz
Inline CSS 🚀🎨
Inline CSS – Quick Tweaks for Individual Elements 🚀🎨 (10:59)
Practice Activity 🔨
Practice Activity 🔨: Sample Solution
❓Quiz
Internal (Embedded) CSS 📚🎨
Internal (Embedded) CSS – Styling from Within Your HTML 📚🎨 (13:36)
Practice Activity 🔨
Practice Activity 🔨: Sample Solution
❓Quiz
External CSS 🌐🧰
External CSS – Building Reusable and Consistent Designs 🌐🧰 (5:47)
Practice Activity 🔨
Practice Activity 🔨: Sample Solution
❓Quiz
CSS Syntax, Selectors, Properties, and Values 🎯💻
CSS Syntax 🚀💡
CSS Selectors – Mastering Element Targeting 🎯💻 (11:47)
Advanced CSS Selectors – Diving Deeper into Element Targeting 🚀🔍 (7:47)
Practice Activity 🔨
Practice Activity 🔨: Sample Solution
❓Quiz
Specificity in CSS 🏆🎨
Specificity in CSS – The Styling Contest 🏆🎨 (8:37)
Practice Activity 🔨
Practice Activity 🔨: Sample Solution
❓Quiz
The Cascade in CSS 🔄🎨
The Cascade in CSS – How Multiple Rules Interact 🔄🎨 (8:39)
❓Quiz
Inheritance in CSS – 👨👩👧✨
Inheritance in CSS – Passing Down Family Traits 👨👩👧✨ (8:03)
Practice Activity 🔨
Practice Activity 🔨: Sample Solution
❓Quiz
CSS Comments 📝✨
CSS Comments – Writing Clear and Maintainable Styles 📝✨
CSS Colors 🎨🎨
CSS Color Names – A Built-In Palette for Web Designers 🎨✨ (8:25)
Color Names - 140 Standard Colors 🎨
❓Quiz 1
CSS RGB Colors – Creating Custom Hues with Red, Green, and Blue 🎨🔴🟢🔵 (3:59)
❓Quiz 2
CSS HEX Colors – Mastering the Hexadecimal Palette 🔢🎨 (4:45)
❓Quiz 3
CSS HSL Colors – Exploring Hue, Saturation, and Lightness 🎨🌈 (6:04)
❓Quiz 4
CSS Background-Color 🎨✨
CSS Background-Color – Adding Life to Your Web Designs 🎨✨ (14:25)
❓Quiz
CSS Background Image 🖼️✨
CSS Background Image – Enhancing Your Web Designs with Imagery 🖼️✨ (10:22)
CSS Background-Attachment – Controlling the Movement of Backgrounds 🚀🖼️ (2:32)
❓Quiz
CSS Background Shorthand 🎨🖼️
CSS Background Shorthand – Combining All Background Properties in One Declaration 🎨🖼️ (8:17)
❓Quiz
CSS Borders 🖼️🔲
CSS Borders – Adding Structure and Style to Your Elements 🖼️🔲 (13:07)
Practice Activity 🔨
Practice Activity 🔨: Sample Solution
❓Quiz
CSS Margins 📏✨
CSS Margins – Spacing Your Elements Effectively 📏✨ (16:41)
Practice Activity 🔨
Practice Activity 🔨: Sample Solution
❓Quiz 1
Margin Collapse – Understanding Vertical Margin Behavior 📏🔄 (6:00)
❓Quiz 2
CSS Padding 📏🛋️
CSS Padding – Creating Comfortable Spaces Inside Your Elements 📏🛋️ (10:23)
Practice Activity 🔨
Practice Activity 🔨: Sample Solution
❓Quiz
Inspecting Elements Using DevTools 🕵️♀️🔧
Inspecting Elements Using DevTools 🕵️♀️🔧 (7:11)
Practice Activity 🔨
❓Quiz
CSS Units – Pixels, Percentages, Ems, Rems, and Beyond 📏🔢
Introduction about: CSS Units 📏🔢
1️⃣ Absolute Units (10:07)
Another Absolute Units: The pt Unit in CSS – Designing for Print and Precision 📄✒️
❓ Quiz 1
2️⃣ Relative Units
Relative Units - 📏 Percentage (%) (14:10)
❓ Quiz 2
Relative Units - 📏 em (17:35)
❓Quiz 3
Relative Units - 📏 rem (6:26)
❓ Quiz 4
Relative - Viewport Units - 📏 vw (Viewport Width) & vh (Viewport Height) (13:26)
❓ Quiz 5
Relative - Viewport Units -📏 vmin & vmax (Viewport Minimum & Maximum Units) (11:15)
❓ Quiz 6
Relative Units - 📏 ch (Character Width) (5:07)
❓ Quiz 7
Relative Units - 📏 ex (x-height) (4:32)
❓ Quiz 8
📊 CSS Units Comparison Table - When to Use Which?
🎯 Practice: Build a Responsive "Unit Showcase" Page
🎯 Practice - Solutions
CSS Fonts 🎨🔤
1️⃣ font-family 🏷️ (15:43)
2️⃣ font-style 🎭 (2:30)
3️⃣ font-size 🔠 (2:42)
4️⃣ font-weight 💪 (5:18)
5️⃣ line-height ↕️ (4:13)
6️⃣ font-stretch ↔️ (3:55)
7️⃣ font-variant 🔡 (8:08)
8️⃣ Google Fonts 🌐 (17:23)
9️⃣ @font-face 🌐 – Self-Hosting Custom & Web Fonts (12:57)
Which is faster using @font-face or link?
🔟font Shorthand 🖋️
CSS Height, Width, and Max-Width 📏🔍
CSS Height, Width, and Max-Width – Controlling Element Dimensions 📏🔍 (8:27)
Practice Activity 🔨
Practice Activity 🔨: Sample Solution
❓Quiz
CSS Outline 🖍️
CSS Outline 🖍️ (11:56)
Practice Activity 🔨
Practice Activity 🔨: Sample Solution
❓Quiz
CSS Box Model 📦🔍
What is CSS Box Model? (13:21)
Practice Activity 🔨
Practice Activity 🔨: Sample Solution
❓Quiz
CSS Layout – The position Property 📐
The position Property 📐 (9:05)
Practice Activity 🔨
Practice Activity 🔨: Sample Solution
❓Quiz
CSS Display: block, inline, and inline-block 🖥️📏
block, inline, and inline-block 🖥️📏 (7:23)
Practice Activities 🛠️
Practice Activity 🔨: Sample Solution
❓Quiz
CSS Hiding Techniques: display: none vs. visibility: hidden
display: none vs. visibility: hidden (4:02)
Practice Activities 🛠️
Practice Activity 🔨: Sample Solution
❓Quiz
CSS Layout -Display – Flexbox Fundamentals 🧩📐
Flexbox Fundamentals 🧩📐 (20:35)
Practice Activity 🔨
Practice Activity 🔨: Sample Solution
❓Quiz
Media Query 📱🔍
Responsive Design with Media Queries 📱💻 (13:36)
1- Breakpoint Exploration: Ultra-Wide Screens 📏🖥️
2- Orientation Query: Portrait vs. Landscape 📱📐
3- High-DPI Images: Retina & 2× Displays 🎨✨
4- Print Styles: @media print 🖨️📄
❓Quiz
CSS Layout -Display – Grid Fundamentals 🧩📐
CSS Grid Layout 🧩📐
❓Quiz
Fixed Grid Example (9:29)
❓Quiz 2
Responsive Grids with fr Units (7:05)
❓Quiz 3
Repeat Notation (2:20)
❓Quiz 4
Responsive Grid with auto-fit & minmax() (3:49)
❓Quiz 5
Placing Grid Items By Line Numbers (13:25)
❓ Quiz 6
Aligning Grid Items with justify-items & align-items (5:02)
Aligning Items with Place Items
❓ Quiz 7
Aligning Tracks with justify-content & align-content (7:07)
The place-content Shorthand
❓Quiz 8
justify-self, align-self & place-self
❓Quiz 9
Side-by-side comparison of the six alignment properties
CSS Grid Implicit Tracks : grid-auto-rows & grid-auto-columns 📐 (5:14)
❓Quiz 10
Controlling Item Placement with grid-auto-flow 📐🔄 (7:30)
❓Quiz 11
CSS Grid Areas – Name Your Layout Like a Map 🗺️🧩 (11:48)
❓Quiz 12
Practical Examples (Self Understand)
Misc - Layout
Layout – The z-index Property 🗂️↕️ (4:14)
❓Quiz 1
Layout – The overflow Property 🌊📦 (7:20)
❓Quiz 2
Layout – float and clear 🏊♂️🚧 (7:24)
❓Quiz 3
Multi-Column Layout – Creating Multiple Columns 📰 (7:29)
❓Quiz 4
CSS Pseudo-Elements ::before & ::after ✨📐 (6:49)
❓Quiz 5
CSS Tooltips 🛠️✨ (7:38)
❓Quiz 6
CSS Gradients 🌈✨ (10:35)
❓Quiz 7
CSS Shadow Effects 🌑✨ (13:36)
Shadow Practice Activities 🛠️
Shadow Practice Activities Solutions 🛠️
❓Quiz 8
CSS Opacity / Transparency 🎨🔍 (5:19)
❓Quiz 9
Transforms
CSS Transforms – 2D & 3D Magic 🚀✨ (10:32)
Practice Activities 🔨
Practice Activities Solution 🔨
❓Quiz
Transition
CSS Transitions (12:01)
Practice Activities 🔨
Practice Activities Solution 🔨
❓Quiz
Animation
CSS Animations (17:43)
Practice Activities 🔨
Practice Activities Solutions 🔨
❓Quiz
More About Images
CSS Styling Images : Responsive, Avatar, Object-Fit, Filters, Shadows and Borders (13:28)
Practice Activities 🔨
Practice Activities Solution 🔨
❓Quiz 1
CSS Image Shapes (29:08)
❓Quiz 2
CSS Centering Images (5:46)
❓Quiz 3
CSS Image Sprites
❓Quiz 4
CSS SVG Sprites
❓Quiz 5
CSS Masking
CSS Masking – Shaping Elements with Images & Gradients 🎭 (15:45)
❓Quiz
CSS Variables
CSS Variables – Reusable, Dynamic Styling 🎨 (17:39)
❓Quiz
CSS Math Functions
CSS Math Functions – Making Values Smarter 📐 (6:55)
Practice Projects 🚀💪
Project 1 - CV - Layout 1 (43:16)
Project 2 - CV - Layout 2 (34:43)
Project 3 - CV - Layout 3 (17:29)
Project 4 - CV - Layout 4
Project 5 - CV - Layout 5 (Dev-Tools) (11:11)
Project 6 - Short Stories - Layout 1 (11:40)
Project 7 - Short Stories - Layout 2 (5:31)
Project 8 - Short Stories - Layout 3
Self Study Projects - Short Stories Different Layouts
Projects 9 to 20 - Short Stories - Different Layouts (20:28)
Self Study Projects - Galaries
Project 21 to 30 - Galaries (20:13)
Self Study Project - Button Styles
Project 31 - 30 CSS Button Styles (5:55)
Self Study Project - TextBox Styles
Project 32 - 30 CSS Textbox Styles (6:27)
Self Study Project - CheckBox and Radio Button Styles
Project 33 - 30 CSS Checkbox & Radio Styles (7:13)
Self Study Project - CSS Dropdown & List Styles
Project 34 CSS Dropdown & List Styles (5:22)
Self Study Project - CSS Pagination Styles
Project 35 - 30 CSS Pagination Styles (3:37)
Self Study Project - Menu Styles
Project 36 - 30 CSS Menu Styles (4:15)
Layout – float and clear 🏊♂️🚧
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock