A Tribute to Michael Jackson

Hi Fellow campers! I just started on this course and I am very excited to share my first ever coding project here on FCC! I just adopted very basic codes to build up my confidence on coding (I have never coded before in my life!). My main problem with my code is that it looks very messy. Is there any way to shorten the links of the image that I use?

Any feedbacks will be deeply appreciated! Thanks!

@gaoyan To shorten the links, you can use a service like Tiny URL. I personally don’t mind when links are long, as long as the code is indented properly. I did notice that you have some extra spaces in the first few image elements that can be removed.

In the <p> element, you used 2 classes and then styled them separately in your CSS. Since they both apply to only one element, why not make it just one class?

I would suggest you add an additional class on the <div>s of image rows, one that’s not unique to each row (perhaps .box) and apply the padding - and additional styling if you want to build on top of this - to that non-unique class.
One advantage you will get from that is that you’ll be able to remove the class .small-image from all the <img> elements and style them by targeting .box img instead.

Check out the discussion in the cohort’s topic for the Tribute Page project. It was suggested that you first try to pass the tests before moving on to the details to avoid later frustration. @ConnectExtend added this helpful comment which is a link to a document with all the test requirements.

If you need help adding the test suite to your project, here is how you do it: Click the gear icon in the JS section in CodePen and enter the following in the first external script field:

1 Like

@gaoyan Great work so far! :stars: I like your use of colors, matching elements of the pictures to the background colors, and that you’re not selecting IDs in your CSS. Also, the page is mostly responsive in Firefox, except for the first image at the top of the page, which can be fixed by adding max-width: 100%; to it. Here’s something to consider for improvement:

  • Alt Attributes: That first image is missing an alt attribute. All images need alt attributes, as we learned in the Add Images to Your Website challenge. This is really important.

    All img elements must have an alt attribute. The text inside an alt attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.

    Also, another thing I notice is that your alt attributes for your project images (Michael Jackson Red 3, MJ Red 5, etc…) are not descriptive of what the images are. You may want to describe these images in more detail so people using screen readers and search engines will have a better understanding of the content of the images (http://webaim.org/techniques/alttext/):

    The alt attribute should typically:

    • Be accurate and equivalent in presenting the same content and function of the image.

    • Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.

    • NOT be redundant or provide the same information as text within the context of the image.

    • NOT use the phrases “image of …” or “graphic of …” to describe the image. It usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

The issues with the alt attributes are really the only major issues I see, other than some of the formatting suggestions @yoizfefisch mentions. Great work and I’m looking forward to reviewing your future projects. :sunny:

1 Like