Responsive CSS Grid

Hey, awesome work on this one. Site in general looks great and it is responsive as well.

argel omnes already gave great feedback on this one, just going to add some suggestions as well:

• Don't use height: 100% on the html and body as they are relative to the viewport which caps their height. Use always min-height: 100vh.
• On the body tag, your image-path on the background is wrong. Use this instead url("../images/pattern-background-desktop.svg")
• Instead of using role="main" on the .content selector, just simply use main tag instead of div.
• The illustration is on a decorative image. Decorative images should be hidden for screen-reader at all times by using alt="" and aria-hidden="true" to the img tag or only aria-hidden="true" if the image is using svg.
• The music-icon as well is only decoration so hide it using method above.
• annual plan could use a heading tag since it gives overview on what the section would contain. An h2 would be great.
• Do not remove the outline styling. If you did, always include a visual-indicator on the :focus-visible for those interactive elements like the button a tag and others.

Aside from those, great job again on this one.

Hey Ashish,

Yes, your structuring of the files is good. One suggestion is to group stylesheets in one folder if you have 2 or more. I sometimes don't do this if one of my stylesheets is the source and the other is the output. In your case you referenced each in the HTML, so I highly recommend it.

HTML is also neat. Putting icon-music.svg inside a div is optional. A minor thing you may consider is putting footer at the bottom of your stylesheet. Just above the media query. So it follows the structure of your HTML as well. Reading it is easy this way.

Overall, good job!