Skip to content
OverviewSolutions
10
Comments
10

ROKUROO7

@ROKUROO7130 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • P
    Sebastian•240
    @Abestian
    What are you most proud of, and what would you do differently next time?

    I'm proud I managed to make it work based only on my knowledge and some quick google searches.

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

    Since this project was all about dynamic content, I didn't wanted to hardcode the cosmetic elements of cards, and so I came up with an idea to apply correct styling based on the title of the card, that was provided in data.json file. I've used an array to store key:value pairs to dynamically apply both styling and appropriate icons to the card elements.

    What specific areas of your project would you like help with?

    I would like to get feedback on my general use of React, it's the first independent project I used this framework for, and I'm not sure if it's written as good as possible, or is it some spaghetti code.

    Time Tracking Dashboard with React

    #bem#react#sass/scss#vite
    1
    ROKUROO7•130
    @ROKUROO7

    Nice work.

  • ROKUROO7•130
    @ROKUROO7

    Well done.

  • ROKUROO7•130
    @ROKUROO7

    Good work.

    I think you should add some border-radius in top-left and bottom-left of the image.

  • ROKUROO7•130
    @ROKUROO7

    Nice work.

  • ROKUROO7•130
    @ROKUROO7

    Nice work

  • P
    lemz100•170
    @lemz100
    What are you most proud of, and what would you do differently next time?

    Figuring out how to center the card in mobile-first design, switch layout using media queries and re-size the image in a card responsively.

    I would test responsiveness for mobiles when layout is landscape and not only portrait.

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

    Centering the card - Removed use of 100vh from body, html and instead set body height to 100% to ensure it takes up full viewport. Then used margin to centralize card.

    Resizing image - Sized image container to auto, added max-inline-size (learnt from Kevin Powell) to replace max-width: 100%, and constrained max-height to 250px on mobile devices so the image doesn't oversize as the viewport grows.

    What specific areas of your project would you like help with?

    Responsive design - designing for very large screens and landscape Resizing images and more tips on responsive design for these cases. Tips on typography for very large screens, and controlling height so the card grows accordingly.

    Responsive Product Card

    1
    ROKUROO7•130
    @ROKUROO7

    Nice work.

View more comments