Team Project Overview

[00:00:00]
>> All right, so the next one we're gonna do is a super fun layout that is taken from my real life. I actually worked this problem for one of my employers. So this is going to be a team page, where we're going to have pictures of the people on our team, we're gonna make them round, okay?

[00:00:20]
And then we have these icons here that are gonna go to their various social media. And underneath that we have their name and their title, okay? Notice that some people have three icons, some have two, that one has one, okay? So there are all kinds of different numbers of icons here on these images.

[00:00:43]
And so that is pretty much the primary goal of this particular layout, is to try to achieve this right here, okay? Then after that, we have additional layouts associated with that. We basically put two in a row, and then on desktop, we put three on a row. So that should be pretty easy for you at this point in time.

[00:01:06]
But achieving the layouts here in the middle, how do we get these icons here on top of the image? That is more difficult, does anybody have any suggestions or observations about what we see here?
>> So z-indexing?
>> There's a z-index property that might be involved, right, what else?

[00:01:32]
And what does the z-index property do?
>> Words, the depth of the image and whatever elements you're putting on there
>> Yeah, moving things in and out of the screen. So we need to make sure that our icons are on top of the image, not behind it, right?

[00:01:53]
Okay, what else?
>> Absolute positioning on the icons.
>> Absolute positioning on the icons. Okay, so that becomes tricky. How many of you know about absolute positioning? No clue, awesome, okay, great. Well, we'll talk about that. Other observations, how do we make images into circles? Anybody have an idea of how to make an image into a circle?

[00:02:16]
>> Border radius.
>> Border radiuses.
>> One.
>> [LAUGH]
>> You know that trick. Border radius of 50%, right? And that assumes that we start with a square image, what happens if we put on a border radius of 50% on a rectangular image? [INAUDIBLE]
>> He'll get an egg, right?

[00:02:40]
One way or the other you get an egg. [LAUGH] Make sense? If it doesn't, you should find yourself a rectangular image and try it out, okay? Fortunately, I've done that work for you, I've made them squares, okay?
>> Could you use the objects, what we're learning about before?

[00:02:59]
>> You absolutely could.
>> Okay.
>> You absolutely could. Okay, what else about this? Anybody wanna make a comment on the markup?
>> Are you gonna have links inside of it?
>> Absolutely, those icons all have to have links that are gonna go somewhere, right? Which I have said to you, you don't have to really spend a whole lot of time on that.

[00:03:29]
But in real life, they would absolutely have links that would go to Instagram, LinkedIn, or Mastodon, what else? Okay, so if we think about our figure element again, the figure element is designed to group a whole bunch of things together, right? So if we have a figure element, we have our image of the person, right, inside of the figure, well, what would go in our figure caption?

[00:04:01]
>> Is it the name and the title?
>> Person's name, their titles, and all of the links to the social media in those icons, right? All that goes in the figure caption. And then we're gonna use absolute positioning to move things out of there.