Skip to content
OverviewSolutions
8
Comments
8
Ololade
@zololade

All comments

  • Ololade•110
    @zololadePosted about 1 month ago

    I think you can improve the active state of the mobile view to span the entire container

    0
  • Ololade•110
    @zololadePosted about 2 months ago

    this is beautiful

    1
  • Ronald Yonggi•190
    @ronaldyonggiSubmitted about 2 months ago
    What challenges did you encounter, and how did you overcome them?

    I'm quite comfortable with flexbox but definitely not as comfortable with the grid system. Took me a while to understand how to use the grid system, especially modifying the column and rows layout

    Four card feature section using Vite React and TypeScript

    1
    Ololade•110
    @zololadePosted about 2 months ago

    This is a good job

    0
  • Hamna•40
    @Hamna-AltafSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I am pleased that the final look closely matches the sample design. I know my code isn't perfect and has room for improvement. Next time, I want to write more efficient, effective, and clean code.

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

    Initially, I struggled to fit the image properly on the card, and when I adjusted the card's border-radius, the image's border remained unchanged. After researching the issue, I discovered the object-fit property and set it to cover, which resolved the problem. I also couldn't find the cart logo in the downloaded files as the image was missing so I downloaded one from Google, though it doesn't exactly match the design.

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

    I want to know how to write cleaner and more efficient code. I know that the HTML structure could be improved, and I believe there are ways to make my CSS styling cleaner and more effective. I want to make the code more readable and easier to understand.

    Product preview card

    1
    Ololade•110
    @zololadePosted 2 months ago
    • HTML: Your HTML is not semantic and you made use of a lot of <div>, this is not a good practice. To read more on semantic HTML and its importance, there are documentations on MDN
    • CSS: After checking your CSS I noticed you specified a width for your body width: 1440px; this is not useful there and you used padding to center your element, I advise you explore methods to do this such as display: grid or display: flex, you can find documentations on this on MDN.
    0
  • Ololade•110
    @zololadePosted 2 months ago
    • You made used of a lot of div, I think you should read more on Semantic HTML and how they affect screen readers.
    Marked as helpful
    0
  • Ololade•110
    @zololadePosted 2 months ago

    ** Nice, clean job**

    0
  • Ololade•110
    @zololadePosted 2 months ago

    This a nice work and I believe there's still room for improvement

    1
  • Ololade•110
    @zololadePosted 2 months ago
    • HTML is semantic but from my opinion, I believe the h1 tag and the p tag should be outside the figure tag.
    • The CSS can be adjusted and reduced.
    0