Tribute Project - improving suggestions please!

Hi there, can anyone please take a look at my CSS portion of the project and tell me how and where to improve. I can see that it’s not the most perfect looking project and I did have some trouble centering elements on the screen, especially the

    and footer elements.

1 Like

Hey, this looks pretty nice. I’ll just throw out a couple of suggestions.

  • The second heading on the page should be an h2. In general, you should not skip heading levels as you work your way down the hierarchy.
  • Don’t use word-break: break-all on your content. The words should not randomly break at the end of a line. It might look cool, but it makes it very hard to read the content.
  • For the alt text on the image, you might want to be a little more descriptive than “drawing of stan lee”. You can definitely mention that this is a portrait instead of an actual picture. But I might add some more details, such as what he is wearing, what he is doing in the portrait, what he looks like, etc…
  • The link at the bottom should be phrased better. You don’t need to say “follow this link”. I might reword that last sentence to something like “More famous quotes by Stan Lee” and make the entire thing a link. That way people using screen readers will immediately understand what the link is pointing to.
  • Speaking of that last link, it needs to look like a link. Right now I can’t tell that you can click on it. Usually links are underlined.
1 Like

According to the design, i sugguest you add a grid section with some comics covers, just like i did on my tribute page:

With this challenge you’ll learn a lot about the grid or flex.

1 Like

@natallia.prymost Your page looks pretty good to me. Personally, I would cut down on the box shadow a little. It’s a cool effect, but it can be overused.

As for centering, try and keep the box model in mind as it can really make a difference when you’re trying place things properly. (You might try just adding a div around your list to give you some extra flexibility)

Aside from that, I definitely agree with everything @bbsmooth said, I would only add one more suggestion on formatting: blank space doesn’t really mean anything in HTML, CSS, or Javascript, so don’t hesitate to space your code out some. I like to put a blank like between selectors on my CSS and at each section break on my HTML. It’s not necessary or anything, but it does break things up and make them more readable than just a tabbed-in line.

1 Like

Thank you so much for all of your suggestions. They are very helpful! I replaced the word-break with the word-wrap: break-word. It has a similar effect of all words being spread evenly, but doesn’t cut them.

Thank you so much! Your suggestion to use div really worked. And I started putting comments in my CSS code to visually separate into sections.

This post was flagged by the community and is temporarily hidden.

Please create a topic of your own for this request. I can see you are new to this forum so you may not be aware that when you add a post to someone’s topic, it should be either to answer their questions or to follow up on their questions. (Not to ask your own).
Let me know if you need help opening a new topic for yourself.