C0ldHands - Tribute Page Feedback

Good morning,
I finished my first FCC project not too long ago. Any feedback is welcome, thanks in advance.
Link to the code pen: https://codepen.io/C0ldHands/pen/MRBmQE

If you add some padding to the whole content and some ’line-height to your text I think it will be better

Good luck

The page is not responsive at all. Shrink the screen by a couple inches and you’ll see what I mean.

I would recommend adding those icons to the left of the main content to the actual document. This will allow it to scale with the actual content and add some responsiveness to an otherwise non responsive page.

Thanks for the feed back. I had no idea that by resizing the page it could change so drastically. Also, I’m not sure that I understand your recommendation. I think that the icons on the left that you mentioned are part of the background image that I used for the page, so I’m not sure how I would add them to the main content.

Hi!

I saw your project recently and I don’t know if your intentions are replace html tags whit divs. If your intentions were uses divs (that I think that’s a more difficult way) don’t read me, else, I have a suggestion:
Read again about the basic structure of HTML, it will help you to make a cleaner code.

<!DOCTYPE html> <!--HTML5 document declaration-->

<html>
   <head>
        <!--Meta content, here-->
        <!--Title here-->
        <!--Scripts link, if you have-->
        <!--Style sheet link here-->
    </head>
   <body>
       <header>
       </header>

       <section> 
       </section>

       <aside>
       </aside>

       <footer>
       </footer>
   </body>
</html>

You can add to each html tag a class (instead of make a div with an id atribute), for example:

<section class="main">
      <h1>The King's Avatar: Ye Xiu</h1>
      <img src="yeXiuImage.jpg" alt="An Ye Xiu image"/>
      <p>Here i put a really nice paragraph about Ye Xiu</p>
</section>

And then you can call that class in CSS using:

/*When in CSS you call an id you use #, instead for the class you use a . (point)*/
.main{
    width: 40%;
    background-color: #d3d3d3;
    padding: 40px;
    /*(the values are an example)*/
}

Is your code valid? Well…works, but, Is your code readable? No, at least not in an easy way. Is very important a clean code for a easy reading.

Bye,

You may need some padding especially the text at the bottom.

Thanks for the response and sorry for having such messy code. I had looked over the sample tribute page and the instructions for the page and it had used divs so I thought that was what I was supposed to do. Hopefully, my code becomes cleaner as I practice more.

Thanks for the response and I added a bit of padding so that it isn’t as squished anymore.