My first project on Frontend Mentor.

  • Last updated on 11th May 2025

Yesterday, I completed my first front-end project from the Frontend Mentor website. I started a beginner path to review HTML, 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
  • Use rel="noopener" for security
  • Apply Flexbox
  • Write media queries for small devices

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

In future projects, I want to apply mobile-first approaches.

I’ll keep going with more projects.