Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

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

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

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

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.

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.

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

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

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.

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

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.

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

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

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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."

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

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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

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.

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

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.

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.

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

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.

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.

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.

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.

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

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.

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.

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

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

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?

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.

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.

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

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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

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.

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

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.

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.

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.

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.

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

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

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

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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

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

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.

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.

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

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

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.

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

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

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

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.

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

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.

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

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.

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.

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.

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.

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.

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.

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."