Skip to content
Submitted over 3 years ago

Modern Art Gallery | Responsive | CSS Grid & FlexBox Layout

itcss
Angelo Barbarulo•280
@Jorahhh
A solution to the Art gallery website challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey there people!

Here is probably my best project here on Frontend Mentor. I've been on this for awhile and the result is fine.

I've tried with all my knowledge to do as clean as possible the code.

Super proud of it, especially for the grid layout where I studied and improved on how to set it, the columns, the rows and the gap. Used the flex layout too, only for the mobile version.

I just changed few things from the original design (h1,h2, font-weight)

I would appreciate some feedback on it :)

EDIT: Just updated my code. I replace the old map (the image) with the "interactive" one from leaflet with js (using a tutorial, I'm still not good with js) and changed the <button> (now the Report shouldn't report any issue with the code) and its hover effect. In addition I changed the grids margins. Now it looks better, I guess :)

Code

Please log in to post a comment

Log in

Community feedback

  • Arthur Roberts•410
    @arfarobs

    Hey Angelo. I'm currently working on this project myself. I like the hover effects you put on the images.

    I've got a suggestion to neaten up your code with the grid images. It's not good to have three <img> tags for the same picture. This has something to do with accessibility and SEO. I spent hours looking for a solution to this. I will share it with you.

    Instead of this:

    <div class="mobile-grid1"> <img src="assets/mobile/image-grid-1@2x.jpg" alt="grid1"/> </div> <div class="tablet-grid1"> <img src="assets/tablet/image-grid-1@2x.jpg" alt="tablet-grid1"/> </div> <div class="desktop-grid1"> <img src="assets/desktop/image-grid-1@2x.jpg" alt="desktop-grid1"/> </div>

    I'd suggest using this:

    <picture class="img-grid-1"> <source media="(min-width: 1440px)" srcset="./resources/assets/desktop/image-grid-1.jpg"> <source media="(min-width: 768px)" srcset="./resources/assets/tablet/image-grid-1.jpg"> <source media="(max-width: 375px)" srcset="./resources/assets/mobile/image-grid-1.jpg"> <img src="./resources/assets/mobile/image-grid-1.jpg" alt="The galleries main room."> </picture>

    This will avoid confusing search engines. Also, the pictures will automatically change to the correct file without adding them to your media queries in CSS. If I'm correct, I think this will also help loading speeds because the browser will only load the image that it needs, but i could be wrong about that.

    Hope it helps.

    Marked as helpful
  • Kelvin•965
    @Kl3va

    Your solution looks slick especially on mobile. You did pay attention to details.

  • Shashree Samuel•8,860
    @shashreesamuel

    Hey good job completing this challenge

    Keep up the good work

    Your solution looks great however I think the title in the website needs to wrap as seen in the design. Secondly the font size of the subtitles is supposed to be a bit bigger. Lastly the text "Come and be inspired" needs to be in a heavier font weight

    I hope this helps

    Cheers Happy coding 👍

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