All solutions

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

II am quite proud to be able to create a pixel-perfect design again with just the design image and specifications without the Figma project file.

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

I didn't use the Figma design file this time because I ran out of tokens/credits, but I still wanted to build a pixel-perfect design. Finally, I re-checked the design size in Figma by uploading the design image (Fortunately, the design still saved the correct resolution of 1440x960). It is possible to do this if necessary because it is likely that in the future, there will also be work that is not made with Figma files.

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

I think this is the second challenge that I believe is pixel-perfect, and hopefully, I will continue to practice it. I will probably still use angular to create some components in some future challenges, I want to focus on this. This time I used my other knowledge, namely tailwind-css, because it is quite time-consuming to create a responsive style, especially for several card components more than one.

In the future, I will pay more attention to pixel-perfect and more carefully in mobile mode because this is tricky and needs to be considered more carefully.

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

In this challenge I re-learn how a css media query works, in this challenge I am required to create two different versions, namely desktop and mobile, and both have slight differences.

• I use @media screen and (max-width: 375px) { // Style used } to change the style of the card component on the mobile screen.

The next challenge is to use transition animations when hovering, active, and focusing.

• For this, my solution is to create a global transition for all types of transitions by adding CSS : * { transition: all 0.25s ease }

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?