Chrissy Rae's Custom Cookie Website
Designed and developed a fully responsive website for a custom cookie business to establish a professional online presence. The project focused on modern web design, branding, responsive layouts, and creating an intuitive experience for customers browsing products and placing custom orders.
Building a Professional Business Website
Chrissy Rae's Cookies is a custom bakery specializing in handcrafted decorated sugar cookies for birthdays, holidays, weddings, baby showers, and other special occasions. The objective of this project was to create a polished, responsive website that gives the business a professional online presence while making it easy for customers to browse products, learn about the business, and place custom orders. Throughout development, I focused on creating reusable components, maintaining clean and organized code, optimizing the user experience across desktop and mobile devices, and deploying the finished website using GitHub and Cloudflare Pages. This project strengthened my understanding of front-end development, responsive design principles, version control, website deployment, branding, and designing websites for real-world clients.
Project Details
Pages
Home
Gallery
About
Order
Business Type
Custom Cookie Bakery
Technologies
HTML5
CSS3
JavaScript
Hosting
Cloudflare Pages
Version Control
Git
GitHub
Design Focus
Responsive Design
Modern UI
Accessibility
Target Devices
Desktop
Tablet
Mobile
Deployment Status
Live Production Website
Core Site Experience
🏠 Home
Welcomes visitors with a custom hero section, featured cookie collections, business introduction, and clear navigation to encourage exploration.
🖼 Gallery
Displays decorated cookie collections using responsive image layouts that showcase previous custom orders and seasonal designs.
👩🍳 About
Shares the story behind Chrissy Rae's Cookies, highlighting the business, baking philosophy, and dedication to handcrafted designs.
🛒 Order
Provides ordering information, pricing, FAQs, and multiple contact methods to simplify the customer experience.
📱 Social Integration
Connects visitors directly to Facebook and Messenger, making it easy for customers to request custom orders.
📲 Mobile Experience
Every page was optimized for desktops, tablets, and smartphones to provide a consistent experience across devices.
Website Organization
chrissy-raes-cookies/ │ ├── index.html ├── about.html ├── gallery.html ├── order.html │ ├── css/ │ ├── style.css │ ├── gallery.css │ └── responsive.css │ ├── js/ │ ├── script.js │ └── messenger.js │ ├── images/ │ ├── Hero Images │ ├── Cookie Collections │ └── Branding Assets │ └── README.md
Branding & User Experience
Typography
Playfair Display
Inter
Color Palette
Warm Cream
Soft Pink
White
Charcoal
Design Goals
Elegant
Professional
Handmade
Inviting
User Experience
Responsive Layouts
Simple Navigation
Clear Call-To-Actions
Fast Loading Pages
Development Stack
From Concept to Deployment
Planning │ ├── Gathered business requirements ├── Determined website goals └── Planned navigation structure ↓ Design │ ├── Selected typography ├── Created color palette ├── Designed page layouts └── Established branding ↓ Development │ ├── Built reusable HTML components ├── Developed responsive CSS layouts ├── Added JavaScript interactions ├── Optimized images └── Tested across screen sizes ↓ Deployment │ ├── Published source code to GitHub ├── Configured Cloudflare Pages ├── Connected custom domain └── Verified production deployment
What This Project Demonstrates
Responsive Design
Developed layouts that adapt seamlessly to desktop, tablet, and mobile devices while maintaining a consistent user experience.
UI / UX Design
Designed an elegant interface that reflects the client's brand while making navigation intuitive and customer-focused.
Performance
Optimized images, simplified layouts, and organized assets to improve loading speed and maintainability.
Deployment
Managed version control using GitHub and deployed the production website through Cloudflare Pages with a custom domain.
Branding
Built a cohesive visual identity using typography, imagery, spacing, and color to reinforce the bakery's brand.
Real-World Experience
Worked through multiple design iterations while balancing usability, aesthetics, and the needs of an actual small business.
Growing as a Front-End Developer
Building Chrissy Rae's Cookies gave me valuable experience designing a website for a real business rather than simply completing a practice project. Throughout development I learned the importance of planning page layouts, creating reusable components, maintaining organized CSS, and designing with the end user in mind.
The project also reinforced the value of responsive design, version control, and iterative improvement. Each revision refined both the appearance and usability of the site, resulting in a more polished product while strengthening my front-end development workflow.
Planned Enhancements
From Design Concept to Production Website
This project demonstrates my ability to take an idea from the planning stage through design, development, testing, and deployment. Beyond writing HTML, CSS, and JavaScript, I focused on building an intuitive user experience, creating a cohesive visual identity, and delivering a website that supports the needs of a real business.