Responsive card made with HTML5 CSS3 FLEXBOX

👋 Olaf Ziorko!

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

• Accessibility
  • 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 (Tab) easily.
  • All img tags should have alt attribute (even though it is empty) or else it is not a valid HTML.
  • Use the person's name for the alternative text for the avatar.
  • The equilibrium image should be wrapped inside an interactive (button or a), since it has active states and it will do something if the user clicks the image, for example, it previews the image.
  • Also for both of these elements, wrap those text with anchor tags.

<h1>
  <a href="#">Equilibrium #3429</a>
</h1>

...

<p>
  Creation of<a href="#">Jules Wyvern</a>
</p>

• I would recommend always wrapping all text with meaningful tag (p). span and div should be only used for styling purposes.
• I would think of this card component as the part of a large or full website, meaning that it should be all in one element (in this case main). There's no need header and footer (except for your attribution).
• Visual
  • 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 (see the issue on mobile landscape view). Use min-height instead. Also, you don't need to set any height on the html element, treat body element as your web page.
  • I would recommend setting the body font size with rem unit. Using percentage as the body font-size unit is useless since you are using rem which is relative to the root (html) element not body element. After knowing this fact, I would recommend not setting the html font size to 62.5%, since it can cause a lot of issues and almost no benefit at all. See what an accessibility expert has said about it.

That's it! Hopefully this is helpful!

Good job!

When you see something that changes states on the design, it almost always means it is supposed to be interactive. It could be a button, or a link, or any kind of interactive element. So in your case, you would expect the preview image or card title to take you somewhere, to the Learn more about... for instance. The same is true for the profile elements, the name and avatar; again you would want to learn more about the author when you clicked on it. So make the image container, title, author's name and profile pic links.

Also when doing challenges like these, remember that they are part of a bigger webpage, meaning the layout should be done accordingly.

Good luck!

Hi Olaf, great job. However, you should include alt text into your image to improve accessibility