FREELessons: 26Length: 3.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 The HTML

Hello and welcome back to Scroll Events Made Easy. As you can see, I've already made a copy of our site05 folder, and I've called it site06. I've also already stuck some images in there, the same images we put in our other site. And then we can get started. So let's drag that site06 down to brackets, and I'm also gonna jump back to our finder and double-click on index.html to open it up in our browser. And there's nothing there yet but I just wanted to go ahead and open it up. So we'll jump back into brackets and I also wanna make sure that we include bootstrap. So inside our body I'm gonna hit enter a few times and I'm just gonna paste the links for all the boot straps stuff that we need. We've got the CSS file here. And, since we're using bootstrap, I'm also including jQuery, because some of the bootstrap JavaScript requires jQuery. Now, jQuery is not necessarily required for wow.js, but it is required for some of the bootstrap stuff. So, now that that's all there. We can get started with our site. As you can imagine, we're gonna start off by creating a container. So we'll create a div with a class of container. And then inside of that container, I'll create a div with a class of row. And then, here is some of that extra space there. Inside that row, I'm gonna start by creating just a title. So, we'll create an h1 tag here. That says scrolling with wow.js. So there's our title and that H one needs to be inside a column so we'll create a div outside of that with a class of col-xs-12 so that will take up the full width and let's grab that and paste it inside that div. And then outside that div we're gonna create some more columns. So you could end the row there if you wanted to by creating a closing div and then starting a new row. But since this takes up the whole 12 columns of the grid system, we could just go ahead and create another column and it will start on its own row anyways. So let's do that. I'm gonna create a series of images here that are gonna take up three columns. So, since we want three different columns, each column is gonna be one-third of the width. So we're gonna use the four class. And we're gonna use the small four instead of the extra small four. So we're going to create another div, and again every now and then brackets does some weird things with the way it handles the tabbing and indenting and all that good stuff, and you'll see that these are like one line off here. And it really bugs me, but I guess I'm just gonna have to live with it cuz I don't wanna spend the time to fix it. But as you can see, it's doing some weird things. But anyways, we're gonna create a new column here after our first column, we'll give it a class of col-sm instead of xs 4. And all that means is that anywhere from a small size all the way up to extra-large, this will take up one-third of the width. Now if we get down below a small size to an extra-small size then it's going to default to the full width of the container. So we're basically change to the equivalent of col-xs-12. So again, at really small sizes it will take up a full width, but as we get up to small and larger it will take up 1/3 of the width. So inside this column I'm gonna create a div with a class of img-containter this is my own class name it's not a bootstrap thing. And then we'll create inside that an image tag and we'll set our source equal to will point to the images folder. And let's just grab this first one in alphabetical order. Just food-drink-10.jpg and that will work fine. Now I'm gonna give this is a bootstrap class called img-responsive. This makes the image as you would imagine a responsive image which means that it's going to resize as the container that it's in resizes. So, that's what that particular bootstrap class does, it just makes the image resize to fit inside its container. So, again, this particular column takes up one third of the width. So we'll create a whole row by creating three of these. So I'm gonna copy that, paste, paste. And that gives us our first row but I don't wanna put these inside a separate row. Remember we have these row classes here or these row containers that contain however many columns we wanna place in it. And if that column again takes up more than the 12 columns of the system or if we have an extra column that goes outside of that 12 I should say. So we have this 12 which takes up the full width, and then anything after that is just gonna jump down to the next line. So it's kinda like we have our own row. But if you're doing something like this, where you have multiple columns of images that are just gonna be one after the other. And we're gonna have multiple rows of it, too. We're gonna have, let's create three rows of three columns. So we'll have nine separate columns here. And right when it gets to the end, basically when these three numbers here, here, and here. When those add up to 12, then the next one is going to jump down to the next line. But the reason we don't wanna put these three inside a separate row is because when we get down to a smaller size, this won't necessarily all be on the same row anymore. When this gets down to an extra small browser size each one of these is gonna take up the full width of the browser. So defining these three as a row won't always be accurate, depending on the size of the browser. So I like to keep them all loose and put everything inside one big row, as we've done here. So we've created three different columns here. I'm gonna create two more copies of this row. So we have three here, I'm gonna copy that and I'm gonna paste all of that two more times. So there's another three which makes six and another three which makes nine. Now, I'm gonna change the URLs so they're not all point to the same image. So the second one will be drink-11.jpg. So we have .11 and then .16. I'm just gonna hit escape this time. And then after that we have food-drink-3. And then our next one will be food-drink-4. And then we'll basically just start over again, so we'll have 10, 11, 16 and then this final one we'll go back to 3 again. So we are repeating a couple of images but I think we've got enough variety in there so it won' t look too boring. So let's see what that looks like. It's not going to be real exciting just yet, just a grid of images, but let's save that. And we'll jump back into our browser and refresh the page. So now we have our title at the top and then we have a series of images. And as you can see, all the images are right up against each other, one right on top of the other. There's no margins around it, so we can fix that. But that's our basic setup, so let's jump back into brackets, and in our CSS folder, I'm going to create a new CSS file. And I'll call it main.CSS, and in the main.CSS file, I'm gonna create a rule for the image tag, so for all images on the site, we're gonna add a top and bottom margin. So we'll set this value to 10px space 0 which will set the top and bottom margin to 10 and the left and right margin to 0. So if we save that and then jump back into our index.html file, then down here at the bottom we'll just create another link tag underneath. The bootstrap link tag, so we'll set the href here to css/main.css, set the relationship equal to stylesheet, and there we go. So let's save that, jump back into our browser, and refresh. And now our images have a little margin around them so they're not so cluttered. So if you remember, when we scroll onto the pages when our animations are going to happen, I'm going to create an animation where these basically bounce into place once we scroll down to them. But It doesn't take much to scroll down to them right now because that's all we have. So I'm gonna create just a little bit of filler content in our brackets file just to give us something to scroll down to and maybe under our h1 here. Still inside that column I'm gonna create a couple of paragraphs here with some Lorem ipsum text. And there goes our brackets tabbing problem again. I'm sure somebody out there knows a way to get around that. But that's good enough for now. Let's save that. Refresh our page. And now we have a little extra content. Maybe let's create some more. I'm going to copy these two paragraphs and just paste them a few times. Just so that we have something to scroll down to. Save that again. There we go. So now as we scroll down, after we create these animations of course, we'll see those animations come into play once the Scrollbar reaches the right height. So, we'll get started with that in the next lesson. Thank you for watching, and I'll see you then.

Back to the top