Trying to recreate this without 'cheating,' any hints or tips on how to find what I need to know?

Code Feedback
1

Hey FCC Team!

I’m pretty new, but keen, and am working on the Personal Portfolio Webpage project at the moment. I really want to drill in lessons and good working practices into myself early, so I decided I would do this project without looking at the source code of the sample (link) portfolio. I would appreciate any direct help, any reasoning or any research tips to help me find answers myself.

I’m trying to recreate it in my own project (link) rather than making my own portfolio (as I don’t have work to showcase, and want to be at the level of the challenge). As you can see, it’s not the best. I’m having some specific problems which I’ll list below:

  1. The picture is in it’s own column, but isn’t responsive in an appealing way. I can’t get it to scale correctly, nor move below the text when the website is small enough for mobile.
  2. My image formatting is bad… not too sure how to clean that up.
  3. The footer doesn’t stretch the whole width of the page… don’t know why. Also I don’t know how to make the column’s within the row space out right… they kind of fall next to each other, how do I get more control?
  4. Font’s, prettiness and any other general advice.

Thanks everyone in advance, I’ll be checking in and replying to this as soon as I can!

2

You shouldn’t use <head> and <body> tags in codepen (remove them). Codepen HTML window is <body></body> tag.

  1. You should add correct Bootstrap classes to your <div>s (e.g. class="col-sm-8")

  2. You can add some margin-bottom to your .portfolio selector in CSS:
    .portfolio { margin-bottom: 2rem; }
    P.S. Two of these images have different height

  3. You are missing closing div for your about section.

  4. Fonts.

I would recommend you to go through codeacademy’s HTM/CSS course - it’s good for basics.

3

Hey Jenovs,

Appreciate the help, I’ve implemented all of the changes you have mentioned and learned a bit more about bootstraps functionality in the process.

Funnily enough, I’ve already completed codecademy’s html/css course, it didn’t deal with bootstrap.

Cheers!