Skip to content
OverviewSolutions
8
Comments
4
matryosha
@matryosha

All comments

  • matryosha•190
    @matryoshaPosted over 1 year ago

    As your todos container is full width dragging an item will pull it off and set to 0.0. To fix it you move declaration of width from an item to todos container so that everything should work as expected

    Marked as helpful
    1
  • matryosha•190
    @matryoshaSubmitted over 1 year ago
    • 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.

    E-commerce product page JS/SCSS

    1
    matryosha•190
    @matryoshaPosted over 1 year ago

    Link to discord #finished-project post

    0
  • matryosha•190
    @matryoshaSubmitted over 1 year ago
    • 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.

    NFT Preview Card Component Sass

    1
    matryosha•190
    @matryoshaPosted over 1 year ago
    • Decrease title font size -- ✔
    • Make avatar border width smaller -- ✔
    • Description font size should be bigger --✔
    • Border radius is bigger --✔
    0
  • matryosha•190
    @matryoshaSubmitted over 1 year ago
    • 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.

    Results summary barebone

    1
    matryosha•190
    @matryoshaPosted over 1 year ago
    • Should add more spacing to between score in category ✔
    • The card shadow should not be straight black. Now I see there is some color here. ✔ kinda
    • Did I really messed up with the main grading on left card? Colors seem wrong. ✔
    • The shadow should take more space
    • "Summary" and "Your results" text are a little bit off. Need to make them bigger.
    • "Great" text's weight is more than needed.
    1