Front End web design &
development Sprint
Semester 2
Assignment 1: "Modulo" – A Modern Furniture Brand
Product Focus: High-end, modular minimalist furniture.
Bootstrap Technical Focus: Advanced Grid System & Card Overlays.
Part 1: Documentation Requirements (Ideation to Prototype)
Students must submit a Process Deck (PDF) containing:
1. Ideation & Mood Board: Research of competitors (IKEA, Herman Miller, Article). Constraint:
The design must use a monochromatic color scheme with one accent color (to force focus on
spacing and imagery).
2. Low-Fidelity Wireframes (Mobile First):
· Homepage: Hero image, Category Grid, "Best Sellers" list.
· Product Page: Image gallery, Dimensions/Details accordion, Add to Cart button.
3. High-Fidelity Prototype (Figma/Adobe XD): Must show the exact hover state of a product card
(e.g., Image zooms slightly, "Quick View" button fades in over the image).
4. Site Architecture Note: How will you organize Collections (Living, Bedroom) vs Materials
(Wood, Metal) in the Navbar?
Part 2: Build with Bootstrap (The Assignment)
Technical Specs:
· Bootstrap Grid Challenge: On desktop, the "Best Sellers" section must display 4 items. On
tablet, 2 items. On mobile, 1 item. Use row-cols-* classes.
· Component Requirement: Use Bootstrap Cards but customize them with card-img-overlay to
place the product name and price directly on top of the furniture image (transparent black
gradient background).
· Interactive Element: Implement a Bootstrap Modal that pops up with product dimensions when
the student clicks "Details."
Deliverable Code: One HTML file, one custom CSS file (to override Bootstrap variables), and
the linked Process Deck PDF.
Assignment 2: "Knead & Proof" – Artisan Pastry & Coffee
Product Focus: Warm, organic, sensory-focused bakery.
Bootstrap Technical Focus: Responsive Tables (Menu) & Carousel (Gallery).
Part 1: Documentation Requirements (Ideation to Prototype)
Students must submit a Process Deck (PDF) containing:
1. Ideation & Color Palette Analysis: Students must define exactly which Bootstrap SASS
variable they would change to make $primary a warm cinnamon brown and $body-bg an
off-white cream. (Answers: $primary: #8B4513; and $body-bg: #FDFBF7;).
2. Wireframes for Conversion: Wireframe the "Order Ahead" page. The primary goal is clarity.
Should the menu be a list group or a table?
3. High-Fidelity Prototype: Focus on typography. Must include a custom Google Font (e.g.,
Playfair Display for headings) to contrast with Bootstrap's native system font stack.
4. Content Strategy: Document the text for 3 pastry items. Include: Name, Description (allergens
bolded), Price.
Part 2: Build with Bootstrap (The Assignment)
Technical Specs:
· Component Requirement: Use the Bootstrap Table component (table, table-striped,
table-hover) for the full pastry menu. Challenge: The table must be horizontally scrollable on
mobile screens using table-responsive.
· Hero Section: Use a Bootstrap Carousel with 3 slides of fresh bread/pastries. Important: The
carousel alt text must be descriptive and accurate for accessibility points.
· Badge Integration: Use Bootstrap Badges (badge bg-warning text-dark) next to menu items to
indicate "Gluten Free" or "Vegan."
· Bootstrap Icons: Students must replace the default Carousel controls with Bootstrap Icons
(Chevron Left/Right) instead of the default text arrows.
Deliverable Code: HTML/CSS file with the Menu Table and Carousel. The Process Deck must
include the specific SASS variable names they researched.
Assignment 3: "The Gentry" – Barber Shop & Men's Salon
Product Focus: Appointment booking, service lists, and barber profiles.
Bootstrap Technical Focus: Forms, Validation, and Navbar (Toggler).
Part 1: Documentation Requirements (Ideation to Prototype)
Students must submit a Process Deck (PDF) containing:
1. Ideation & User Flow: Map out the single most important user journey: Landing Page -> View
Services -> Choose Barber -> Book Appointment.
2. Wireframes for Navigation: Sketch the Bootstrap Navbar collapsed on mobile (the Hamburger
menu). Document what items will be in the dropdown vs. always visible.
3. High-Fidelity Prototype: Design the Barber Profile Cards. Must include: Photo (rounded
circle), Name, Specialty (Fades/Beards), and a "Book" button.
4. Form Logic Planning: Write down the validation rules for the booking form:
· Name: Required.
· Date: Must be a future date.
· Service: Dropdown selection required.
Part 2: Build with Bootstrap (The Assignment)
Technical Specs:
· Navigation: Implement a fully functional Bootstrap Navbar that collapses into a hamburger
menu on lg breakpoint and lower.
· Service Section: Use Bootstrap List Group with Checkboxes and Radios to simulate service
selection (e.g., Haircut $30, Beard Trim $15). Note: This is a UI simulation, not a functional cart.
· The Booking Form: Build a form using form-control, form-select, and implement Bootstrap
Validation. Students must use the needs-validation class and show red/green feedback states
on submit.
· Grid Alignment: Use justify-content-between on a Flex utility to align the logo (left) and the
"Call Us" button (right) inside the Navbar.
Deliverable Code: HTML page with a functioning (non-submitting) validated form that
demonstrates Bootstrap's form layout classes (row & col inside forms).
Submission deadline.
1st of May 2026 12:00 pm.