Another newbie looking for feedback on the tribute page

Code Feedback
1

Very basic, but I had better start getting used to asking for feedback if I want to improve, right?

Thank you!

https://codepen.io/afminick/pen/qGWgaj?editors=1100

2

@afminick, good job for your first attempt. Just a couple of things,

  • your timeline-box gets squashed and loses it on smaller screens
  • try to not use <br> elements. Instead use padding or margin in CSS
3

Thanks! I’ll take those <br>s out. Maybe I can do a media query for the smaller screens, and put my timeline…fixed to the top? I’ll play around with it.

4

I know what you’re trying to do but tbh, the page is small enough that you don’t really need the timeline. But by all means, work on it if you want to keep it.
Spoiler alert, you’ll get to do that when you do the Technical Documentation page.

5

Looks good! I like the colors you chose.

I also just started but one thing I noticed is the #end-of-life link in your timeline-box is pushed outside of the border. I corrected it and kept a similar spacing by changing your li {margin from 20px 0; to li {margin-bottom:8px.

A styling trick you might want to try is get rid of the bullet points. Add ul to your CSS and give it list-style: none.

Good job! Keep it up.

6

Thanks, I ended up just taking the time-line box out. It was fun to make a side navigation bar, but it was unnecessary. I did incorporate the list-style:none; into my product landing page though.

7

Yea, you’re right. It looks much cleaner without it. Thanks!

1 Like
8

Considering all you really have on this type of page is text, I would suggest giving the typography some love.

  1. Pick a font or two and make sure you are using good readable font size and line-height.

  2. Break up long-running text into paragraphs.

Example, nothing too fancy
https://codepen.io/anon/pen/Pvzgey

9

Thank you, I have been putting off messing with fonts for no good reason. I suppose it’s time to start making it a more fluent part of my coding. I love what you did with it, though I can’t seem to change it on my other project using font-family. I can only change the serif to sans-serif.