My first experience at a Frontend Mentor Challenge 👀

(This is not a paid for promotion, this is my personal experience before anyone asks!)

As my first Frontend mentor challenge I thought i'd start small, a small component with just HTML and CSS.

This was my experience;

To start, I chose a simple QR Code component. You're given a starter pack with a READme file with all the information on how to start your first project, it explains about using GitHub and how to set up a live link as well as where to go for help. There is also a style guide on fonts, colours and if they want some responsiveness to the design then some breakpoints too.
You then have your index.html file, some images of the final component and away you go! 👏🏻
(If you pay for pro you can also access the figma file, this i do not have)

I found although the challenge itself was very simple, it took me around 3 hours to complete with some cheeky breaks 🤫. I did come across some challenges but I also took away a lot from the experience 🙂

Challenges I faced:

• I've definitely become accustom to the luxury that is VueJs and Tailwind CSS frameworks. It was like muscle memory to type in a tailwind class just to tweak some margin, in reality it was much back and forth between style sheets. I had to google more basic css than i'd like to admit! 🥴
• Importing the font was new to me, it's not something i've done before. Seems simple enough, in practice it didn't want to play ball at first.
• Being on one monitor, just my laptop it was quite difficult to look by eye if my sizing was completely right, too much or too little padding in places?
• At the end I worry I may have over complicated it a little, a div in a div, with a header and footer? 👀

Take aways;

• Great experience again with basic HTML and CSS, made me realise how comfortable I had gotten and not in a good way.
• Made me excited to take on more challenges! 💪🏻

Things to remember (note to self 📝)..

• Although its good to see other peoples solutions I would recommend doing this after, it can be good for inspiration but you don't want to give the solution away, this is all about your own style.
• There is no right way to completing the challenges!
• If you think your code is starting to smell then step back, make a cup of tea and come back, you may be overcomplicating things so its good to come back with fresh eyes, same if you get stuck.

Overall, I think Frontend Mentor was a great experience and good for those looking for either challenges or little side projects they want to do. I'm definitely looking forward to more 😊

If you wish to view my results you can do so here My Solution