Hey David,
Good job. Don't stress about not understanding everything to begin with - just take everything you learn as a small win.
In regards to the trouble you're having with setting the size for elements, I'd suggest only setting a width for the image. By default, if you set a width, it should retain the same aspect ratio and so the height should be adjusted automatically so it remains a square. That would fix the main difference I noticed between your implementation and the design - the image is stretched currently.
The way you've centred the div is spot on I'd say. The standard way to do such a thing these days is to give the parent container a display of 'flex' and then use 'align item: center' and 'justify-content: center'. This will centre it to the parent container. If you want it centred in the middle of the screen, you need to be sure that the parent container is the size of the screen then. The parent container of the div is the body element and so you need to make this the size of the screen. By default I believe the body is always 100% width. The height is slightly trickier though because by default it will have a height large enough only to contain its child elements. A way to make it the full screen height (but also allow it to grow larger if needs be) is to set (min-height: 100vh). The vh unit stands for 'view height' and will always be equal to 1% of the screen height.
Hope that helped somewhat and wasn't overwhelming :)
Marked as helpful
@geomydas
Posted
@thanderwism the body seems to be width: 100% since it is a block element, technically its width: auto