Skip to content
OverviewSolutions
9
Comments
9
P
MarcWebDev
@MarcWebDev

All comments

  • MarcWebDev•170
    @MarcWebDevPosted about 2 months ago

    Nice work!

    There is not much to criticize. Your solution is really close to the design.

    There are only three things I noticed.

    1. The avatar at the bottom is missing the white border from the design.
    2. Your spacing is a little too much.
    3. You should double-check the font sizes and font weights. It looks like some texts are a little too big and some have a wrong font weight.

    That's all. I hope my feedback helps and you can improve the three things.

    Keep up the great work and have a nice day!

    Marked as helpful
    0
  • MarcWebDev•170
    @MarcWebDevPosted 2 months ago

    Nice solution!

    You could improve the image and the component is a little too small, but the rest looks very good!

    Hope this helps, have a great day!

    1
  • MarcWebDev•170
    @MarcWebDevPosted 2 months ago

    Really amazing submission, not really much to say!

    Your card is a little bit too small and the spacing is a little too small as well, but the rest looks really nice! Great job!

    Your code is also really clean and well organized.

    Hope this is helpful, have a nice day!

    1
  • MarcWebDev•170
    @MarcWebDevPosted 2 months ago

    Your base layout is correct, but you have to improve a lot. The spacing and the width/height of the cards is not correct. The colors are also not correct and the images are not loading. The size of the first text ("Reliable ...") is too small. The shadow of the cards is too intense and the cards also don't have a border-radius.

    You should also work on the responsive layout for tablets because there the cards are really small.

    I hope this was helpful and I'm sure you can improve your code to match the design even more!

    0
  • Nathan Orobor•150
    @omarnate1Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud to have mastered Tailwind CSS to adapt images for different screen sizes dynamically.

    This skill has greatly enhanced the responsiveness and user experience of my web projects.

    I would focus on optimizing image loading and performance by leveraging responsive image techniques such as srcset and sizes.

    Additionally, I would explore more advanced Tailwind CSS features and plugins to further streamline my workflow.

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

    change the images on different screen sizes, tailwind CSS and Google search did the magic.

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

    none.

    Responsiveness done with tailwind CSS

    1
    MarcWebDev•170
    @MarcWebDevPosted 2 months ago

    Looks very good! You changed the color and the top spacing a bit but the rest looks pretty clean!

    I also really like your responsive design, you added a lot of breakpoints and it's a very nice experience on all devices.

    0
  • MarcWebDev•170
    @MarcWebDevPosted 3 months ago

    It looks like the table at the bottom doesn't have spacing and you didn't use the brown color. The rest looks pretty good!

    0
  • MarcWebDev•170
    @MarcWebDevPosted 3 months ago

    Already very good! However, the colors don't seem to match completely and you changed the buttons and the border-radius a bit.

    0
  • MarcWebDev•170
    @MarcWebDevPosted 3 months ago

    Your solution is pretty good, but it looks like the spacing isn't correct and the "Published 21 Dec 2023" text doesn't follow the design. The component overall looks a litte too small.

    Marked as helpful
    0
  • KorriganMaster•70
    @KorriganMasterSubmitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    At the beginning I didn't really know how to organize my CSS. Then I choose to design it utility first like Tailwind does. I think this approach produce CSS which is more easily reusable than working with semantic class names (just my opinion though).

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

    Have you some advices on the best way to organize CSS and in your opinion which is the best CSS design pattern between:

    • semantic class names
    • utility first

    Frontend Mentor - QR code component

    1
    MarcWebDev•170
    @MarcWebDevPosted 3 months ago

    Well done! I've also used utility classes and think it's a great option for smaller projects. In large codebases, it can look overwhelming, but it definitely saves you a lot of time.

    0