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.
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.
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.
@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)
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.
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.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.