Seeking Constructive Criticism: Tribute Page

Code Feedback
1

Greetings, all.

I submit for fCC community review my first project (Build a Tribute Page). For background, I don’t have a ton of free time on my hands so I tried to fulfill the basic criteria and make it look presentable. I have a bad habit of spending too much time on any one thing and I want to continue moving forward at a decent pace. I would really appreciate feedback on the following areas:

  • Code organization (tags, divs, etc.)
  • Display structure (use of grid, flexbox, etc.)
  • Accessibility practices
  • Visual design

Thanks so much!

2

Good job! I would,

Remove margins and paddings on the edges. Some browsers by default add paddings and margins.

html, body {
  padding:0;
  margin:0;
}

You also have something going on with padding/margins with your element/s to cause a scrollbar to the right.
Social icons need spaces between them.
Consider increasing size of the text “important moments” because it’s a header.
Consider creating a new line for your social icons on mobile views. It feels crammed in one line.

Good luck!

1 Like
3

Hey @shimphillip,

I sincerely appreciate your feedback.

Take care!

4

Use http://quirktools.com/screenfly/ to view stuff on smaller screens.

Change the timeline margins on smaller screens to 100%;

image
image1920×1040 110 KB

1 Like
5

Thanks, @michaelnicol,

I appreciate you taking a look at my project. I’ve not seen this resource before (Quirktools). I’ve just been using Chrome’s DevTools.

Have a good weekend!

2 Likes
6

html, body {
padding:0;
margin:0;
}

Question regarding that. Sorry I’m sliding through haha. But doesn’t:

*{
padding: 0;
margin: 0;
}

do that?

7

It doesn’t matter. Both should work.

8

Bump!

Any additional feedback is appreciated.

Thanks!

9

Building off of what @shimphillip said, you can also use a library like Normalise.CSS. Just go to your pen, and click Settings, and then CSS. Under ‘CSS Base’, click ‘Normalise’. Hope this helps!

10

Hey, @AwesomeIndustry. I noticed that after the fact. I was able to use the suggestion from @Tech in my second project (https://codepen.io/terrencemm2/full/KxdaBy/) with acceptable results.

11

Bump!

Any thoughts and comments are appreciated!