Skip to content
Submitted almost 3 years ago

CSS using BEM method for the first time

MaryF•350
@Janselin
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This is my first time using BEM for css. I would like to get some feedback about it. The responsive design on this challenge was pretty hard and feel like i messed up. If anyone have some tips for it, i would like to hear

Community feedback

  • darryncodes•6,370
    @darryncodesPosted almost 3 years ago

    Hi Mary,

    Great job on this challenge, it looks great.

    And I think you've grasped BEM really well

    A few minor tweaks i noticed:

    • on a really wide monitor your design has shifted to the left. I'd remove max-width: 1440px; from .body.
    • i'd also update .container background size to background-size: cover; so it can fill the whole big screen
    • you could add some aria-label to your social links to clear the accessibility report

    Hope that helps

    Marked as helpful
    1
    MaryF•350
    @JanselinPosted almost 3 years ago

    @darryncodes Thank you a lot for your time and feedback. I'll fix all the issues you mentioned!

    The thing with background size is that if i use cover, it doesnt look exactly the same as the design example 😅

    0
    darryncodes•6,370
    @darryncodesPosted almost 3 years ago

    you're welcome @Janselin!

    Ohhhh really, perhaps I'm mistaken with the background-size: cover; as I've not tried this challenge yet 😅😂

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord