Frontend Development
Practice projects to hone my coding skills, enhancing my skillset as a product designer.
As a product designer, having a good understanding of coding helps when working closely with developers. It also serves as a reference point for ensuring my digital designs are implementable and follow best practice.
Being able to talk the same ‘language’ as developers ultimately means more efficient shipping, both prior to implementation and in QA.
For example, it’s much easier to say “for the sm breakpoint and smaller, use flex-direction: column on the divs with the .resource-card-copy class” than to try to notate a Figma file.
On my journey of learning to code I found the website “Frontend Mentor” which provides realistic designs for users to implement on GitHub, share publicly and receive feedback. Most of the projects below are from Frontend Mentor so I didn’t design the UI myself - this page demonstrates coding capabilities.
Workforce Capability Landing Page
Feb 2025
Designed in collaboration with the Marketing Team at Ausmed, I built the page as the home marketing landing page for our Organisations website.
The hero animation (top of page) was executed by Nik in Marketing, the Workforce Capability System section (as featured here) was coded myself, with some help with ChatGPT actually.
Passport Marketing Landing Page
July 2024
Redesigned and rebuilt in July 2024, I made some updates to the Passport page to add some more ‘oomph’. Particularly happy with the opening passport to reveal more info about it on page scroll.
Project: Marketing Landing Page
March 2024
This Frontend Mentor challenge was to build out a marketing landing page for mock-company ‘Fylo’.
Project: FAQ Accordion
March 2024
This Frontend Mentor challenge was to build out a FAQ accordion.
Users should be able to:
Hide/Show the answer to a question when the question is clicked
Navigate the questions and hide/show answers using keyboard navigation alone
View the optimal layout for the interface depending on their device's screen size
See hover and focus states for all interactive elements on the page
