Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:10Length:47 minutes
132477 adam noonan thumbnail grid layout and flexbox 02 400x277px 100317
  • Overview
  • Transcript

2.2 Looking at the Markup

Let’s get familiar with the HTML markup that we will be working with for the rest of the course.

Useful Links

2.2 Looking at the Markup

Hello, and welcome back. Before we get started styling our page, I wanna take a look at the HTML mark up there that we're gonna be working with for the rest of this course. And over here on the right, you can see our website so far, again, as I mentioned, we have a few basic styles there but none of the layout has been done yet. Now, if you want to follow along, you can find the URL for this code pen here and the course notes for your lesson. And we won't be making any changes in this particular lesson, but you can at least follow along and take a look at the HTML for yourself. So, I'm going to collapse some of the sections, so that we can get a better idea of how our overall structure works. And there we go. So we have everything contained inside this wrapper. You can call that wrapper whatever you want to. You can call it a container instead of a wrapper, I don't really care. But for our purposes here, I've given it an id of wrapper. Now, before we get into any of the Flexbox items, we're gonna focus on getting our grid setup for our entire page. And so, these main sections here, are going to be a big part of that grid system that we're gonna be building. Now, when you're working with these CSS grid layout system, you need a container for all of the grid items and our wrapper here is functioning as that container. And then any immediate child of that container is considered part of that grid system, and we can define how each of those direct descendants is going to be laid out within that grid system, and there are a couple of ways to do that, we really are gonna use one particular way in this course. Again, this is not an introduction to the grid system or to Flexbox. So, instead of getting into the specifics of the basics of these two systems, I really just wanna be able to focus on how we can use them together in conjunction. So, if you've never used either of these systems before, it might behoove you to go back and take a look at some more basic courses on what is Flexbox and what is the Grid layout system. Because we're gonna be moving pretty quickly through some of these concepts. So again, we have our main wrapper. And when we're using the grid system again, or the Flexbox system for that matter, the direct children are going to be the main components that make up whatever it is we're laying out here. So, inside our wrapper as you can see, we have our header, which, I didn't mean to expand that out. All right, we have our header with an id of main-header, which makes up the company logo, the social media icons and that dark background behind it. After that, we have our main navigation which is the smaller section here which is just these text links here to navigate through the site. Then we have a sidebar, we have sidebar1, which is gonna be on the left side of the screen. Then we have our feature articles section, which is gonna be our middle column, it's gonna be a little bit wider than the rest, and then we have our sidebar2, which is gonna be over on the right. And then finally, we have our footer which is going to take up the full width of this screen at the very bottom of the page. So now we can drill into each section individually and take a look at what we have there. So inside of our main header, we have first of all our main logo which is just this H1 with an id of main-logo, and then we have an unordered list with a class of social media, we're gonna be laying out this section using Flexbox. So again, the header would be the flex container and then the H1 and the unordered list would be the two flex items within that container. Next, we have our main navigation, which again is just a menu up here at the top and it's just a nav of tags inside it, to nudge that over there, actually, we need to nudge this to the left, there we go. All right, so let's collapse that. After that, we have our sidebar which has a few different sections and let's expand that a little bit more. So, for our sidebar we have this H2 which is just the header for that entire side bar that says popular. These are popular posts, and then after that we have a series of articles, and each of these articles has an image and H3 with the class of title and a paragraph of the class of date. And as you can see we've already styled the text for these articles here. So that's the sidebar, our feature articles are not much different. We have our first article within id of feature. And then the other article simply have class of article applied to it. So this feature article is gonna be a little bit larger than the rest of them. And then each of them also has an image in each three, the feature article has an H2. But that's our feature article section, and then we have our sidebar which is kind of similar to the left sidebar, but it's gonna be laid out a little bit differently. We're gonna have a little thumbnail image, on the left. And you'll see that this is set up as an unordered list, excuse me, of recent posts. So each list item is going to have a post-img div and a post-info div. The post-img div is gonna be on the left, post-info is gonna be on the right. And we're going to use Flexbox for each of those list items to lay those out horizontally. So that's our sidebar and then the main footer is very, very simple. It just has some copyright text in it. So that's the basic layout of our HTML. As we move into the next lesson, we're gonna get started with the grid system, setting up the main structure of our page. So thank you for watching, and I'll see you then.

Back to the top