Whats App Discussion Group

Git https://github.com/mua22/fa25-webtech

Submit this form https://forms.gle/P8YMQEzDt22kuJRq5

Lab Task 1 — Plain CSS Landing Page (No Frameworks)

Brief

Recreate the layout and feel of the instructor’s target website as a single-page landing site using semantic HTML5 and plain CSS only. Focus on structure, responsiveness, accessibility, and consistency.
Target website: (use the link you’ve already provided to students)

Learning Objectives

  • Practice semantic HTML5 layout.
  • Build responsive layouts with plain CSS and media queries.
  • Apply accessibility basics (alt text, focus, contrast).
  • Improve visual consistency (spacing scale, type scale, color system).

Requirements

  • Tech: HTML + CSS only. No JS, no Bootstrap/Tailwind, no UI kits.
  • Structure: header (with nav), main (sections), footer.
  • Sections to include:
    • Hero: headline, subtext, primary CTA
    • Features/Services (cards/columns)
    • Social proof (testimonials/logos)
    • Secondary CTA near the end
    • Footer with links/contact
  • Responsiveness: at least two breakpoints (e.g., ≤900px, ≤600px).
  • Accessibility: alt text for images, sensible headings, keyboard-focus visible, color contrast.
  • Performance: optimized images (no oversized assets).
  • Consistency: establish spacing and type scales; stick to them.

Assignment 1 — Checkout Page (Bootstrap, Responsive)

Goal

Build a responsive Checkout page for your term project’s target website using Bootstrap 5. Demonstrate layout, forms, and responsiveness across mobile/tablet/desktop.

What to Build

A single page: checkout.html that includes:

  1. Progress header
    • Steps: Cart → Address → Payment → Review (highlight current: Checkout).
  2. Customer & Shipping Form
    • Fields: full name, email, phone, address, city, postal code, country (select), checkbox “Billing same as shipping”.
  3. Order Summary (sticky on desktop)
    • Product list (name, qty, price), subtotal, shipping, tax, grand total.
    • Apply coupon (input + button, non-functional OK).
  4. Payment Section
    • Radio options: Card, COD, Wallet.
    • If Card: cardholder, number (mask pattern ok), expiry, CVV.
  5. Review & Place Order
    • Terms checkbox + “Place Order” button (disabled until checked).

Bootstrap Requirements

  • Use Bootstrap Grid (container, row, col-12 col-md-7 + col-12 col-md-5 for summary).
  • Use components: form-floating or standard forms, input-group, card, list-group, accordion (optional).
  • Utilities: spacing (g-3, mb-*), display (d-none d-md-block), sticky (position-sticky top-0).

Responsiveness Demo

  • Mobile (≤576px): single column (summary below form).
  • Tablet (≥768px): two columns stacked with proper gutters.
  • Desktop (≥992px): two columns; summary becomes sticky.
  • No horizontal scroll at any breakpoint.

Accessibility & UX

  • Proper labels/aria-describedby, visible focus states.
  • Client-side required validation (Bootstrap validation states).
  • Currency formatting (static text OK).

Lab Assignment 2 — Client-Side Form Validation (jQuery)

Goal

Enhance the Checkout Page (from Lab Assignment 1) by adding client-side validation using jQuery. The page must provide clear error feedback to the user before submission.

Requirements

  1. Validation Rules
    • Full name: Required, at least 3 characters.
    • Email: Required, must be a valid email format.
    • Phone: Required, digits only, at least 10 digits.
    • Address: Required.
    • City: Required.
    • Postal code: Required, numeric only, length 4–6.
    • Country: Required (cannot leave as default/blank).
    • Payment method: Must select one.
    • Card fields: Only required if Card is selected.
    • Terms checkbox: Must be checked before submitting.
  2. Error Messages
    • Display under each invalid field.
    • Should disappear once corrected.
  3. Styling
    • Use Bootstrap validation states (e.g., is-invalid, is-valid).
    • Error messages styled with .invalid-feedback.
  4. UX
    • Prevent submission until all validations pass.
    • Smooth scroll to the first error field if any.

Assignment 2 — Single Page CRUD App (jQuery + REST API)

Goal

Build a single-page CRUD application (Create, Read, Update, Delete) using HTML, Bootstrap, jQuery, and any free Fake REST API.
This assignment extends your skills from Lab 1 by making your page interactive with AJAX calls.

Requirements

1. Choose a Free REST API (Examples)

Example endpoints (JSONPlaceholder):

  • GET https://jsonplaceholder.typicode.com/posts
  • POST https://jsonplaceholder.typicode.com/posts
  • PUT https://jsonplaceholder.typicode.com/posts/1
  • DELETE https://jsonplaceholder.typicode.com/posts/1

2. CRUD Features (on one page)

  • Read (R): Display a list of items (e.g., posts, users, products) in a Bootstrap table or card layout.
  • Create (C): Form to add a new item → send POST. Append to list without reload.
  • Update (U): “Edit” button → prefill form → update via PUT. Show updated item in list.
  • Delete (D): “Delete” button → confirm → send DELETE → remove item from list dynamically.

3. Technical Requirements

  • Use Bootstrap 5 for layout and styling.
  • Use jQuery AJAX ($.ajax / $.get / $.post) for API calls.
  • Handle success & error responses gracefully (alerts/toasts).
  • Show loading state (spinner or “Loading…”).
  • No page reloads allowed — everything must update dynamically.

Lab Task 3

Convert your existing e-commerce HTML/CSS layout into an Express.js application.

Set up clean and meaningful routes for all pages of your e-commerce site.

Create a new Express project.

Configure a layout/template system (e.g., EJS).

Break your pages into proper views and partials.

Assignment 3

Extend your Express-based e-commerce project by integrating MongoDB using Mongoose.

Tasks:

  1. Connect your Express app to MongoDB using Mongoose.
  2. Create a Product model with appropriate fields (e.g., name, price, category, image, description).
  3. Insert sample product data into the database.
  4. Display products on the front-end page by fetching them from MongoDB.
  5. Implement pagination (e.g., page=1, limit=10).
  6. Add filtering options such as category or price range.

Output:
A fully functional product listing page where data loads dynamically from MongoDB with working pagination and filters.

Lab Task 4

Create an Admin Panel for your e-commerce project with its own separate layout.

Tasks:

  1. Build an admin layout different from the main website layout.
  2. Create routes and views for admin pages (dashboard, product list, add/edit product, etc.).
  3. Implement full CRUD operations for products using Mongoose.
    • Create
    • Read
    • Update
    • Delete
  4. Ensure admin pages load data dynamically from MongoDB.

Term Projects

Group Roll Number Name Web Title Link
G3 CIIT/SP23-BCS-001/LHR ABDUL REHMAN Burger https://themes.muffingroup.com/be/burger
G3 CIIT/SP23-BCS-002/LHR ABDUL REHMAN JAVED Profile https://themes.muffingroup.com/be/profile
G3 CIIT/SP23-BCS-003/LHR ABDULLAH Farmer https://themes.muffingroup.com/be/farmer
G3 CIIT/SP23-BCS-005/LHR ABDULLAH LATIF Copywriter https://themes.muffingroup.com/be/copywriter
G3 CIIT/SP23-BCS-006/LHR ABDULLAH TEHAMI Horse Riding https://themes.muffingroup.com/be/horse
G3 CIIT/SP23-BCS-007/LHR ABDULLAH YASIN Notebook https://themes.muffingroup.com/be/notebook
G3 CIIT/SP23-BCS-009/LHR ABU BAKAR AMIN Dietitian https://themes.muffingroup.com/be/dietitian
G3 CIIT/SP23-BCS-010/LHR ABU ZAR Investment https://themes.muffingroup.com/be/investment
G3 CIIT/SP23-BCS-013/LHR ALI AHMAD Handmade https://themes.muffingroup.com/be/handmade
G3 CIIT/SP23-BCS-014/LHR ALI HASSAN Space https://themes.muffingroup.com/be/space
G3 CIIT/SP23-BCS-015/LHR AMAAN ALI BHATTI Club https://themes.muffingroup.com/be/club
G3 CIIT/SP23-BCS-017/LHR AMNA JAVAID Buddy https://themes.muffingroup.com/be/buddy
G3 CIIT/SP23-BCS-019/LHR AMNAH MUMTAZ AHMAD Lab https://themes.muffingroup.com/be/lab
G3 CIIT/SP23-BCS-020/LHR ANAM KHAN Zoo https://themes.muffingroup.com/be/zoo
G3 CIIT/SP23-BCS-022/LHR AREEBA YASMEEN ASG https://themes.muffingroup.com/be/asg
G3 CIIT/SP23-BCS-023/LHR AREESHA ISHAQ Journalist https://themes.muffingroup.com/be/journalist
G3 CIIT/SP23-BCS-025/LHR ARIKA SHEHZAD Simple https://themes.muffingroup.com/be/simple
G3 CIIT/SP23-BCS-026/LHR AROOJ ASLAM Extreme https://themes.muffingroup.com/be/extreme
G3 CIIT/SP23-BCS-027/LHR AROOJ FATIMA Voyager https://themes.muffingroup.com/be/voyager
G3 CIIT/SP23-BCS-028/LHR AROOJ NADEEM Typo https://themes.muffingroup.com/be/typo
G3 CIIT/SP23-BCS-029/LHR ASAD RASHEED Tuning https://themes.muffingroup.com/be/tuning
G3 CIIT/SP23-BCS-031/LHR ATEEQ UR REHMAN QURESHI Smart https://themes.muffingroup.com/be/smart
G3 CIIT/SP23-BCS-032/LHR AYESH AHMAD Glasses https://themes.muffingroup.com/be/glasses
G3 CIIT/SP23-BCS-034/LHR AYESHA SHEHZAD Taxi https://themes.muffingroup.com/be/taxi
G3 CIIT/SP23-BCS-035/LHR AZAZ AHSAN Decor https://themes.muffingroup.com/be/decor
G3 CIIT/SP23-BCS-037/LHR BEENISH FATIMA Builder https://themes.muffingroup.com/be/builder
G3 CIIT/SP23-BCS-039/LHR BUSHRA JABBAR Karting https://themes.muffingroup.com/be/karting
G3 CIIT/SP23-BCS-040/LHR ESHA RAZIA Coaching https://themes.muffingroup.com/be/coaching
G3 CIIT/SP23-BCS-041/LHR FAIQ YOUSAF Leasing https://themes.muffingroup.com/be/leasing2/
G3 CIIT/SP23-BCS-043/LHR FAIZA SATTAR Surfing https://themes.muffingroup.com/be/surfing
G3 CIIT/SP23-BCS-054/LHR HUSNAIN SHAHID GILL shop 2 https://themes.muffingroup.com/betheme-store2/
G3 CIIT/SP23-BCS-058/LHR IRSA GHAZAL Software https://themes.muffingroup.com/be/software
G3 CIIT/SP23-BCS-059/LHR IZZA ZAINAB NIAZI Library https://themes.muffingroup.com/be/library
G3 CIIT/SP23-BCS-060/LHR KASHIR HANIF Digital https://themes.muffingroup.com/be/digital
G3 CIIT/SP23-BCS-064/LHR LYEBA YASMIN Ice Cream https://themes.muffingroup.com/be/icecream
G3 CIIT/SP23-BCS-067/LHR MALEAHA MANSOOR Constructor https://themes.muffingroup.com/be/constructor
G3 CIIT/SP23-BCS-070/LHR MEHWISH MUBEEN Interactive https://themes.muffingroup.com/be/interactive
G3 CIIT/SP23-BCS-073/LHR MINAHIL SHABBIR MANJ Agro https://themes.muffingroup.com/be/agro
G3 CIIT/SP23-BCS-080/LHR MUHAMMAD ABDULLAH Media https://themes.muffingroup.com/be/media
G3 CIIT/SP23-BCS-084/LHR MUHAMMAD AMIR Cosmetics https://themes.muffingroup.com/be/cosmetics
G3 CIIT/SP23-BCS-099/LHR MUHAMMAD TAYYAB Jet https://themes.muffingroup.com/be/jet
G3 CIIT/SP23-BCS-118/LHR SUBHAN AHMED Dentist https://themes.muffingroup.com/be/dentist
G3 CIIT/SP23-BCS-126/LHR MUHAMMAD RAJAB KAMRAN FRAZ Krav Maga https://themes.muffingroup.com/be/kravmaga
G3 CIIT/SP23-BCS-132/LHR NIDA ASIF Transfer https://themes.muffingroup.com/be/transfer
G3 CIIT/SP23-BCS-134/LHR AYESHA ARSHAD Showcase https://themes.muffingroup.com/be/showcase
G3 CIIT/SP23-BCS-144/LHR MUHAMMAD NAUMAN MUJAHID Cafe https://themes.muffingroup.com/be/cafe
G4 CIIT/FA22-BCS-090/LHR KHANSA AAMIR Bike Rental https://themes.muffingroup.com/be/bikerental
G4 CIIT/FA22-BCS-107/LHR AMNA ZULFIQAR Massage https://themes.muffingroup.com/be/massage
G4 CIIT/FA22-BCS-135/LHR HADIA AFZAL Call Center https://themes.muffingroup.com/be/callcenter
G4 CIIT/FA22-BCS-151/LHR MOHSIN HASSAN Golf https://themes.muffingroup.com/be/golf
G4 CIIT/SP23-BCS-045/LHR FARAH AMBER Theater https://themes.muffingroup.com/be/theater
G4 CIIT/SP23-BCS-048/LHR FIZZAH ASHRAF Flower https://themes.muffingroup.com/be/flower
G4 CIIT/SP23-BCS-050/LHR HAFIZ ABDULLAH SAIM Handyman https://themes.muffingroup.com/be/handyman
G4 CIIT/SP23-BCS-053/LHR HASEEB FAROOQ Translator https://themes.muffingroup.com/be/translator
G4 CIIT/SP23-BCS-062/LHR KHADIJA NOOR Story https://themes.muffingroup.com/be/story
G4 CIIT/SP23-BCS-065/LHR MAHA KHALID Factory https://themes.muffingroup.com/be/factory
G4 CIIT/SP23-BCS-069/LHR MARYAM QASIM Recipes https://themes.muffingroup.com/be/recipes
G4 CIIT/SP23-BCS-071/LHR MEMOONA SHAHID Sport https://themes.muffingroup.com/be/sport
G4 CIIT/SP23-BCS-083/LHR MUHAMMAD ALI RAMZAN Store https://themes.muffingroup.com/be/store
G4 CIIT/SP23-BCS-087/LHR MUHAMMAD HARIS BIN MUSHTAQ Animals https://themes.muffingroup.com/be/animals
G4 CIIT/SP23-BCS-089/LHR MUHAMMAD HASSAN FAROOQ WebDesign https://themes.muffingroup.com/be/webdesign
G4 CIIT/SP23-BCS-090/LHR MUHAMMAD HURAIR NASIR Safari https://themes.muffingroup.com/be/safari
G4 CIIT/SP23-BCS-093/LHR MUHAMMAD MUNEEB KHALID AdAgency https://themes.muffingroup.com/be/adagency
G4 CIIT/SP23-BCS-098/LHR MUHAMMAD SALMAN ADIL Congress https://themes.muffingroup.com/be/congress
G4 CIIT/SP23-BCS-100/LHR MUHAMMAD UBAID ASHRAF Video https://themes.muffingroup.com/be/video
G4 CIIT/SP23-BCS-101/LHR MUHAMMAD USMAN ALI Steak https://themes.muffingroup.com/be/steak
G4 CIIT/SP23-BCS-105/LHR MUHAMMAD WASIF Clinic https://themes.muffingroup.com/be/clinic
G4 CIIT/SP23-BCS-106/LHR MUHAMMAD YOUSIF Play https://themes.muffingroup.com/be/play
G4 CIIT/SP23-BCS-107/LHR MUSKAN IRFAN Fashion https://themes.muffingroup.com/be/fashion
G4 CIIT/SP23-BCS-108/LHR NIMRAH WASEEM Disco https://themes.muffingroup.com/be/disco
G4 CIIT/SP23-BCS-109/LHR NOOR FATIMA Fix https://themes.muffingroup.com/be/fix
G4 CIIT/SP23-BCS-111/LHR RAHEEBA MUHAMMAD AAMIR Bar https://themes.muffingroup.com/be/bar
G4 CIIT/SP23-BCS-112/LHR RAMSHA KHAN Coffee https://themes.muffingroup.com/be/coffee
G4 CIIT/SP23-BCS-113/LHR RIDA-E-ZAINAB Finance https://themes.muffingroup.com/be/finance
G4 CIIT/SP23-BCS-114/LHR SADIA IQBAL Cleaner https://themes.muffingroup.com/be/cleaner
G4 CIIT/SP23-BCS-116/LHR SAMAN MAJEED IT Service https://themes.muffingroup.com/be/itservice
G4 CIIT/SP23-BCS-117/LHR SHEECE AHMAD Jeweler https://themes.muffingroup.com/be/jeweler
G4 CIIT/SP23-BCS-120/LHR SYEDA NABAHAT ZEHRA Records https://themes.muffingroup.com/be/records
G4 CIIT/SP23-BCS-123/LHR URWAH MUHAMMAD Politics https://themes.muffingroup.com/be/politics
G4 CIIT/SP23-BCS-124/LHR USAMA AHMED Pole https://themes.muffingroup.com/be/pole
G4 CIIT/SP23-BCS-125/LHR WALEED AHMAD Energy https://themes.muffingroup.com/be/energy
G4 CIIT/SP23-BCS-127/LHR YAMNA SHABBIR Launch https://themes.muffingroup.com/be/launch
G4 CIIT/SP23-BCS-130/LHR ZOHA NISAR GILL Tattoo https://themes.muffingroup.com/be/tattoo
G4 CIIT/SP23-BCS-131/LHR ZUKHRUF FATIMA Yoga https://themes.muffingroup.com/be/yoga
G4 CIIT/SP23-BCS-139/LHR KAMRAN UMAR Insurance https://themes.muffingroup.com/be/insurance
G4 CIIT/SP23-BCS-140/LHR MARVA ASIF Driving https://themes.muffingroup.com/be/driving
G4 CIIT/SP23-BCS-142/LHR MUHAMMAD HAMZA GHAFFAR Party https://themes.muffingroup.com/be/party
G4 CIIT/SP23-BCS-143/LHR SHAMAMA ASLAM Vision https://themes.muffingroup.com/be/vision
G4 CIIT/SP23-BCS-145/LHR TALIA MAHRU Model https://themes.muffingroup.com/be/model
G4 CIIT/SP23-BCS-147/LHR ABDUL REHMAN YOUSAF PR https://themes.muffingroup.com/be/pr
G4 CIIT/SP23-BCS-151/LHR SYED HASSAN ALI KAZMI Baker https://themes.muffingroup.com/be/baker
G4 CIIT/SP23-BCS-153/LHR ASFAND YAR KHAN Language https://themes.muffingroup.com/be/language
G4 CIIT/SP23-BCS-154/LHR HAMZA NASEEM Security https://themes.muffingroup.com/be/security

My Name is Usman