Stan Lee Tribute Page Project

Hi, guys! This is my first ever solo coding endeavor. I’d really appreciate feedback and advice. :grinning:

Admittedly I bit off way more than I could chew :tired_face:. The code is messy and somewhat incomplete. I do plan to revisit this project in the future but I’d like to get some feedback before I go back to it.

I don’t have any coder friends so anything you guys have to offer is really appreciated! Thank you. :ox:

1 Like

Good concept! I like it. I would

stand out your title, Stan Lee. Make it bigger.
Try using different font style besides the default.
Remove bullet points of your navigation at the footer.
Change link colors to something different. It doesn’t fit well with footer’s background color.

Cheers :slight_smile:

2 Likes

Thank you for your awesome input! :grin:

I took your advice and kind of got carried away a bit I’m feeling much better about the site now.

Unfortunately, I can’t offer an feedback at this point other than I like it!

Overall I like the look, the colors are good and the use of fieldset looks good.

  1. I’m not sure hiding the scrollbar is a good idea when you have content hidden by an overflow. I get why you’re doing it because it looks better but from a UX perspective its probably not a good idea. I think part of the problem is that the boxes are side-by-side. When they are side-by-side the difference in the amount of content in each box makes it look unbalanced but if you stacked the tribute-info boxes instead it would look more natural and the fact that the boxes have different amounts of content wouldn’t seem as “wrong”. Not sure if that made sense.

  2. The increase in font size on link hover in the footer is causing some funkiness. Try using transform: scale instead. To avoid it affecting the image that is wrapped in a link you can give the footer links a class.

.footer-link:hover {
  color: #ABE188;
  /* font-size: 1.05em; */
  display: inline-block; /* transform doesn't work on inline elements */
  transform: scale(1.1);
}
  1. The footer content looks a bit disorganized somehow. It is too large for how small the content sizes are, I would increase the font size for the content and maybe vary the size on the links and text. I think you should try and play around with grouping the content differently. Maybe try the nav links on the left and the info text/links on the right.
1 Like

Thank you for your feedback! :grinning:

  1. I can see what you mean about the scrollbars especially when I stacked the rows it makes it a bit better. But ideally, I would like to have some nicer looking scrollbars or make the minimal. Do you know of any good way to achieve this?

  2. After fidgeting with the link animation I figured I’ll just keep it simple, I feel like this website may be a tad bit over complicated already.

  3. This is a problem I was trying to fix earlier before getting tired of it. I’ll definitely work on it in the future, I just need to do some more research on it. I’m not even sure if it’s a padding, margin, or flexbox problem :thinking:. I’m open to suggestions on how to go about fixing it.

  1. There are a few options.

You can use a combination of the webkit scrollbar CSS and the scrollbar CSS property supported by Firefox.

::-webkit-scrollbar {
    width: 14px;
}

::-webkit-scrollbar-track {
  background: #85a1a2;
}

::-webkit-scrollbar-thumb { 
  background: #788889;
}

.articles {
  scrollbar-color: #788889 #85a1a2;
}

There are also JS libs, like simplebar, which is easy to use. The real benefit is cross-browser compatibility and consistency.

Add to the head:

<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" />
<script src="https://unpkg.com/simplebar@latest/dist/simplebar.js"></script>

Then on the elements where you want the scrollbar you just add the data attribute data-simplebar.

Example for one of the three articles:

<article data-simplebar id="tribute-info" class="the-man">

  1. For the footer, it is more a creative learning process. You need to play around with it yourself. Make a fork of the pen by pressing the fork button on the Codepen header. Now you have a new version you can change without it affecting your old version. Try placing the nav link on the left and the info on the right. Try stacking the info but keep the links in a row. Try making the font size on the footer larger. If you have a specific idea but need some help you can always come back and ask.

I suggest learning the browser developer tools (Video). The DOM Inspector is super helpful in better understanding your layout Chrome or Firefox

1 Like

Thank you.

I’ve decided to take a break from html to learn Git/GitHub (which has been a challenge all on it’s own) so that I can work with version controls.

But I’ll definitely try out your suggestions when I get back into html/css.

Again thank you :grinning:.

Great job… Keep the energy high