300 Progressive Practice Exercises (Hinglish)
Web Design Mastery ke interactive practice laboratory mein aapka swagat hai. Is laboratory mein 300 progressive coding challenges shamil hain jo HTML ke basic tags se lekar advanced asynchronous JavaScript aur browser Web APIs tak har topic ko cover karte hain.
Exercise Catalog & Difficulty Distribution
| Module | Range | Target Count | Core Topics Covered |
|---|---|---|---|
| 01. Basic HTML | EX-BHTML-01 se EX-BHTML-40 | 40 Questions | DOCTYPE, document skeleton, headings, lists, tables, forms, anchors, images |
| 02. Advanced HTML | EX-AHTML-01 se EX-AHTML-40 | 40 Questions | Semantic architecture, SEO meta, OpenGraph, <dialog>, <picture>, A11y & ARIA |
| 03. Basic CSS | EX-BCSS-01 se EX-BCSS-50 | 50 Questions | Selectors, box model, border-box, typography, colors, dimensions, positioning |
| 04. Advanced CSS | EX-ACSS-01 se EX-ACSS-60 | 60 Questions | Specificity, @layer, Flexbox axes, CSS Grid tracks, clamp(), animations, tokens |
| 05. Basic JavaScript | EX-BJS-01 se EX-BJS-50 | 50 Questions | Variables, types, operators, conditionals, loops, functions, array methods, DOM |
| 06. Advanced JavaScript | EX-AJS-01 se EX-AJS-60 | 60 Questions | Closures, execution context, this, Promises, async/await, Event Loop, Fetch API |
Module 01: Basic HTML Exercises (EX-BHTML-01 se 40)
EX-BHTML-01BeginnerDocument Structure
HTML5 Standards Skeleton
Ek standard HTML5 document structure likhein jisme DOCTYPE, English lang attribute ke sath html tag, UTF-8 charset, responsive viewport meta tag, title aur empty body shamil ho.
EX-BHTML-02BeginnerLinks & Anchors
Secure External Hyperlink
'https://developer.mozilla.org' ke liye ek hyperlink banayein jo naye tab mein khule aur Reverse Tabnabbing vulnerability se safe ho.
EX-BHTML-03IntermediateTables
Accessible Data Table with Scope
Ek accessible 3-column table banayein jisme 'Product', 'Quantity' aur 'Price' ho. Headers par scope attribute aur table caption lagayein.
EX-BHTML-04BeginnerForms
Explicit Accessible Form Label Binding
Email input field banayein jisko explicit label ke 'for' aur input ke 'id' se connect kiya gaya ho. Input required aur autocomplete enabled ho.
EX-BHTML-05BeginnerSemantic HTML
Semantic Page Landmarks
Header, nav, main, section aur footer elements use karke semantic page layout banayein bina kisi generic div ke.
Module 02: Advanced HTML Exercises (EX-AHTML-01 se 40)
EX-AHTML-01IntermediateHTML APIs
Native HTML5 Modal Dialog
Ek native <dialog> modal banayein jisme method='dialog' ka form ho jo cancel button dabane par automatically close ho jaye.
EX-AHTML-02AdvancedResponsive Images
Responsive Art-Direction Picture Element
Ek <picture> element banayein jo 1024px se badi screen par 'hero-wide.avif', 768px se choti screen par 'hero-mobile.webp' aur fallback mein 'hero.jpg' load kare.
EX-AHTML-03IntermediateForms Validation
Constraint Validation Regex Pattern
HTML5 pattern attribute use karke ek phone input banayein jo strictly '(123) 456-7890' format accept kare.
Module 03: Basic CSS Exercises (EX-BCSS-01 se 50)
EX-BCSS-01BeginnerBox Model
Universal Box-Sizing Reset
CSS ka standard universal reset rule likhein jo margins, paddings ko 0 kare aur sabhi elements par border-box apply kare.
EX-BCSS-02IntermediatePositioning
Centering with Absolute Positioning
Position relative parent ke andar ek child box ko horizontally aur vertically absolute positioning aur transform se center karein.
EX-BCSS-03BeginnerAccessibility
Accessible Custom Focus Ring
Buttons par mouse click focus outline remove karein lekin keyboard navigation par 2px cyan focus ring display karein.
Module 04: Advanced CSS Exercises (EX-ACSS-01 se 60)
EX-ACSS-01IntermediateCSS Grid
Responsive Auto-Fitting Grid
Ek responsive card grid banayein jo bina kisi media query ke auto-calculate ho aur cards 260px se chhote na hon.
EX-ACSS-02AdvancedModern CSS
Relational Parent Selector :has()
CSS rule likhein jo .card par 3px border lagaye agar uske andar koi checked checkbox maujood ho.
EX-ACSS-03IntermediateResponsive Design
Fluid Typography with clamp()
Fluid font size banayein jo 24px (1.5rem) minimum aur 48px (3rem) maximum ke beech viewport ke hisab se scale kare.
Module 05: Basic JavaScript Exercises (EX-BJS-01 se 50)
EX-BJS-01BeginnerArrays & Sets
Array Deduplication Function
Ek function 'removeDuplicates(arr)' banayein jo numbers ke array se duplicate values remove karke unique array return kare.
EX-BJS-02IntermediateDOM Events
Form Submission & Validation
Form submit event par default reload rokein, password length 8 se kam hone par alert karein aur valid hone par log karein.
Module 06: Advanced JavaScript Exercises (EX-AJS-01 se 60)
EX-AJS-01IntermediateClosures
Private State Bank Counter via Closures
Ek function 'createCounter(start = 0)' banayein jo increment, decrement aur getValue methods return kare. Count variable bahar se direct accessible nahi hona chahiye.
EX-AJS-02AdvancedPerformance
Production Debounce Utility
Reusable debounce utility banayein jo function call ko specified delay tak roke jab tak rapid calls band na ho jayein.
EX-AJS-03AdvancedAsync & APIs
Resilient Fetch with AbortController
AbortController use karke async fetch function banayein jo server dwara timeout limit tak response na aane par request cancel kare.
TIP
Sabhi 300 questions ke complete code solutions dekhne ke liye Master Answer Key par jayein.