Tribute Project/Introducnig Myself I Need Numerous,Serious Criticism and Feedback

Code Feedback
1

Hi everyone , hope your all doing well. I am a 30 year old ex-photographer and general odd job man. Currently I’m working at Cleveland,Ohio’s historical West Side Market and I don’t want to be doing that for the rest of my life. Little more about me and my situation . My girlfriend works a job she hates to bring in the majority of our money. I bring in about half what she does and feel terrible about how stagnant our life situation has become. I want more out of life for us and our future family. I know the IT field is very lucrative. I have been building computers since I was 13. I’m a heavy PC gamer and the occasional modder. Its not like I’ve never looked at code before and I’ve finally decided to get serious about my future in IT.

So with all that said , please brutally go over my first web page ever and tell me how much it sucks. Tell me what I can do to make it and myself better. Don’t worry about being nice, I need to be a great developer , and I’m not going to get there eating shit with sugar on it.

Here is the link to my “tribute page” . https://codepen.io/Silentmustache/pen/RGpJJg

2

Hi! Welcome! :smiley:
Here’s my brutal feedback :smile:

You can remove the <body> tag. The HTML section in codepen already represents the content of <body>. And there can’t be a <head> inside <body>.

For the top image, I don’t see any use of the fat class. The <img> tag also has it’s closing > missing.

<img class="img-responsive fat" src=".../jpg"
</div>

I think you can remove the empty <div> tags, replace col-xs-10 with col-xs-12, then add center-block class to the image.

Don’t nest <h2> inside <h1>.

As far as I know, jumbotron is only supposed to be used by <div>s (or other containers).

If you want to bold/underline text, it’s better to do that in CSS.

id="#jumbo" should be id="jumbo".

To offset columns, instead of using empty <div class="col-*">s, use Bootstrap’s offset classes instead.

For the two columns, consider replacing col-xs-* with col-sm-*.

Same with <h2> and <h1>, move <h5> tags outside of <p>. You can also move class="lead text-info" to the <h5> tags and remove the <b> tags.

For the bottom image, again, use offsets for the <div>. Replace the align-center class with center-block img-responsive. Consider replacing class="col-xs-8" with class="col-sm-8 col-sm-offset-2".

There you go. For more on Bootstrap grids, give this a read.

3

Thank You ! I greatly appreciate your feedback. I will work on all the things you mentioned here. I know you could probably be doing anything else so thank you again for taking the time to help.