Finished the TCC challenge, though it is a beastiary listing monsters from the Witcher it follows the same formula. I struggled alot with image placement and responsiveness, I still cant seem to nail that, on FCC preview the nav image was fine but having copied to CodePen it seems to go weird and overflow its element?. I’ve used a media query to make the nav text smaller and the monster images to change to column flex when on devices less than 450px wide (this was to stop header, img and nav li overflowing).
Feedback apprecatied and tips on responsiveness/img placement (keeping them contained) would be great 
Hey, not bad at all. I’ve got a few suggestions to help improve the accessibility of the page.
-
Normally, the Bestiary heading would be in an h1 element and the other monster headings would be in h2 elements. If you couldn’t do this because of the requirements of the challenge, I understand.
-
The images need alt text. You should describe each monster in its image alt text, as well as the medallion image. Imagine you are describing it to a blind person.
-
I would put a max width on the sections so that the lines of text don’t get too long for people who have wider screens. I would use rem units for this so that it scales if people zoom in.
-
You’ll also notice that as you widen the browser, the medallion image gets bigger and eventually overlaps the the links. Also, if you shorten the browser then the links eventually go under the image. There are several ways to approach this (I’ll let you figure it out), but one thing I might recommend is you remove the height from the .logo div. I’m not sure there is a reason to have it since the header and the image each have their own height.
-
The label element should only be used to give inputs an accessible name. Instead of using a label element above each list those should be h3 headings
-
You forgot to add the forward slash on one of the closing a tags in the main navigation.
Again, overall this is good work. I’m an accessibility specialist, so I look for these types of issues.
Hi, thank you so much for your reply.
Yeah if i remember correctly it was required to use headers instead of the h1, h2 semantic structure.
Good shout on the max width - this didn’t even cross my mind, i did try use rem as much as possible throughout though i think
As for the medallion image , this is a problem im having with all projects and thats adding images that are responsive and grow/shrink to an upper/lower limit, i had so much drama with just getting the medallion in the nav bar and also the monster images (these i think were resolved with the media query). I thought they’d automatically shrink with object-fit but they didn’t and after maybe 2 hours i gave up. Not sure what’s best for responsive images.
I didn’t know that about labels so thank you. I just assumed they were for their namesake, to label things, very good to know.
This is i think 1.5 weeks into starting the course and so far accessibility and responsiveness are my main issues right now, any guidance would be appreciate again thank you for your feedback !