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.
Project: FAQ Accordion
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
Next project: Coming soon
I’m working on several Frontend Mentor challenges at the moment, check back soon!