My first project on Frontend Mentor

  • Last updated on 11th May 2025

Yesterday, I completed my first front-end project proposed on the Frontend Mentor website. I started a newbie path to review things about HTML and CSS, responsiveness, and learn about good practices.

QR card project

The code of this project is available on GitHub.

The project took me about 5 hours, spread over three days because I didn’t want to rush it. My objective is to learn as many good practices as I can and apply them in these exercises.

This first project comes with Figma designs, so it is an opportunity to also learn about how designers work with Figma.

The good practices I tried to apply were:

  • Follow BEM conventions to name classes
  • Define CSS variables
  • Use Prettier to autoformat the code with VSCode
  • Take a security precaution using the rel noopener
  • Apply Flexbox
  • Write media queries for small devices

I also posted it on LinkedIn to share it with the community.

In the next projects, I’ll want to apply processes of mobile-first approaches.

I’ll keep going with the next projects.