Skip to content
Submitted 5 months ago

Responsive Bento Grid using HTML and CSS

accessibility, lighthouse
Rebecca Padgett•2,100
@bccpadge
A solution to the Bento grid challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

All feedback is welcome and greatly appreciated.

Code

Please log in to post a comment

Log in

Community feedback

  • Marzia Jalili•7,050
    @MarziaJalili

    You have done a great job, Girl!!!

    One thing though 🤔

    Wouldn't be better if the hover state were a bit smoother?

    You can apply this line of code to the elements:

    transition: border-color .2s;

    I also recommend setting a media for the tablate. Using grid-template-areas it won't be that challenging.

    Other than these your solution is AWESOME!!!

    Marked as helpful
  • Yacoub AlDweik•3,090
    @YacoubDweik

    Hey!

    Good job!

    I really liked how semantic your HTML is! brilliant! the structure is amazing!

    there's only one thing that makes your app overflow in mobiles, this one: <ul class="social__list"> give that flex their flex-wrap: wrap and everything is gonna be good! keep it up!

    Something I forgot to say is that using h1 and manipulate that by hide it or move it away is not recommended! sometimes the search engines detect that and this will impact the rank of your page.

    Marked as helpful
  • MEHNOOR SHAHBAZ•720
    @Mahnoor366880

    your design is so amazing your hard work pay off keep it up

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