2nd tribute page done today

Code Feedback
1

Hello,

This is the second tribute page I make today, this time I tried to do it on my own without looking at the objective’s code too much.

Any feedback on how I am doing? Tips on what I should work on to get better?

link: https://codepen.io/ValerioCipolla/pen/ExWaXzr

I am trying not to use
too much, instead I am trying to use display but I am not sure how it works yet. Anyone can point me in the right direction?

thank you.

1 Like
2

Hi,
the page passes tests and it’s alright.
You should add <head> section!!!
image

For improvements I think you could try add some extra features. Maybe you can learn how to create responsive images so someone with slow connection does not have to download image for big screen.

You can think what else could the page contain.
More content about Fyodor Dostoevsky?
Timeline? How to.
Using other than default fonts? Google Fonts
Some other styling?

It’s up to your imagination. You can do anything you like and how you like. The examples here meet only the essential requirements.

No rush here, take your time, play around & have fun.

Good luck :slight_smile:

1 Like
3

Thank you, appreciate the help. I will keep playing around and hopefully getting better.

4

Your page looks good @valeriocipolla92. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • Mentioning because you have elements out of order. Everything the browser displays belongs in the body element.
  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it and address the issue(s).
    • (The one for HTML misses things which is why I recommend W3C)
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
    • “click here” is not accessible
1 Like
5

thank you for all the info, much appreciated

6

What exactly are you unsure about?

The #tribute-info and #quote elements are already block-level elements so setting them to display: block doesn’t do anything.

7

Hi @lasjorg, thanks for the reply. I am not sure what display: block does in general. and when should I use it? How do I know when it’s needed and when it’s not? Thank you for the help

8

It is only used if you want to change the default, for example for inline/inline-block elements (like a <a> element), or switch back from another type you have set manually. If the element is already a Block-level element (like a <p> or <div>) setting it to display: block doesn’t do anything.

You are for example using it on the image because that sets it from being (behaving as) an inline/inline-block element. Which removes some whitespace at the bottom of the image.

You might also use it for other inline elements to be able to use other properties (like height or top/bottom margin), or just to have the element take up the full width. Sometimes you want the element to be inline but use property like height or top/bottom margin in which case the inline-block display type is used.

1 Like
9

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