Submitted 11 months ago
Resubmission: Mobile-first with smooth-transitions
@jakegodsall
Design comparison
SolutionDesign
Solution retrospective
Hi everyone 😀
In my recent revamp of the FAQ Accordion Card project, originally completed on 24th August 2022, I’ve given it a bit of a makeover as part of my ongoing effort to polish up my GitHub portfolio. The idea was to not just make it look more professional, and improving the overall user experience.
Here’s a quick rundown of what’s new:
- I’ve transformed it into a Node.js project, which means I’ve got a development server up and running, and I can now compile SASS into CSS using some handy
npm run
commands. - I switched from using pixel units to relative units (rem), basing it all on a 10px font size. This makes it way more adaptable to different screen sizes.
- The design approach is now mobile-first. It’s all about enhancing responsiveness and ensuring a top-notch user experience on smaller screens.
- For a bit of flair, I’ve added smooth transitions to the FAQ sections. They now expand and collapse smoothly, and there's a cool rotating caret icon to add that extra bit of visual feedback.
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord