Homepage HTML Markup

[00:00:00]
>> Kevin Powell: All right, next up, we have a lot of things in place now. So I do think it's a nice time to get the rest of the HTML on the page so then we can start going through things and actually applying a lot of these styles to everything that we're doing.

[00:00:12]
And so what I would actually suggest is you take about five minutes or so to start writing the HTML for everything here. Don't worry so much about bringing the content in right now, just look at how you think you would organize the page. Think about the semantic elements you would be using along the way as you're going through things here.

[00:00:29]
So looking at the big picture, if you have time to bring in the content, that's awesome. How would you set this up? Think of the different things you need along the way and plug all of those different things in there, if you need any extra things, you can add those.

[00:00:43]
I'm gonna go through all of it along the way in a few minutes to put it all together and explain a bit of my thought process and how I like to do it. But I think it'd be fun if you do that first, so we'll give you about five minutes to go through and just get it in there.

[00:00:57]
Again, focus on getting all the elements there and then if you have time you can start putting in the content in there as well.
>> Kevin Powell: All right, so I'm gonna dive into the HTML now. And one question I often get when I'm diving into this is mobile first desktop first.

[00:01:14]
What do you look at? And it depends on what I'm doing. I wouldn't look at the mobile site if I'm doing the HTML, cuz the complexity comes with the larger layout and how things actually have to be organized. The only time I'll reference the mobile version is if I just want to know maybe there's the order could change.

[00:01:32]
And often you'll see the actual order it would be in the DOM by looking at the mobile version. But when I'm writing my HTML, I always prefer looking at the larger one, just cuz I wouldn't know I need three columns if I was only looking at the mobile design.

[00:01:46]
So looking at this first, just because I already came in with a section, I can add a section right there. I'm not giving you the class yet, we'll talk more about naming these, you might have already gone through and named them. So if you did, that's great, I'll talk more about how I decide on doing those things when it comes to actually styling these different sections that we have.

[00:02:06]
Inside this one at the top, I see I have an <h2>, after the </h2>, I have what looks like a paragraph. And then after that, I need to have three columns over here. So I have to decide how I'm gonna do that. There's obviously different ways of doing it.

[00:02:19]
And I'm not exactly sure how I wanna create my columns yet. So what I'm gonna do is put a little comment here to say I need three columns. And because I know I need three columns, I'm just going to put a div and I'll put a class on there later.

[00:02:32]
So if you already gave that a class name, keep what you had, there's no harm in that at all. You had a plan so stick with your plan for now. And for each one of those, we have a div, I did mention earlier that I'm gonna call these cards, I sort of plan that a little bit.

[00:02:45]
So I will give that the class of card, which should go inside of there. For things like this, I do like creating one then just copy pasting it cuz I find it faster. If you're good with Emmett, you could also build this a little bit quicker using Emmett shortcut.

[00:03:00]
But we'll do it the long way, where at the top I have my image. Always remember for your images that you want to come in with an src for the source. But if you want it to be valid, you do need to have the alt on there as well.

[00:03:13]
We do want to put some meaningful text in those, that's sometimes the hardest part in doing everything that we're doing right now. Because this is an <h2> this down here will be an <h3> and then after my <h3> you can come in with a paragraph underneath that. And then I can just take this card, copy it and there's faster ways if you know your VS Code shortcuts and you wanna do this faster that's awesome.

[00:03:37]
I can come through all of those and do that. You'll notice I got self closing tags on the images, that's Prettier doing that for me. You don't have to have those, but Prettier self closes tags like that. So that's that section done. Obviously, I'll bring the content in soon, but we can do that pretty quickly.

[00:03:51]
Then down here, we have another section, and know I need another section, I'm just doing this based on the background colors. But often you see clear demarcations of different sections as you're going through a site anyway. This one needs an <h2>, and we'll talk about the different coloured text, if you've already brought it in, used span, stuff like that, that's fantastic.

[00:04:10]
We have a paragraph after it, we have a few decisions we're gonna have to make a little bit later on. So in this next section, I do have an image that's in there, so I can put an image, and I do need two columns. So actually, before I bring that in, I probably should have done the same thing, where I say, this is going to be two columns, and we can have div.

[00:04:32]
And if you didn't know in VS Code, you can select something and drag and drop it. So I want to have my image inside that first one. So that's just creating a column. If you have classes on there, that's great, but that will be, actually we're gonna have a few levels of divs here now that I think about it.

[00:04:51]
Cuz this outer div here is what's gonna be creating my columns, so there'll be flex or grid on there. And then this will be the column on the left and then the column on the right, you have another div and that div will have the heading 2. Whoops, will have a paragraph in there and another paragraph.

[00:05:12]
And one reason it like just doing all of this room doing the structure first before copying and pasting, the text is, it's just for me easier. I can focus on one thing is just the structure, and then I can worry about the text. And I don't get lost about where I am or anything else and I can focus a little bit more on what I want to be focused on.

[00:05:29]
And down here we have, I'm gonna do a link that will be going nowhere for now. And I guess we'll give that a class, a button. If you use an actual button, we will switch that over to a link cuz it's gonna bring us to the other page.

[00:05:43]
So that would be a class, just because it does look like a button, it makes sense to give it that class, there we go. And then this next one is actually exactly the same. So I can just take that entire section, paste it. And then I can move this down just cuz we're switching the image to the other side.

[00:06:05]
And so I can cut that or if you know, again, the VS Code shortcuts to move stuff around, you can do that. And I can hit save there, and then at the very bottom I have that footer, so I'm gonna come outside of the main and down here do a footer.

[00:06:19]
And just like at the top of the page, I had the primary or the site, I should say, so I'm gonna do class = site-footer. I don't think we're gonna have other footers in this project, but if ever you did have another footer, cuz footers could be used in lots of different elements.

[00:06:35]
They can be used in articles, in sections, in accents and other things like that. So having a class on there just to distinguish the styling of that part does make sense. And now we have the fun part of bringing in all the content, which is just copying and pasting.

[00:06:50]
But I'll do this pretty quick, and I'll talk about some of the things along the way. But hopefully everybody's been learning a bit about mushroom foraging as they've gone through all of this. A few things I didn't do right now so far as I've been bringing this in is I haven't done anything in regards to how my lay.

[00:07:11]
Well, I put the divs for the two columns and the three columns, I didn't put any containers or wrappers. Which is often, actually, I'll say, a mistake. Did I do early on in projects? Even if I had the foresight for it, I always forget to actually do it, but it's something that I wanna talk a little bit about in a future lesson.

[00:07:28]
So I left them out on purpose, if you had containers or wrappers, please do leave them in there, cuz we will be using them. There's other ways of approaching things now, with grid as well, but I'm just gonna stick with the nice, simple, basic way of doing it.

[00:07:42]
With this text here, I'm gonna grab it and you don't always have to see these things. Sometimes when you're coming through to style them after, you can figure these out. But right away when I bring that in there, I'm just gonna add a <span> right there, just so I don't forget that I actually need it.

[00:08:00]
Even though it'd be easy enough to we can bring that in if you know what class you want on there. If you think it needs a class, so you're going to use a descendant selector. These are the types of things to be thinking about while you're bringing this in, but I know I need to change the color of the text.

[00:08:12]
So I know I wanna throw a span on there. It didn't do that at the top of the page, but that'd be something that we can bring in and do a little bit later. Same thing with class names. I'm doing it on purpose in this order, without any real classes and just focusing on the structure.

[00:08:27]
But if you already had, pre-plants and class names and stuff like that at this stage, if you're putting them in there, it does make your life a little bit easier. Cuz then when you start getting more CSS on your page, it's going to look good right out of the box, cuz your styles are already being applied to it.

[00:08:45]
This one, I'm just gonna write it myself, reference guide. We're gonna talk about these links in just a second as well, cuz there's a problem with them. It's not a big problem but it's an important problem to talk about, and something that people aren't always aware of. This one only has one paragraph, and that one is Learn More.

[00:09:08]
Capital M makes my life easier and then there's the footer at the bottom. I'm gonna talk about the images cuz I do want to talk about alt text a little bit. We'll do a paragraph and a link here. If ever you have a website, personal website or anything else, when you have an a href down here, you can do the mailto.

[00:09:28]
We're gonna do it this way, mailto: and just paste in the email address. And it means if someone clicks on it, it will send them an email as long as their systems configured for it. Just know that bots well scrape those. So if you put it there, you might start getting some spam in your inbox.

[00:09:43]
And there's ways using JavaScript to insert it after or to obfuscate it a little bit for JavaScript purposes. Or using JavaScript to do that to prevent the bots from getting it happy foraging. Cool, for the images, I said we'd talk about it. So when you're doing your images, please, please, please always come in with meaningful alt text.

[00:10:07]
So I did try to name the images in a way that would be, so that's like outdoor I think. First I did do webp, webp is widely supported, you can use webp images wherever you want, there's no problem. But do try and come in with somewhat meaningful alt text.

[00:10:22]
Alt text serves a few purposes. If the image doesn't load for some reason, then at least they'll have that text explaining what the image they should be seeing. It's also for assistive technology, is not everybody's going to see those pictures and it reads the context of the picture to them.

[00:10:39]
So this could just be "A tightly grouped". This is always fun coming up with this actually. And I will say, I'm not a huge fan of AI for some stuff. They can write decent alt text but do verify cuz they sometimes don't know what they're actually looking at, so don't copy paste it without reading it.

[00:11:02]
Tightly grouped brown mushrooms growing up the base of a, or growing up a mossy tree trunk, something like that. Something that gives a little bit of meaning and can describe the picture appropriately. For people, goes a really long way, and it doesn't take that long to write. I've seen even there's a really good blog post I don't have a link to it, I just thought of it now.

[00:11:29]
But about how playing D&D can make you write better, better alt text, because you get better at describing things. And so just, I'm gonna do them pretty short for now, just so we don't spend too much time, so just put "Wild mushrooms on a table". But the more descriptive your alt text is, it's always going to be better.

[00:11:54]
You'll also notice, I'm doing the forward slash here at the beginning of my source, you don't need to include it, it's still gonna work in this environment. Some builds require you to have that. If you're using and doing other things, a lot of the time, you'll be going to the root cuz when you have that build step in there, it's a little bit different than what we're doing today.

[00:12:10]
This will work here, but if you omit it and you just say assets like that, it's also going to work. So whichever you prefer for today's is completely fine. /culinary,
>> Kevin Powell: And we'll just do "A plate of food with mushrooms on top". Just so again, we're going kind of fast through this and we only got two more.

[00:12:33]
So it's not too bad. This is "/assets/get-to-know" and "A man on his hands and knees harvesting a wild mushroom in the forest". And this last one down here two columns "/asset/" and connect, maybe nature, there it is. "A small white mushroom growing on a mossy forest floor", okay.

[00:13:15]
Something like that, there we go. So as far as everything, we should be able to go look you see if you have any broken images. You can see if you made any mistakes along the way as well. So always go and look at your project, cuz I have my button that I wanna take out, but trim that we do not need anymore, there it is.

[00:13:36]
I can delete that button from there, and I can just go through to make sure everything's loading in all my images are there. And at least just make sure your site's looking half-decent at this stage and at least all the content is there. And by having those base styles already in place, it should already look ok-ish.

[00:13:52]
Because at least we have that base that setting up the stage for everything else that we're going to be doing.