Website Case Study: The Cutting Connoisseur
Overview
This site was built as a portfolio piece to demonstrate practical WordPress development skills (and as a long term personal project for my personal creative brand) The full build was completed in approximately six hours. I had not worked with most of these tools before starting.
Goals
Build a functional WordPress site that goes beyond page builder basics, demonstrates real architectural decision-making, and shows an ability to learn quickly under a self-imposed deadline.
Technologies Used
WordPress, Astra with a custom child theme, Elementor, Advanced Custom Fields, Custom Post Type UI, WPForms Lite, Rank Math SEO, custom PHP, CSS, and JavaScript.
Hosting and Domain Setup
Before any development started, the site infrastructure had to be built from scratch. This included acquiring the domain through Godaddy, then migrating it to Hostinger by replacing the nameservers in Godaddy’s DNS settings to point to Hostinger’s servers. This hands-off approach to DNS migration routes all traffic through Hostinger’s infrastructure while keeping the domain registered at Godaddy, a common real-world setup for client sites where the domain and hosting live at different providers. Understanding how nameserver delegation works, and knowing where to make that change, is foundational to managing and migrating client websites without breaking anything in the process.
Key Technical Decisions
The most deliberate decision was building a Stylists custom post type with ACF fields rather than hardcoding stylist information onto a static page. Salons change staff frequently, and a custom post type makes managing that straightforward: add a new stylist, fill in the fields, publish.
Working through this taught me what ACF fields are actually for. They give you a structured, repeatable way to attach specific data to a post type, so that data can be displayed consistently on the front end without anyone needing to touch code or layout every time something changes. For a business like a marketing agency managing hundreds of salon sites, that becomes genuinely valuable at scale. Instead of manually editing a page every time a salon adds a stylist, changes a price, or updates a service description, you build the structure once and let the content managers fill in fields. It keeps the data clean, the process fast, and the output consistent across every site you manage.
The ACF fields render on the front end through a hand-built PHP template inside a custom child theme, not just sitting unused in the admin panel. A child theme was used specifically so future theme updates wouldn’t overwrite any customizations.
CSS and JavaScript
One small but concrete example of custom code: a hover effect on headings across the site, written in plain CSS rather than through Elementor’s styling panel. The rule targets Elementor’s heading class and applies a color transition on hover, fading the text to gray over 0.3 seconds using the transition property. It’s a small detail, but it required inspecting the actual rendered HTML to find the correct class name, since Elementor’s newer Atomic widget system uses different class conventions than older versions. That process of checking what’s actually in the DOM rather than assuming is something I’d use the same way on any real site.
A JavaScript clipboard copy button was also added to the Stylist profile page, allowing visitors to copy the Instagram handle in one click. It uses the browser’s native navigator.clipboard API and gives the user a brief confirmation message after copying using a setTimeout function to show and then hide a small piece of feedback text. No libraries, just vanilla JavaScript.
SEO Structure
Building this site properly introduced me to heading hierarchy as an SEO and accessibility practice, not just a visual choice. Each page has a single H1 that describes what the page is about, section titles use H2, and subsections within those use H3. This matters because search engines and screen readers both use heading structure to understand the content of a page, and a page with multiple H1s or headings used purely for visual sizing is giving those systems bad information. It’s a small habit but one that applies to every page on every site, and it’s easy to get wrong in a page builder if you’re not paying attention to the tag dropdown, not just the font size.
Problem Solving
Two things broke during this build, and both were worth learning from. A CSS hover effect wasn’t firing because I targeted a class name that does not exist in Elementor’s newer widget system. I inspected the rendered HTML in browser dev tools, found the actual class, updated the selector, and it worked. The second issue was ACF fields not appearing in the block editor, which turned out to be a collapsed panel that was not immediately obvious. Both were solved by working through the problem methodically rather than guessing.
Honest Assessment
This site is a starting point, not a finished product. Six hours from zero with unfamiliar tools produces something functional and structured, but there is plenty left to refine. The value is not in the polish, it is in the process: given something I have not done before and a real deadline, I can figure it out and deliver something that works.