All solutions

Completed the challenge using:

• Vanilla JS
• Vanilla CSS
• PostCSS

Added some animations and a spinner loader. JS throttling function to better handle resizing.

What I learned:

• BEM notation is totally amazing must have if you work with Vanilla CSS makes navigation in your css much easier great for debugging helps when making responsive design with media queries
• Vite Before I used webpack, Vite is easier to configure and feels more fresh and modern
• PostCSS amazing stuff which uses JS to transform your CSS, such as: pxtorem you can write your code in px anywhere, which I find to be more accurate and overall easier to work with. PostCSS will take care of it and during build it'll transform your px to rem. autoprefixer adds vendor prefixes to your CSS based on browser compatibility, automatically
• Cypress I know a little bit of e2e testing with Cypress before. Always good to use and practice.
• Vitest Just like e2e testing being able to develop Test Driven Development style is a valuable skill never hurts to practice writing tests.

Hey !

My 2nd challenge here.

I decided to take on this challenge with Angular and SCSS.

I thought this challenge will be simple, but Angular (I love Angular) made it into a hell :-D. But that's probably because I still suck at Angular.

There is an interesting way, how I approached handling the svg icons in Angular, and if you're experienced in Angular, please, if you have time, take a look and let me know how to do it correctly or in a better way, I'll appreaciate it very much!

What I had problems with ?

• Angular's View Encapsulation with SCSS, I had few problems with styling and working on the layout, but mostly because I decided to use the svg icon as components and render them from within a dynamic component. I guess I bumped into some async problems and other issues before I got it work correctly. If you know more how to work with svg Icons, if you know more about Angular, then please take a look at my code -> src/app/components/icons check it out and let me know how to handle it in a better way but still do everything dynamically.

That's what I wanted to do, everything dynamically, so I fetch the svg colors using a service component and then using it as a background color, that was one of the reasons I decided to use svg icons as components.

Other than that, it was probably all cool, though I'm not really happy about my code, because I know that it could be done in a much more efficient and better way, but I lack experience and know how. Working on it though, step by step.

Thank you very much for your time!

Even though I do use ChatGPT, Stack Overflow, documentations, listed below are the things I still struggle the most with. Mostly, because there are just so many options and the answer doesn't always seem to be clear enough.

What is the best way to write your CSS ? The nested syntax I used or are there better alternatives. Of course, I know it probably depends, but how did I do when you take a look at my CSS, what should I improve ?

What about the responsive design ? You can use vmin/vmax, rem/em, %, vw/vh. How do you choose when to use which and why ? I always burn a lot of time at that.

I mixed using CSS Grid and Flebox, did I use it correctly or is it an overkill ?

Thank you very much!