A responsive static website for a fictional cleaning company, Blitzsaubeer. The site showcases services, builds trust, and makes it easy to get in touch or book a service. Built as Portfolio Project 1 for the Code Institute Full-Stack Developer Diploma.
- Live Project & Repository
- Overview
- User Stories
- Features
- UX Design
- Accessibility
- Information Architecture
- Technologies Used
- Screenshots
- Testing
- Known Bugs
- Performance & SEO
- Deployment
- Credits
- Future Enhancements
- Resubmission Notes
- Live Site: https://Sori678.github.io/Blitzsaubeer-Project-1/
- Repository: https://github.com/Sori678/Blitzsaubeer-Project-1
External user goals
- Learn about services and prices
- Build trust through clear visuals and content
- Easily contact the company or submit a booking
Site owner goals
- Present a professional, consistent brand
- Attract and convert potential clients
- Collect enquiries via validated forms
-
First-time visitor: I want to quickly understand what services are offered so I can decide if they fit my needs.
Acceptance: Clear hero, “Unsere Leistungen” cards, link to full services.
Implemented by: Home hero + service cards + CTA to Services. -
Price-conscious user: I want indicative pricing so I can estimate my budget.
Acceptance: Pricing visible or one click away; structured lists/tables.
Implemented by:dienste-und-preis.htmlwith expandable details and price lists. -
Potential client: I want to submit a booking or question easily and get confirmation.
Acceptance: Required fields; basic validation; confirmation page.
Implemented by: Booking form (Services) and FAQ form, both route tothank-you.html. -
Mobile user: I want the site to be usable on my phone.
Acceptance: Responsive layout, mobile nav, readable text.
Implemented by: Grid layouts, responsive images, Bootstrap navbar.
- Logo links to Home
- Bootstrap 5 responsive navbar with toggler
- Active page highlighting
- Welcome copy with clear value proposition
- Primary CTA to Services/Booking
- Responsive grid of four services
<picture>sources for smaller images on mobile- CTA buttons to booking section
- Consistent service blocks: image + text + expandable details
<details>/<summary>used for pricing, benefits, tips- Booking form on the same page
- Booking form (Services) and Question form (FAQ)
- Required fields,
email/telpatterns, native browser validation - Visual feedback icons for valid/invalid states
- Both submit via GET to
thank-you.html(front-end only)
- Company intro and values
- Bootstrap carousel
- CTA back to booking
- Intro text + simple contact form
- Contact details and social links (Font Awesome)
- Legal links: Privacy & Impressum
- Opening hours table
- Impressum:
impressum.html - Privacy Policy:
datenschutzerklarung.html
- Wireframes: Basic layout planned for mobile and desktop.
- Design choices: Calm, clean palette (white/cyan/green), generous spacing, readable type.
- Typography: Google Fonts — Inter (body), Josefin Sans (headings).
- Icons: Font Awesome.
- Semantic HTML structure (headings, lists, tables)
- All images include meaningful
alttext - Interactive icons marked
aria-hidden="true"when decorative - Labels tied to inputs via
for/id, selects with clear labels - Visible focus styles (
:focus-visible) across interactive elements - Table captions and appropriate scoping for headers
- Sufficient color contrast maintained
Pages
index.html(Home)dienste-und-preis.html(Services & Prices + Booking)uber.html(About)faq.html(FAQ + Contact form)impressum.html(Legal notice)datenschutzerklarung.html(Privacy policy)thank-you.html(Submission confirmation)
Folders assets/ css/ style.css images/
- HTML5, CSS3
- Bootstrap 5 (CDN)
- Google Fonts (Inter, Josefin Sans)
- Font Awesome (icons)
- Git & GitHub for version control and hosting
Home
assets/images/Screenshot-navbar-mobile.pngassets/images/Screenshot-navbar-homepage-desktop.pngassets/images/Screenshot-footer-mobile.pngassets/images/Screenshot-footer-service-card-desktop.png
Services
assets/images/Screenshot-service-reservation-desktop.pngassets/images/Screenshot-service-reservation-mobile.png
About
assets/images/Screenshot-carousel-desktop.pngassets/images/screenshot-carousel-mobile.png
FAQ
assets/images/Screenshot-faq-form-mobile.pngassets/images/Screenshot-faq-form-desktop.png
Confirmation
assets/images/confirmation-small.pngassets/images/confirmation-big.png
Ensure the file names above exactly match files in the repo (case-sensitive on GitHub Pages).
- HTML: W3C Nu Validator — no errors on all pages
Evidence in:assets/validation/html/ - CSS: W3C Jigsaw — no errors
Evidence in:assets/validation/css/
| Area | Test | Result |
|---|---|---|
| Navbar | Mobile toggler opens/closes; links navigate correctly | Pass |
| Active link | Current page highlighted in nav | Pass |
| Hero CTA | Button navigates to Services/Booking | Pass |
| Services details | summary toggles via mouse and keyboard |
Pass |
| Forms required | Submitting empty form shows native validation | Pass |
| Email pattern | Invalid email prevented | Pass |
| Tel pattern | Invalid phone prevented | Pass |
| Visual icons | Valid/invalid icons update as fields change | Pass |
| Thank-you | Forms redirect to thank-you.html (GET) |
Pass |
| Footer links | Social open in new tab; legal pages accessible | Pass |
| Images | <picture> sources swap on narrow widths |
Pass |
| Focus | Keyboard focus visible | Pass |
- Chrome DevTools & real devices at 320px, 375px, 768px, 1024px, 1440px — layout holds as intended.
Optional: add Lighthouse screenshots in
assets/validation/lighthouse/.
- None observed after validation and manual testing.
- Responsive images using
<picture>where applicable - Minimal render-blocking: single CSS file and Bootstrap CDN
- Per-page
<meta name="description"> - Descriptive headings and link text
- Lighthouse evidence can be added to
assets/validation/lighthouse/
- Push the
mainbranch to GitHub. - Repo → Settings → Pages → Source: Deploy from a branch.
- Branch:
main, Folder:/root, then Save. - Site published at
https://<username>.github.io/Blitzsaubeer-Project-1/.
- Front-end only. Submissions use GET to
thank-you.html. No server-side data storage.
- Modern browser
- git clone https://github.com/Sori678/Blitzsaubeer-Project-1.git
- cd Blitzsaubeer-Project-1