Skip to content
OverviewSolutions
9
Comments
9
P
librart
@librart

All comments

  • Nazirii•110
    @Nazirii

    2

    1
    P
    librart•160
    @librart

    Hi, greetings!

    Well done on completing this challenge. There are some suggestions that you should fix and will set you up well for future challenges.

    • pop the styles in their own file and link it from the html head.
    • the social media share links appear when people click the share icon, not when they hover the share icon. It needs JavaScript code to build that.
    • try to learn about CSS object-fit property for specifying how an <img> or <video> should be resized to fit its container.
    • also try to learn about media query to build optimal layout for different device's screen size.

    Good luck!

  • P
    librart•160
    @librart

    Hi, greetings!

    Nice one with your own style! Plus adding the animations as well.

    Marked as helpful
  • Nicolette Reneilwe Mashaba•140
    @Reney17
    What are you most proud of, and what would you do differently next time?

    I’m most proud of successfully implementing a fully responsive testimonial grid using CSS Grid and media queries. The layout adapts well to different screen sizes, and the hover effects add a nice interactive touch. If I were to do this project again, I would explore using CSS clamp() and minmax() for even better responsiveness and experiment with animations to enhance user engagement.

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

    One of the biggest challenges was structuring the grid layout properly to ensure that the cards aligned correctly across all screen sizes. Initially, some cards were not positioned as expected when switching between breakpoints. I overcame this by refining my media queries, adjusting grid-column and grid-row placements, and testing extensively on different devices. Another challenge was ensuring consistent spacing and alignment, which I resolved by tweaking padding and gap properties in CSS.

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

    I’d love feedback on:

    Code optimization – Are there any redundant styles or a better way to structure my CSS? Accessibility – How can I improve accessibility for better usability? Performance – Are there any best practices I should follow to optimize performance, especially for larger grids?

    Testimonial Grid Section

    1
    P
    librart•160
    @librart

    Hi, greetings!

    A note from me is I think you need to look at the JPG images of the design files and the style-guide.md file for font type, layout, and style inside the cards to get it looking as close to the design as possible.

    Btw, you were doing great on grid layout for different device's screen size.

    That's it. Happy coding! Good luck!

  • P
    librart•160
    @librart

    Hi, I see there is a problem with your preview and code links.

    Just suggestion, I think it's better to have one repository for each one project on your Github. You don't have to make folder group for all frontend mentor challenges.

    Btw, happy coding! Good luck!

  • P
    librart•160
    @librart

    Greetings!

    Congratulations on completing this challenge! You're really doing great.

    Try to code mobile first and just wanna share this article about writing a good alt text.

    I hope it useful for you. Keep up a good work!

    Marked as helpful
  • P
    Will Cooley•200
    @CooleyWC
    What are you most proud of, and what would you do differently next time?

    This challenge was a good refresher on using html tables and pseudo-elements.

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

    The design has the bullet points centered vertically in between the wrapped <li> text (when it's more than one line on small screens). I tried using flexbox properties but found myself straying away from semantic HTML best practices, so I stuck with <ul> and <li> elements for now. I could use help with this.

    recipe-page

    1
    P
    librart•160
    @librart

    Hi, there!

    I have a little suggestion about your work:

    1. You need to add padding to the body because the container sticks at the top while both sides still have a space on below 900px screen.
    2. You need to add text-align: left to the .hero h1 on below 900px.
    3. You need to move container's border-radius for large screen.
    4. I think it's better to use rem unit instead of px unit for your container's width.

    I hope it useful for you. Keep up a good work!

  • P
    librart•160
    @librart

    Hi, there.

    I have a little suggestion about your work that you can use for your code. I think it would be better to use a element instead of button to direct the link.

    I hope it useful for you. Keep up a good work!

    Marked as helpful
  • P
    librart•160
    @librart

    Hi, there.

    I have a little suggestion about your work that you can use for your code. You can try using flex on the body element to center the card on the page.

    I hope it useful for you. Keep up a good work!

  • P
    librart•160
    @librart

    Greetings, Joel!

    Congratulations on completing this challenge!

    I have a little suggestion about your work that you can use for your code. You can make different padding sizes of each side. Here is an example:

    img {
   padding: 45px 45px 45px 45px;
}

    In order: top, right, bottom, and left.

    I hope it useful for you. Keep up a good work!

    Happy coding!