Tribute page for Carl Sagan feedback

Hi everyone. I’ve just made my very first project at freeCodeCamp. It’s my first time to write using HTML/CSS though I used to code using C++/Visual Basic.

Here’s the link to the full preview page:

Basically, I didn’t follow the suggested format. I have to follow my own gut.

I would love to hear your inputs/suggestions. Thanks!

First of all, what a great choice for a tribute page, Sagan was an incredible man. Your content is formatted beautifully, the text might be a bit small. Personally, I think it might look better to have the text wrap under the photo, or to have the photo on the right; The text past the photo feels sort of incomplete with all of the space on the left. I really love the style of this page though and the personality you’ve managed to inject into it!

Good job on the page. I like the photo and offset text.
There’s a couple of things I would add.

<body>
    <div class="container-fluid">
      <div class="container"> 
       <!--here you open and close a row right away which I don't see the need for but there could be one. The spacing makes it look like the container closes but I think that /div would close the row.--> 
       <div class="row">
      </div>
      <!--I've learned here that inline styling is bad grammar. You cold make a class in your CSS and throw it in there-->
      <div class="container" style="margin: 30px 0px 0px 0px">

for you image:

<!--you should include an alternate for your image, alt="carl sagan pic", in case the image fails. Also, I think leaving the protocol http and https is best for compatibility issues but I'm not certain.-->
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/b/be/Carl_Sagan_Planetary_Society.JPG">

I can’t see any other improvements to your code outside of some style, but that would just be preference.
I think you did a great job with your grid system and it looks good man.
I wish my fkn Portfolio would go as well as this lol.
gd job man.

Thank you for the valuable feedbacks! Really appreciated.

One of my biggest problem is that I always get lost in the

formatting especially when there’s too much nesting going on.

Can you give me tips on managing these mess? Thanks!

1 Like

What I used to do when I first started an FCC was right everything down but not the way I would write it in code.
I would write shorthand and indent everything and only right the ideas or the topics of what I would have in that part of the code.
This way I had all of my code and everything indented but it didn’t look super complicated for me. And, this is embarrassing, but I used to use a ruler to line everything up that way I could see how far out each opening and closing tag of the same element was. But I don’t do that anymore cuz I’m a supercoder now. LOL LOL