My Tribute Page Redux!

Code Feedback
1

Hi all!
So returning here after 3 years to complete the coding challenges. I was supposed to start school this winter but because of family challenges, I cannot. So I am here banging out 100days of code and trying to finish the challenges here and hopefully by the end I can start school.

That being said I just redid the Tribute page I started 3 years ago and just submitted it. I would love feedback. No bootstrap or Javascript. I just wanted to do something simple and built it around the tests. That does not mean I am done but I would like to move on to the other challenges. Once I finish the next challenge I will come back to the Tribute page and add things or clean it up from things I learn from the next challenge and so forth. I think you get the point.

I am really interested in how clean you think the code is. I have not added any commenting since it is a simple challenge but I am going to go back and add more accessibility for readers, colorblind, etc.

Here is the link to the Tribute Page Tribute Page Redux

Thanks in advance for tips and tricks

2

Hi there,

looks good.

Some ideas:

  • you are styling most of your elements by using tag. Because your page is small, there’s no problem with it. But if you want to make it bigger, this can lead to a lot of trouble, because most of the time you want to style similar elements in a different way, e.g. li in one list should look different than a li in another list. Therefore it’s useful to only use class, because you don’t have to care about CSS Specificity
1 Like
3

Thanks for the feedback and I am checking out that link @miku86

I did it that way to experiment and the example page did ut that way a few times. I will go back and see why they did it that way, When I come back to this I will “fix” it.

4

Hi @bender-meemoo, welcome back!
One thing I noticed is that you call a couple of different fonts yet what the user sees is the default. Maybe you have these fonts loaded onto your local box and so you see them. But for others viewing your page you’ll need to either link to the fonts, or @import them.

  • If linking, for anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.

On a side note, Including Google fonts, should I use the link or import?

  • For 90%+ of the cases you likely want the <link> tag. As a rule of thumb, you want to avoid @import rules because they defer the loading of the included resource until the file is fetched.
1 Like
5

Thanks I will fix it over the weekend!

6

@Roma and @miku86 I cleaned it up a little. The fonts now apply and use classes to style instead of tags.

Thanks for the advice it does look cleaner. Just finish my Survey which the CSS is a mess and needs a lot of clean up but passes the test for now.