Equilibrium #3429

Hi, Joshua! 👋

Congratulations on finishing this challenge! 👏

Here are some suggestions for improvements.

• All the page content should live inside landmark elements. Users of assistive technology can navigate through landmark elements. This will help them quickly navigate a website or application.
• In this case, the children of the body element should be landmark elements - main for the card, footer for the attribution.
• Use interactive elements for any elements that have interactivity. Interactive elements can either be links or buttons.
• For your information, anchor tags are for navigation. The button elements are for actions like opening a modal, submitting a form, toggling element, etc. It is essential to use the correct elements.
• Create a custom :focus-visible styling for any interactive elements (e.g. button, links, input, textarea). This will let people who use a keyboard to navigate the site know where they are currently on the page.
• Replace the h3 with h1. Headings must be in a logical order.
• There should not be text in span and div alone. Wrap the text with a meaningful element like a paragraph element.
• The alternative text for the avatar should be the name of the person (alt="Jules Wyvern").
• Alternative text for images should not contain any words that are related to "image" (e.g. picture, photo, logo, icon, graphic, avatar, etc). It is already an image element (img) so the screen reader will pronounce it as an image.
• Use a CSS reset whenever you start a new project. This can help you set the styling foundation easily.
• The card (.main) only needs a max-width to be responsive. So, set a max-width and remove the height and width. For the height of the card, let content inside the card controls it.

Related resources:

How-to: Accessible heading structure - The A11Y Project

Quick tip: Using alt text properly - The A11Y Project

A Modern CSS Reset

I hope this helps. Happy coding!

I would practice semantic html. like using footer instead of <div class="attribution">. for your <div class="main"> I would highly recommend using the main tag instead as it helps for SEO and is meant to signify the main part of the document. as for the other divs i would use the sections tag instead to better describe to the browser what things are. Don't forget that html is built as a lang to describe what things are to the browser, everything is actually just a <div> (block level) or a <span> (inline) but with more significant meaning.