Responsive Art Gallery Website using CSS Grid and Flexbox

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! 😄