2026
Shoreline Pet Care
Web Design & Development
Shoreline Pet Care is a website for a fictional pet care company that I used as the subject for my first full web desgin and development project. It allowed me to bring together and polish my skills in colour palette design, layout design, and the technical aspects of building a WordPress website using the Elementor page builder.
Web Design
Web Development
The Project
Shoreline Pet Care was created as a guided WordPress design and development project while I was learning building websites with WordPress and Elementor. I followed the structure of an online course, but developed my own fictional pet care brand, including the content, colour palette, imagery and visual direction. The project gave me practical experience building a complete responsive website from start to finish and helped me develop a stronger understanding of layout, content structure and adapting designs across desktop, tablet and mobile.
Design & Development
The site was built in WordPress using Elementor, with the course providing the overall structure while I made the creative decisions around the brand and final presentation. I developed the Shoreline Pet Care brand, chose the colour palette, selected and prepared the imagery and adapted the layouts to fit the fictional business. As I worked through the build, I also focused on keeping the design consistent across pages and making sure the site translated effectively across desktop, tablet and mobile.
Responsive Design
The main challenge of translating the design from desktop to mobile was managing the positioning of the layout for the larger hero images. I solved this by organizing the different areas into containers, which could stack when needed on smaller screen sizes.
Tablet
Mobile
Design Details
I chose to feature the navigation, contact form and services card for this project.
Navigation
The navigation for shoreline was kept simple. Right aligned on desktop with a white font and blue active link. On mobile, it features a black background which contrasts sharply with white font and the yellow accent colour for the active link.
Contact
The contact form was designed with two sections. On desktop, it has a 50/50 horizontal split, with the contact form on the left and the contact info on the right. On mobile, it stacks.
Service Card
The service cards were designed on desktop to appear in one row, split between the image and the information. On mobile, they had to be stacked vertically, with the image appearing first and the information underneath.
Outcome
Shoreline Pet Care became an important early step in developing my web design and WordPress workflow. The project gave me practical experience turning a defined structure into a complete, responsive website while making my own decisions around branding, content, imagery and visual presentation. It also helped me build a stronger understanding of how design choices carry across different screen sizes and provided a foundation I could apply to more independent projects afterward.
Have a project in mind?
Whether you need a new website, a redesign, or help improving what you already have, I’d be happy to hear what you’re working on.
