Skip to content
Submitted over 2 years ago

Responsive Art Gallery Website using CSS Grid and Flexbox

Daniel•160
@DanoSvK
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Art gallery website
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

What do you think about my solution overall? Also, I struggled with adding new element using media queries. I tried to create 3 inline blocks in the header. One black, one hero image, one white. The black one, however, didn't appear. Only if I set it to block, which obviously didn't work for the design. Why? Instead, I set header to black color and fixed width and used relative and absolute positions to cover/uncover it with the hero image, but I don't feel like that it's acceptable solution. What do you think?

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    Hi, Daniel! 👋

    Regarding the header layout for the desktop.

    • First of all, it should not be a header. header element is used to wrap nav element and the company logo. So, there's no header in this case.
    • Instead, the first section should be the first section inside the main element.
    • Now for the layout.
      • On mobile, the layout is straightforward. img element first and then h1, p, and the last element is the button.
      • On the tablet, I made the grandma's picture as a background-image and then wrap all the elements with a container. After that, the container had margin-left: auto to push the content to the left of the page.
      • On desktop, I made the black background color with pseudo-element. Then I used flexbox to align the h1 with the rest of the content.

    You can see my solution for your reference.

    This is the way I did the layout. Of course, there are multiple ways to approach things. So, I would prefer to think of it in another way instead of true or false.

    Some suggestions.

    • Use CSS to uppercase the text. The uppercased word in the HTML might be spelled by the screen reader (spelled letter by letter).
    • On the srcset, you need to specify the pixel density descriptor so that the browser can provide the best image based on the user's DPI (Dots Per Inch) screen.
    <picture>
  <source srcset="./assets/desktop/image-grid-1.jpg,
      ./assets/desktop/[email protected] 2x">
</picture>
    • Good job with the alternative text for the social media icons! 👍
    • I recommend trying to make it as similar as possible to the design. I notice some of the elements have different font families.

    I hope this helps! Happy coding! 😄

    Marked as helpful
    1
    Daniel•160
    @DanoSvKPosted over 2 years ago

    @vanzasetia Thanks for your late answer. It was very helpful. I will definitely apply your suggestion in my upcoming project.

    0
    Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    @DanoSvK Why don't try to fix this one before doing another challenge? Most of the feedback is specifically for this solution. Also, refactoring code and fixing issue are two important skills as a developer. 🙂

    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