Great party, man. Here’s the codepen link for anyone looking to critique my code or styling choices:
I think your page looks good.
A few things.
- Review the lesson on Giving Links Meaning by Using Descriptive Link Text
<a href="https://superheroes.fandom.com/wiki/Space_Ghost" id="tribute-link" target="_blank">here<a />
Also there is a typo at the end of that link
You have a couple of small errors in your html. Run your code through the validator You can ignore the messages for doctype, html tags and head tags.
Please do not use br tags to create space between elements. Use css instead.
On smaller devices, sometimes the black text blends in with the dark blue. So maybe you can adjust the linear gradient a little bit to a lighter blue.
Keep up the good work.
Your page looks good!
I have just one suggestion.
You can turn the black text into white.
make changes @jwilkins.oboe told.
Thanks and Happy Coding!
Thank you! I appreciate the detailed feedback.
I love the colors you chose for the background gradient!
It looks like a couple other people already pointed out the issues with the background/text contrast, so I won’t say much on that other than that I highly encourage you to use a contrast checker tool to check the contrast level of color combinations in the future. There’s a ton of different tools online, but I really like the one I linked because it has an option to help enhance the contrast for you by changing the either the text, background color, or both!
A couple of other things I noticed when looking over your page:
- The first image has really great descriptive alt text! The second image is a little lacking, however. The second image has movement & text that aren’t really conveyed well by your current alt text. Remember, if someone is using a screenreader or if the images aren’t loading for any reason, the alt text should convey comparable information as the image does
- As @jwilkins.oboe mentioned, it’s best to avoid
<br>tags for line breaks. From what I saw, it looks like you only used them for the
<li>elements. As a heads up,
<li>elements default to block-level and will start on a new line all on their own, unless you specifically tell them not to.
- You’ve currently got the caption for your first image as an
<h5>element. I’d recommend reviewing the lesson Applied Accessibility: Use Headings to Show Hierarchical Relationships of Content
- As a TL;DR: Use
<h5>only if it is really the 5th level heading/subheading in your page. Otherwise, if the font size what you’re after, you can achieve that with the CSS
- As an alternative, consider wrapping your image & caption in a
<figure>and using a
<figcaption>for the caption instead. See Applied Accessibility: Improve Chart Accessibility with the figure Element for more information.
- As a TL;DR: Use
- If you want to get rid of the white border on the sides of the page that show up when you use a background color or image, try giving the body element a
margin: 0. I personally prefer that look as it feels more whole & less jarring/abrupt on the screen, but that’s more of a preference I suppose!
- And finally, don’t forget the Responsive in Responsive Web Design! The smaller width of the content looks good on mobile where it fills the screen out, but it gets a little too condensed on a desktop browser and feels a bit cramped in the middle. Maybe try playing with increasing the max-width of the
Overall, this is a great first project! Thank you for sharing!
Awesome feedback. I really appreciate everything you said here!