Having problems with my social media project

Anyone wanna help me on this? I can’t figure out why the “friends” section photos in the social media project turn into rectangles (as shows in photo) In Joes’ example they appear as perfect squares.

I have been following the social media course by Joe Santos at CodingPhase.com step by step,and I don’t know what I am missing. I been stuck on this problem for like a week now.

Here is my repository on Guthub:


This is my result:

This is what I am trying to do:

I hope I can get some help. Thnx in advance.

Those images aren’t styled in the CSS but inline inside the HTML (who knows why?), and this is what’s applied:

<div style="display: inline-block;
                        float: left;
                        height: 110px;
                        width: 33%;

The images are background-images of those divs, and as you can see, they have a fixed height in px, but their width (in %) depends on the size of the parent container, which will change if you resize the browser window. So, there is exactly one browser window width where those images are squares, otherwise they will always be rectangles.

I don’t want to judge too harshly, but I’d stay away from that tutorial. Unless you want to learn stuff like float, which honestly I believe nobody uses anymore since we have flexbox.

It’s not harsh I like the truth. So what are some good updated tutorials or courses I can take?
I’m willing to take another course in order to be taught to do things the correct way.
The current course I’m doing is “building a social media site with html and css” through CodingPhase.com.
Sometimes I find it hard to understand what he’s trying to teach because he jumps around alot and doesn’t explain things clearly. Also seems some things are outdated.
He does however have career pathways and does show you what technologies you should be learning,which is a good thing.

I’d highly recommend https://scrimba.com/, they have a lot of free courses. You’re not just watching videos, but you can actually click into the video and mess around with the code that the instructor is writing, modify it, break it, fix it, save your changes, resume the video. I don’t know much about their HTML/CSS courses, because when I discovered them, I was already fully into learning JavaScript, but those tutorials were really high quality.

They have a front end career path, too, but that’s paid. I think they recently introduced a new pricing model where you buy a flatrate for $19 per month to get access to all their paid courses, not sure if you can buy only that one (if you’re not interested in the rest). But anyway, their free courses will give you an idea if it’s for you.

Thanks for the suggestion.I just checked it out and it seems interesting and a bit different from what I’ve seen out there. Do they offer back end as well?

Not much, they have a free Python course though.