Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
34
Comments
18

Ben

@BenConfigUK770 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Recipe Page (HTML, CSS)

    #accessibility#bem

    Ben•770
    Submitted over 1 year ago

    I think the main point of this project is about HTML structure, so if you think I could have done it in a better way, please let me know. I did put some thought into it though, so I have my reasons for structuring it the way I did.


    0 comments
  • Recipe Page (HTML, CSS)

    #accessibility#bem

    Ben•770
    Submitted over 1 year ago

    I think the main point of this project is about HTML structure, so if you think I could have done it in a better way, please let me know. I did put some thought into it though, so I have my reasons for structuring it the way I did.


    1 comment
  • FAQ Accordion

    #accessibility#bem

    Ben•770
    Submitted over 1 year ago

    Is the accordion accessible? Is there a better way to write the JavaScript? Is there anything obviously wrong with my code?


    0 comments
  • Multi-Step Form (React, TypeScript)

    #accessibility#bem#react#typescript#vite

    Ben•770
    Submitted over 2 years ago

    1 comment
  • QR Code Component


    Ben•770
    Submitted over 2 years ago

    0 comments
  • Interactive Rating Component (with React)

    #accessibility#react

    Ben•770
    Submitted over 2 years ago

    0 comments
View more solutions

Latest comments

  • Marcel Kuczynski•60
    @marcelkuczynski
    Submitted over 2 years ago

    Fylo dark landing page solution using Flexbox and CSS Grid

    1
    Ben•770
    @BenConfig
    Posted over 2 years ago

    Hi, nice work!

    To stop the page from refreshing, you have to prevent the default behaviour on form submission.

    Try adding this JS:

    const form = document.querySelector('form');
    form.addEventListener('submit', event => {
      event.preventDefault();
    });
    
    Marked as helpful
  • Larry•190
    @ljcutts
    Submitted over 3 years ago

    Tip-Calculator With CSS Grid, CSS Flexbox, Vanilla Javascript

    3
    Ben•770
    @BenConfig
    Posted over 3 years ago

    The 'dots inside the zeros' are a feature of the Space Mono font family. It looks like you are using the Roboto font family which does not have the dots.

    Why not just use the character '$' and then you can apply the color property?

    You should try building the page for mobile first. The mobile design is usually much simpler than the desktop design so it makes sense to start with that. You then apply media queries when you have more viewport space to work with.

  • Josiel Matos•10
    @JosielMatos
    Submitted over 3 years ago

    Summary Card using CSS Flexbox

    2
    Ben•770
    @BenConfig
    Posted over 3 years ago

    Remember to use <p> elements for blocks of text. <div>s and <span>s aren't semantic elements, they are just used to separate elements for styling purposes.

    For example, your .description element can be a <p>. And the .price element can be a <p> also in my opinion:

    <p class="price">
         <strong>Annual Plan</strong>
         <span>$59.99/year</span>
    </p>
    
  • juanmfretes•90
    @juanmfretes
    Submitted over 3 years ago

    Desktop-first solution using CSS Grid (grid areas)

    4
    Ben•770
    @BenConfig
    Posted over 3 years ago

    Try to use the semantically correct HTML elements.

    For the .container you could use a <main> element instead of a <div> and your .cards could all be <section> elements instead of <div>s.

    Also you have used <p> elements for your .card-headings, but these are headings, so why not use <h2>?

    Marked as helpful
  • Yunus Emre Arslan•140
    @earslanyunus
    Submitted over 3 years ago

    Stats Preview Card Html and Css

    #accessibility
    1
    Ben•770
    @BenConfig
    Posted over 3 years ago

    Hey, I checked your page in Safari. There is a lot of extra space above the <h1> and on larger screens the text content starts to disappear from the bottom of the .text-box.

    For some reason, removing align-items: center; from .card fixed the issue but I couldn't figure out why.

    Marked as helpful
  • AzeezBNA•70
    @azizbna
    Submitted over 3 years ago

    Social proof section

    1
    Ben•770
    @BenConfig
    Posted over 3 years ago

    How about this:

    .review::before {
        content: url(./images/icon-star.svg)
                 url(./images/icon-star.svg)
                 url(./images/icon-star.svg)
                 url(./images/icon-star.svg)
                 url(./images/icon-star.svg);
        margin: 0px 30px 0px 20px;
        display: inline-flex;
        gap: .25rem;
    }
    

    You can use the gap property to increase/decrease the space between the stars as you wish.

    Marked as helpful
View more comments

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

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