Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
That way, all of the links that you're going to include in the HTML will work correctly. It'll be referencing the right CSS files, referencing image files. Referencing fonts and so forth. What I'd like for you to do is, here on your desktop, open up your exercise files folder. So you can see all those files. Open up your bootstrap folder so you can see all of that. We're going to go to chapter one here. We're going to go to folder number four, and you'll find a document here called index. I'd like you to copy that, Control or Command C to copy, and Control or Command V to paste into the other window.
And that will be our starting HTML document. I am also going to open up this document here called additional head code, I will tell you what that is in just a moment, but since I have this open I am going to go ahead and open that document also. And then I can go ahead and close these two windows. Now when I go to Sublime Text. And I can double click on my index.html, which will show up over here in my left column and you'll see that this is my starting HTML for the whole document. Looks great, right? Okay, so now that we got this in place, we're ready to start linking up and including various pieces of HTML that we need in order to make this document works with Bootstrap.
The first thing we're going to add is from that little text file I just had you open. An it's called additional head code. An what you'll see here is, this little line of code about meta name, viewport. Go ahead an copy that line of code, and we're going to paste it right here into our HTML document. I'm going to paste it right after the meta character set item that I have here. It doesn't really matter what order these tags go in in your HTML document. So, this particular meta tag you may have never seen before, but it's a fairly common meta tag that you include when you're working with Responsive Design.
And then the purpose of this tag is to scale screens correctly. No matter whether you're working with a very large screen or a small screen. The web page is designed to scale to fit those particular devices. That's what that line of code is doing. So, it's good practice to include that. The next thing I need to add is a link to my style sheet. So here, just after my title tag, I'm going to go ahead and include my declaration here for my style sheets. And the way that this is going to look is as follows. It's link href equals CSS/bootstrap.min.CSS.
And then Rel equals style sheet. And you can go ahead and close that tag. So this particular line of code, of course, is calling in the minified version of my Bootstrap style sheet. You don't need to link to both bootstrap.css and bootstrap.min.css. They are, in fact, the same document. The dot min, of course. Is just a smaller file size because the spaces and tabs have been removed. We only need to link to this one document. Then, because later in this course we're going to be linking to a custom style sheet where we'll add all kinds of custom styles.
We'll go ahead and add that code right now as well. So we'll say link href equals css/custom.css. And rel equals stylesheet again. Alright. So that's calling, now, a style sheet called custom.CSS inside of the CSS folder. Well, we don't have that style sheet yet. So I suppose we ought to go ahead and create that. So to create that style sheet, we'll just go to File>New File. And Sublime Text will give us a completely blank file. I'm just going to put a comment up here at the top that says, this is a custom CSS stylesheet.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.