Anime Quote Machine (feedbacks appreciated)

Anime Quotes Machine
ps: let the background images load to see the full beauty of the site

1 Like

This looks very nice. I’ve got just a few suggestions for you.

  • The quote, author, and anime title are not really headings and should not be marked up as such. They are just content. Because this is a quote, I think the best element to use would be a blockquote for the actual quote. And you can wrap that in a figure and then use a figcaption for the author and title. Take a look at MDN’s blockquote example to see this approach in action.
  • I think your new quote button needs to be an actual button element. You are using an anchor element but you don’t have an href attribute on it which will cause accessibility problems. Besides, it’s not really taking you to a new page, it’s just loading a new quote, so a button is the more semantically correct choice here.
  • Speaking of that new quote button, it needs to have actual text associated with it. The easiest way to do that is to add the text “New Quote” inside the button as normal and then wrap it in a span element and make it visually hidden. You’ll want to do this for the twitter link as well.
  • You’re missing some HTML best practices which are important for accessibility. You must have a title element in the head. The html opening tag must have a lang attribute. You should wrap the main content in a main element.
  • On narrow view ports I would make the #wrapper wider so you have more space for the content. You might also think about making the text size slightly smaller.