Tribute to Space Ghost. I love feedback

Code Feedback
1

Great party, man. Here’s the codepen link for anyone looking to critique my code or styling choices:

https://codepen.io/TheTechLead/pen/BaBwdJa?editors=1100

2

Hi @HideoKO!

I think your page looks good.

A few things.

<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
<a />

  • 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.
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br

  • 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.

Happy coding!

1 Like
3

Hey @HideoKO!

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!

1 Like
4

Thank you! I appreciate the detailed feedback.

1 Like
5

Hi @HideoKO!

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 font-size properties.
    • 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.
  • 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 #tribute-info element?

Overall, this is a great first project! Thank you for sharing!

2 Likes
6

Awesome feedback. I really appreciate everything you said here!

1 Like
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.