Creating & Marking Up a New Page

[00:00:00]
>> Kevin Powell: For the second page we're gonna be doing, it's a separate course page. So if you've been following along so far in the first course page, at the last one, the very last page in that first course page, there's the link to get to part two. It's also the exact same URL, just change the number one in the URL to the number two, and it will go to the part two.

[00:00:17]
For this second part, we're going to be doing a few different things, we're gonna have a little bit more interaction on this one. But a big part of it is also going to be seeing how we put a lot of work in that first part. It took a long time before we really had the styles that were coming in, and then the pieces sort of fell together pretty quickly.

[00:00:35]
And part of it will be when we start doing page two, we'll see that, I can reuse a lot of what we've already done, and the page should come together a lot faster. But then we also have to talk about project maintenance a little bit because we're gonna have some new things that we need to add to it.

[00:00:46]
So how do we deal with a growing project, where there's new things being added? That whole idea of reusing things that already exist versus being able to use things or have to build new things and finding that balance once again. Some of the newer, cool, fun, things we'll explore too are view transitions.

[00:01:02]
We're gonna look at single page and cross document view transitions, talk about the idea of progressive enhancements, and we'll also touch on some theming and customizations near the end. And how you can do more with this project or turn it into something else completely. So when we're dealing with vanilla HTML, the easiest thing to do when you need a new page is to just take your first page, copy it, paste it, and rename the file.

[00:01:28]
The reason I like doing this, I'm gonna call my mushroom guide, mushroom guide, dot HTML. The reason I like doing it that way is just because I don't wanna forget anything along the way. And if I try and copy, paste pieces from one page to the other, I invariably forget something along the way, and then I start being frustrated.

[00:01:47]
So we wanna make sure we have that JavaScript file, we wanna make sure we have the link to the Google fonts, to our style sheet. We wanna make sure our navigation is exactly the same, there's a lot of pieces that are identical. So we can just do a quick copy-paste, and then you just have to go through and find the parts that are different.

[00:02:01]
In this case, don't delete things that are the same, so our navigation is the same. And the hero section is the same, it's just the content that's changing. So don't delete the hero section, we can leave that hero section there, and we'll change the content after. But our other sections are all different, so I can come down and find all of the ones down to my footer.

[00:02:24]
And I go slowly when I do this and try not to zoom too fast just cuz I might catch something along the way that I actually wanna keep. We can go through and delete all of those. Now, I'm gonna move this off to the side cuz I wanna look at my Figma design at the same time while I'm doing this next part.

[00:02:40]
So I have an idea of what I'm trying to create. And again, when I'm doing the HTML, I always like looking at the desktop one cuz that's where I see what the structure of the page is actually going to look like. So the hero, as I said, is already done, we'll quickly change the content in that in a little bit.

[00:02:54]
And then after my hero, we're gonna have a section here, and I'm gonna put some comments. So here would be our where to look section. When we had our sections, we always had a class of section on there, so we can add that right away. And the padding looks like it's the larger padding, so I'll leave that the same.

[00:03:15]
In there, we need our two columns, or actually, the first thing, we need the wrapper, so I can put my wrapper. I need the two columns, so I can do the equal-columns. I'm using them a little bit here, I'm just doing dot, writing out the class, and then pushing tab.

[00:03:29]
You can also push return, and it gives you the div with the class on it. But in this case, once again, we want it to be centered, and we want the wider gap. At this stage, we've actually made this class of equal-columns, where one use case of it was sort of the default setup.

[00:03:45]
And then how we're doing it here, and we used it over and over again, had the wider gap and had the vertical center. So you might be like, well, more often, this is what the default is. Maybe you come up with a different modifier using or a simpler way to do this, but I'm just used to workng this way and I find it my favour way to do it.

[00:04:03]
So we can come right on there right away and add those .attributes, or if you did modifier classes, you use the modifier classes that you created. So we had data-allignment = centered, and data-gap is, I think we called it large. Somebody can correct me if I used a different name.

[00:04:28]
I'm not gonna bring the content in right away, but I'll just come here and we can do div and another div just so we have space to bring our two columns in. And then with prettier, it formats it for me. So we can be messy when we're writing our HTML, and we can see the structure come in.

[00:04:45]
If you'd rather bring the content in right away, you definitely can. I'll bring in the tags, just like I did when we were doing the first part. And then so I'll put my image tag here, and later, we'll come through and actually bring in the image just so we can focus on the content.

[00:05:02]
h2 was a class of section-title and then we needed three paragraphs. If you haven't used Emmett before, if you do a p*3 or a p star 3 and hit Tab, it will give you three paragraphs. So we can speed you up a little bit with things like that.

[00:05:20]
Next up, we have the guide, and we have to think about a little bit how we're gonna do the guide. But I'm not gonna stress about it too much, we can come here, section with a class of section. And then in there, once again, we need the wrapper, it looks like the regular wrapper so we can just put our wrapper.

[00:05:38]
Then I need to sort of decide, well, we do the easy wins first, so we don't even have to make a decision. We can do an h2 class = section-title. Under that, we have those two filters. I'm just gonna use some select for those, and we'll talk a bit about that, because their selects have some limited styling you can do on them.

[00:06:01]
But they'll get the job done, so we'll use those for today. And then here, I need to create the whole thing. I wouldn't suggest doing all of the cards at once and then coming through and copying and pasting, and I'll explain what I mean by that in a minute.

[00:06:16]
But I think what I'm gonna do for now is I'm gonna need some sort of way to organize this, so I'll put a div. I'll put a comment here to say cuz we're gonna talk about it a bit later. We'll call this the grid of mushrooms that we're going to be doing.

[00:06:33]
And then I don't really know, we have 12 cards here, and we'll come back to that and figure that out. If you have an idea of how you'd already wanna do that, by all means, you can go for it. But I think the easier thing is, actually, once we get to creating these, we'll create one and then copy and paste it, and then change the content through them as we go through those ones.

[00:06:55]
And then we have this frequently asked questions down here, so FAQ. We do a section, class = section. In this case, it has the dark background, I think I forgot the green background up higher, but we could do the background color on this one as well. So this would be background-extra-dark.

[00:07:20]
That's also a section, I'll turn off word wrap for now, even though I tend to leave it on most of the time, but there's the section. Inside the section, we need the wrapper. In this case, it's the wider version of it. So we had data-width = wide for our wider wrappers.

[00:07:43]
And then in here, we, once again, need to figure something out on how we're gonna do this section. For this section, the columns, I think, maybe they're not equal now that I'm looking at it, but they're more or less equal. So you could come in with the equal-columns, and then you could build on top of that to sort of create this bento grid that we're going to be doing, and it would probably work.

[00:08:03]
But because we have to do so much customization to have this different type of layout coming in here, I don't like reusing something that's a bit more generic. Just because I find then you're building on top of it and then, I don't know, I just sort of have two different things that are working together.

[00:08:16]
I just like going with something completely custom if it needs to look completely different like this one does. So we'll worry about this after, actually, this one's a little bit simpler. And another piece of advice actually here, this is where I like to look at what the mobile layout's doing.

[00:08:31]
Because I wanna see if I look at these cards, they look at this here, but it's hard to know what order they should actually be in. I know I need four different divs, but I don't know which one goes first, second, third. Is it one, two, three, four, one, two, three, four?

[00:08:46]
Can be hard to tell. And then even sometimes the order of other things changes. So I know I need that complex layout, but then I can go and I can look at my mobile now, or the mobile version, and I can get a better idea of what the actual order of them are.

[00:09:00]
And at this stage, I see that it's always an image, always a title, and then always the paragraph at the bottom. So this is the simpler, or this is sort of the basic version of it, and then we're gonna fancy up the layout as it gets bigger. So we can just do a class of card for these ones.

[00:09:20]
We'll build these ones out cuz they're easier than the other ones we'll be doing. Each one of these cards has a title, and we already created that, it'd be an h3 with a class. I'll make it full screen so it's less rappy, class of card__title. Actually, it was the image at the top, wasn't it?

[00:09:39]
We can bring in an image, the class title, and then a paragraph underneath there. Then we only have four of those, so it's in this part, it's probably easy enough, two, three, four, and then you get the four cards coming in. So let's go back to seeing what we actually have on the page, and go and look at our actual page.

[00:09:59]
We have to get to there, for now, I'm gonna write it up here just so I can actually see what we have. So it was our mushroom-guide.html in my URL, and I can come take a look, I see I have two broken selects, I have these cards that are here.

[00:10:13]
Obviously, things don't look fantastic, but this is, I guess, the fun part of just going through and getting the actual content on the page. Whether you're using the markdown files that were provided, or just grabbing it directly from the Figma files, however you prefer working, but we want to bring everything in.

[00:10:35]
Some of these sections, like the hero, as I mentioned, are already done. So those ones, it's just about updating the content. So in this case, we had the quick reference that goes right there. No, whoops, I'm in the wrong spot, I'm in my navigation, go down a little lower.

[00:10:53]
There we go, quick reference mushroom guide.
>> Kevin Powell: The three paragraphs are different, I'm just gonna go through this as you're all going through it, and I'll talk a little bit, but this is sort of the boring part of bringing in content. And one of the drawbacks of vanilla HTML [LAUGH] and just having to copy, paste lots of stuff, but it's part of the job a lot of the time.

[00:11:21]
Where to look, bring that in, that was right here, copy, paste. I always do my paragraphs separately and then copy, paste into them. I used to bring text in and then try and wrap it all, but I found that was a lot longer and harder for me to do, so I've been doing it this way.

[00:11:44]
The source for this image, assets, look, I think it's that one. Once again, on your images, don't forget to include meaningful alt text. So a white mushroom with a large cap growing on the forest floor, let's do that. While we're here, I'm looking at it and you noticed we have a green background, and I mentioned, I forgot to put the green background a little bit earlier.

[00:12:16]
So on my section here, I can also do my background accent. And I deleted the section class, so I'll add that back in, and I can just double-check to see how it's looking.
>> Kevin Powell: My background is now working.
>> Kevin Powell: Section is working, background-accent. There we go, I was missing a space between the two of them.

[00:12:47]
So that's coming in, let's go look back here. The text is the larger size once again, and is white instead of being that off white. So if I look here, I could put this in a lot of different places, but we have the div here. Don't forget we need to reintroduce flow, so at this, whoops, div-class= flow.

[00:13:10]
And on this one, I'm also gonna say font-size-lg and text-high-contrast, just so. Now, if I come take a look, we get the larger font size and the white text coming on. And one thing that's important with this is it's not impacting the look of the section-titles because we're relying on inheritance here.

[00:13:30]
So when I'm making these changes to the high contrast text and all of that, it's going to inherit into anything that doesn't have any styling on there. So the paragraphs are just inheriting the styles because the h2 has specific class on there that's styling it specifically. It's not gonna alter the font size or the color or anything like that, so that comes in perfectly fine.

[00:13:54]
If we keep on going, get to know your mushrooms, we can grab that, section right there, get to know your mushrooms. We have our selects, so for the selects, there's a few different things that we need in here. Well, they're all gonna be options. So for each one of them, you do need to include the value as well as what we see here.

[00:14:13]
So we can do Season: all is my first one, let's shrink this down. Again, word wrap is kind of annoying, so I have the option, Season: all, season all is what the user is going to see. We're gonna talk more about the selects after as well to make them a little bit improved upon.

[00:14:31]
But the value here is gonna be really important for actually creating the filter, so we can just say all right there. We can duplicate that line and then just do a spring,
>> Kevin Powell: Summer,
>> Kevin Powell: Fall and Spring, summer fall, I would always do the value with lowercase, it just makes life easier in the long run.

[00:15:04]
>> Kevin Powell: And then we need the other second select. Actually, on the first one, you don't have to cuz the first one will be selected by default. But on the first one, you can also indicate that that one is the selected option from the get-go. But if you don't do one, it'll always be the first one.

[00:15:21]
For the second one, we have edible, or sorry, it'll be all once again, and then so here we can say Type: all.
>> Kevin Powell: Option, edible is Edible, and then we can do our last option of toxic and Toxic. For these, you could do true false here, if you wanted to as well, but I just found it easier once we get to the other side and actually make this work.

[00:16:00]
Using the same word for me was a little bit more straightforward, but if you'd prefer true and false there, you could do that. It'd just mean when you write the JavaScript later on, it'd be a little bit different, but if that makes more sense to you. Again, I'm gonna skip over these quickly, we'll come back to those in a minute when we get to that part.

[00:16:19]
And I'll just bring this content in cuz this content is a little bit more straightforward. So each one of these has the image, assets, and then start. I tried to do the names to be easy enough to find for the images, a basket full of wild mushrooms.
>> Kevin Powell: The title, we can grab.

[00:16:52]
>> Kevin Powell: Bring in the paragraph.
>> Kevin Powell: And I think that was one, two, we'll go look actually again at the smaller design just so we get the right order of these. So that's the first one, second one is this one.
>> Kevin Powell: Again, if you're grabbing it, I was just double-clicking a lot, that will drill you down in Figma, but you can also control click if you are grabbing it from the Figma file.

[00:17:20]
Or if you're getting it from the markdown, obviously, you're fine. How, whoops, assets, identify probably, there we go. And then the alt text here, a mushroom on top of a book showing the information about that mushroom, I guess. That's not the best alt text in the world, we're going quickly here [LAUGH]
>> Kevin Powell: Yeah, there we go, grab that.

[00:18:00]
You don't wanna do that, and assets/where-to-find, and a mushroom covered in leaves, or a mushroom with a red cap, poking out from a pile of leaves, probably a little bit better. And last but not least, we get down to this one and source assets, and then what seasons?

[00:18:41]
best-seasons, alt A red capped mushroom with white dots on it, growing out of a lots of forest floors, my alt text today, and grab that text right there.
>> Kevin Powell: And we don't have our sortable grid done yet, but if we come take a look, I close my DevTools and we'll go full screen just to take a quick look.

[00:19:14]
We should have the main part done, that looks okay, we need to come and fix this up, obviously. And we need a layout here, but at least all the content is in place, and we'll be able to style that section out. So with that all done, we're ready to start working on this page a bit more and getting that grid of cards put together.