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 afigure
and then use afigcaption
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 anhref
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 abutton
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 aspan
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 thehead
. Thehtml
opening tag must have alang
attribute. You should wrap the main content in amain
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.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.