Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
7
Comments
7
Bensolve
@Bensolve

All comments

  • antoni0kim•190
    @antoni0kim
    Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    This was first time I felt the solution came up quickly and noticed improvement on my CSS skill and felt good about the progress I made. If I were to start all over again, I would start writing the :root {} with variables before starting the project, instead of writing the variables at the end and modifying the codes.

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

    The approach of setting the cards in desktop version. I knew I had to use some sort of grid, and I asked ChatGPT for help which I did not like the solution at all, because it was making it too complicated than it needed to be. The solution provided by ChatGPT suggest placing one of the card into second column, but that gave an idea of instead of placement, I would have three columns, and each column being in on container, except the second container having both team builder and karma card, and using flex to set the alignment. Modification on html was done to wrap them around in the container, and then placing the flex containers inside the grid was a hybrid solution that I decided to go with.

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

    Because Figma was not provided, I had to eyeball the solution with the width and size of the card, so I would like some feedback on the dimensions. I'm also not sure if the breakpoint between mobile and desktop was done correctly; I decided that having 70rem of 15px was probably a good breakpoint, but if there's a suggestion as to how to go about this, I would like your advice on it.

    The container display for flexbox also felt bit repetitive and I think there could've been better way to do this, but I decided to go with what works first, and optimize later. Now that I look back, it could've been just div class with "column" and modify all of them at the same time instead of repeating each of them individually.

    I also don't think the shadow was done properly. I'm not sure how I can measure the shadow in the example and try to mimic the effect since there are many variables in play here.

    Four-card feature section solution

    1
    Bensolve•100
    @Bensolve
    Posted about 1 month ago

    👏 Nice work! Your layout is responsive and visually clean — well done handling the desktop and mobile structure. Just a heads-up: your README still uses the default Frontend Mentor template, so it’d be great to update it to reflect your actual implementation. Keep it up! 🚀

  • Gabriel Alves•50
    @gb4lves
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm happy to have done this exercise quickly and it looks very similar to the original, even without having the figma measurements. I was also proud of not having to review any content to do it and simply did it from my head, I added some animations when changing breakpoints that enriched the site!

    Next time, I would perhaps work better on responsiveness with concepts that I haven't learned yet, such as clamp, calc, rem, etc. And I would work better on the use of flexbox.

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

    This challenge was very easy and went quickly, a sign that we are learning more and more.

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

    Responsiveness!

    Responsive Product Card with HTML, CSS, Flexbox and Media Query

    1
    Bensolve•100
    @Bensolve
    Posted about 2 months ago

    Hey! 👋 I really enjoyed checking out your solution.

    ✅ What I liked:

    You nailed it — completing it from memory and still getting that close to the original is impressive. The breakpoint animations were a nice touch that made the experience feel more dynamic.

    🚀 Keep going!

    It’s great that the challenge felt easy — that’s a strong sign of growth. You’re clearly making solid progress!

    Marked as helpful
  • Lawrence Osuru•40
    @linscot10
    Submitted about 2 months ago

    html,css

    1
    Bensolve•100
    @Bensolve
    Posted about 2 months ago

    Hi! Your recipe page HTML is mostly well-structured and clear. A few suggestions to improve accessibility and semantics:

    • Change the <h3> for "Preparation time" to <h2> to maintain proper heading order and improve screen reader experience.
    • Enhance the image alt text to be more descriptive.
    • Remove duplicate Google Fonts preconnect links.
    • Add a <caption> to your nutrition table for better accessibility.
    • Consider using semantic <section> elements instead of <hr> for dividing content.

    Your CSS is clean and mostly well-structured with solid use of global resets, responsive media queries, and consistent spacing. A few suggestions:

    • Remove redundant or ineffective declarations like align-items and justify-content on .container which is not a flex container.
    • Stick to one unit system for margins/paddings (prefer rem for scalability).
    • Clean up repeated margin declarations (e.g., .images has two margin-top values).
    • In your media queries, avoid repeating unchanged properties to keep the CSS concise.
    • Consider using relative units (em or rem) for font sizes on mobile to improve accessibility.
    • Verify color contrast for text to ensure accessibility standards.
    • Class names could be more descriptive or follow a naming convention for larger scalability.

    Overall, good responsive layout and clean table styling!

  • oladelejoseph•40
    @oladele24
    Submitted about 2 months ago

    social-links-profile

    1
    Bensolve•100
    @Bensolve
    Posted about 2 months ago

    You personalized your code which is very great but u forgot to edit your readme on github

  • Edanairis Colina•10
    @edanairis
    Submitted about 2 months ago

    QR Code Component Responsive

    1
    Bensolve•100
    @Bensolve
    Posted about 2 months ago

    Your solution matches the design you did great

  • Ekong Providence Osomuko•20
    @GGOsomuko
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    In the course of this project, I was able to relearn and improve on my HTML and CSS skills. I also payed attention to minor details.

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

    I had challenges with aligning the divs and images. To overcome them, I went back to the website where I had learned them before to recollect.

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

    What are the essentials we expected to know when translating a design into a landing page?

    Responsive Blog Preview card using HTML and CSS.

    1
    Bensolve•100
    @Bensolve
    Posted about 2 months ago

    Great Job

  • Fabián Rivero•110
    @fabianRivero
    Submitted about 2 months ago

    Responsive QR component using flex

    1
    Bensolve•100
    @Bensolve
    Posted about 2 months ago

    Great job! 👏 Your code is clean and easy to read, and the preview looks exactly like the design. You followed the style guide really well. Everything looks perfect—well done!

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub