Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:19Length:2.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 HTML and CSS

In this lesson, we'll build the basic style and structure for our web page using some simple HTML and CSS markup. As we move forward, we will take this markup and make it more dynamic.

3.2 HTML and CSS

Hello and welcome back, in this lesson, I want to jump into our HTML and CSS a little bit. But before we do that, let me show you the folder structure we're gonna be working with for the rest of this course. So we've got our social-lite folder that we've been working with. Inside this folder is our actual web app, and this the one that we're running Meteor inside of. But as we move forward, I'm gonna take our editable files from our client folder, and our server folder, and then later on from our imports folder. And I'm gonna save those in a separate folder for you, in this case called site001. So obviously, this number is going to increase as we move forward. And the reason I'm doing this is just to save different versions of the HTML, CSS, and JavaScript files that we're going to be editing, so that you can see our progress as we move forward. So if at any point, something doesn't make sense, or if at any point, your code isn't working like you expect it to? You can open up the corresponding folder, you can see the clients, server, and imports folder there. And you can take a look at the files there, compare them to your own, and see where you might have gone wrong. So these site folders are not intended to be run in Meteor. If you try to run this folder in Meteor, it's not gonna work, because these site folders don't contain all the support files. It just contains the editable HTML, CSS, and JavaScript files that we're gonna be working with. So all of our files that we were working on in the last lesson, where we ended up with this hideous red background. All of those files are saved in the site001 folder. All the changes we make in this lesson are gonna be saved in the site002 folder. So I just wanted you to keep that in mind, as we move forward. And I'll try to keep pointing out which folder we're in, as we move forward, so that you don't get confused. But again, throughout the course, we're gonna be working mainly out of this social-lite folder. And so that's going to contain our final finished app in it, once we get to the end of the course. But along the way, you're gonna have all of the steps saved in these site folders. So in my command prompt, I've got our app running. Again, the way you run the app is, you navigate into your social-lite folder, or whatever folder you have your app stored in, and you simply type in the command, Meteor. And that will run your local server, and you can run that on localhost:3000 in your browser, to see your site. So let's jump into our code editor of choice, and let's start making some changes. So I've got our main.html file opened up here, and I wanna get rid of all of this content that's in there by default. So we don't need either of these templates here, at the end of our document. And inside of our body, all I'm really gonna keep is the body tag itself. We'll just delete everything inside that, and we'll get started. Now, eventually, we're actually gonna be pulling everything we put here in the body out, and we're gonna put it somewhere else. But for now, we're going to use this as a starting point. And my goal here is to build out the HTML as we want to see it when the project is finished. So we're not going to be pulling in any dynamic data, or anything like that, we're gonna hard-code everything initially. And later on, we'll bring in the data that we need, and we'll make this a little bit more dynamic. But for now, like I said, I just wanna build out the HTML and the CSS, and get it looking like we want it. And then we'll move forward with the exciting stuff using Meteor. So I'm gonna start off with an h2 tag, and I'm just gonna say, Latest User Posts. So this app that we're building is gonna be a little similar to what you might see on Twitter. It's just gonna have some short posts that different users can create, and edit, and delete. And so we have Latest User Posts, and then I'm gonna create a container that has all of our posts in it. In fact, before we do that, let's go ahead and create an overall container that's gonna contain everything. So let's move that h2 inside that container. And all I'm gonna do with this container is kind of the same thing that Bootstrap would do with the container class. I'm going to center it and give it a limited width, so all of our content will be nested inside of that. So then inside that container, but after our h2, I'm gonna create another div, and I'm going to give it a class of userposts-container. So this will contain a list of user posts, and these posts are gonna be contained in small panels. So let's create some more divs here, with a class of panel- userpost. And then inside that panel, I'm gonna create another div with a class of userpost-info. And then finally inside that particular div, we're gonna have some data here. So I'm gonna put a strong tag here with whatever the username is, in this case, I'll just put Craig. And then after the closing strong tag, I'll put a space. And then we'll create a small tag here, with a class of text-muted, and we're gonna put the current date there. And then on the next line here, I'm just gonna paste a paragraph here with a little bit of lorem ipsum text, not very much, and that will be it for our panel. So again, we have this userposts-container, which is gonna have multiple panels inside it. And then inside those panels, we're gonna have a div with a class of userpost-info. So I'm gonna grab this panel, here not the userposts-container, but the panel itself, all the way down to the closing div tag for that panel. And I'm gonna copy it, and I'm gonna paste it a few times, So that we can see what that looks like, and it looks like we need to fix the indentation there a little bit. There we go, and that should be a good starting point. Now, if we were to save that right now, and jump over to our browser, when it refreshes, we'll see what that looks like. And there we go, so we have four separate user posts, obviously, these will eventually have different content in them. And all of this data that's pulled in will be dynamic, but that's a good starting point. The next thing we wanna do is to jump into the CSS, and clean that up a little bit. First of all, I'm gonna pull in an import statement for a Google font called Open Sans. And we're gonna be using that font in this document. Also, another thing I wanna do is I wanna, I'm just basically doing a very lightweight CSS reset here, I'm setting box-sizing, To border-box, so in the body, I'm gonna go ahead and copy and paste some CSS here as well, get rid of that red background color. And we're setting our font-family to Open Sans, and then our background-color to this kind of a coral red color. And you'll notice that I've got three different weights for this Open Sans font. And so for all h1 and h2 elements, I'm gonna set our font-weight here to the heaviest one of those, which is 800. And we'll set the color here to white, Since it's gonna be against that coral background. And then we'll move on to the container, remember, this is kind of the overall container that sets the width. So we'll set our width here to 600 pixels, and also set our margin to 0 auto, and that will center our container for us. And then let's set up the CSS for our panels, remember, we have four of these panels. And they have a class of panel-userpost, so I'll copy that, and then we'll type .panel-userpost. And I'll go ahead and pull in some CSS here. So we're setting our background-color to a light gray, setting a little bit of bottom margin and some padding. Setting the text color to a dark gray, border radius-to 3px, so it will kind of curve the borders a little bit. And we're also setting the display to flex, and adjusting some of the content a little bit in there. Now, some of this CSS, such as this flex content, is gonna be used later on. I wanted to go ahead and paste it in there, so that we have it. Again, we're not gonna focus a lot on the CSS, I just wanted to go ahead and throw some of this CSS in there. And that might be a pretty good place to start, so let's save our CSS file, and jump back over to our browser. And when it refreshes, there we go, we have a little bit of a cleaner-looking page there. So we haven't done anything fancy here, we've just thrown in some HTML and CSS. And we've kind of watched Meteor do its thing, as the browser automatically refreshes for us. And we've entered, again, all of this into our main.html and main.css files, which are our kind of default entry points for our app. So our app is always gonna be looking at main.html, in our client folder, as kind of its starting point, and that's also where main.css is. So again, now that we've done that, we can jump into Meteor and start templating some of this out a little bit, in order to make it a little bit more dynamic. So we'll get started with that in the next lesson, thank you for watching.

Back to the top