Tribute Page - Any Feedback Appreciated!

Code Feedback
1

Hi Ladies & Gentlemen,

After struggling through almost a week of starting my first project, I finally came to terms and finished my first project. After breezing through exercises, I literally had to search Google almost on every single piece of writing HTML/CSS and hopefully I got a little better at it.

I know it’s not the greatest, and I have a lot more to consume and learn…but if you could kindly provide any criticism or something I need to work on (syntax, CSS style, best practices, etc.) I’d highly appreciate it.

Below is the link:
https://codepen.io/jyjang703/full/XWWEzMr

2

This looks really good and I can tell you spent a lot of time on it. Only way to learn is by doing and the exercises are just to guide you.

One thing I can recommend is add a hover state to the Twitter and Instagram icons. Perhaps a change of color or some kind of animation so the user knows when they are hovering over the icon. Applied accessibility is also important and it looks like you have done a good job with that.

2 Likes
3

Hi @jyjang703, welcome to the forums. Nice job on your tribute page. Just something you may want to revisit;

  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • in your HTML section you use an id more than once.
    • in the CSS section you have a couple of places where you duplicate the font-family. This could potentionally cause a problem if you decide to change to a different font and the first one is updated. It will be overwritten by the second one and you’ll wonder why the font isn’t changing as expected.
4

Welcome to the forums! Googling is actually one of the main skills that you would come to find as a developer, so it’s totally normal if you find yourself having to do so.

This actually looks pretty good for your first project, I really like your banner, some things that you can change is some hover effects that Etra has pointed out, and maybe increasing the line height on your list items as well.

5

wow great job…

i havent done project yet but i cant wait…

good job

6
  • I think if sections would have different background color, it would look more appealing.
  • Second, you forgot to give same properties to both Instagram and twitter links.
  • Third, I think it would be nice, if we change background of social media links, when we hover above them.
    Here I have forked your pen and made above changes. https://codepen.io/verv0eren/full/VwwVGQZ