All solutions

Vue 3 "value" prop referencing is too explicit. Overall vue 3 with it "script setup" magic is nice.

Fix colors thanks to Luka's code

Implemented simple dnd by myself as two vue sortable js wrappers had a render bug I dont want to deal with commit, video.

Feedback on a different approach how to layout todo container is appreciated

• With vite and vue it's so fast to bootstrap a way to manipulate dom with existing layout.
• The solution is not fully responsive and on of the reason it's a bad idea to skip medium screen sizes and start with large screen after mobile.
• In the first section I probably should've illustration as a background-image rather than img in the layout.
• Better to define all content padding from the start (eg in body)

• Styling separation is a little bit messed up.
• Should've used thumbnail html template in lightbox gallery as well

Would love to see feedback for layout part of the project. Particularity, about site layout in general. Cart modal content layout could also be not in a grape shape.

• Not sure how do I group and even do I need to group input elements for month and year. Fieldset was added as ad hoc.
• Is using scale for the preview card is really the right choice to make cards responsive?

There are definitely more question about layout in general but it took too many days to remember them all. Even though there are videos of me doing the challenge I definitely should take notes along the way.

• Fundamentals are important. Again. When I needed to wrap img in div I could see that for some reason the div was taking more vertical space than the image inside of it and that's totally unlogical and bs but trying to find some info why is that I founded logical explanation: because of display: inline property. More about it here.
• Used Sass primarily for nesting and more clean variables usage(no var()). Don't know why nesting took so long to implement in main specs but it is coming.
• Neat trick to use even though it's a little bit clunky:

@media (hover: hover) and (pointer: fine) {
.image:hover {
opacity: 1;
}
}

So the hover will work only on devices with pointer and not in phones.

• Used em and rem quite irresponsible. Probably should've used rem only and think if I need em.
• Implementation of partial borders for an category item are "borrowed" from here. But the suggested implementation needed a tweak as without any changes borders won't have the same width and height. I fixed it in kinda "hacky" manner because changing the height of bottom borders will render it at wrong place so I fixed it by setting negative top.
• By the way, I would love to implement those border without adding these addition two divs for every category for sake of readability. I thought of using pseudo elements but you can't create that much with them. Need to see how other people implemented it.
• Without using any css preprocesses such as SASS the naming become the problem. I'd like to use "self explanatory" style names but it hurts html readability. The same thing applies to css: even with such a small project the wall of styles make it hard to move.

• Especially when I had to create a hacky partial borders as it creates a small wall of utility css. Not sure how to handle it but I started appreciated scoped styles more than ever.
• BEM looks good in theory but that "__" everywhere hurts my eyes.