Ship #1 Changes requested

@NC on A website to promote local Honey Business · about 1 month ago

I made a business website for a local honey brand called Gold and Girl Honey Co. It has pages that show our mission, bee health awareness, and different honey products.

The biggest part of the project was building the brand new Contact Page because the site didn’t have one before. It has a two column layout with a Get In Touch card on the left for basic info and a structured enquiry form on the right. I also built a custom social media section at the very bottom to link our accounts.

CSS Flexbox layouts: Getting the social media icons at the bottom to look right was a massive headache. At first, the logos were way too big and bulging, and the text handles were wrapping into weird vertical lines. I had to create a custom socials box and use flex direction properties to finally force the text and icons to line up perfectly next to each other.

Form styling: Making the select drop-down menu and the big message box match the exact same rounded corners and padding as the name and email fields took a lot of trial and error in the CSS stylesheet.

JavaScript bugs: I had a few bugs with my JavaScript strings where my success message was accidentally showing raw template code on the screen instead of the user’s actual name. I also kept messing up the spelling of the word “received” in my code.

I am super proud of getting a live backend email system to work without having to build a massive server application from scratch. I connected the form to Web3Forms using an API key and a POST method. Now, whenever someone actually fills out the form and hits submit, it bypasses the browser and sends a real email notification straight to my personal inbox instantly.

You can test the form validation by filling out your name, email, and typing a message into the enquiry box.

The success message is dynamic, so if you change the dropdown option from Honey Products to Bee Health, the alert message text changes based on what you chose.

If you hit the orange submit button, it will check your inputs and actually fire off a live email alert to my inbox.

2 devlogs
9h

Try project → See source code →

Open comments for this post

@NC on A website to promote local Honey Business · about 1 month ago

4h 16m 38s logged

Devlog #1: Adding the Contact Page (And Taming CSS Flexbox)

Hey everyone! Quick update on the Gold & Girl site.

Until now, we didn’t actually have a way for people to reach out directly through the site. I finally sat down and built out the Contact Page from scratch, and honestly, it turned out to be a massive lesson in debugging layout quirks and form handling.

Here’s a quick breakdown of what went down and what’s new since the last version:

Building the Contact Form: I set up a clean two-column layout containing an info card on the left and the enquiry form on the right.
Fixing Template Strings & Typos: At first, my success message banner was rendering raw template literal variables on page load. I stripped out the hardcoded text placeholders from the HTML and used proper JavaScript backticks (template literals) to dynamically inject the user’s name and enquiry type cleanly upon submission. I also caught and fixed a typo where I spelled “received” as “recieved.”
Taming the Social Icons: I wanted links to our social channels at the bottom. My first attempt resulted in giant brand logos breaking the page. To fix this, I wrapped them into a dedicated .socials-section container with a clean translucent off-white background matching our honey theme. I used CSS Flexbox to align the text handles right next to their corresponding icons horizontally instead of stacking them vertically, which looks way cleaner.
Hooking up a Live Backend: Having a form look pretty is cool, but it’s useless if the messages go nowhere. Since this is a static site, I integrated Web3Forms via an API access key using a hidden POST action. Now, whenever someone submits an enquiry, it bypasses client-side storage and fires an email notification straight to my inbox in real time.

The site is looking super polished now and actually functions like a real business page. I think its ready to ship!!

Open comments for this post

@NC on A website to promote local Honey Business · about 1 month ago

4h 25m 40s logged

Case Study: Web Design for Gold and Girl Honey

Location: Queensland, Australia

1. The Empathise Phase

I interviewed the owner of “Gold and Girl” to align design choices with raw honey values and analysed competitor trends.

Typography & Colors: Competitors use handwritten, artisanal fonts. Deep ambers and golden yellows mimic honey, balanced by eucalyptus greens and cream backdrops.
Layout & Elements: Grid systems manage shop items, while landing banners frame farm identity. Layouts feature hexagons, rounded buttons, and warm product photography.
Content: Sites lead with owner stories and transparency tags like “100% Raw” or “Unfiltered”.

2. The Design Phase

Problem Statement

Gold and Girl needs a web presence showcasing raw, chemical-free honey that highlights ecosystem action because the imminent Varroa mite invasion threatens QLD bee populations, making sustainability vital for conscious consumers.

Project Scope

Included: Landing section with product rules (“No Chemicals, No Heating, No Plastic”), Varroa mite crisis banner, top navigation, and custom scrollbar.
Excluded: Mobile optimization, active transactional checkouts, and public forums.

Measurable Design Criteria

Criterion 1 (Layout): Must use a Flexbox structure with three thematic assets: a honeycomb grid, a bee graphic, and a natural flora motif. Test: Audit rendered screen (Pass/Fail).
Criterion 2 (Typography): Text must use a legible font maintaining an artisanal identity with clear background contrast. Test: Inspect active CSS rules (Pass/Fail).
Criterion 3 (CTA): The crisis section must feature an action button using a distinct, high-contrast accent color. Test: Visual target check (Pass/Fail).

3. The Ideate Phase

Assets: Sourced an organic palette via Coolors.co and craft fonts via Google Fonts.
Selection: Wireframe 1 was selected. Placing links at top followed by a bold Hero panel aligns with standard mental models, guiding users down from brand story directly into the Varroa mite action button before the footer.

What’s Next?

Real Shopping Section Page: Transforming the prototype into an e-commerce platform with dynamic product listings, jar size selectors, and active shopping cart logic.
Contact Us Section: Launching a contact hub featuring an automated enquiry form, apiary map coordinates, and an ecosystem reporting tool for bee conservation.