1. Context
• Company: Webonzaï (web agency) — Client: Riding Cities, a regional skate association.
• Team: Artdantech, Romain (CTO), graphic designer (mockup provided).
• Deliverables: updated HTML page matching the mockup, new “Founding members” section, schedule section with a title and two download buttons (kids/adults), asset pack (optimized images, PDFs) and delivery notes (or commits).
• Starting point: instruction video (03:57), existing page and codebase, final mockup (files provided as attachments).
2. Need
• Create a new “Founding members” section with founders’ names and photos (descriptive alt text, captions if required by the mockup).
• Update the “Download class schedule” section by adding a title and two distinct buttons: “Kids schedule” and “Adults schedule”.
• Use HTML only, reusing/copying existing CSS classes to match the mockup precisely and preserve responsiveness.
3. Client / Stakeholders
• Riding Cities (target audience: families, kids, adults practicing skateboarding).
• Romain (CTO) for technical validation and mockup compliance.
• Webonzaï (agency) for quality, maintainability, and fast execution.
4. Goals
4.1 Functional
• Display the “Founding members” section with photos, names, and (if present in the mockup) a short description/role.
• Offer two separate schedule downloads (kids and adults) with a clear title above the section.
• Preserve visual consistency and accessibility (semantic structure, alt text, logical reading order).
4.2 Technical
• HTML-only: reuse existing CSS classes (copy/paste), do not modify the CSS file.
• Semantics: section, h2, ul/li or figure/figcaption for founders; a with the download attribute for schedules.
• Accessibility: descriptive alts, explicit headings, keyboard-identifiable links/buttons, consistent heading hierarchy.
• Compatibility & responsive: respect existing grid/utility classes, correct image dimensions per the mockup.
5. Constraints / Challenges
• No CSS/JS allowed: everything must be achieved with HTML structure + existing classes only.
• Strict mockup fidelity and adherence to the current design system (typography, spacing, button styles).
• Asset management: consistent file naming, optimized weight (without touching CSS), correct src paths, alt text, compatible formats.
• Short timeline: deliver a faithful version quickly for remote validation by Romain.
6. Process / Methodology
6.1 Analysis
• Open the mockup and identify target section structure (headings, grids, margins, image sizes, button styles).
• Audit existing HTML: find reusable components (cards, buttons, grids) and utility classes (spacing, colors).
• List missing assets: founders’ photos (expected sizes/ratios) and two schedule PDFs (e.g., planning-enfants.pdf, planning-adultes.pdf).
6.2 Breakdown into GitHub issues
• Prep: review provided files, create branch feature/riding-cities-update.
• “Founding members” section: semantic structure, integrate images/names, apply existing CSS classes.
• Schedule section: add title, duplicate existing button to create two CTAs, correct labels/links (download).
• Accessibility & content: image alts, heading order, explicit link/button text.
• Checks: responsive behavior, working links, W3C validation, final fixes and PR.
6.3 Architecture & logic
• Global HTML document: keep existing header/main/footer; insert new sections inside main according to the mockup order.
• “Founding members”:
- section#founders with h2 “Founding members”.
- Grid of items: ul > li or card elements; per member: figure > img + figcaption (name, role).
- Classes: reuse existing grid/card classes (e.g., .card, .grid, .avatar if available).
• “Download the class schedule”:
- section#planning with a clear h2.
- Two download links: <a href="planning-enfants.pdf" class="btn …" download>Kids schedule</a> and the adults equivalent.
- Reuse the existing button class for consistent styling (primary/secondary if present).
6.4 Technical choices (rationale)
• Semantic HTML5 improves accessibility/SEO without touching CSS.
• Strict reuse of existing CSS classes ensures pixel-perfect rendering and prevents style regressions.
• figure/figcaption correctly associates portrait + identity/role visually and semantically.
• download attribute makes the schedule action explicit to users.
6.5 Main flows
• Founders integration: create the section, add figures (img + caption), apply the grid, verify desktop/mobile rendering.
• Schedule integration: add the title, duplicate the existing button, update labels and PDF targets, test downloads.
• Quick review: heading consistency, alignment, spacing, alt text quality, valid links.
6.6 Tests & quality
• HTML validation: W3C Validator (no blocking errors).
• Accessibility: keyboard navigation, visible focus, meaningful alts, correct heading structure; quick check with axe/Chrome DevTools.
• Responsive: test key widths (mobile/tablet/desktop), verify founders card wrapping and button layout.
• Links & assets: verify paths, file names, PDF availability, image rendering.
7. Analysis
• With HTML-only constraints, success depends on correctly reusing existing CSS classes and maintaining clean semantics. Reapplying existing layout/component patterns ensures fast, consistent, accessible integration without impacting the global styling.
8. Technical decisions
• Semantic HTML5 (section, headings) and figure/figcaption patterns for portraits.
• Download links with explicit labels and clear kids/adults distinction.
• Systematic reuse of the site’s existing design-system classes to match the mockup and preserve responsiveness.
9. Resolution logic
• Start from the mockup and existing components, add the founders section by mirroring an existing grid pattern, then refactor the schedule area by controlled duplication of the original CTA; finish with accessibility/responsive checks and HTML validation before delivery.
10. Stack used
• HTML5 only (no CSS/JS modifications).
• Tools: code editor, Live Server/browser preview, W3C Validator, Chrome DevTools (responsive), Git versioning (branch + PR).
• Assets: optimized images (formats/sizes aligned with the mockup), clearly named PDFs.
11. Final result
• Updated Riding Cities page: mockup-accurate “Founding members” section and schedule area with a title + two distinct buttons (kids/adults).
• Accessibility and semantics respected (headings, alt text, keyboard), responsive rendering preserved via existing CSS classes.
• Clean delivery: validated HTML, working links, clear asset structure, delivery notes/commits ready for Romain’s review.