All solutions

Still trying to figure out how to do responsive design and error states.

Main challenge with this product was to switch between the appropriate image based on the viewport of the device

This was a cool test for me especially since I haven't used checkboxes for much other than selecting inputs on forms. Would love some tips on how to handle checkbox styling.

This is meant for me to practice going back to vanilla CSS.

The theme switching was a bit weird for me, not sure if this is "industry standard". Someone with more experience in styling please let me know how you would do it!

The full component is self contained in /src/lib/calculator.svelte with the themes defined in themes.css. I would love a review of my css in the

This one was difficult for me because i had to learn how to position divs on top of each other. That and using data.json was hard to work with because I had to dynamically import images and change styles based on the title of the activity. This can be seen in the component ./src/components/TimeCard.tsx.

Any info on how I can change the classNames and also import images easier would be highly appreciated!

This was my first time using my personal stack on a FE mentor project.

The one thing I am unsure of is how to handle queries on component load and also how to add a box-shadow correctly in tailwindcss

My main problem with this was working with the button outline. I have done it before with TailwindCSS but havent been able to replicate it with Vanilla CSS

I am typically a TailwindCSS user. I am doing this to get better at building with vanilla CSS. So if anyone has any recommendations as to what I can add to make the CSS more efficient and browser compatible let me know!