About.html and Contact.html pages skipped. Footer information skipped. Can we bridge the gap?

You maybe figured it out, but just in case for other students out there.

In the html file, you can see a class="profile-photo" inside the < img > tag

And in the main.css file, you can see the associated profile-photo class like this :

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

The file is a 512x512px by itself, so to make it smaller, you simply need to apply a property of max-width: 150px, which limit the maximum picture size to 150px.

The photo/file is not a circle by default, so the other important property here is border-radius: 100%.

It is designed to round each corner of the image, and with a maximum of 100% it will make it an entire circle.

You will have other courses later on the Web Design track with more details specifically about it. This link should help you better understand the border-radius if you need to go further : MDN - border-radius

Now to center the image, there is 2 things :

1. The margin: 0 auto 30px; is used to automatically adapt the left and right space of the image related to the < section > parent, so it allows us to position it in the center of the section block in a responsive way.

2. The other one to take in consideration, which is the most important, is the #wrapper id which use the same principle with a margin: 0 auto;

Hope it helps !