Responsive Web Design Tutorial Html5 Css3 Bootstrap

Creating & testing our first HTML web page Preview 05:55

Hi everyone, this video we're going to make out very first web page. It's not going to be really exciting. It's going to say, "Hello World," and in a browser, it's going to show you 'Hello World!" The course gets lot more exciting, but you need to get the basics done, and that includes how to set up a folder for our website, how to create our first HTML page, and how to test it in a browser

What is HTML5 & CSS3 in web design Preview 08:24

All right, let's talk about what you need to download, and what you need to install. So downloading is simple, there are some exercise files. There'll be a link on the page here somewhere to download those. And they will be everything that we'll use, like images and text that we'll use throughout the course. So download those.

What is the head vs body vs html tag in a web design page Preview 09:01

All right, it is time to make an actual proper website. At the moment we've put in some html tags and some basic CSS, but that's not all we need. We need some bits and pieces, like the Job Type, the Head Tag, the Body Tag. So in this video we'll work out how to add those quickly, and what they all do

What is the title and description for in the head of a web page Preview 05:54

Hey there, this video we're going to learn what the Title is, in your Head Tag, and we're going to look at what a Description is. The very short version is, in Google search results, that is the title, that is the description. We need to add it to every page

What code editor should I be using VS Code Sublime Dreamweaver Atom Brackets Preview 03:40

All right, let's talk Code Editors. We've been using VS code so far, and we're going to continue for this course. Why? Because it's the most popular. Mainly because it's the most fashionable. There's some quirks to it that make it awesome, but there are people out there that argue that Sublime Text is the best, or Brackets is, or Dreamweaver is, or Atom, or Notepad++, there's lots of different editors

How to add structure to your website using Div Tags Preview 06:26

Hi there, this video we're going to build a yellow box, and then a pink box, we'll try to, at least. We're going to learn to do it using something called a Div Tag. It's a division of space, and it gives us the kind of boxes that we get to put a website inside of. All right, let's jump in, and learn.

What is a CSS Class how do we color a background with it Preview 09:05

Hi there, this video is all about a Class Selector. It's going to allow us to do this, where we style the yellow box differently from the pink box. We'll do the same thing with this P-tag. We'll make one P-tag different from the other one. That is the job of a CSS Class Selector. Let's jump in now, and learn how to make it work.

How to nested divs inside of each other in HTML & CSS Preview 05:03

Hi there, this video we're going to talk about Nesting Div Tags. What that means is we're going to end up doing this, where we have our original yellow and pink box, and we put other boxes inside of it. It's called Nesting. It's not that fancy

Class Project 01 – Div Tags Preview 05:24

Did he say, "Homework, in the last video?" I did. I think of it more of it like an awesome way of getting your skills better. So I'll set projects throughout the course. You'll find the details of them, I'll make a little video like this to explain it, but also, in your Exercise Files there'll be a folder called Class Projects

How to create a separate cascading style sheet in HTML & CSS Preview 09:07

Hi there, this video is all about separating our Style sheet, by taking it all out of the html, and we put it up here in the Head. I'm going to remove it and put it in its own document, and connect the two; it's pretty simple. Let's jump in and do it.

How to create an index html & style css Preview 12:16

All right, we're on to Project no. 1. So Project 0 is finished, that was our like, getting used to things and just learning the basics. Now we're going to actually start making some stuff. So we're going to build our structure, that’s our Project 1 structure

Test your website live using a Visual Studio Code extension Preview 08:44

Hey there, this video is going to do dual purpose. It's going to show us how to install what's called an Extension in VS code. And that extension is going to show us how to do live updates in a browser rather than going and hitting Refresh every time.

How to check your code for errors in HTML using VS Code Preview 11:01

Hey there, wouldn't it be nice if you made a typo, or you forgot to do something, or left the brackets off. That there was actually errors that appeared, and told you which line they were on, and how to fix them

What is HTML5 tag header nav section article main footer Preview 05:47

Hey there, this video is all about learning what The HTML5 Structure Tags are. They are things like Header, Main, Footer, and Nav, and you can come and see, they're pretty simple, they're just containers that we put stuff in. Exactly like a Div, except we give them special names, because they do special things

How to add html5 structure elements to your html website Preview 16:02

All right, let's start actually making the websites. Our first project is going to be this restaurant. So we're going to put in the structure for it, the Header, the Main, and the Nav. It's going to look something like this. This is going to be the kind of main structure that we're building in this video.

How to color the background of a webpage using the body html tag Preview 05:10

Hi there, in this video we're going to go from this plain old white background to this toxic green color. Basically all I'm going to show you, how to color the background using your HTML Body Tag, and then I go off in a bit of a tangent to discuss RGB colors and Hexadecimal colors, and how to use this little Color Slider picker thing

How to add an images to a website using HTML what is alt Preview 04:38

All right, this video is all about adding images to your HTML. It's pretty easy, let's jump in now and learn how to do it.

How to center an image img in HTML using CSS Preview 01:14

Hi there, this video we're going to take our image, that's default, sliding to the left, and change it to, into the middle, yay, it's easy, let's jump in and do it.

How to change the font style size & color of h1 p in HTML CSS Preview 14:11

Hello there, fellow web designers. This video we're going to go from this to this. We're moving some background, adding some text, styling the text, looking at font families. We're going to look at padding from the outsides and the top. We're going to look at the difference between padding and margin.

How to make a clickable link in html & change the color Preview 08:45

Good afternoon, it is time to talk about Hyperlinks. Sometimes that are called hrefs or h-tags. They are clickable links. Like this 'Make Reservation', we're going to add it, and when you click it, in this case it's going to open up a new tab. It's going to go to Google, because I haven't got a good place for it to go to, but that's what we're going to do.

How to add a stretching background image to a website Preview 05:38

Hi everyone, it's time to replace our boring gray background with our exciting background image. It's cool, kind of stretchy, fits in there, covers all the background, looks neat.

How make a div tag transparent using HTML & CSS in VS Code Preview 02:36

Hi everybody, we're going to look at making things see-through. Normally referred to encode as alpha transparency, opaqueness. You get what I mean, we're going to go from this to this, where it's a little bit see-through or a lot see-through. I'm going to show you now how to do it in CSS.

How to create a simple website text navigation in HTML & CSS Preview 06:43

Hi there, this video we're going to make this simple text navigation. We're actually going to build this, the mock-up. We're actually going to build, we're going to get this far in this video, anyway. So it's just kind of lumped to the top here. The alignment's not perfect yet, but it's in there, it's all linking. And we're going to learn some sweet new shortcuts along the way.

How to css style more than one class tag at a time compound classes Preview 07:02

Hi everyone, we're going to take our menu in this video, that looks currently like this to, this, padding either sides, some space between them, font sizes. To do all this we're going to have to learn what a Compound Selector is. It's pretty cool, and nice and simple. It's going to allow us to be fancier Web Designers.

Class Project 02 – Footer Preview 02:05

Surprise, it's homework time. You've got all the skills now to recreate this Footer. At the moment it looks like this in the browser, this green thing. Don't worry about this big map in the middle. We're going to do that in a little bit, but I want you to focus on, from the map down.

Class Project 02 - Footer COMPLETE Preview 04:48

Welcome back, how did the homework go? You're either sitting there smug, thinking, "Yeah, I did it, I'm a Web Designer," "I smashed out that Footer, and it looks great," or you're sitting there going, "You're not as good a teacher as you think you are, Dan." "It went badly, and this site doesn't work in my computer profile."

How to add a simple email button to a website using mailto in HTML Preview 03:49

Hi there, this video is all about adding a really simple email button to a website.

How to add Google Maps to your website using embed codes Preview 11:25

Hello, good looking people. This video, we're going to look at something called an Embed Code. We're going to start with this one here, see this, it's a map. It's on our website, it's interactive, it shows us where our restaurant is.

How to put your website live on the internet with your own domain Preview 16:50

Hey buddy, it's live me, and you. I felt like, this morning, I'm going to start the day, we're going to do a live video so that-- because I feel like we're being stuck behind the screen too long.

How to connect Visual Studio VS Code via sftp to host bluehost Preview 11:50

Hey there, in this video we are going to use VS code to connect directly to our host, rather than using kind of anything else, or using their website. They're all done within VS code. We're going to install this plugin called SFTP.

Setting up our new web design project & discussing our topics Preview 03:46

Hi everyone, this video is going to have two parts. We'll talk about the things that we're going to actually do, in this kind of next section of the course, and also we'll get the kind of course stuff set up, like the Remote Folder, and connecting the CSS.

What is a CSS reset zeroing eric meyers vs normalize Preview 15:22

Hi there, in this video we're going to discuss, things like Normalize, Reboot, HTML5, Dr. Eric Meyers' Reset. Basically they're all the same thing, they're called CSS Reset.

What is a min-height compared to height for a div tag Preview 07:01

This video has two parts, the main part is learning what Min-height is, instead of height. Then we're going to do some, just some housekeeping, we're going to add some structure to our page. We'll add a container and float in the middle, Header and Main, and these cards down the bottom.

Getting div tags onto one line using Flexbox in HTML & CSS Preview 05:23

How to get div tags onto one line using Flexbox in HTML & CSS

Add even space between div tags using flexbox with no outside margins Preview 04:42

All right, you're back, I'm back. This video, we're going to talk about spacing, in between our little boxes down here. Super easy, using Flexbox.

How to have 2 div tags of different sizes in the same row html css flexbox Preview 07:13

Hi there, in this video we are going to make Div Tags that are different sizes. We've done kind of evenly spaced things, nice and easy, but in this case I want this one to be like 2/3, and this to be 1/3 of this top main part of my website. It might not look this pretty, our versions kind of look like this, it's the same principle, 2/3, 1/3, using Flexbox, and display flicks.

How to vertically center content in a html div tag using flexbox css Preview 07:20

Hi there, this video is about centering vertically. Super easy using Flexbox. This text here is inside this larger purple color here, and it's centered vertically, same with this image, it's kind of hovering here in the middle. Let's jump in now and work out how to do it.

Class Project 3 - Flexbox Header Preview 02:51

All right, it is Class Project time again. I'm going to set some tasks now, and yeah, you can do them on your own, and in the next video I'll show you how I did it

Class Project 3 - Flexbox Header COMPLETE Preview 05:39

All right, remember this is what it's going to look like when we're finished. There's the logo on the left, the Nav on the right, it's not really doing much Nav-ey stuff, but you get what I mean. Just placeholder text for the moment.

How to make a full background gradient on a website CSS Preview 10:19

Hi there, this video we're going to learn how to add a Gradient to the background of a website.

How to change the default font type color size on a website using HTML & CSS Preview 04:19

Hi there, this video we're going to talk about the default font, and changing it, because by default it is black, and it's Times New Roman. We want to change that for every tag that's on the site, rather than doing it individually.

How to choose & install google fonts on your HTML CSS website Preview 12:44

All right, it's time to go from boring old Arial to Playfair and Roboto. You may not be as excited as I am, but it's painful, this class. Still in with the real basic fonts for a long time, now we get to do pretty fonts. We're going to use something called Google Fonts.

What is the difference between PX & EM & REM font sizes Preview 14:56

Hi everyone, this video we're going to talk about why you can't use pixels for font sizes anymore. We're going to use rems and ems. And yeah, we'll look at the differences between them, how to calculate them

Line height space between paragraphs aka space after Preview 04:33

Hi everyone, we're going to go from terrible line spacing, and all kind of bunched up to, ha, nice and breathable, and readable to match our mock-up. So we're going to learn something called Line Height. Then we're going to look at the space between paragraphs, the space after, but really it's just called Margin Bottom. Let's jump in now and work out how to do it.

When would you use an svg image instead of jpg or png in web design Preview 07:04

Hey there, this video is going to be talking about the differences between JPEGs, PNGs, and SVGs. We'll even mention GIFs at the end.

How to export svg png jpg from XD Photoshop Illustrator for website design Preview 11:00

Hi there, everyone, this video is going to show you how to export graphics from a bunch of Adobe software products. We're going to look at Illustrator, Adobe Photoshop, and Adobe XD.

Block level images verses background images in HTML & CSS Preview 08:32

Hey there, in this video we are going to put in the card background images. Similar to the backgrounds that we did in Project1. We're going to add a little bit of extra fanciness with background position. We're going to talk about the difference between Block Level Images, and these images that are set as CSS backgrounds.

Finishing up our cards Preview 09:10

In this video we are going to be finishing up our cards. We're going to add our P-tags, and do a bit of styling. It is the meat and potatoes of the course, I'm going to throw in some tips and tricks. We'll do some fun stuff with margins

How to add icons to your website using font awesome VS Code Preview 16:31

Hi there, this video we are going to put in icons, and you're like, "Hey, that just looks like the logo, or the image, how hard can this be, why is the video so long, Dan?" It's because we're going to use fonts to do icons.

How to make an entire DIV container box a clickable link Preview 09:55

Hi there, this video we are going to go through, and make every part of this card clickable. All in one go, rather than adding A-tags to every single separate element, the whole thing. it's going to be nice and clickable going into one place.

How to use box-sizing border-box from Flexbox in VS Code & web design Preview 06:19

Hi everyone, this video is about Box Sizing and Border Box, and its magical-ness

How to make a colored button in VS Code using HTML CSS Preview 07:46

In this video you will learn how to make a colored button in VS Code using HTML CSS

Why cant I add margin or padding to the top bottom of my a tag Inline vs block Preview 11:08

Hello frustrated people, we can't add margin to the top of our button. We've installed an A-tag and we want to push it, either from the top margin or the bottom margin, but it's not working. Why is it not working?

How to add rounded corners to a button or div tag in HTML & CSS Preview 04:17

Hi everyone, this video is going to be all about radiuses around the corners of buttons, but we'll do it to images and we'll do it to Div tags as well.

How to add a css drop shadow to a website button div tags and text fonts heading Preview 06:24

Hi everyone, this video is all about Drop Shadows. Drop shadows on text, we'll do it on buttons, we'll do it on big old Div-tags. It's a Drop shadow extravaganza. Let's jump in now and work out how to do it in CSS.

How to backup your website while you’re building Preview 05:00

Hey everyone, we're going to look at backing up your website, in case it all goes horribly wrong, you need to reset it, or you get hacked, or you hack it yourself by breaking it. There is an official way, where it gets done automatically every day

Reusing a button class in the navigation Preview 03:10

Hey buddy, nice simple one. We've made this lovely Button Style that we want to reuse for our navigation, to change it from this to this. So we're going to reuse it and we're going to add a little bit of extra just to space it out. It's pretty simple, let's jump in and do it.

Class Project 04 - Custom Button Preview 02:58

All right, you can tell by the name. You're like, "Oh no," it's another class project. Don't worry, this is fun. Me saying it doesn't make it true, but it's learning, we're going to learn.

Class Project 04 - Custom Button COMPLETE Preview 05:45

All right, how did it go? Did you do it, first of all, second of all, did it go well? Thumbs up. Did it go badly? Thumbs down, it's okay. We're going to work through how to do it now. Let's have a little look at VS code.

How to add a horizontal rule using HTML5 & CSS3 in VS Code Preview 03:51

Hey everyone, nice simple one. We got no line, now we've got a line. Super simple, we're going to add a border to the box of the heading, we'll talk about the HR tag as well. Let's jump into VS code and make it happen.

How to make div tags wrap onto separate lines using HTML5 CSS3 Flexbox Preview 12:14

In this video you will learn how to make div tags wrap onto separate lines using HTML5 CSS3 Flexbox

How to change hover color & animate my button in HTML & CSS Preview 03:33

In this video you will learn how change hover color & animate my button in HTML & CSS, we're going to use the Pseudo Hover. I'll show you how to do it now in VS code.

How to target specific tags in HTML to apply css to using Pseudo Classes Preview 09:31

Hi there, we're going to take Pseudo Classes to a next level. We're going to target this second P-tag in our testimonials. We're going to make it smaller, we're going to tab it in.

How to create a simple dropdown navigation menu button HTML CSS Preview 20:04

Hello you, are you ready for the trickiest bit of web-design we're going to do so far? It's a Drop Down menu, seems easy, and it is easy. A little bit of CSS that we need to make it work, but we'll do it step by step, together.

Adding our CSS dropdown menu to the roar bikes website Preview 14:50

Hello, good-looking Web Designer. We are going to basically take the techniques from the last video, instead of doing it in isolation. We're going to do it to our own site, where we've got a drop-down menu, and kind of integrating into it in an existing site.

Useful shortcuts tips tricks to speed workflow in VS Code Preview 13:28

Good morning, everyone. This video is going to be like a tips and tricks video. We're going to look at cool shortcuts that we haven't covered before, plus at the end of this video I'll throw in the ones we have covered, just so this is like one video with all the things in one little place.

How to add a large background image to a website design Preview 09:24

In this video we will learn how to add a large background image to a website design

How to connect link 2 pages in HTML web design Preview 10:42

All right, it's time for a Contact Us page, and we'll link it up with the Home Page. Then jump across using our navigation

How to make a simple php form work on your HTML website Preview 17:49

All right, to get started, there are two parts, to creating a form that sends you, the website owner, an email. The HTML side of stuff, which is reasonably easy, we'll learn that pretty quick. The harder part is, what to do with that information.

Adding placeholder text and labels to website form text fields in HTML Preview 05:46

How to add a large multi line text box in a HTML form Preview 02:18

Hi there, this video is going to show you how to put in a big Text box with multiple lines and placeholder text. If for the life of you, you can't find it, it's because it's not an input like these other ones. It's just called plain old Text Area, but let's work out how to do it together now in the video.

How to add check mark tick box to a HTML form Preview 03:04

Okay, it's time to make a Tick box, Check Mark box, Check box, whatever you want to call it. It's this thing, and the spoiler is, it's input Check box, but there are a few extra things to do for this one, like a value, and I'll show you how to that now in this video.

How to add a radio button round button with dot in middle to HTML form website Preview 06:07

Hi there, we're going to make a Radio button. It's this, like weird little dot thing that you can click one, but you can't click both of them the same time. It's an OR, one or the other, it's an input of radio, there it is there. There's a few little quirks to make it work. So let's jump in now and learn how to do it in VS code.

How to you make a drop down form menu for a website in HTML Preview 05:48

Hey buddy, this video is going to be about drop-down menus. We're going to pick one, get started with one, it's very exciting. The short version is, basically it's a tag called Select, and you have these option values, and that's what builds your drop-down menu.

How to style form text boxes & check boxes in a website HTML Preview 12:55

In this video you will learn how to style form text boxes & check boxes in a website HTML.

What does responsive website design mean Preview 04:17

Hey there, buddy, this video is the beginning of our next project. This is Project3, we're going to build a real quick, really just kind of simple portfolio site, and the big overarching thing for this one is going to be about this thing called Responsive Design. We'll talk about that in a second.

How to change a website layout size color at different sizes using media queries Preview 11:28

In this video you will learn how to change a website layout size color at different sizes using media queries

How to test your website on a tablet or mobile phone from Visual Studio Code Preview 06:00

All right, so we need to test this thing. So while we're working often it's just easier to test in a browser, like we've been doing, but we need to fake it a little bit more. We're going to emulate an iPhone and a tablet, and desktop through Chrome. We'll do that in a second.

How to change the layout of a responsive website for mobile vs desktop Preview 16:02

Hi there, in this video we are going to take our sweet new Media Query skills, along with some of our past Flexbox skills, to do this, go from Desktop view, where it's 3-across, you're ready for tablet, tablet, tablet to mobile1. Now this is proper responsiveness, where we start changing the structure of a site to make best use of the screen real estate available. Let's jump into VS code and work out how to do it.

How to turn things on and off for mobile tablet & desktop responsive websites Preview 06:03

Hi there, I can tell from your face that you wish this was a video about tuning things on and off depending on, if it was mobile or tablet. You're in luck my friend, on tablet view, we've got box one, two, all the way through to 10, all of them, but on desktop, because we've got three columns across, I only want nine. I want to turn 10 off, and it's gone, look. Then on mobile we want it to, box one, two, three, four, and then I turn the chunk of them off, and just turn 10 back on, just for kicks.

What is pixel density responsive images pixel ratio dppx in webdesign Preview 14:47

Hi there, this video is all about responsive images. The reason it's so long is because there are a few different methods. This video is just going to be an overview, showing you the pros and cons of each of them.

How to export responsive images for website from XD Photoshop Illustrator Preview 05:11

All right, I wanted to double back in this video to images. We've done images in an earlier video, but I want to kind of really highlight responsive images. Now that we understand what responsive is, we're going to need some different images

How to add responsive images to website using 100% width in HTML & CSS Preview 06:08

Hey there, this video is about responsive images. This particular one is working with the 100% width. We've kind of done it in the course and I thought, "Oh, we don't need to cover again," but I feel like we should. Just to really, get it in a good place, so you can find it later on in this course, and also just to confirm what we know, because we're kind of attacking it from a slightly different method here

How to use srcset to change images in HTML for responsive website Preview 10:15

Hi there, this video is going to cover Source Set. It is a way of dealing with responsive images.

How to add a css style to the first line of a p tag on a website Preview 11:18

Hey there, this video we're going to look at adding a CSS class, to make things bold for the first line only. Doesn't matter what's in the line, everything will become bold, you can do it for the first later, or the first line. It's a funny little bit of CSS. Let's work out how to do it now in VS code.

How to make the header footer full width but the inside centered Preview 05:36

Hi there, this video we're going to make a navigation along the top here that, part of it stretches all the way to the outside, but part of it is lined up, the logo in the navigation here line up with the structure of the rest of this website.

Class Project 05 – Header design Preview 03:12

All right, it is class project time again. We're going to take our ugly looking Heading and change the background color , we've got a different Heading up here, we just styled it. So the requirements are, like always, in our Exercise Files, in a folder called Class Projects, and open up that Word doc

Class Project 05 – Header design COMPLETE Preview 06:25

So how did it go? I wonder whether you got stuck, which bits were easy, how you went with your little research project. Yeah, I'll do it together with you now, and you can compare notes.

How to use a span tag or span class in HTML to change text Preview 10:32

Hi there, this video we are going to make this part of the single line bold, by leaving this not bold, using something called a Span Tag.

How to pin the navigation to the top of a website fixed nav Preview 03:17

Hi there, we are going to make our navigation fix to the top. So we're going to start with this where it scrolls up and disappears, and then we're going to do this, where it stays fixed, and stuff slides up underneath it. It's super easy to do, let's jump in and do it now in CSS.

How to make a simple responsive mobile menu using CSS only Preview 08:21

All right, we are going to make a Responsive Menu. It's not going to be the Burger drop-down menu. We'll do that in the next video. We're going to look at, like a nice, easy, simple simplistic CSS. No extra skills, based on what we've learnt so far.

What is Javascript vs Jquery in website web design Preview 06:35

Hello you, haven't seen you for a little while, face-to-face. I've been stuck behind that screen for a very long time. So this video is going to be talking about a few things. We'll talk about what JavaScript does, the difference between JavaScript, and then jQuery. We'll look at why we can't use CSS, like we have been doing so far, Then we'll look at alternatives for jQuery. There are different competing libraries. So let's jump in and talk about those.

How to make a burger menu 3 line mobile navigation for a website Preview 15:11

Hi there, in this video we are going to create a Mobile Nav Sandwich, that when you click it a mobile pops out, clicks back in when you click it again. We're going to use jQuery to do it all in VS code. Let's jump in now and work out how to do it.

How to switch a menu nav from desktop to mobile phone Preview 21:45

Hi there, this video we are going to implement our really simple Mobile Nav, that we built in a last video, into our full site, where it goes from this to Desktop, to Mobile, with a sweet little drop-down.

Overview of what Bootstrap 4 is in website design Preview 07:57

Hey buddies, it is time for Project4, this kind of next chunk. It is devoted to understanding Bootstrap. So this video is going to explain what Bootstrap is, hopefully. So Bootstrap is, think of it, the big word is Framework, and I'll tell you a story.

How to install Bootstrap 4 on a website using Visual Studio Code Preview 06:27

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.

Quick overview of how the Bootstrap Grid Layout works in VS Code Preview 10:49

Hello there, welcome to the overview for the Bootstrap Layout system. Also known as the Grid system, or maybe the structure. It is the boxes that make up our website. And a cool thing about it is, we're going to write just a tiny bit of code. A Container with some Div tags in it, basically no CSS at all. Just a background color.

Quick overview of how Bootstrap Components works in VS Code Preview 09:23

Hi there, in this video we are going to look at an overview of Bootstrap's components. The most exciting parts of Bootstrap

Quick overview of how Bootstrap CSS Styles works in VS Code Preview 08:20

Hi there, this video we are going to look at an overview of Bootstraps styles. So we've looked at its layout, we've looked at its components, now we're going to look at this third option for its styles, and all it is, is pre-made styles that Bootstrap have made for us, that we get to apply with simple Classes, that's going to do tedious things for us quickly.

How to customize the default Bootstrap 4 css styles Preview 13:51

Good morning, everyone. Today we are going to look at how to override Bootstrap styles.

How to use Bootstrap Layout Grid Experiment 1 Preview 10:20

How to make 100% header & uneven widths in Bootstrap 4 Preview 07:16

In this video you will learn how to make 100% header & uneven widths in Bootstrap 4

How to create uneven col widths in Bootstrap 4 Preview 07:27

Hi guys, the goal for this class is to fill out this top Navigation, or finish it off at least. At the moment they are evenly spaced. I want the Logo to be smaller than the Nav.

How to add padding & margins using Bootstrap 4 in VS Code Preview 12:03

Hi there, this video we're going to talk about spacing in Bootstrap. It is similar to what we've done before when we did margin top equals 16 pixels, margin bottom equals 16 pixels, that type of thing, except the syntax is a lot simplified. M for Margin, P for Padding, T for Top, B for Bottom, ah, it's very good. Let's work out how to apply it now in Bootstrap.

How to change layout of Bootstrap depending on mobile or desktop Preview 15:46

Hey there, in this video we are going to look at adjusting the Bootstrap Layout or the Grid, depending on the different device size.

How to turn things on & off on your website using Bootstrap 4 Preview 05:30

Hey there, in this video we are going to show you how to turn boxes on and off using Bootstrap4.

How to re-create the Bootstrap media queries in your own CSS Preview 04:40

Hello there, in this video we're going to recreate all the Media Queries that Bootstrap use, in our own CSS, that we can do our own little tweaks, because Bootstrap has some pre-defined ones.

How to use Google Chrome Inspect - Removing Overriding Bootstrap styles Preview 12:40

In this video you will learn how to use Google Chrome inspect and how to remove overriding bootstrap styles

How to add shadows to text & boxes in Bootstrap 4 Preview 07:06

Hi there, this video we are going to add shadows to text & boxes in Bootstrap 4

How to change the default Bootstrap 4 buttons size & color Preview 06:16

How to make images responsive stretchy in Bootstrap 4 Preview 09:34

In this video we will learn how to change the default Bootstrap 4 buttons size & color

How to center text & div tags in a Bootstrap 4 website Preview 04:16

Hello you, in this video we're going to show you how to go, from Left Aligned by default, down to our mobile device, where it's nice and centered. We're going to add some Padding to the Button, because at the moment it's jammed up real close. This is what we're going to make. All right, let's get started.

How to customize the website navbar in bootstrap 4 Preview 07:29

In this video you will learn How to customize the website navbar in bootstrap 4

Add your own logo to the bootstrap 4 website navigation menu Preview 03:58

Hello there, we are going to take our boring Navbar text and turn it into a little bit gross logo. So we work out how to do that now in Bootstrap4, using our Nav and some cool Nav Brand.

How to change the default styles for Bootstrap 4 nav Preview 12:12

Hi there, in this video we're going to change the default styles for Bootstrap 4 nav

How to add a sticky fixed bootstrap 4 navigation to your website design Preview 04:41

Adding a full col image in bootstrap 4 & color the background of col Preview 07:56

Hi there, in this video we're going to make this Founder Message. On the left hand side here we've got an image, which is going to help us kind of recapture our knowledge of responsive images, which we did quite a while ago, I'm going to recap that.

How to add a border & rounded corners to a box in Bootstrap Preview 04:20

Hi there, in this video we are going to look at adding borders. We're going to put a black border around it. We're going to add rounded corners on one side, square corners on the other. It's a border and rounded corner extravaganza.

How to edit Bootstrap carousel off for mobile timing fade Preview 05:13

Hello there, in this video we are going to mess around with our Carousel. Obviously we're messing with the timing because it is flying. We're also messing around with the transition. So you can see it kind of fading, rather than sliding. So let's jump in and work out what we're doing.

How to put Bootstrap cards on one line using card groups decks & columns Preview 03:29

Hello there, we're going to take our cards that are all kind of stacked on top of each other, and make them side by side using Card Groups, Card Decks, and Card Columns. All right, let's do it.

How to add a drop shadow to a box or card in Bootstrap 4 Preview 02:25

Hi there, in this video we are going to add Drop Shadows to our Cards. You can kind of see it pointing out the back there. We're going to add some Padding to the top and the bottom.

How to make a div tag a giant clickable link in Bootstrap 4 Preview 04:02

All right, you might have been asking for the last, like 30 videos, are we there yet? We are there finally. Got one more little thing to do. We are going to style these blue Primary buttons down the bottom. We're going to make them this nice green color. Let's jump in and work out how to do it now in Bootstrap and VS Code.

What next in our web design essentials course Preview 06:32

Holy smoke, you made it to the end. It was a long course, I know, and congratulations to you. I bet you, all your friends and colleagues, or whoever, classmates, have probably been watching Netflix, while you've being struggling through this course, with a guy, with a Kiwi accent. Welcome to the end though, and you should like, don't take it for granted, you probably don't, but you should walk around the rest of week, the rest of the month, head held high, "I upskilled myself, and I am a pretty good Starter Web Designer."