Front-End Mentor Challenges
A platform provides front-end challenges that include professional web designs. These allow front-end developers to practice building websites in a realistic workflow. These challenges will help developers improve skills in front-end development, gain experience creating websites, and build up an incredible project portfolio. They also have a large community of developers to meet other devs.
Here are the challenges I have taken:
On this Page:
- Intro section with dropdown navigation
- Time tracking dashboard
- Interactive card details form
- Advice generator app
- Interactive pricing component
- Tip calculator app
- Expenses chart component
- Launch countdown timer
- Calculator app
- Todo app
Intro section with dropdown navigation
Developed responsive dropdown navigation menus for consistent UI patterns on large-scale websites, ensuring optimal user experience across diverse devices.
This is a solution to the Intro section with dropdown navigation.
Tags:
Screenshots: 
Time tracking dashboard
Developed responsive time tracking dashboard, ensuring optimal user experience across diverse devices.
This is a solution to the Time tracking dashboard.
Tags:
Screenshots: 
Interactive card details form
The card face dynamically adjusts to entered details, displaying error messages for incorrect formats or blanks. The responsive layout ensures an optimal user experience across diverse devices.
This is a solution to the Interactive card details form.
Tags:
Screenshots: 
Advice generator app
The app utilizes axios to access the Advice Slip API, a third-party API, and generates random advice quotes on the website.
This is a solution to the Advice generator app.
Tags:
Screenshots: 
Interactive pricing component
An interactive pricing component complete with custom range input slider and pricing toggle.
This is a solution to the Interactive pricing component.
Tags:
Screenshots: 
Tip calculator app
A small, useful app that calculates tips and the total amount per person when hanging out with friends.
This is a solution to the Tip calculator app.
Tags:
Screenshots: 
Expenses chart component
Utilize Chart.js to craft a customized bar chart component displaying weekly expenses and the percentage increase or decrease. The chart features built-in animations provided by Chart.js.
This is a solution to the Expenses chart component.
Tags:
Screenshots: 
Launch countdown timer
Experience a fun and immersive 14-day countdown timer with flipping card animations, enhancing the overall user experience.
This is a solution to the Launch countdown timer.
Tags:
Screenshots: 
Calculator app
A calculator that allows you to change theme colors and performs calculations for you. The default color theme depends on users' browser settings, which can be either light or dark. This project was completed using React and SCSS mixins, using color variables as parameters to streamline the complex styling and grid layout for the buttons.
This is a solution to the Calculator app.
Tags:
Screenshots: 
Todo app
Explore a user-friendly app with a responsive interface, interactive elements, and convenient todo management. Easily switch between light and dark modes, utilize filtering options, and enhance productivity with a bonus drag-and-drop feature for seamless task organization.
This is a solution to the Todo app.
Tags:
Demos: 
Screenshots: 
