How to install Bootstrap 4 on a website using Visual Studio Code

This lesson is exclusive to members

Course contents
SECTION: 4
Project 2: Bike Repair Website 6:12:48
SECTION: 6
Project 4: Bootstrap Yogurt Website 3:35:39

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

128 lessons / 17 hours 5 projects Certificate of achievement

Overview

Hi there, my name is Daniel Scott and together we’re going to learn how to build professional responsive websites. which look good on mobiles, tablets and desktop screens.

We will build 4 sites together...
  • a simple but elegant restaurant website.
  • a bike repair website. 
  • a responsive portfolio website.
  • a Bootstrap website.  

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. We’ll use the world’s most popular (and free) web design tool called Visual Studio Code.

There are exercise files you can download and then work along with me. At the end of each video I have a downloadable version of where we are in the process so that you can compare your project with mine. This will enable you to see easily where you might have a problem.

We will delve into all the good stuff such as how to create your very own mobile burger menu from scratch learning some basic JavaScript and jQuery. 

 You will...
  • Learn how to work with responsive images and icons. and stunning full screen background images and probably one too many gradients. 
  • Learn how to create forms and to choose great fonts for your website. 
  • Learn how to work with Bootstrap 4 to easily add carousels, cards and complex looking menus. 
  • Setup a domain name with hosting so that your website is live on the internet for others to see.  

There are fun class projects for you to work on which will enable you to practice what you learn. By the end of this course you’ll have a great understanding of important web design topics like HTML5, CSS3, Flex box, Responsive design and Bootstrap.   

If that all sounds a little too fancy - don’t worry, this course is aimed at people new to web design and who have never coded before. We’ll start right at the beginning and work our way through step by step. 

Who am I? 

I’m Dan, and I’ve been building websites for about 15 years now. I am award winning instructor, and have won a MAX Master award for the last 2 years in a row at the prestigious Adobe Max conference.

Time to upgrade yourself?
Sign up for the course and let’s learn how to build responsive websites.

Course duration 16 hours 42 mins
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Downloads & Exercise files

Download Exercise Files Download Completed Files

Transcript

Hi there, in this video we are going to install Bootstrap4 on our website, using VS code, it's super simple, let's jump in now, and work it out. 

First up let's create our own new local folder. So we're done with Project3, thank you very much, now it's Bootstrap time. So we're going to go to 'File', we're going to go to 'Open', and we are going to, on our Desktop create a new local folder. In this case we're going to call it Project4, unsurprisingly. Let's click open, and let's close down the Welcome tab that opens up. Let's just tidy this up, let's get rid of that line, and let's create our first file. 

So we're going to create Index, we have been going 'File', 'New', that works fine. I'm going to show you, just right clicking in this area down here, you can go to 'New File', and this is a different way, I like it, nicer. So created my Index, it's open here, I'm going to twirl that open. I don't like that open whenever this thing opens, just while we're learning at least. HTML file needs all the basic stuff. So we need exclamation mark, '!', hit 'Return'. 

It will give us most of the doc type and all the bits we need. Now I'm going to introduce you to the Bootstrap website. It is called getbootstrap.com, this is the official kind of page and documentation. All sorts of goodness that will help us with Bootstrap. Now we're using Bootstrap4 at the moment. If you're watching this in the distance way future, and it's up to Bootstrap5 it's going to look completely different, but the essentials will probably be the same. So what we want is we want to get started. You can download it locally on your machine. 

We're going to do it a different way. We're going to go to 'Get Started', and basically it's going to say, you need to, well, kind of two groups of things. You need the CSS and the JavaScript. If you just plan on using say the framework, like the grid, remember, we talked about the grid, the structure? All you need is the CSS. If you don't plan on doing any of the cool drop down menus or Image sliders, you don't need this stuff down the bottom, but let's install it all together just in case we're going to use this later on. 

If you don't plan to use it don't put it in, because it's just going to add to the Load Time. So we're going to copy the CSS, and it tells you where to put it. Put it in a link in your Head. They've given you the code, ready to go. So I've copied it, in here it says, put it at the Head, and there it is there. So we've done this a few times with different CSS'. We've done it with Google Fonts, last we did was, that's all I can remember. The other thing to remember is that if you create your own Style sheet, which we'll do in a second, it needs to be above that, so this is at the top. Bootstrap, always at the top, and your style, just underneath. We don't have that just yet. 

Next chunk is this JavaScript here, there's three parts to it. Let's copy all three and let's paste it in. If you read through the documentation it says, or there's a good, like start a template example, you can just copy all this out and paste it into VS code as well, but it says, make sure it goes at the bottom, like JavaScript, like we discussed earlier on. So I'm just going to paste it down the bottom, just before the closing of the body. I'll put mine here, there we go. 

In here I'm going to put in some comments. So remember, 'Command /', or 'Control /' on a PC, and just add some notes. Just to double check the CSS is actually working, let's preview the page. Remember that stopped working down there, so just going to right click it and say, 'Open with Live Server'. It's going to open on the right screen today. Nothing there, so it's not working, but it's, let's see-- the way to check if it's working is just to throw in an H1, and type in 'Hello World'. And just check, you'll know the CSS is working, because it looks nothing like our regular old H1. Our old H1, looks like-- comment that out, that stuff. So with it in, looks like that; pretty. 

Now the one thing that VS code doesn't put in, in our kind of-- remember, we used the exclamation mark, to put in most of the information for the page, there's one thing that it suggests here, that's not part of that initial VS code. Remember, it's different, we looked at the different code editors, and how they implemented all this kind of Head tag. This is one here, the 'shrink-to-fit=no' is missing, so we've got all that, but we need a comma, and 'shrink-to-fit=no'. What does it do? Put it in first, it goes here, before the closing of the quotation marks. I think it disabled something, there's a weird setting in Safari, that messes with Bootstrap, so you can turn it off. It just means you're going to have consistency across different browsers. And that is it installed. 

Now the crazy thing is, if we look on our Desktop, is that in Project4 we have just the Index page. So remember, these are being loaded from our Content Delivery Network. So Bootstrap are controlling this, they have it on their server. Same with all of these, and they're just getting loaded as the page loads. You can download them from 'Get Bootstrap'. The only trouble is that the browser will have to load them from your site, when probably the person visiting your site has probably already downloaded the CDN version from another website, so won't have to again, and it will make the page load nice and fast. 

So what are these ones? jQuery, we've talked about that. So this is loading it from jQuery, we've done this before. It's a slightly different slim minimized version, same thing. This one here, proper. It's a really useful bit of JavaScript that gets used for positioning, things like Tool tips and Pop-up modals, and all that sort of like, notifications that appear inside websites. This one here is Bootstrap specific JavaScript. There's a bit getting used. And you my friends, have installed Bootstrap. 

Now we're going to carry on with the course. A couple of notes, is that, make sure the CSS for Bootstrap is above yours, so you'd put in now, link CSS. So you put yours underneath, and if you start making, we don't have that yet, so I'm going to get rid of it. You're going to make your own JavaScript. You need to make sure that the Script tag ends up underneath theirs. So theirs goes in first, then yours, afterwards, otherwise yours can start conflicting with theirs, and our business. Let's save it and move on to the next video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024