Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR Code card component for angular 18 with custom data

@aredean

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I am quite proud to finish my first project example from frontendmentor.io, I have never made an application / component with someone else's design. So this is something new for me, opening the design file, seeing the description and specifications of the design. Quite proud when my work is very similar to the original design. I deliberately made it in the form of an angular component because I understand angular quite well and it can be used more in the future. What I will do more often in the future is how I make it as semantic as possible so that the component can be read clearly.

What challenges did you encounter, and how did you overcome them?

I immediately made it in the form of an angular component but also still wanted to bring the full design specifications, for example using variables in css.

  • In the angular scss application, variables cannot be used directly by child components when defined in style.scss. The solution is to import another scss file that stores variable data to be shared with all components.

What specific areas of your project would you like help with?

I would like to get feedback on the following:

  • About the naming of the css class, is it understandable enough for you?
  • Then with the css variable, is what I did acceptable in the professional development team?

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord