HTML Markup for Cards

[00:00:00]
>> Kevin Powell: All right, so now we get to get into the grid of cards that we have here. So a little bit more HTML, a bit more copying and pasting that we'll have to do. This is the type of thing that often, if you're doing a bit more of an advanced thing, you might be hooking into an API or something like that, to pull the data into or from to generate the cards.

[00:00:18]
And then you could have a lot more cards and stuff like that. But this would be a nice introduction to this or something to look forward to in a future project. For now, we're gonna do it the old-fashioned way. And in this is why I also said, instead of creating a whole bunch of cards, it's probably a good idea.

[00:00:32]
Just to create once you make sure you have all the pieces you need. And then once you're comfortable and you have all of that and we can just duplicate the old with few work hooking into an NPA, go through all based on that, what you created it for the first one.

[00:00:46]
So, we do need a div class card. I'm trying as much as possibly use semantic elements, and I'm using a lot of divs. A lot of the time, these little self encapsulated things like these, you could make an argument that they can could be an article. In articles, something has a self encapsulated piece of information that you could play somewhere else, on another website and it still makes sense within its own context.

[00:01:08]
It doesn't need the outer context for it to have value. You could probably make a case that these could be articles because I have a title of the mushroom. I have the information about the mushroom and a note about the mushroom. If this were somewhere else on this page or anywhere else, it would still make sense.

[00:01:25]
But I also feel like in this case, it's part of this bigger picture as well, and it's important that it's in this bigger picture. So I'm going with a div. But if you'd rather use an article, you can probably make a very good case for it to be one.

[00:01:39]
I will do an h3 with a class = card__title. The styling of that will talk about a little bit later. I will give it the text right away, chanterelle, just so we can see a little bit of what we're creating. Here, we need these two little type elements.

[00:01:57]
So for those, I'm gonna use a list. So, it's an unordered list. With ul, in my mind this should still be a list, and I'll explain why in a second. But, so I will do the row it's equal to list that we talked about earlier when we were studying up our CSS and doing the reset.

[00:02:15]
And in there we have the li for edible and then we have another li for summer. I'll come back to this list in a minute, let's just get the other content in there first. So in there as well, then we just have a paragraph and grab that right away.

[00:02:34]
And just if you're copying and pasting, like we're gonna be doing today, I would encourage you to actually Basically do the paragraph like this, because it's gonna make your life a bit easier. Because you can just come out of line triple click, and paste in the new text, and you don't have to worry about the paragraph tag on the top and the bottom.

[00:02:50]
And then we have this little bit at the bottom here. There's a lot of different ways we could tackle this. We have it has a lighter background color on it. That's the most important part of it, you could use a utility class to do that, because we have a utility class that's lightning for a light background, but we also have padding and a border radius.

[00:03:08]
So do you want to have to do three of them and then have to have the same three on every single one? Or we could just do something like a div with a card note, if it was an article. Article, maybe you'd say this is the footer. It doesn't really feel like a footer to me, but it's up to you again on how you think the semantics of this could work.

[00:03:27]
I'm of the mind that HTML is actually the hardest of all of the languages, because semantics are up for debate, [LAUGH] and it's very hard to get those things correct. Once again, just to make your life easier for copying and pasting purposes, we could do the strong at the top, inside the paragraph, and hopefully prettier doesn't break this on me, but we can come in with the important notes.

[00:03:52]
I think there, and then underneath that, I could come in with the rest of it like that. I don't want to delete it. From the figma file, there we go, copy that and paste it in. And now, when you're pasting in, your important note always is there. You just triple click this line, paste in the next text.

[00:04:12]
The last thing we need to do, before we duplicate this a bunch of times, you wanna talk more about the list. Right now, this list makes sense, the list without Edible summer, some of the information about it. We've been talking a lot about accessibility as we've going through this.

[00:04:25]
And if a screen reader were to come across this, because we gave it the role of list, we will be changing the list style on it. It's going to say that it's a list with two items in it, and then it's gonna read out summer and edible. You could probably figure out some context about what that actually means, but especially the summer one could be a little bit confusing.

[00:04:44]
Edible, I think everybody would understand. But we could add a little bit more information here by giving this an aria label. And saying that this list is, let's say, mushroom characteristics, like that. In general lists should have titles or something that's giving the list some context, area label's, probably the easiest way to do that on a regular basis.

[00:05:07]
You can also link instead of viewing an area label, if you have a heading, you could give that heading an id and you could use an area labeled. Attribute and then point to the id of the element, of the heading that's labeling it. I've seen times you could actually create a heading that's completely uses the visibly heading and then link it, but it feels like a bit more work.

[00:05:34]
Area label should be the last choice that you do though. If you are labeling something and that needs a little bit of extra context, sort of like in our menu. We added the visibly hidden to add the menu text in there, instead of doing an area label, because it was really easy to do in that situation.

[00:05:50]
So area label does work if you do need that extra context, but it should be probably the last step along the way. The other thing is here we could add a little bit more context here with the edible and the summer. I'm gonna put these on separate lengths too, again, to make our life a little bit easier.

[00:06:06]
And just to make it a bit visually more obvious with the span of class is visually-hidden and inside that span this mushroom is edible, so they get mushroom characteristics. This mushroom is edible, and then we could do another one for this span class is visually hidden, and you could say, this or I dunno, best season to harvest this mushroom is, and then you have the summer.

[00:06:51]
Just cause you have to think about, again, when we're looking at the screen, this is kind of obvious what those two tags are doing, especially if you have this other information that's coming on there. So, this just gives a little bit of extra context for when you're in other situations.

[00:07:06]
And this can also help out for screen readers as well as bots that are scraping your website. They're gonna see all of this content too because it's inside of your HTML. So, it can be useful for multiple different reasons. And the last thing I wanna do here, while we're here, is we do need to to be able to sorry sir.

[00:07:23]
>> Student 1: Yeah just a quick question.
>> Kevin Powell: Yeah.
>> Student 1: Would you ever recommend using a block quote for the card, note.
>> Kevin Powell: if I'm not sure about the semantics or something, or if I it would be a good use case, I'd probably go on the MDM and just look, because they'll give the semantic use case.

[00:07:35]
So we can do that fast MDM block quote, because they always tell you sort of, so indicates the enclosed text is an extended quotation. So it really is meant for, as the name sort of implies that it should be a quote for something. They probably also often, yeah, you can cite the quotes and stuff like that, but it really should be if you're quoting something directly.

[00:07:57]
In this case, it's just a visual. Difference, I know we use block quotes a lot of the time just for a visual difference, especially if you're writing markdown, because it's the easiest way just to create a block that is easily to style. But if we're doing it properly, we should be using them just for actual quotes, and that's why some a footer, potentially maybe an aside, but I don't think an aside is correct either.

[00:08:19]
Cuz it is linked to the content that we're, these sides, usually if it's tangential information, this is sort of relevant information for what it is. So, I don't mind it just being a div, cuz it's more of just a visual difference that's on there, and I don't really see a semantic difference between this paragraph and this one.

[00:08:34]
We just wanna visually highlight that it's two different pieces of information. At least that's how I'm seeing it. Again, HTML is really hard. The last thing that I wanna look at with these lists is just to make our life easier when we're actually going to be filtering things.

[00:08:45]
Because when we're using JavaScript, we have to filter, and it needs to know which tags are actually on the element itself or within that element. So on these, I am going to give these a data attribute so we can see data edible is equal to edible. And then on this one, a data season is equal to summer for the first one.

[00:09:12]
And again, this is just for a way for us to hook into it with JavaScript, you technically could actually get it to get the inner text from here as well. I just find it's a lot easier if you have a data attribute on there instead, and a little bit more reliable.

[00:09:27]
So I'm gonna go with it that way, where we're just throwing the data edible and a data season, if you have a different name that you'd wanna give it, that's fine. Again, this could I mentioned the true false before, your data-edible could be true and false, but then your JavaScript would be a little bit different from how I'm gonna be doing mine.

[00:09:44]
With that one in place, we have now the fun of putting them all in there. So we can just, whoops, on the card here, I can grab this entire one. In Visual Studio, the default settings here, you can see this line goes all the way down, just to make it easier to grab or you can just collapse the card so it's easy to select.

[00:10:05]
It's gonna select that plus everything in it, and you can come in and put a second one. When you're doing this you could either put all of them in and then go back through because there's a lot of these and it's gonna be this huge thing in our html.

[00:10:18]
I actually find it easier to just go one at time. And I'm gonna use the mobile view again, just cuz they're in order, up and down. It makes my life a little bit easier. I will show you a few tricks though to make it go a bit faster.

[00:10:30]
So the first one is, actually I should have done this also with the title, having the text always on its line just means that when you're coming in and copying from here, again, double or triple click, and it will bring it in. For the edible and for the season, I'm gonna select the edible here, so I'm just double clicking on the word edible, CTRL+D.

[00:10:52]
If you're on Mac, it'd be a COMMAND+D, and it's gonna select both of them, so I can just switch it at the same time and rate toxic. And it changed it to toxic both so I don't have to do it twice. Same thing here, double click on summer, CTRL or COMMAND+D, and then this one is my spring.

[00:11:09]
Copy that, triple click, paste it in, it would be this paragraph, which it formatted for me. So sometimes prettier will format paragraphs and take away the spacing that you wanted it to have. But we can paste that in there, and then my important note, I just want this piece of it, and then I can paste that in, hit Save, and I already have the card in my clipboard.

[00:11:36]
So again, I tend to just try and shrink these down, because if not, it's gonna make, oops, that one's there. I tend to collapse them cuz it's gonna make a giant wall and then you lose track of where you are. So, that's the first one, next one. How did I clipboard?

[00:11:51]
I don't know if I have.
>> Kevin Powell: There we go. If you're on Windows, I don't know what it is on Mac, but if you push Windows+V you get like your clipboard history, so that can be in handy sometimes. And now again, we have the fun of just copy and pasting.

[00:12:07]
So I'll let you do that while I go through it too, and I'll just sort of talk my way through it, so it's not too boring for you. But mushroom characteristics are fine. Edible is fine. Summer is fine.
>> Kevin Powell: My formatting is gonna format this for me every time that way.

[00:12:26]
So that's okay. And my important note.
>> Kevin Powell: Once you get into the world of APIs, or if you've already have entered into that world. [LAUGH] You might find this particularly painful, but it's not too bad. Collapse that down.
>> Kevin Powell: Let's paste that again,
>> Kevin Powell: And copy that again.

[00:12:53]
There's also a shortcut in VS Code to be able to grab these or to duplicate lines. So if you know the shortcuts, by all means, do it your way. I just lost track of where I was chicken in the woods. The best part about doing this is, I have to say the people who named mushrooms, especially the toxic ones, they have really good names.

[00:13:14]
You have the death cap was the not the lion's mane, destroying angel. They're quite dramatic with their naming of their mushrooms. We have toxic, that one's also summer. Just make sure you're always getting the data attribute as well as the text inside the data attribute. If you miss the data attribute, then it makes it a little bit difficult later on when we're doing the JavaScript, because we need those to hook into.

[00:13:49]
>> Kevin Powell: That one's good. I actually don't remember the code, but let's see if I can remember it. Is it all controlled down? I have custom keyboard setup, so. Or custom binding for that shortcut. So I don't remember what the actual one is. Mushroom characteristics, this one is edible, but it's in the fall COMMAND+D, fall for both of them.

[00:14:21]
>> Kevin Powell: It takes a little bit of time to do this, so I do apologize, but it's not too bad, and I didn't give the finished code for it, just cuz part of writing HTML is the fun of actually going through and writing it. Which does mean I have to do it too.

[00:14:38]
Lions main,
>> Kevin Powell: Edible and fall.
>> Kevin Powell: I think I made a mistake along the way. We'll double check them after fall is good, or if I did make a mistake, it's not the end of the world, but,
>> Kevin Powell: Paste that in important note. And I will say one thing, people have been asking me if I actually do much from foraging.

[00:15:12]
I don't, but every time I'm reading the safety warnings, I made a mistake here. Some of them are important notes, some of them are safety warnings I meant to update the Figma file, so they were all important notes. You can leave them all important notes if you want.

[00:15:23]
If you wanna copy the Figma file exactly, by all means, go for it. I apologize for that.
>> Kevin Powell: Yeah, anytime I see something that has potential lookalikes that are toxic, that would just scare me to trying to harvest my own mushrooms.
>> Kevin Powell: Toxic.
>> Kevin Powell: You'll also notice I'm not putting classes on the paragraphs and other things like that.

[00:15:59]
Just because they're inheriting this default styling our note actually is going to be a little bit smaller in font size, but I'm not putting classes on, like, card, paragraph, card, list, item, card, and like, really doing the BEM style there. And this, if I don't need to do that, I'm not going to, is basically the way I think about it.

[00:16:16]
And then if it needs a modification from what I'm already have then that's when I'm actually gonna come in and bother giving it a class. But if I can just rely on inheritance, then I'm gonna rely on inheritance as much as I can because it just makes life a lot easier.

[00:16:36]
>> Kevin Powell: Summer.
>> Kevin Powell: And while we're here, I'll fix this in the Figma file, because that shouldn't be that was bold, there we go and I think, how many do I have left, I still have of three or four?
>> Kevin Powell: Well, the Shaggy, Maine, again, the names of these are quite good, I don't know who names the mushrooms but it'd be a fun I guess if you discover the mushroom, you get to name it.

[00:17:34]
>> Kevin Powell: I definitely made a table in one of them too, that's okay.
>> Kevin Powell: Edible and foul the one thing I did learn from creating this guide is that you don't wanna harvest mushrooms in the spring cuz the only ones in the spring are the toxic ones. Granted, there's only 12 mushrooms here and I guarantee you there's other ones that can be harvested.

[00:18:18]
>> Kevin Powell: Toxic and spring,
>> Kevin Powell: And that in and I think I'm on the last one good.
>> Kevin Powell: Grab that, copy, paste.
>> Kevin Powell: Edible and the color mistake there too that's okay, fall.
>> Kevin Powell: And,
>> Kevin Powell: There we go, so if you're not done yet, you can keep on going, bringing those in I'm just gonna look really quickly at my page to come and take a look at it, and I can see that they're all coming in.

[00:19:27]
And obviously, there's some styling and different things we need to do on them, but the very first thing I'm gonna do is just set up the grid. And if we come and take a look here, once again, at small screen sizes, they're all just stacked, nothing too bad.

[00:19:41]
But when we come and take a look at the larger screen sizes, we need to have a grid like that. And so whenever I see something like this, my mind just goes to grid rather than Flexbox. You can definitely pull this off with Flexbox as well, but there'd be some compromises along the way, and there's one solution that I always go to first when I see something that looks like this.