Aliens School
Cinematic Knowledge Experience
0%
Aliens School
Now Playing
Aliens School ยท HIEN
โŒจ๏ธ Keyboard Shortcuts
โ†’Next slide โ†Previous slide SpacePlay / Pause MNarration on/off FFullscreen ?Show/hide this
Press any key to close
Skill Topic ยท Cinematic

๐Ÿ”˜ CSS Rounded Borders โ€” Ice Cream Scoop System ๐Ÿจ๐Ÿฅ„

Socho tum ice cream serve kar rahe ho. Scoop se corners ko gol karte ho โ€” chhota scoop = thodaโ€ฆ

Overview
๐ŸŒŸ

๐Ÿ”˜ CSS Rounded Borders โ€” Ice Cream Scoop System ๐Ÿจ๐Ÿฅ„ โ€” Quick Facts

๐Ÿ“Œ

Values: Example

๐ŸŽฏ

1: 10px

โšก

2: 10px 20px

๐Ÿ”‘

3: 10px 20px 30px

Topic 1
โœจ

๐ŸŽฏ Analogy: Ice Cream Scoop System

๐Ÿ“š ` ๐Ÿจ ICE CREAM SCOOP SYSTEM: โ•”โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•—โ€ฆ
Topic 2
๐Ÿ’ก ๐Ÿ“Š ๐Ÿ”ฌ

๐Ÿ“Œ 1. Basic Syntax โ€” Corner Scooping

๐Ÿ’ก `css / ๐Ÿจ Sab corners pe same size ka scoop / .box { border: 2px solid #3498DB;โ€ฆ
Topic 3
๐Ÿ”’

๐Ÿ“Œ 2. Individual Corners โ€” Har Corner Ka Alag Scoop

๐ŸŽฏ `css / ๐Ÿจ Har corner pe alag size ka scoop โ€” asymmetric ice cream! / .asymmetric {โ€ฆ
Topic 4
โญ

๐Ÿ“Œ 3. Elliptical Radius โ€” Oval Scoop (Slash Syntax)

โญ `css / ๐Ÿจ Default: circular scoop โ€” horizontal aur vertical radius SAME / .circular-scoopโ€ฆ
Topic 5
โœจ

๐Ÿ“Œ 4. Common Shape Patterns โ€” Ice Cream Art!

๐Ÿ”‘ `css / === Shape 1: Circle โ€” Perfect Ball ๐Ÿจ === / .circle { width: 100px; height: 100px;โ€ฆ
Topic 6
โœจ ๐Ÿ“Š ๐Ÿ”ฌ

๐Ÿ“Œ 5. Border-Radius with Images โ€” Photo Scooping

โœจ `css / ๐Ÿจ Circular Profile Avatar โ€” perfect gol photo! / .avatar { width: 80px; height:โ€ฆ
Topic 7
๐Ÿ”’

๐Ÿ“Œ 6. overflow: hidden โ€” Melted Part Clip Karo!

๐ŸŒŸ `css / ๐Ÿจ Problem: border-radius parent pe hai, but child content bahar nikal jata hai / /โ€ฆ
Topic 8
๐Ÿš€

๐Ÿ“Œ 7. Border-Radius + Transitions โ€” Animated Scooping

๐Ÿš€ `css / ๐Ÿจ Hover pe shape change โ€” square to circle! / .morph { width: 100px; height:โ€ฆ
Topic 9
๐Ÿ“ฅ ๐Ÿ“ฅ ๐Ÿง  ๐Ÿ”ฌ ๐Ÿ’ก ๐ŸŽฏ

โŒ Common Mistakes โ€” Ice Cream Scooping Errors

๐Ÿ“š | # | โŒ Galat | โœ… Sahi | ๐Ÿจ Analogy | |---|---------|--------|-----------| | 1 | Circleโ€ฆ
Topic 10
๐Ÿ’ก ๐Ÿ“Š ๐Ÿ”ฌ

๐Ÿ‹๏ธ Practice Exercises

๐Ÿ’ก

6 shapes banao:

๐Ÿ”‘

Color coded grid me display karo

โšก

Har shape ke neeche uska code likho

๐ŸŽฏ

Profile card banao:

Topic 11
โœจ

๐Ÿ“‹ Summary Table

๐ŸŽฏ | Concept | Key Point | Ice Cream Analogy | |---------|-----------|------------------| |โ€ฆ
Topic 12
โญ

๐ŸŽฏ Pro Complete HTML Example โ€” Ice Cream Scoop System

โญ `html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <metaโ€ฆ
Topic 13
๐Ÿ“ฅ ๐Ÿ“ฅ ๐Ÿง  ๐Ÿ”ฌ ๐Ÿ’ก ๐ŸŽฏ

๐Ÿ”— Navigation

๐Ÿ”‘ โฌ…๏ธ Previous: CSS Border Shorthand | โžก๏ธ Next: CSS Margin Collapse
Diagram
๐Ÿ“ฅ โš™๏ธ ๐Ÿ”ฌ ๐Ÿ’ก

Visual Flow

๐Ÿ“Š Diagram visualization โ€” details in narration
Diagram
๐Ÿ“ฅ โš™๏ธ ๐Ÿ”ฌ ๐Ÿ’ก

Visual Flow

๐Ÿ“Š Diagram visualization โ€” details in narration
Quick Quiz
๐Ÿง  QUIZ TIME

Quiz โ€” Question 1

๐Ÿ”˜ CSS Rounded Borders โ€” Ice Cream Scoop System ๐Ÿจ๐Ÿฅ„ ka sabse sahi definition kya hai?

Quick Quiz
๐Ÿง  QUIZ TIME

Quiz โ€” Question 2

๐Ÿ”˜ CSS Rounded Borders โ€” Ice Cream Scoop System ๐Ÿจ๐Ÿฅ„ ka '1' kya hai?

Complete! ๐ŸŽ‰
COMPLETE

๐Ÿ”˜ CSS Rounded Borders โ€” Ice Cream Scoop System ๐Ÿจ๐Ÿฅ„ Complete!

Aliens School ยท HIEN ยท Cinematic Knowledge

โœ…

๐Ÿ”˜ CSS Rounded Borders โ€” Ice Cream Scoop System ๐Ÿจ๐Ÿฅ„ Complete

1/20
0:00
REC 00:00ESC=Cancel
Aliens School
3
Recording shuru hone wali hai...
โœ…
Recording Complete
Video process ho rahi hai...
Live Class
Slide 1 / 7
Timer
00:00
๐Ÿ“ Speaker Notes
โ€”
โญ๏ธ Up Next
โ€”
โ€”
๐Ÿ—‚๏ธ All Slides