Seeking Constructive Criticism: Tribute Page

Seeking Constructive Criticism: Tribute Page
0

#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!


#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%;


#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!


#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!