Tribute Page - Freddie Mercury

Hello FCC community!

This is my first ever project and web dev trial. It’s simple, however, I’ve spent quite many hours on it without noticing time fly by. To move to the next project, I am taking this step to make my project public for your kind review and feedback.

https://codepen.io/ktoodo/full/xxOoYoe

Please let me know what to improve.

Thanks!
Kristjan

2 Likes

Hey @ktoodo!

Welcome to the forum!

I think your page looks good.

Here are my thoughts

  • There are a few errors in your html and css. Please run your code through the html validator and css codepen analyzer. You can ignore the error message concerning doctype and head because that is not required for codepen.
    https://validator.w3.org/#validate_by_input

  • (optional) You could choose to rewrite this part in your css using the margin shorthand property.

#img-div{
  margin-left: auto;
  margin-right: auto;
}

/*Rewrite like this*/
margin:0 auto; /*top-right-bottom-left*/

Good job and keep up the good work.

It looks quite good. keep going and trying

1 Like

Many thanks for the feedback!

  • I have checked the validator. I did not get any errors on CSS, however, with HTML I got the warning regarding doctype and head element. I figured this would be fine since this is hidden on codepen. Is there something I have missed?

  • Thanks for the advice on margins, I have made the adjustment.

In your html

  <footer id='footer'> <!--Needs double quotes-->

CSS

/*Empty block*/
#tribute-info {
 }

You are absolutely correct. I’ve now fixed the HTML part.
Would you know why these error messages were not shown to me? So that I could avoid such cases in the future.

Could it be browser related or something else?

I also double checked the code with the html and css analyzers in codepen and that is where the errors popped up for me.

Thanks! I got it now.

I had not found CodePen analyzer till now. This one indeed finds those errors. W3 validator didn’t find them.
Will use both from now on.

1 Like