MANMEET SAGRI

Style Guide & Setup

Both Hind and I had completed individual style guides for our P01 assignment. For P02 we consolidated them into one shared document, agreeing on a unified visual direction for the client. I set up the GitHub repository, established the branching workflow, and made sure both of us were committing our work to separate branches before merging.

The color palette uses a purple, dark blue, light blue, and green system that runs consistently across every page. The typography pairs Archivo Black for headings, Sour Gummy for subheadings and interactive elements, and Nunito for body text.

Building the Pages

The site covers six pages: Home, Programs, Register, Contact Us, Location and Hours, and the Style Guide. The home page features a parallax layered illustration scene, a scrolling about deck with anchor navigation, a team grid, and an events section. Programs lists three offerings with cards and links down to detailed daily schedule sections. The contact page has a full form with validation, and the location page embeds a live Google Maps iframe.

All layout is built with CSS Grid and Flexbox across three responsive breakpoints at 48rem and 64rem. Every element uses relative units (rem) so the layout scales with font size rather than breaking at fixed pixel values.

Checkout, Contact & Location Pages

I built three of the site's six pages entirely. The checkout page has two sections: a cart summary table showing the selected program, registration fee, spot deposit, and total, and a payment form with fields for parent name, payment method, card details, expiry, and CVV. On mobile the two panels stack; on desktop they sit side by side in a two-column grid.

The contact page pairs a quick-reference info panel on the left with a full message form on the right. The form includes name, email, optional phone, subject, message, and a send-a-copy-to-yourself checkbox, with both submit and reset actions. All inputs have proper label associations, required field indicators, and autocomplete attributes throughout.

The location page uses the Google Maps Embed API to show an interactive map of the daycare alongside the address, phone number, and hours of operation. On mobile the map and info stack vertically; on desktop they split into two columns. A direct link to open the location in Google Maps is also included so users on mobile can jump straight to directions.

GitHub & Version Control

I managed the GitHub repository throughout the project, including setting up the branching structure and overseeing merges. Working in a real collaborative Git workflow for the first time brought its own challenges: local and remote versions falling out of sync, conflicts appearing after pushes, and learning how to catch and resolve those issues before they affected the shared codebase.

I identified patterns in where conflicts were coming from, communicated clearly with my teammate about the pull-before-you-push workflow, and kept a close eye on commits throughout. It was a genuinely useful lesson that good collaboration requires just as much communication as it does code.

Accessibility Audit & Visual Consistency

Once the full site was built, I ran a thorough accessibility audit across every page. This included checking heading order (no skipped levels), confirming all images had meaningful alt text, verifying all form inputs had associated labels using the for attribute, reviewing ARIA labels on interactive regions, and making sure the language attribute was set on every HTML element.

The audit surfaced inconsistencies across the codebase: heading hierarchy issues, missing label associations, and elements that were not semantically appropriate for their content. I worked through each one systematically and fixed them before submission.

I also reviewed every page for visual consistency, correcting misaligned elements, uneven spacing, and components that were not rendering the same way across pages. I applied box-sizing border-box globally and used Flexbox alignment to make sure all cards, buttons, and form fields were consistent and properly aligned at every screen size.