Quick overview of how Bootstrap Components works in VS Code
Daniel Walter Scott
Lesson Info
100. Quick overview of how Bootstrap Components works in VS Code
Lessons
How This Class is Structured
01:41 2What to Download
02:57 3Creating Our First Webpage
05:55 4What is HTML5 & CSS3
08:24 5Head vs. Body vs. Html Tag
09:01 6Title & Description
05:54What Code Editor Should I Use
02:42 8Using Diy Tags
06:26 9What is a CSS Class
09:05 10How to Create Nested Divs
05:03 11Class Project
05:24 12External CSS
09:07 13Creating Our Index Style Pages
12:16 14Testing Your Website
08:47 15Check Your Code For Errors
11:01 16What are HTML5 Structure Tags
05:47 17Add HTML5 structure elements
16:02 18How to Set the Color of the Background
05:10 19Adding Images to a Website
04:38 20How to Center an Image
01:14 21Change the Font Size & Color
14:11 22Make a Clickable Link
08:45 23Stretching Background Image
05:38 24Making a Div Tag Transparent
02:36 25Simple Website Text Navigation
06:43 26CSS Compound Classes
07:02 27Class Project 02
02:05 28Class Project 02 - COMPLETE
04:48 29Add an Email Button to a Website
03:49 30Add Google Maps to Your Website
11:25 31Making a Website Live
16:50 32Uploading via SFTP
11:50 33Setting Up Our New Project
03:46 34CSS Reset
15:22 35Min-height vs. Height
07:01 36Div Tags Onto One Line
05:23 37Getting div tags onto one line using Flexbox in HTML & CSS
05:23 38Evenly Spaced Div Tags
04:42 39Two Div Tags of Different Sizes
07:13 40Vertically Center Content
07:20 41Class Project 3
02:51 42Class Project 3 - COMPLETE
05:39 43Change Default Fonts
04:19 44Installing Google Fonts
12:44 45What are PX & EM & REM
14:56 46Change Line Height
04:33 47SVG vs. JPG vs. PNG
07:04 48How to Create a SVG, JPG, or PNG
11:00 49Block Images vs. Background Images
08:32 50Finishing Up Our Cards
09:10 51Icons via Font Awesome
16:31 52Making a Div Container Clickable
09:55 53Box-sizing & Border-box
06:19 54How to Make A Colored Button
07:46 55Why Can't I Add Margin or Paddding
11:08 56Rounded Corners
04:17 57Drop Shadows
06:24 58Backup Your Website
05:00 59Reusing a Button Class
03:10 60Class Project 04
02:58 61Class Project 04 -COMPLETE
05:45 62Adding a Horizontal Rule
03:51 63Make Divs Wrap Onto Separate Lines
12:14 64Hover Color & Animating a Button
03:33 65Pseudo Classes
09:31 66Simple Dropdown Navigation
20:04 67Adding Our Dropdown to the Website
14:50 68Useful Shortcuts and Tips in VS Code
13:28 69Large Background Image
09:24 70How to Connect 2 Pages
10:42 71Simple PHP Form Work
17:49 72Placeholder Form Text
05:46 73Multi Line Form Text Box
02:18 74Form Check Marks
03:04 75Form Radio Button
06:07 76Form Drop Down Menu
05:48 77How to Style Your Form
12:55 78What does responsive website design mean
04:17 79How to change a website layout size color when at different sizes using media queries
11:28 80How to test your website on a tablet or mobile phone from Visual Studio Code
06:00 81How to change the layout of a responsive website for mobile vs desktop
16:02 82How to turn things on and off for mobile tablet & desktop responsive websites
06:03 83What is pixel density responsive images pixel ratio dp px in webdesign
14:47 84How to export responsive images for website from XD Photoshop Illustrator
05:11 85How to add responsive images to website using 100% width in HTML & CSS
06:08 86How to use srcset to change images in HTML for responsive website
10:15 87How to add a css style to the first line of a p tag on a website (
11:18 88How to make the header footer full width but the inside centered
05:36 89Class Project 05 – Header design
03:12 90Class Project 05 – Header design COMPLETE
06:25 91How to use a span tag or span class in HTML to change text
10:32 92How to pin the navigation to the top of a website fixed nav
03:17 93How to make a simple responsive mobile menu using CSS only
08:21 94What is Javascript vs Jquery in website web design
06:35 95How to make a burger menu 3 line mobile navigation for a website
15:11 96How to switch a menu nav from desktop to mobile phone
21:45 97Overview of what Bootstrap 4 is in website design
07:57 98How to install Bootstrap 4 on a website using Visual Studio Code
06:27 99Quick overview of how the Bootstrap Grid Layout works in VS Code
10:49 100Quick overview of how Bootstrap Components works in VS Code
09:23 101Quick overview of how Bootstrap CSS Styles works in VS Code
08:20 102How to customize the default Bootstrap 4 css styles
13:51 103How to use Bootstrap Layout Grid Experiment 1
10:20 104How to make 100% header & uneven widths in Bootstrap 4
07:16 105How to create uneven col widths in Bootstrap 4
07:27 106How to add padding & margins using Bootstrap 4 in VS Code
12:03 107How to change layout of Bootstrap depending on mobile or desktop
15:46 108How to turn things on & off on your website using Bootstrap 4
05:30 109Google Chrome Inspect
12:40 110Add Shadows to Text & Boxes
07:06 111Change the Default Buttons
06:16 112Responsive Images in Bootstrap 4
09:34 113How to Center Text & Div Tags
04:16 114Customize the Bootstrap Navbar
07:29 115Add Your Own Logo
03:58 116Change the Default Nav Styles
12:12 117Fix the Navigation to the Top
04:41 118Col Images & Col Background
07:56 119Bootstrap Border & Rounded Corners
04:20 120Bootstrap 4 Carousels
05:13 121Card Groups
03:29 122Drop Shadows On Bootstrap Cards
02:25 123Clickable Boxes in Bootstrap 4
04:02 124Final Quiz
Lesson Info
Quick overview of how Bootstrap Components works in VS Code
Hi there in this video, we are going to look at an overview of bootstraps components. The most exciting parts of bootstrap. Watch sliders move. I look at this, we've got a really easy jumbotron, drop down menus, the menu changes to mobile when it's smaller. We've got these cards going and literally we do this in this video, look at the length of it, it's kind of about what, 12 minutes I'm guessing. And we've done all of this real quick components are amazing. Let's jump in and get working. Okay. We are finished with our overview of layout. Let's close it down. Let's go back to the index page and what we're gonna do is we're gonna throw in everything. We're going to get rid of our H1 and we're going to throw in all the components that we are going to use to build out our project. For the first thing I want to do though is add our container. So let's go dot container member has to be spelled exactly right so that it matches bootstraps kind of use of container and inside of this. We're go...
nna throw in our components. Now we're talking about components briefly that there are things like image sliders and navigations. Let's have a little look at where to get them from. So in bootstrap, we're going to go to documentation, We're going to spend a lot of this kind of section of the course and we kind of looked at layout. Okay, We looked at components. Next. So click on that, there's lots in here, exciting cool stuff and we're not gonna go through each of them right now. We're just throwing the stuff that we're going to use. We're going to start with a knave bar, not knaves, knaves bar. Okay. And then here basically you can scroll down and just look for the one you want. Okay. That one has. I think it's the kitchen sink version. It's got every single thing. Okay. Lots of different options. Just with text. Just with navigation. We'll grab the kitchen sink version right at the top here. Okay, so it's the first one. So just underneath here let's grab this click copy. There's a bit of code that goes on in the html. But watch this. Let's go to V. S. Code inside of a container. Let's paste it. Let's save it, preview it in a browser, turn it off, turn it back on again. Let's have a little look and look at that. We have got a navigation and a drop. Remember we had to make a navigation. Okay? There's a search bar that doesn't work. Okay. Button with Hovers, all this stuff is just ready to go now in your html. We're not gonna do it exactly all now but you can go through and say instead of the word home we can call this one the damn button. You can see we've got a damn button. We're gonna have to start messing with the layout. Okay? We're removing and adding things later on. But I guess I want to excite you with what bootstrap can do very quickly Now. The next thing we want to add is we want to add something that does the dropdown work in this one. It does because we haven't added in our index page. We did. That's why it's working. Okay. We remember we added this Js code here or this. Sorry. Um, yes, Javascript code in our little throwaway over you layout. We only added the CSS and we didn't put in the javascript this index page. If you are just following along with a throwaway file, you've got to make sure the CSS is in the head and all the javascript is in the bottom part here. That's why all these components are working. So that is my container. That is going to be my novel. I'm going to add a little bit of comments. This is the navigation. Cool. Next thing I want to add is going to be my carousel. Karros L was that close? Anyway, let's go and find the carousel. So if we want to carousel, we look under components and we find carousel. Okay, same sort of thing. Have a look through some of the examples. That one is just a plain old slider. This one has some arrows where you can click through it. Okay, and decide which one you want. Always got little buttons on here. Okay, This one's got texts and all. Okay, so decide on which one you want. I'm going to go for this first one because it matches my design. I'm gonna click copy of the code underneath. Okay. And then just paste it into this code you like? It can't be that easy again. Yes, it is. Friends. What kind of it's it's looking for images. Okay, a bunch of images that aren't there? So we're gonna grab some images from our exercise files and throw them in. Okay, So we're gonna go to exercise files, we're gonna look at project for now, our little yogurt project. Okay. And images instead of copying them all over one x one, as we've been working and you're like why doesn't he just copy them all over at a single go. That's what I'm going to do now. I'm gonna grab the images folder and copy that. Okay, go to my desktop, find my project for I'm going to paste it in here. The whole thing, all the images for the project. Okay. And so now what we can say instead of loading this image called dot dot dot we're gonna say images and product one. I can't remember which one we want to be using. No yogurt one. So Yogurts one. Perfect. And let's do this. Actually we do both at the same time holding option on a mac. Here we go, holding option on the Mac and clicking twice on a pc. It is built to get the multiple cursor this type of images. We're gonna put Yogurt in twice. Change just 123 now, definitely go through and change your all text to describe the image. And let's have a little look now. Now. It's that easy wait for it. Does it have automatic scroll, wait for it? We're all waiting dan. There it is. There are little errors there, but they're white, you can't see them, we'll have to change the color of those. Can you see them flashing there? But you get what I mean? Look how cool that is an easy it was to implement, there's an auto timer going, it's j query goodness. Without us doing any J query. So basically it's a snippet of code we paste in and we can edit later on with our Mad CSS and html skills. Making us look super good. Super quickly. Alright, next one above the carousel. Forgot I want the jumbotron. Okay, so just above it, I'm going to put in my CSS and you're like the what? The jumbotron not being from America, I had to google where the jumbotron was and makes perfect sense now. Okay, that's a big giant billboard that goes in the middle. So let's have a look for jumbotron. It's your like hero image. It's your welcome to the world. Here's what we do Buy our stuff. Okay, so find the one that works for you. This top Winners. Okay. I'm going to copy it and paste it jumbotrons in. You can see H one, I don't know how to do that. There's some classes that are special for Bootstrap, which we'll learn as we go. But the cool thing about them is when they've been implemented, let's have a little look, you can see it is nice, the buttons are nice, there's a nice little hover there and when I break it down to get smaller, okay, it breaks down nicely. Oh and the most exciting, but I almost missed what's the navigation ready? You're like, oh that is way more easy than Dan's J. Query course video that he did, it's like 25 minutes long, but we need to know so that we can make adjustments and fix it if it's broke. And for the people there are lots of people who won't use bootstrap, you're like why wouldn't you? It's because I want to customize everything, but I do get excited at the stage when it's nice and easy and we start throwing things up and I'm like yeah, I should use bootstrap more. Alright, next project, definitely. Bootstrap, let's jump back into V. S. Code, let's say one more thing for this kind of like introduction, we're kind of half building the site. Okay, so I'm gonna add something called a card, okay, cards, plural in this case. Okay, and let's have a look, Bootstrap, I'm gonna make it bigger, we can see all the bits and I want to add one of these cards, okay think of them as tiles. Just nice and easy reusable thing and a copy of them and I'm gonna throw three of them in. Okay, return between them all. They're all doing something weird from my returns. I'm gonna make sure they all line up by selecting them, go to format selection. Nice. Let's have a look at the cards in our document down the bottom here, they're stacking on top of each other. The images are a little bit broken, we might as well switch them out right now. So in here while we're here, I am going to he's my multiple cursor, he's sick of me giving the shortcut now it is option on Mac on a pc. Kind of like it Yeah, make a dream of the shortcuts. All right then we'll change this one too two, three. Alright, let's have a look at it and you can start to see like our mock up is here. Okay, so navigation and some drop down. We're gonna make it simple, we're gonna it's easy to remove things, starting with the kitchen sink menu and kind of going paring it back. This is going to be my jumbotron, so I'm gonna have to style this quite heavily this, I'm going to make custom Okay, this thing here is my little slider thing goes left and right, okay, but you can see how quickly we implemented that and these little cards down the bottom, we've got them pretty close to start with. Okay, so bootstraps. Just a nice quick way of throwing together a site. So all of the kind of functionality is built in ready to go and you can just change it. Alright, components is probably the most exciting part of bootstrap. Okay. And we're not going to go through all of them now. Okay. But you can start having a little look through all the different things that you can implement. The cool thing about it is because they do the hard work, you can kind of sell it on to your client as a feature knowing that you can use bootstrap to do a lot of the hard work. All right, So that's the brief overview of Bootstraps components. Let's look at the last bit. So we've done an overview of the layout, then we looked at this overview of the components, we've got one more to go. We'll look at the styles
Class Materials
Ratings and Reviews
Viwosoft Technologies
Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!
Student Work
Related Classes
Branding