ITDCFeD – Week #5 | آئی ٹی درسگاہ سرٹیفائیڈ کورسز - Dynamic Gallery + Lightbox + Carousel

, , , , , , ,


 ITDCFeD – Week #5 | آئی ٹی درسگاہ سرٹیفائیڈ کورسز - Dynamic Gallery + Lightbox + Carousel

1. تعارف

آئی ٹی درسگاہ سرٹیفائیڈ فرنٹ اینڈ ڈویلپر (ITDCFeD) پروگرام کے پانچویں ہفتے میں خوش آمدید۔ اس Week #5 میں ایک professional Image Gallery بنائی جائے گی جو آئی ٹی درسگاہ کے actual certified courses showcase کرے گی۔ یہ gallery carousel، filtering، lightbox modal اور keyboard navigation سمیت مکمل interactive ہے۔

یہ پروجیکٹ آپ کے portfolio میں production-ready component کے طور پر شامل ہو سکتا ہے، اور خاص طور پر آپ کے certified courses (XenForo, Windows, Frontend, Excel) کو beautifully present کرتا ہے۔

2. اس لیکچر / پروجیکٹ کے اہداف

Week #5 کے اختتام تک آپ:

  • HTML/CSS کے ذریعے CSS Grid سے responsive image gallery layout بنانا سیکھیں گے

  • JavaScript array (galleryData) سے dynamic content generation اور filtering کریں گے

  • Carousel navigation (previous/next buttons) اور lightbox modal implement کریں گے

  • Category filtering (زینفورو، ونڈوز، فرنٹ اینڈ، Excel) اور keyboard controls (arrow keys, Escape) add کریں گے

  • Real-world course showcase کے لیے branded content management سمجھیں گے

3. Live Demo اور Source Code (CodePen)

🔗 Live Demo + Source Code (CodePen):
https://codepen.io/mmshahid73/pen/WbxvxdV

استعمال کا طریقہ:

  • Carousel arrows (‹ ›) سے مختلف courses navigate کریں

  • Filter buttons سے مخصوص category (زینفورو، ونڈوز وغیرہ) دیکھیں

  • کسی بھی course image پر click کر کے lightbox modal کھولیں

  • Lightbox میں arrow keys یا nav buttons سے اگلا/پچھلا course دیکھیں

  • Escape key سے lightbox بند کریں

  • Fork کر کے اپنے courses یا projects add کریں

4. پروجیکٹ کی ساخت – Step-by-Step وضاحت

4.1 HTML – Gallery Layout

text
- Header: ITDCFeD Week #5 branding
- Controls: Carousel nav + Filter buttons (تمام/زینفورو/ونڈوز/فرنٹ اینڈ/Excel)
- Carousel: Featured course image + overlay title/description
- Gallery Grid: CSS Grid سے dynamic images (JS generate کرتا ہے)
- Lightbox Modal: Full-screen image viewer + nav + course info

4.2 CSS – Modern Responsive Design

text
- CSS Grid: `repeat(auto-fill, minmax(280px, 1fr))` - automatic responsive columns
- Hover Effects: Cards translateY(-8px) + shadow increase
- Gallery Overlay: Bottom slide-up animation on hover
- Lightbox: Fixed position, backdrop blur, keyboard accessible
- Carousel: Fixed height (400px desktop, 250px mobile) + gradient overlay

4.3 JavaScript – Core Functionality

text
1. galleryData array: 6 ITDarasgah courses کے images, titles, descriptions
2. renderGallery(): Filter کے مطابق gallery items dynamically بناتا ہے
3. Carousel Logic: prev/next buttons سے currentCarouselIndex update
4. Lightbox: Image click پر modal + keyboard navigation (ArrowLeft/Right/Escape)
5. Filtering: data-filter attributes سے category-wise filtering
6. Event Delegation: Dynamic gallery items پر click handlers

اہم Features:

  • loading="lazy" - Performance optimization

  • object-fit: cover - Perfect image cropping

  • Keyboard accessibility (WCAG compliant)

  • Mobile-first responsive design

5. Week #5 اسائنمنٹ / Homework

لازمی کام:

  1. CodePen Fork کریں: https://codepen.io/mmshahid73/pen/WbxvxdV

  2. اپنے مزید courses galleryData array میں add کریں (image URL, title, desc, category)

  3. Filter button نئی category کے لیے add کریں (مثلاً "Cyber Security", "Digital Marketing")

  4. CSS Customization (colors, hover effects, card spacing میں 2 تبدیلیاں)

  5. اپنا CodePen لنک ITDarasgah فورم Week #5 تھریڈ میں share کریں + screenshot

Bonus Challenges (اختیاری):

  • Search box add کریں جو course title میں search کرے

  • Favorite button (⭐) - favorite courses کو الگ section میں show کرے

  • Smooth scroll animation gallery items کے درمیان

6. Portfolio Value اور Real-World Usage

یہ gallery production-ready ہے اور:
✅ SaaS dashboards میں course/portfolio showcase کے لیے
✅ Agency websites میں client project galleries کے لیے
✅ E-learning platforms میں course catalogs کے لیے
✅ Personal portfolios میں project showcases کے لیے

Week #1-5 Summary: Personal Page → Form → To-Do → Pricing → Gallery = Complete Mini-Site Ready!

7. اختتامی پیغام / Call to Action

Week #5 کا یہ branded gallery آپ کے ITDarasgah certified courses کو professionally showcase کرتا ہے۔ اب CodePen fork کریں، اپنے courses add کریں، customize کریں اور فورم پر share کر کے ITDCFeD portfolio کا اہم component مکمل کریں!


-
Tags: , , , , , , ,

کوئی تبصرے نہیں:

ایک تبصرہ شائع کریں

سبسکرائب کریں در: تبصرے شائع کریں (Atom)