Frontend Mentor Challenges
Click a card below to view my finished attempt of the challenge
All challenges have been built to match the provided designs which were created to the following widths:
Mobile: 375px
Desktop: 1440px
Ecommerce Product Page
In this challenge, I practiced building interactive elements with JavaScript, including a lightbox gallery and cart functionality. I also ensure the layout adapts across different screen sizes and refine hover states for interactive elements.
Loopstudios Landing Page
This landing page challenge was a fun way to practice my CSS Grid & Flexbox layout skills! I also learnt a lot about using background images.
Sunnyside Agency Landing Page
This landing page was a perfect test of my layout and responsive skills. There were a couple of tricky elements in this design that gave me a chance to learn about and use the ::after and ::before CSS pseudo tags.
Huddle Landing Page
I practiced using CSS to create curved section designs and focused on responsive layout techniques. This challenge helped refine my eye for detail and layout consistency across different devices.
News Hompage
This news homepage challenge was an excellent opportunity to practice my CSS Grid skills. There were lots of tricky decisions to make and plenty of learning opportunities!
Results Summary
This challenge was a good way to practice with CSS colour gradients and using opacity to achieve different shades of colour.
Social Links
In this challenge I used semantic HTML and CSS, focusing on creating accessible, interactive social links with clear hover and focus states. I also worked on ensuring keyboard navigation.
