Frontend Mentor Challenges
These are my solutions to the frontend mentor challenges. Checkout my latest solutions by clicking on the images or scroll down for more.
These are my solutions to the frontend mentor challenges. Checkout my latest solutions by clicking on the images or scroll down for more.
This was my first ever solution to a frontend mentor challenge and the task was simply to recreate a page with a QR code. Using HTML and CSS only this was a great challenge to get started with the basics.
This challenge was to recreate a page with a grid of 3 columns. This challenge was good to try out Grid and Flexbox, which was my main goal here. There are no interactive elements here apart for the hover on the learn more buttons.
This challenge was to recreate a page with an interactive rating component where the chosen rating is shown in the confirmation window displayed after submitting the rating.
This challenge was to recreate a signup page with different mandatory fields such as name, email and password. Using JavaScript it was possible to validate the input in the fields and display error messages and icons if the input is empty or incorrect.
This challenge was to recreate an interactive application which given a valid date calculates the difference in days, months and years. I focused on using forms for the input fields and JavaScript to validate the input.
This challenge was significantly more JS heavy than previous challenges, as the validation of the date and age calculation was a bit tricky to implement. This challenge had a bonus part which was to make the resulting age animate upon submitting the form.
This challenge was to recreate an expenses chart application with interactive columns which are dynamically added using a json file. To add some extra life into this challenge I made an animation for the column where their height go from 0 to the final height.
This challenge was to create a slider which displays the quote of a person as well as their picture. The main challenge for me was the overlapping elements which were quite tricky, handling the SVG's and controlling several elements with a single slider.