Responsive Styling using Media Queries and Flexbox

Community feedback

• 

  P

  Kamran Kiani•2,740

  @kaamiikPosted about 1 month ago

  Hello. Congratulations on completing this project. I think there was a misunderstanding in viewing the design images. The whole page should be light blue, and there's no need for the edges to be white. By the way, I have some notes for your code:

  HTML Structure & Semantics

  • For your h1 you need something like .visually-hidden or .sr-only class. This is good for screen readers and also not show it to the users. You can search on the internet to find the styles.

  • Image descriptions should be meaningful and descriptive:

    • Use alt text that explains the purpose: alt="QR code to Frontend Mentor website"
    • Avoid generic descriptions like "image" or "picture"

  • The bold text needs to be h2 because is a heading.

  • The .attribution needs to be a p tag because It contains a text and p tag is the most proper tag here.

  ---

  CSS Best Practices

  • Start with a proper CSS reset (Andy Bell or Josh Comeau recommended)

  • This ensures consistent styling across browsers

  • Avoid fixed dimensions for text containers:

    Your figure contains text and you should not limit width and height.

  • Do not use ID for css. Only use class. ID is suitable for JS and link two or more html tags together.

  0