HomeBound Aisha

Overview

HomeBound Aisha is a multi-page responsive website delivered as a real client project for a home-based cleaning and domestic service provider. The site presents the business professionally across four pages: a landing page with a hero section and service highlights, a dedicated services page with detailed listings and pricing tiers, an about page establishing trust through the owner's story and credentials, and a contact page with a validated enquiry form. The layout was engineered mobile-first, meaning base styles target small screens and progressive enhancements are layered on at wider breakpoints. The project earned 4 GitHub stars and demonstrated a complete client delivery workflow from brief to deployed product on GitHub Pages.

Architecture

Tech Stack

• HTML5 — Semantic elements: nav, main, section, article, footer with ARIA labels throughout
• CSS3 — Custom properties (variables), Flexbox for nav and card rows, CSS Grid for service and testimonial layouts
• Responsive Design — Mobile-first base styles with @media (min-width) breakpoints at 480 px, 768 px, and 1024 px
• Vanilla JavaScript — Contact form validation, smooth scroll via scrollIntoView, mobile navigation toggle
• GitHub Pages — Static hosting with custom domain support

Build Process

/* style.css — design tokens */
:root {
  --color-primary: #2c6e49;
  --color-accent:  #80b918;
  --color-bg:      #fafafa;
  --color-text:    #1a1a1a;
  --font-body:     'Inter', sans-serif;
  --space-md:      1.5rem;
  --space-lg:      3rem;
}

/* responsive.css */
/* Base: single column */
.services-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }

@media (min-width: 480px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

@media (min-width: 1024px) {
  .services-grid { gap: 2rem; }
}

// main.js — form validation excerpt
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

form.addEventListener('submit', (e) => {
  e.preventDefault();
  let valid = true;
  if (!nameInput.value.trim()) { showError(nameInput, 'Name is required'); valid = false; }
  if (!emailRegex.test(emailInput.value)) { showError(emailInput, 'Valid email required'); valid = false; }
  if (valid) showSuccess('Message sent — we will be in touch!');
});

User Interaction Flow

Challenges & Solutions

CSS Specificity Conflicts on Responsive Overrides. Adding media query overrides to flat class names caused specificity battles where mobile styles leaked into desktop layouts and vice versa. The solution was adopting BEM-style naming (.service-card, .service-card__title) and keeping all responsive rules in a separate responsive.css file, which enforced a clear override order and made the responsive layer easy to audit in isolation.

Contact Form Without a Backend. The client needed a working contact form but the site is hosted statically on GitHub Pages with no server. The solution combined a mailto: action attribute on the form (which opens the user's email client pre-populated) with JavaScript-driven client-side validation and a confirmation message. For a more robust no-backend solution, the form was architected to be easily swapped for a Formspree or Netlify Forms endpoint in future.

What I Learned

• How to structure a genuine client project from brief through delivery, including managing scope and collecting feedback iteratively
• Mobile-first CSS methodology and why starting from small screens produces cleaner, less overridden stylesheets than the reverse
• The value of BEM naming conventions for preventing specificity conflicts in multi-file CSS projects
• Implementing accessible navigation: ARIA labels, focus management in modal/drawer patterns, and keyboard navigation
• The limitations of static hosting for form handling and the patterns available to work around them
• W3C HTML and CSS validation as a quality gate before deployment