Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
143577 gravit designer landing page 400x277 v3 110717
  • Overview
  • Transcript

2.1 Getting Started

For the page we will be building in this course, we will be using the Bootstrap front-end framework. In this lesson, I will help you get your site started by building the basic HTML skeleton of the page.

2.1 Getting Started

Hello and welcome back. As I've mentioned before, we're going to be using the Bootstrap framework to give us kind of a head start on our HTML and CSS because it provides a lot of nice defaults. But it also gives us this really nice grid system that we can build our site around. So if you go to the Bootstrap website at GetBootstrap.com, you'll notice that right now at the time of this recording, Bootstrap 4 is still in Beta. So because of that, I'm still gonna use version 3. So on the Bootstrap homepage, if you click on the drop down menu here and go to version 3.3.7, that'll take us to the version that we're gonna be using in this course. Now if you click on the Download Bootstrap button here it gives us a couple of CDN links for Bootstrap. Here's the CSS file, here's the theme CSS file, which we're not gonna be worrying about here. And then here's the minified java script file for Bootstrap. Now if we scroll down a little further on this page, or if we come over here to the right. You'll see a link that says Basic template and if we click on that, it'll scroll us down to this HTML template here which includes Bootstrap as well as jQuery. Now the Bootstrap java script requires jQuery so we need to make sure that we include jQuery before we include Bootstrap and then up here near the top is the minified CSS file. Now this minified CSS file as you can see here is not using the CDN so we'll have to change that but I do wanna use this basic HTML as our starting point. So I'm just gonna copy that and then I'm gonna jump into my File Explorer and you'll notice I've got this project files folder open to a folder I've created called site001. So if you open up your project files folder that comes with this course, then once this video is over you'll see everything inside 01 or sorry, site001, that I'm gonna be adding to it. You'll notice that there's already a CSS folder and an images folder. And in the images folder we have a number of different assets that we're gonna be using in this course, and you'll notice there is this little license.pdf file which explains the license for these images. And then I'm gonna jump back out to our site001 folder. And in fact I'm gonna jump out to the project files folder and I'm gonna right-click on site001. And I'm gonna be using Visual Studio Code as my code editor in this course. Now you can use whatever you want. You can use Brackets if you prefer. I'm just gonna be using Code because it's kind of what I've been using lately. So I'm gonna open this with Code and that opens the entire folder for us, not just a single file. And I'm gonna drag this over, and you can see that our folder is open because we can now see our CSS and images folders here, and we can expand those out. There's nothing in our CSS folder yet. But inside our main folder here, I'm just gonna click on this icon to create a new file. Or if you're just creating your files in File Explorer, that's fine, just create a new text file. And I'm gonna call this index.html. And inside that index.html file, I'm just going to paste all of the code that we copied from Bootstrap. Now we're gonna have to change a couple of things because our CSS for Bootstrap and our JavaScript for Bootstrap are currently looking for local files. And I'm not going to store these files locally. Instead, I'm going to use the CDN files. So I'm gonna jump back into my browser here and go back up to the download link section. And I'm going to look for this Bootstrap CDN section here. And so here's our Bootstrap.min.css. This is the style sheet we need. So I'm gonna copy that whole link tag here and I'm just gonna replace the link tag that I've got right here. So I'm gonna take that and delete it. And then we'll just paste the one that we copied. And then we need to replace the script tag down here. So let's grab that one and delete it. And then we'll jump back in our browser and grab this script tag down here at the bottom, copy that and then we'll paste that here as well. So now we're pointing to an external site that's hosting our bootstrap files so that we don't need to worry about downloading them to our computer in order to get this to work. So now we can save our index.html file and if we right-click on index.html, I'm gonna click on Reveal in Explorer, and then I'm just going to double click on the index.html to open it up in Chrome. And I've got a Chrome set to full screen which is why we're just seeing the text by itself but at least we know that it's working now. We're not seeing any errors. If we hit F12 to open up our console, we can see that no errors are being thrown there. So everything looks good. And we can move forward. So that's our basic starting file that we're gonna be using and as we move forward, we're gonna take a top down approaching and start laying out the main sections and then we'll fill in the details later. So thank you for watching and I'll see you in the next lesson.

Back to the top