First project - tribute page. Feedback welcome!

Project link - https://codepen.io/mtninja/full/owmzZr/

So from my review of your project - the user stories were completed - the page has good code formatting and appears to be syntax compliant. Good job on your project :slight_smile:

Good work on completing your first project!

I noticed several things that I think could be improved on. Here’s a link to a revised version of your page with the improvements that I have mentioned below https://codepen.io/xsjark/pen/NgJqpM

  1. Use one container to hold all the divs.

  2. Whenever you create a new div, close it before you start putting anything inside of it. It prevents you from getting too lost in a mess of unclosed divs.

  3. Try to use CSS to do the colors, it’s usually better practice to separate styling from the html. In the example I have provided below, I have assigned the colors to .container and .nested in the CSS.

  4. Compartmentalize what you can in your HTML, putting things in divs will make it easier to stye your HTML.

  5. I noticed the image was not responsive (it did not scale when the browser was shrunk). All you have to do is add ‘img{width:100%}’ in the CSS. It will then scale to fit the container, which is responsive.

  6. Instead of using h6 small to do a caption for the image, use < figcaption >< /figcaption> instead.

  7. To centre text, use text-align:center.

I hope that I did not come across as overly critical, keep up the good work! :smile:

2 Likes

Thanks for these pointers and taking the time to go through everything! Much appreciated.

1 Like