ashton's cheeses case study

tools used

Adobe Photoshop, Adobe Illustrator, Adobe XD, Visual Studio Code, HTML & CSS Validator

project overview

This was a university brief to design and build a website for a small, independent fictitious business - Ashton's Cheeses, a high-class cheesemonger and delicatessen. The objective was to create a hand-coded HTML and CSS website as a marketing tool to encourage people to visit the shop in person, not to sell online.
The project covered the full design and development process - from research and branding to layout, responsive design, and final validation. No frameworks or templates were used; every line of code was written by hand.

the problem

Ashton's Cheeses, a high-class cheesemonger and delicatessen, had no web presence at all. Without a website, the shop was invisible online - potential customers couldn't discover it, find opening hours, or understand what made it special. The goal was to create a marketing website that would encourage people to visit the shop in person, not just browse online.

context

As part of a campaign to bring customers back to the high street, I was commissioned to build a website for a small, local business. The site needed to be informative, engaging, and reflective of the brand's high-quality products - while being built entirely from scratch using only HTML and CSS, following a mobile-first, web standards approach.

work included

1. • Multi-page website - Homepage, Products, About Us, Visit Us, Events, Custom 404.
2. • Single external CSS file with Meyer reset, cascade, and inheritance.
3. • W3C validation - HTML and CSS.
4. • Responsive layout.
5. • Visual branding & consistency.
6. • Hand-coded HTML & CSS, without using frameworks.
7. • Accessibility and user-friendly navigation.
8. • PHP includes for reusable components.
9. • Reflective design journal published as a WordPress blog post.

key learnings

1. 1. Semantic HTML matters: Proper use of semantic elements isn't just best practice - it directly impacts accessibility, SEO, and how maintainable your code is long-term.
2. 2. Mobile-first produces better results: Starting with mobile constraints and progressively enhancing for desktop creates more considered, robust layouts than retrofitting responsiveness afterwards.
3. 3. Performance is part of design: A beautiful site that loads slowly is a bad experience. PageSpeed Insights revealed real opportunities to improve - and I acted on them in version 2.
4. 4. Process is as valuable as output: Documenting your thinking is a skill that makes every piece of work stronger.