Card HTML Markup Practice

[00:00:00]
>> This last example that I'd like to go through is card-based layouts, but we're really going to shake things up and push cards probably farther than you have looked at them before. So what I'm going to do first is I'm going to talk through some of the HTML that might be used to put this card together.

[00:00:18]
Just so to show you how you can think through the most semantic markup that you might be using on that. And then we're going to mix up both Flexbox and grid, then dealing with these cards and this layout on our next code pep. So as always the starting code pen is available, inside of the chapter 14 on the website for the course.

[00:00:40]
So let's start here and we have a series of four items here for this particular webpage. And they all have the same type of content so I'm just going to focus on this first one and then I'll give you a few minutes to code the other three. So let's look at what we have here what we have given been given here in our notations.

[00:01:02]
So we have a section with an ID of artists, this might eventually be something you wanna plug into. Either the page that you are looking at here, the homepage that we've been working on and might become part of the inside page or an additional page in this website.

[00:01:18]
So let's set it up from the start with that section with an ID of artists. And I'd given that section a heading because sections require headings and we're given an h2 because there's likely an h1 elsewhere on the website. After that, then we have basically these units of content that have almost no markup in them.

[00:01:39]
So I have here, the words mixed media Anni Roenkae. I'm sorry if I pronounced your name wrong Anni Roenkae the image and then a little bit of a description with a link to any ranky.com. So how are we going to go about marking this up? This is reflective of a trend that we have seen quite a bit in cards where often those words mixed media or teensy tiny they're at the top of the card.

[00:02:09]
And then Anni Roenkae who is the focus of this card would be in larger type because this is our artists. That's the main Identifier of the section of the website. Anni Roenkae is an artist. So she's the next most important thing. And the fact that she works in mixed media is the third most important thing.

[00:02:32]
So that would indicate in terms of our headings that our artists is the H2 Anni Roenkae would be the H3 and mixed media whines of being the H4. But it does mean it looks like those headings are out of order. And that's okay. You can in fact put your headings out of order if you're trying to tell the story in the way that I just told you, our artists Anni Roenkae Mixed Media.

[00:02:58]
So let's start by putting in that particular markup. This will be mixed media is the H4 here. And then Anni Roenkae will be the H3, okay, then we're going to have our image here in place. I've given you the image because here in code pen, you have to have a pro version of code pen in order to host images.

[00:03:29]
And you would know what the URL was for the image. So I've given you that along with the alt text. After that we have a bit of text here that is the description of what's going on here. This description of the artist that is of course is just a paragraph so we'll mark that up as such.

[00:03:47]
And then I just put in the words down here on the bottom. Be sure to link to this website that's her website, so we'll just mark that up and we can say something like make it a paragraph and then an A h ref = '' https://www.anniroenkae.com. We'll make it open in a new window, target = "_blank.

[00:04:23]
_blank, and then we can say visit. website / a/ P. Okay, so that's sort of the general markup of the text that we've been given here. Now we need to think a little bit more about how we would mark up or indicate that this is one unit of text, whatever that unit happens to be.

[00:04:47]
So many of you are probably thinking well we should take all of this and we should probably just wrap div around it that would be one approach. But I think we could argue that we're a little bit more specific here this chunk of information could potentially show up on a syndication feed.

[00:05:04]
And it stands alone and tells its own story we can see that this is a mixed media thing. It's Anni Roenkae's work. Here's an example of her work. Here's a little bit of information about her. There's a whole little mini story in this chunk of content. And if that's the case, then you can make use of the article tag.

[00:05:20]
So we'll start this with article and we'll end it with slash article. Okay, so that is my thoughts on how we would go about marking this up. And as always, good markup is the best way to start this type of thing. You can go through and mark up all the rest of these, then we'll go on to the styling after that.

[00:05:51]
Now we're gonna take a quick peek at my markup. It looks pretty much exactly like the first one. It's just a series of articles that I have here on this webpage. So the next thing that I need to think about is, as I keep telling you the whole way through this course.

[00:06:10]
The whole secret of managing layout, whether you're working with Flexbox or you're working with get grid is managing parents and children. One of the things that we're going to need to do in this website is treat each of these particular units of content. In this case they happen to be the articles.

[00:06:27]
We want to make sure that we can grab on to those articles and manipulate them in whatever way we want in terms of layout. Then we might also manipulate what goes on inside of the article for its layout. So we've got two types of layouts that we might be working on here with these particular cards.

[00:06:46]
So let's take a quick peek at how our parents and children are configured inside of our HTML and see if we need to add anything before we move on to the layout side of this. So here in code pen if you go to the little down arrow next to the HTML and you say fold all.

[00:07:03]
I had problems getting this working in Firefox myself. That seems to be working in Chrome which is what I'm using now it seems to be working there better. You fold it all up it folds all into the single section element which contains everything we're working with if you hit the down arrow once.

[00:07:21]
It'll show you that we now have the following children of the section, we have the H2, and we have our four articles. So that means that if I was to do something here in my CSS and say, let's say artists, the artists ID here, and I said display grid.

[00:07:46]
What would happen is and let's say grid template columns. And let's say I wanted to do something like repeat four comma one fr. The H2 becomes part of this particular issue here on the webpage see that because the H2 is a child of artists as are all of these articles.

[00:08:14]
So even though I just said make four columns, grid will do its best it says, Okay, I made four columns and I put in the H2 and the first three articles into those columns. Oops, I have an extra item. I'll add another row and I'll start populating my columns from there.

[00:08:31]
So that is exactly what just happened with this particular lab. Deanna around that problem. We're going to have to group together our articles in some way. So you actually don't need that CSS at all. We're not gonna use it. What we'll add to this then is a dif.

[00:08:48]
With a class of, I've just called it "articlewrap", And because that's the whole purpose is to wrap around this article, it serves no purpose whatsoever in communicating anything about this webpage. The whole purpose of this div Is to hold a class and to give us a an environment for laying out our cards in some method or another.

[00:09:15]
So that is the last thing that we need to add to our HTML before we're ready to move on and do some styling to what we have.