My first finished project - Tribute Page

Hello everyone,

I was wondering if someone could give me feedback on my first completed project called Tribute Page. I know it looks awful but keep in mind that I am beginner and go easy on me :smiley: but I would love to hear critics and corrections for certain parts of the code.

I joined yesterday to free code camp community and I just finished the first chapter of html, bootstrap and jQuery, although, I did not use jQuery in this project because I thought it wouldn’t help me.

I tried building this page only from bootstrap but I had problems placing the picture in the center of the page so I used css margin property and I included some classes that were not in those lessons but I found them on google and those were useful (like jumbotron)

Also I would love to meet new people, anyone who wants to chat, practice with me, feel free to contact me anytime :slight_smile:

Link to project codepen: https://codepen.io/oddjob/pen/xddORQ

Thanks!

Let me start off by congradulating you on completing the tribute challenge. Congrats!

When you are using codepen, it is important to get the settings right. On the html window when you click on the gear to get to settings you will see a pop-up that will contain a input
labeled “head stuff”. In the head stuff you need to include some meta tags. Please insert these meta tags. just ignore the html opening and closing tags you see here. Just the meta tags are required.

 
  
  

In the css window we were taught to use the quick add to make sure we included the Bootstarp css. Problem with that is that it adds version 4 beta. This is the newest and not entirely implemented yet. It is probably best to use this version. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Just copy and paste this in the css settings area.

In the java script window you can use the quick add to select jQuery and select Bootstrap js.

Check out this video https://www.youtube.com/watch?v=hiCK6-8XfiA

The beautiful thing about Bootstrap is you can have 1 column or 12 columns and 1 row or several and it will still be responsive. For this project it is best to keep it to one column. Several columns would be needed if say you had a left section that had some navigation and you had a main that contained your main content.

In your code things got a little complicated in my opinion. You had several unnessary elements.
jumbotron, “col-xs-12” and you had “col-xs-12” nested within the first one.

My suggestion is to simplify things by doing the following.
1 div class=“container” that is your box to put everything in.
Next have 1 div class=“page-header” which includes your h1 & h2 elements.
Next have a div class=“row” this will contain your image and your list.
Your image class try this: class=“img-responsive img-thumbnail center-block”
Finally out side of the div class=“row” right after your list place your blockquote and your link.
I also removed the css that you had for h1 h2 h3. No need because they have the class of text-center. And removed the margin css.
I did a fork of your code and reworked it.
Check it out.
https://codepen.io/learn4earn/pen/aWyybR

Sir, thank you very much for taking your time and giving feedback on my project.
Thank you for all the details, I understood you well enough, I appreciate this commentary and it helped me a lot to understand bootstrap better.