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 RWD Viewport โ€” Device Screen Control

Analogy: Telescope Focus Lens System ๐Ÿ”ญ๐ŸŽฏ Socho ek Telescope hai! ๐ŸŒŒ - Telescope lens (viewport) = joโ€ฆ

Overview
๐ŸŒŸ

๐Ÿ”ญ๐ŸŽฏ CSS RWD Viewport โ€” Device Screen Control โ€” Quick Facts

๐Ÿ“Œ

Attribute: Value

๐ŸŽฏ

`width`: device-width

โšก

`initial-scale`: 1.0

Topic 1
๐Ÿ“š

๐Ÿ“Œ Viewport Kya Hai? โ€” Browser Ka Visible Area

๐Ÿ“š ๐Ÿ”ญ Telescope me jo dikhta hai = viewport! Different telescopes = different views! `mermaidโ€ฆ
Topic 2
๐Ÿ’ก ๐Ÿ“Š ๐Ÿ”ฌ

๐Ÿ“Œ Problem: Bina Viewport Meta Tag ๐Ÿ˜ก

๐Ÿ’ก ๐Ÿ”ญ Bina focus ke telescope se dekhna โ€” sab dhundhla, chhota, bekar! `mermaid graph LRโ€ฆ
Topic 3
๐Ÿ”’

๐Ÿ“Œ Viewport Meta Tag โญโญโญ โ€” ZAROOR Lagao!

๐ŸŽฏ ๐Ÿ”ญ Telescope ka focus set karo โ€” device ke hisaab se sharp image! `html <!--โ€ฆ
Topic 4
โญ

๐Ÿ“Œ Additional Viewport Properties

โญ ๐Ÿ”ญ Telescope ki extra settings โ€” zoom limits, zoom lock! `html <!--โ€ฆ
Topic 5
๐Ÿ“ฅ ๐Ÿ“ฅ ๐Ÿง  ๐Ÿ”ฌ ๐Ÿ’ก ๐ŸŽฏ

๐Ÿ“Œ Viewport Units โญ โ€” Lens Ke Relative Sizes

๐Ÿ”‘ ๐Ÿ”ญ Telescope ke field of view ke percentage me size karo! `css /*โ€ฆ
Topic 6
โœจ

๐Ÿ“Œ Mobile dvh vs vh Problem โญโญ

โœจ ๐Ÿ”ญ Mobile pe address bar aati-jaati hai โ€” vh vs dvh ka fark! `mermaid graph TD subgraph "๐Ÿ“ฑโ€ฆ
Topic 7
๐Ÿ”’

๐Ÿ“Œ Content Ko Viewport Me Fit Karo

๐ŸŒŸ ๐Ÿ”ญ Telescope me sab kuch frame me aana chahiye โ€” overflow nahi! `css /*โ€ฆ
Topic 8
๐Ÿš€

๐ŸŽฏ Complete Working Example โ€” Telescope Observatory ๐Ÿ”ญ๐ŸŽฏ

๐Ÿš€ `html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- โญ VIEWPORT METAโ€ฆ
Topic 9
๐Ÿ“ฅ โš™๏ธ ๐Ÿ”ฌ ๐Ÿ’ก

๐Ÿšซ Common Mistakes โ€” Galtiyan Jo Sab Karte Hain! โŒ

๐Ÿ“š | # | Galti โŒ | Sahi Tareeqa โœ… | Kyun? | |---|---------|----------------|-------| | 1 |โ€ฆ
Topic 10
๐Ÿ’ก ๐Ÿ“Š ๐Ÿ”ฌ

๐Ÿ‹๏ธ Practice Exercises โ€” Khud Try Karo! ๐Ÿ’ช

๐Ÿ’ก Exercise 1: Beginner โ€” Full-Screen Hero ๐Ÿ”ญ Task: Hero section banao: 100dvh height,โ€ฆ
Topic 11
๐Ÿ”’

๐Ÿ“‹ Summary Table โ€” Quick Reference ๐Ÿ“Š

๐ŸŽฏ | Concept | Key Point | Usage | |---------|-----------|-------| | Viewport Meta โญโญโญ |โ€ฆ
Topic 12
โญ

๐ŸŽฏ Golden Rules โ€” Yaad Rakho! ๐Ÿ“

โญ 1๏ธโƒฃ Viewport meta tag ZAROOR lagao โ€” bina iske KUCH kaam nahi! โญโญโญ 2๏ธโƒฃ user-scalable=noโ€ฆ
Comparison
โœจ

๐Ÿ“Œ Mobile dvh vs vh Problem โญโญ

โš–๏ธ

100vh: Ignore karta hai โŒ

โš–๏ธ

100dvh โญ: Dynamic consider! โœ…

โš–๏ธ

100svh: Visible assume

Diagram
๐Ÿ“ฅ โš™๏ธ ๐Ÿ”ฌ ๐Ÿ’ก

Visual Flow

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

Visual Flow

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

Quiz โ€” Question 1

๐Ÿ”ญ๐ŸŽฏ CSS RWD Viewport โ€” Device Screen Control ka sabse sahi definition kya hai?

Quick Quiz
๐Ÿง  QUIZ TIME

Quiz โ€” Question 2

๐Ÿ”ญ๐ŸŽฏ CSS RWD Viewport โ€” Device Screen Control ka 'width' kya hai?

Complete! ๐ŸŽ‰
COMPLETE

๐Ÿ”ญ๐ŸŽฏ CSS RWD Viewport โ€” Device Screen Control Complete!

Aliens School ยท HIEN ยท Cinematic Knowledge

โœ…

๐Ÿ”ญ๐ŸŽฏ CSS RWD Viewport โ€” Device Screen Control 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