Tribute to Carrie Fisher


#1

https://codepen.io/virusalfa/pen/PjrYqw/

My first simple page. Pure HTML & CSS. I’ve made a little mess in CSS section due to trying some unconventional solutions. Eventually I gave up them all :slight_smile:
Any feedback would be highly appreciated.


#2

I thought this was very well done for your first page! The code is not perfect, and there are a few places where you used either redundant CSS or non-optimal HTML. The most important thing is how it looks and I think it looks great for what it is. Keep up the good work!

More specific feedback:

HTML side

  • It’s generally best practice to use the h1-h6 elements to convey semantic meaning. H1 is the most important (page title) -> h2 is for the main sub topics on the page -> h3 for sub headings under each h2… and so on. If you want to use different font sizes through your page it might be better to use and classes to do so.

  • The use of classes vs IDs. This is a single page so this point is not terribly relevant to the particular use-case. It is best to use classes whenever you think you might reuse the code. In general, I tend to use classes over IDs. Your “quote” Id is an example of this. Quotes tend to be reusable objects and using a class might be more appropriate. You could also just style the blockquote itself and do away with the selector altogether.

  • You don’t need to put

    tags around header text, lists, or blockquotes

  • I would steer away from the use of
    for line breaks. If you want more space after an element use CSS. Further reading: separation of concerns :slight_smile:

CSS

  • z-index is generally only required if you are trying to stack elements. It is not adding anything here.

  • If you are going to reuse a font color you can specify it once in the body or use a * tag… Same thing for font families, and anything else you are going to be using on everything on a specific page.

  • The use of a black border on a black page is a bit redundant. Unless you wanted to shave off 2px of the photo… You can use border-radius without explicitly declaring border.

Those points aside, this page looks a lot better than the first page I ever made. As I said before, it matters much more that the page looks / or works as intended. How pretty the code looks is a secondary concern.


#3

Thank you for your thorough feedback.
Now when I’m reading your post some things seem obvious (
:slight_smile: ). Z-index is a leftover after my experiments. I tried to animate text to crawl to the top and hide behind top picture but results were mediocre so I removed that part. I really appreciate your comments, especially #id vs .class and tagging. Once again big thank you for your time and remarks. That was a valuable lesson :slight_smile: