My First Project : Tribute Page

Tell us what’s happening:
Hi all,
I’ve just completed my first project on Tribute page, any feedback will be appreciated.
https://codepen.io/lakedejavu/pen/MWgbBXB

Cheers!

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36.

2 Likes

I am glad to see you using semantic HTML, as it’s a point I do tend to bring up often. :wink: The effective use of the figure tags, and the header tag used appropriately… very nice!

One thing to note: you have a <div id='img-div'> wrapping the figure at the start of your main tag. But that figure is the only thing in that div, which makes the div completely unnecessary. Instead, apply the id='img-div' to the figure itself, it’ll still pass the test and get rid of pointless elements.

Now, I would suggest you consider continuing that same semantic thing. I would say that you don’t need div tags in your code at all - instead, maybe create an article tag with the id='tribute-info', and each h4 tag (and it’s accompanying list) could be wrapped in a section tag. That makes sense - if you think about it as, for example, a magazine article, each unique block of information becomes a section.

Using that approach, id='brands' simply becomes another section within that article, keeping everything tidy and organized in a logical structure.

All that said, it passes all the tests. Let me be the first to congratulate you on a very well-constructed, and attractive, tribute page!

Down the line, as your coding skills become more refined, you may want to consider revisiting this and other lessons, with an eye toward “how can I beautify/simplify/change this?” It’s a common practice, and lets you demonstrate the evolution of your skills.

Again, very very nicely done!

I really like the colors you picked!
The animations are cool, but a little too slow for me.

Pick a better font for the text that you made green like Optima or one that isn’t sans serif. A font that is thin would be nice.

For the green footer at the bottom of the page, set it’s opacity to 0.6 or 0.8

How 2 use opacity

put this in your footer:
opacity: 0.7;