Strap on your boots, and let's get started with Bootstrap. I'm sure your fingers are itching to get your hands around Bootstrap. So, first step, go to the exercise instructions that follow this video in your Bootstrap course page on Coursera. And then in the instructions, you will see a link to this file Bootstrap4-starter.zip. Download the zip file to your computer. Also, the step-by-step instructions that are illustrated in this video will also be given in the exercise instructions that follow this video. There, you will have access to any of the code snippets that you need for this exercise. This would be the case for all the exercises in the future, too. So, should you need to get hold of the code snippets, that is where you will find them. Once you download the zip file, move that zip file to a convenient location on your computer. So, here, I have moved it to a folder named Coursera on my computer, and then I have the zip file with this long name there. Just unzip the file. Once you unzip the file, you will find a folder named Bootstrap4 created in your computer. Inside the Bootstrap4 folder, you will see another folder named conFusion, there. Go into the conFusion folder and you would see two files there, index.html and package.json file. Now, open a command window or a terminal and then move to this folder in your command window or terminal. At the command prompt, type npm install. Note that I already have the package.json file in there. So the package.json file is configured so that the lite-server development dependency would be installed if I type npm install. So, once you type npm install, you will see that the lite-server will be installed in your node_modules folder each. Once this is complete, open this folder in your favorite editor. Once you have the folder open in your editor, create a.gitignore file and then put node_modules into the gitignore file and save. So this is to ensure that when you do a gitcommit, the node_modules folder will not be committed. After that, it is time to go and fetch Bootstrap for use in our project. Before we fetch Bootstrap, let's do a commit of the current state of the file. So, do git init and initialize your git repository. Then you can check git status, and you would see that these files need to be committed, add all the files, gitcommit -m "Initial Setup". So this is the starting point of your folder at this moment. So, with this, your starting point of your web project has been now committed to git. Now you can set up this git to synchronize with an online repository, just like we talked about in the git exercises. So you can set up a repository either on Bitbucket or on Github and then synchronize this project to that git repository. Our next step is to go and fetch Bootstrap. To do that, add the prompt type npm install bootstrap@4.0.0 and also --save, and let the Bootstrap be installed. Once Bootstrap is installed, we realize that we also need to install its peer, which is jQuery as well as Popper.js. So let's go ahead and install both jQuery and Popper.js into this project folder. So, to do that, add the prompt type npm install jquery@3.3.1 and Popper.js@1.12.9 --save. Now, whenever I install any of the npm packages, I am explicitly specifying the version of the package that you should install. The reason for this is that I want to make sure that as you go through this exercise, all the steps will work correctly. So I am specifying the exact version of the npm modules to be installed. So, here, we are installing the jQuery version 3.3.1 and Popper.js version 1.12.9. Subsequently, also, I will specify the exact versions of the modules to be installed. So let's go ahead and install these. And once they are installed, we can go to the next step. Going back to our project folder, you would see that if you go into node_modules, you will see a folder in there named Bootstrap. And inside the folder named Bootstrap, you'll find a folder named dist. So, inside dist folder, you'll find two sub-folders named CSS and js. If you go into the CSS folder, you'll find a whole bunch of precompiled CSS files here. The one that is of interest to us at the start is Bootstrap min.css. That's the file that we are going to include into our index.html file in order to make use of Bootstrap in our project. Similarly, going to the js folder, you would see that there is a Bootstrap min.js file. We're going to include that also into our index.htm. So that'll be the next step that you will see me doing. Before we go to the next step, let's start up our lite-server so that we can see the changes that we make to the index.html immediately reflected into our web page in real time. So let's start up lite-servers. So, type the prompt type npm start, and then that should start up your lite-server. You can now see, on the screen, my editor on the left and the current version of the index.html page on the right. So, as you can see, I have already configured the index.html page with some content. This web page looks like the typical web page of a computer science professor. Let's now open the index.html page in our editor. And then in the head part of the index.html page, right before the title, I'm going to paste in a little bit of code. This code snippet is given to you in the instructions. So you can simply copy and paste this code snippet, and I'll walk you through what this code snippet is trying to do. You will notice that I have three meta tags here. The first one says charset="utf-8". So this is the unicode that is going to be used. The second line which says meta name="viewport", I'm going to come back and explain this particular line to you in the next lesson when we will look at responsive web design. Now, let me draw your attention to this particular line which says link rel="stylesheet", and then href. Note that I am specifying href as "node_modules/bootstrap/dist/css/bootstrap.min.css". So what I am specifying is that the bootstrap.min.css file, which contains the CSS classes corresponding to Bootstrap that we have downloaded using NPM to our node_modules folder, I'm going to include that into the head of my index.html page. So you need to include the CSS classes provided by Bootstrap. You also need to include the JavaScript classes provided by Bootstrap, which we're going to do at the bottom of this page. Going to the bottom of this page, note, just before the closing body tag, I'm going to paste in the code to include all the scripts there. So, to do that, I just paste in the three lines for the script to include the jQuery, Popper.js, and also the Bootstrap min.js. And note the order in which I have included this. So the Bootstrap is at the bottom. Then, since Bootstrap is dependent upon both jQuery and Popper in that order, so I will first input jQuery. And then after that, we input Popper, and then finally, Bootstrap min.js at the bottom of the index.html file. Now, this is included at the bottom of the page. Because when you are loading the page from a web server, you want the CSS classes to be loaded immediately so that as the page starts rendering, when the JavaScript is fetched, the JavaScript needs to execute in order to make changes to your page with the JavaScript code, and that will take a little bit of time. So you don't want the user to be waiting for the entire page to be loaded before they see something in their browser window. So that's why we normally load the JavaScript classes towards the end of our html page just before the body tech. After making these changes, let's save the file. Now, the reason why I am showing the index.html file in my editor and also the browser right next to it is, the moment you save the changes that you have made to the index.html file, note how the browser rendering of that file immediately updates and see Bootstrap already in action on the page. Right now, you'll see that your page is using Times New Roman to render all the content. The moment I save the web page, you notice that the fonts being used on your web page have changed. Now, your web page is set up to make use of the Bootstrap classes, and it is using Bootstraps default typography to render all the content. Bootstrap by default uses Helvetica Neue for the font. You can change the default font for bootstrap and so on, but that will be beyond the scope of our discussion right now. So, once you set up your index.html page and save it, you will immediately see Bootstrap coming into action in our web page. So this is how I'm going to keep illustrating, as we add various bootstraps, CSS classes, and components to our web page, how the rendering of it in our browser will keep changing. Now, obviously, the rendering of the page in our browser is still terrible. It's better than the typical computer science professors web page, but definitely not readable. We need to now bring into action the various CSS classes and the JavaScript components that our Bootstrap web UI framework provides in order to design our web page. So we will do that step by step as we go through this exercise. This may be a convenient time for you to do a git commit of the changes that you have made so that at the end of this exercise, your state of your project folder will be saved to your git repository. Going to my conFusion folder in another tab of my terminal window, if I type git status, I now see that my index.html file and the package of JSON file have been modified. So I'm going to do a commit. So, now, my status of the folder at the end of this exercise has been committed to my git repository. You can synchronize that with your online repository so that the state of your project will be saved at this point. With this, we complete our first Bootstrap exercise. You have now seen how we can configure Bootstrap to be used in our web project. As we proceed to the next few exercises, we're going to employee the Bootstrap classes to design our web pages.
