Skip to content
OverviewSolutions
7
Comments
7

Bensolve

@BensolveGhana100 points

I am a newbie to web development and I want to learn how to build real-world projects to get better chance for jobs

I’m currently learning...

Html and Css

Latest solutions

  • four-card-feature-section-master using grid

    Bensolve•100
    Submitted 9 days ago

    I would love feedback on my current approach of combining Grid layout with margin adjustments for staggered positioning. Are there better modern techniques that could make this layout cleaner and more scalable? Suggestions on how to better handle these designs responsively would also be appreciated.

    1 comment

  • product-preview-card-component-main

    Bensolve•100
    Submitted 17 days ago

    💡 Areas I’d like help with

    I'd appreciate feedback on improving responsive typography (especially multi-line headings), better ways to manage spacing consistency across breakpoints, and how to refine semantic structure for accessibility.

    1 comment

  • Responsive Recipe Page with Semantic HTML & Modern CSS

    Bensolve•100
    Submitted 24 days ago

    Areas Where I Would Like Help

    • Optimizing Responsive Typography
      I use clamp() and vw units for fluid scaling, but I want feedback on whether my approach balances readability and performance across all devices effectively.

    • Image Breakout Techniques
      I’m using width: 100vw and negative margins for images to break out on mobile. Are there more modern or cleaner methods to achieve this without causing layout shifts or overflow?

    • CSS Architecture & Naming
      I follow a BEM-like naming pattern, but I’d appreciate advice on improving class structure for better scalability and maintainability, especially in larger projects.

    • Semantic HTML Validation
      Would love feedback on my use of semantic elements (main, section, article, heading hierarchy). Are there improvements I can make to boost accessibility or SEO?

    • Handling Edge Cases in Layouts
      Any tips on managing tricky responsive edge cases, like avoiding horizontal scroll on complex nested containers or dynamically sized elements?

    • Performance Best Practices for CSS
      Suggestions on minimizing CSS complexity or improving load/render times without sacrificing design fidelity.

    Feel free to review specific snippets or sections of my code if that helps provide more targeted advice!

    1 comment

  • social-links-profile-main

    Bensolve•100
    Submitted 27 days ago

    I’d love feedback on these specific areas:

    • Accessibility: Are my focus styles and keyboard navigation done properly?

    • Modern CSS: Am I using current best practices like logical properties, :focus-visible, or :has() correctly?

    • Responsiveness: Do the layout and spacing look good across different screen sizes?

    Any suggestions on how to improve are very welcome!

    2 comments

  • blog-preview-card-main

    Bensolve•100
    Submitted 29 days ago
    1 comment

  • QR-code-component-solution

    Bensolve•100
    Submitted 30 days ago
    1 comment
View more solutions

Latest comments

  • antoni0kim•150
    @antoni0kim
    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

    👏 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
    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

    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
  • Bensolve•100
    @Bensolve

    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!

  • Bensolve•100
    @Bensolve

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

  • Bensolve•100
    @Bensolve

    Your solution matches the design you did great

  • Ekong Providence Osomuko•20
    @GGOsomuko
    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

    Great Job

View more comments