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
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
-
Use one container to hold all the divs.
-
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.
-
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.
-
Compartmentalize what you can in your HTML, putting things in divs will make it easier to stye your HTML.
-
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.
-
Instead of using h6 small to do a caption for the image, use < figcaption >< /figcaption> instead.
-
To centre text, use text-align:center.
I hope that I did not come across as overly critical, keep up the good work!
Thanks for these pointers and taking the time to go through everything! Much appreciated.