Tribute Page - Please Criticize!

Hi all,

I recently joined FCC and so far think it’s fantastic - fingers crossed I can finish my certification sooner rather than later. I completed the tribute page in roughly about 8 hours and tried to copy Quincy’s example page as much as possible. Nothing particularly innovative, but I wanted to pay close attention to detail to try and match the same standard.

Please feel free to be brutal with your feedback - if the coding is messy then please let me know as that’s the part I really want to improve on.

Many thanks in advance!

Bernie Sanders Tribute Page

Here are some ways you can improve your efficiency and overall foundation of your website.

1-Take all the code between your <style> tags and place it in the CSS part of code pen.

2- Do not use Bernie Sanders related content with any computer programming language because it doesn’t work for some reason.

Haha just teasing about step two but try step 1 to separate your code and make it more organized :smile: happy coding and let me know if you have any questions!

1 Like

Yep, good start @adam-palmer! Looks like you’ve got the basics down. Two comments:

1: You have some unnecessary <div>s in your code. You only need them if you’re going to apply either a .class or an #id to them, otherwise they just clutter up the code.

2: Don’t feel compelled to rush through the program as quickly as you can :slight_smile: Learning is more important than completing. You did a very smart thing in taking an existing web page and tried to reconstruct it (I’m assuming you didn’t cheat and look at the code!) That’s a terrific way to learn. Maybe do that with a couple more complicated examples for practice.

2 Likes

Hi @adam-palmer.

The page looks great especially if you’re just starting out, it looks very much like the example page.

I think the only way you could improve it is to make it a bit more responsive to smaller screens. Luckily bootstrap has done all the hard work for you :slight_smile:

In my job I try to use as much of the frameworks as possible and avoid using any bespoke css because 1. they will do it better than you (they have a team of exprienced people working on it. 2. browsers, unfortunately all render pages differently… and it won’t look anything like you originally wanted it to on all browsers, bootstrap takes this into account.

You can do most of the positioning using the bootstrap classes I think. I’ve knocked up this page https://codepen.io/petergrainger/pen/VjwMgv when I’ve been having a play around.

Hope this helps.

2 Likes

I just completed my Tribute Page and sharing it to get more feedback to improve

Nickola Tesla Tribute Page

@cgrewal I encourage you to create a new topic to improve feedback! Nice project by the way, not a bad start!

3 Likes

@michaelhenderson Thanks, will do !

1 Like
  1. Moving the CSS code makes sense - I’ve updated that now.

  2. Ah, I was wondering why it wouldn’t load properly :smile:

Thank you Michael!

Very interesting - I didn’t realize bootstrap could be used for so many things. I’ll definitely try and use as much as I can for my next project and will go through my tribute page shortly to try and use it more.

Thank you!

  1. That makes perfect sense - for some reason I wanted to div things up more than I needed to but I’ve gone through and removed the redundant code.

  2. Another good point. I went through the first challenges fairly quickly but it wasn’t until I got to this tribute page that I realized how little I actually remembered. Doing these challenges to reinforce new material is extremely helpful and I’m going to try and copy the personal portfolio page next.

Haha no problem! Have a great night :slight_smile: