Chapter 15 — Combined Practical Projects

Project goals

• Start with semantic and accessible HTML.
• Use one main region and meaningful sections, articles, asides, navigation, and footers.
• Give form controls clear labels, purposes, instructions, groups, and explicit button types.
• Use lists and tables only when their content relationships call for them.
• Choose Flexbox for primarily one-dimensional relationships and Grid when rows and columns work together.
• Use wrapping, track sizing, constraints, and units intentionally.
• Add media-query changes where content needs a different layout.
• Keep images responsive and crop them only when the design permits it.
• Use pseudo-elements only for optional presentation.
• Keep overflowing information reachable.
• Add interaction and structural pseudo-classes appropriately.
• Use brief, purposeful motion and respect reduced-motion preferences.
• Use positioning only when it expresses a real visual or scrolling relationship.
• Explain what was combined and why.

Read the combined-project overview

Projects

1. 1. Product cards — semantic product articles with a wrapping grow/shrink/basis pattern
2. 2. Signup form — flexible action buttons, focus states, safe overflow, and a fixed utility link
3. 3. Article hero — explicit article/aside flex ratios, overlay contrast, and sticky resources
4. 4. Event guide — evenly growing, wrapping schedule links with sticky and positioned details
5. 5. Team dashboard — responsive Grid tracks containing flexible metrics and task rows
6. 6. Resource library — auto-fitting Grid cards with Flexbox filters and aligned metadata
7. 7. Aurora AI landing page — dark product design with a split hero, CSS dashboard, feature and pricing Grids, gradients, and responsive rearrangement
8. 8. Terra travel landing page — editorial typography, a photographic hero, flexible search, asymmetrical destinations, and responsive story sections
9. 9. Pulse fitness landing page — energetic typography, positioned metrics, Bento-style programs, trainer cards, flexible schedules, and memberships
10. 10. Learning progress dashboard — light editorial cards, accessible course filters, progress status, ordered lessons, and learner data
11. 11. Project operations dashboard — compact SaaS styling, advanced task controls, release health, milestones, and team workload
12. 12. Fitness and wellness dashboard — warm organic cards, goal planning, readiness status, activity lists, and workout history
13. 13. Velocity sneaker landing page — bold product storytelling with transitioned controls, transformed footwear, finite entrances, and colourway cards
14. 14. Graeon no-code landing page — playful SaaS design with layered interface cards, a finite drag demonstration, templates, and workflow steps
15. 15. Moselle tourism landing page — editorial regional storytelling with colour-in-motion cues, image reveals, local stories, and trip planning
16. 16. Prism trading landing page — dark glassmorphism, layered market data, glowing chart details, and focused conversion paths
17. 17. Northstar digital agency landing page — oversized editorial type, offset portfolio work, high-contrast service rows, and energetic calls to action
18. 18. Meridian business agency landing page — polished corporate presentation with services, proof points, case-study results, and thought leadership