Frontend Mentor Challenges

Built Using:
  • Vuejs
  • Html
  • SCSS

These are numerous challenges that are available for practise on FrontendMentor.io and since i was trying to improve my frontend game why not try these challenges. You can check out the link above for the live version and the code on github. These are just small components that are most common and can be a part of a bigger component. They are of varying difficulty and i ended up doing it for fun. i will adding more components to the list. There are also other full website for practise and i will be doing that as a challenge.

Some of the components I have built from design are:

  • Results Summary component
  • Notification Page Component
  • Interactive Rating Component
  • NFT Preveiw Card Component
  • Order Summary Component
  • Coulumn Preview Card Component
  • Article Preview Component
  • Fylo Data Storage Component
  • Profile Card Component
  • Single price grid Component
  • Interactive Price Component
  • Stats Preview Card Component
  • Testimonial Grid Section
  • Four Card Feature Section
  • Multi-step Form

In building the above i learnt variety of building methods like learning how to plan because sometimes you need to plan before you build something or at least be able to visualise the necessary part as some things can be done with javascript as well as css. with multiple iterations i also learnt how to build a multi step form as all the data needs to be validated before it is allowed to move to the next step in the form and the price needs to be changed based on the plan selected.

Other things that i have learnt were how using grid simplifies things and also reduces a lot of markup. It also helps greatly when making things responsive.