Responsive 3 column preview

👋 Hi Daniel!

🎉 Congratulations on finishing this challenge! I have some feedback on this solution:

• Accessibility
  • 👍 Good job on using main landmark!
  • Every page should only contain one h1. In this case, you can have a hidden h1 if you want and make all the current h1 to h2.
  • Use CSS to uppercase the text. The uppercased word in the HTML will be spelled by the screen reader (spelled letter by letter).
  • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only.
  • The Learn More buttons should be links. They commonly will navigate the user to another webpage.
  • Let me tell you that anchor tags are for navigation - moving to different pages or content on the same screen, while the button elements are for actions like opening a modal, submitting a form, toggling element, etc.
  • Next time, if you are going to use button element, always specify the type of the button. In this case, you can set the type of them as type="button". By doing that, you prevent the button from behaving unexpectedly (like submitting).
  • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (by using Tab key) easily.
  • Changing the html or root font size can cause huge accessibility implications for those of the users with different font size or zoom requirements. Read what an accessibility expert (Grace Snow) has said about it.
• Styling
  • Don't limit the height of the body element, it will not allow the users to scroll the page if the page content needs more height. Use min-height instead.
  • It looks like you make the site responsive in a complex way. I would recommend just having one breakpoint. So, if you are using the desktop-first approach, then create the styling for the desktop, and then when three columns layout is not looking good anymore, just make it one column.
• Best Practice (Recommended)
  • Write your code with consistent style (e.g. the indentation, quotes, whitespace, etc). If you write your code with consistent style, it will make it easier to read for everyone (including you, yourself).
  • I would recommend writing the styling using mobile-first approach. It often makes me write less code.

That's it! Hopefully, this is helpful!

👋 Hello Daniel , Your solution looks amazing & it is pretty responsive however I think you can watch this video which solves another frontend mentor challenge & you can learn a lot about CSS Grid through that video.

Please keep contributing this amazing solutions 👍