Layout principles - Bootstrap Tutorial

- [Instructor] Before we get started there's a couple of things we need to go over. Although this course walks you through building a series of layouts, it's not meant to be a comprehensive description of each of the techniques. If you want to learn more about each Bootstrap component and some of the options and detail then check out one of my other courses Bootstrap 4 Essential Training. I'm assuming you've built other sites before and are familiar with the basic principles of HTML, CSS as well as some JavaScript and JQuery. Now I cover a very specific approach to how I build websites in this course. So let's go over some of those concepts. One of the things that I do in creating websites is to use HTML tags in a particular way so let's talk about that. For example I like to use the article tag for a standalone element. That means that items that can stand on their own receive an article tag. This is sort of like what you refer to as an article of clothing and an entire outfit. In my single page layouts each layout receives a separate article tag. Now whenever I need to place a series of items inside other element I usually use section tags. In addition to that I use divs when I'm creating code that is strictly for layout. So you'll see a lot of Bootstrap Grid classes in different div tabs. Let's talk about how I use classes and Ids in a Bootstrap layout. Ids are required for some Bootstrap components and I also use them to create things that I can target with JavaScript. They identify each individual quote on quote page in my single page layout so that different sections or layouts that you're gonna see are what I call quote on quote pages and layouts and so each one of those gets an Id so that I can target them through links. I always place custom class names first and I use classes in a layout whenever I want to create an element that I may want to style in CSS as a whole. So you'll see names for classes that start with keywords like title, layout, image and others. If I'm using Bootstrap classes then I place them after my own custom classes. It makes things easier to find them in the long run. In addition to that let's talk about how you can get access to all the files in this project. All of the files for this course are freely available for all users at this GitHub repo. Now in GitHub you'll see that the project is organized into different branches. Each branch corresponds to a video in the course. They are named according to the video they correspond to. If you see a branch name like 01_03 that means that the branch corresponds to the first chapter and refers to the third video in that chapter. Also if you see a b at the end of the name those are how the files look at the beginning of each video. And if you see an e at the end of a name it means that's how the files look at the end of the video. In this project we'll be working with three different files. All those files will be inside this builds folder. You can see the index.html file right here and if we click on CSS you'll see the style.css document there and inside the js folder you'll see the script.js file. Those are the three only files that change throughout this course. The master branch has the finished version of the project and you can download the finished version of the files by clicking on this download ZIP button. For advanced users the repo includes a server you can run for live reloads. You can follow the instructions in the repo for installation and if you want to you can even download all the branches. I've recorded a special course that shows you the advanced features of GitHub and how to download and work with multiple branches from a course. You can take a look at it at this url. So if you're comfortable with these requirements let's get started working on the project.