Responsive Web Design Essentials - HTML5 CSS3 Bootstrap
4.7 (1,475 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
5,986 students enrolled

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

The best course for learning the basics of HTML5 and CSS3 from scratch. Including 5 projects, perfect for beginners.
Bestseller
4.7 (1,475 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
5,986 students enrolled
Last updated 5/2020
English
English
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 16.5 hours on-demand video
  • 123 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Learn how to work with responsive images and icons. and stunning full screen background images and probably one too many gradients.
  • Learn how to create forms and to choose great fonts for your website.
  • Learn how to work with Bootstrap 4 to easily add carousels, cards and complex looking menus.
  • Setup a domain name with hosting so that your website is live on the internet for others to see.
Requirements
  • An internet connection is necessary
  • No Web Design or coding knowledge is necessary
  • A text/code editor (preferably Visual Studio Code which is free and made by Microsoft)
  • Having Google Chrome installed will be necessary
Description

Hi there, my name is Daniel Scott and together we’re going to learn how to build professional responsive websites. which look good on mobiles, tablets and desktop screens.

We will build 4 sites together...

  • a simple but elegant restaurant website.

  • a bike repair website.

  • a responsive portfolio website.

  • a Bootstrap website.

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. We’ll use the world’s most popular (and free) web design tool called Visual Studio Code.

There are exercise files you can download and then work along with me. At the end of each video I have a downloadable version of where we are in the process so that you can compare your project with mine. This will enable you to see easily where you might have a problem.

We will delve into all the good stuff such as how to create your very own mobile burger menu from scratch learning some basic JavaScript and jQuery.

You will...

  • Learn how to work with responsive images and icons. and stunning full screen background images and probably one too many gradients.

  • Learn how to create forms and to choose great fonts for your website.

  • Learn how to work with Bootstrap 4 to easily add carousels, cards and complex looking menus.

  • Setup a domain name with hosting so that your website is live on the internet for others to see.

There are fun class projects for you to work on which will enable you to practice what you learn. By the end of this course you’ll have a great understanding of important web design topics like HTML5, CSS3, Flex box, Responsive design and Bootstrap.

If that all sounds a little too fancy - don’t worry, this course is aimed at people new to web design and who have never coded before. We’ll start right at the beginning and work our way through step by step.

Who am I?

I’m Dan, and I’ve been building websites for about 15 years now. I am award winning instructor, and have won a MAX Master award for the last 2 years in a row at the prestigious Adobe Max conference.

Time to upgrade yourself?

Sign up for the course and let’s learn how to build responsive websites.

Who this course is for:
  • This course is for people who want to start getting a well rounded understanding of website design
  • Entrepreneurs
  • This course is suited for people that want to learn the basics of website design
  • This course is suited for people that don't have any experience with coding a website
Course content
Expand all 126 lectures 16:42:51
+ Getting Started
3 lectures 07:26

Hi there, welcome to the course. This video, I want to talk about how this course is structured. So it's broken into five parts. We'll start at the beginning with just a real basic introduction to HTML and CSS. Then we'll start our very first project.

Preview 01:41

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.

Preview 02:57
+ Introduction to HTML & CSS
10 lectures 01:07:59

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

Preview 05:55

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.

Preview 08:24

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 head vs body vs html tag in a web design page
09:01

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 is the title and description for in the head of a web page
05:54

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

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

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.

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

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.

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

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

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

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

Class Project 01 – Div Tags
05:24

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 a separate cascading style sheet in HTML & CSS
09:07
+ Project 1: Restaurant Website
20 lectures 02:40:34

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

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

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.

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

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

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

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

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

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 add html5 structure elements to your html website
16:02

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 color the background of a webpage using the body html tag
05:10

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 add an images to a website using HTML what is alt
04:38

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 center an image img in HTML using CSS
01:14

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 change the font style size & color of h1 p in HTML CSS
14:11

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 make a clickable link in html & change the color
08:45

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 to add a stretching background image to a website
05:38

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 make a div tag transparent using HTML & CSS in VS Code
02:36

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 create a simple website text navigation in HTML & CSS
06:43

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.

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

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
02:05

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

Class Project 02 - Footer COMPLETE
04:48

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

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

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 add Google Maps to your website using embed codes
11:25

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 put your website live on the internet with your own domain
16: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.

How to connect Visual Studio VS Code via sftp to host bluehost
11:50
+ Project 2: Bike Repair Website
45 lectures 06:12:31

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.

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

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 CSS reset zeroing eric meyers vs normalize
15:22

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.

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

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

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

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.

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

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 have 2 div tags of different sizes in the same row html css flexbox
07:13

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.

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

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
02:51

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.

Class Project 3 - Flexbox Header COMPLETE
05:39

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

How to make a full background gradient on a website CSS
10: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 change the default font type color size on a website using HTML & CSS
04:19

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.

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

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

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

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.

Line height space between paragraphs aka space after
04:33

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.

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

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.

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

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.

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

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

Finishing up our cards
09:10

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 add icons to your website using font awesome VS Code
16:31

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 make an entire DIV container box a clickable link
09:55

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

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

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

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

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?

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

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 rounded corners to a button or div tag in HTML & CSS
04:17

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 add a css drop shadow to a website button div tags and text fonts heading
06:24

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

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

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.

Reusing a button class in the navigation
03:10

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
02:58

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.

Class Project 04 - Custom Button COMPLETE
05:45

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 add a horizontal rule using HTML5 & CSS3 in VS Code
03:51

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

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

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 change hover color & animate my button in HTML & CSS
03:33

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 target specific tags in HTML to apply css to using Pseudo Classes
09:31

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.

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

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.

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

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.

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

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

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

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 connect link 2 pages in HTML web design
10:42

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.

How to make a simple php form work on your HTML website
17:49
Adding placeholder text and labels to website form text fields in HTML
05:46

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 a large multi line text box in a HTML form
02:18

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 check mark tick box to a HTML form
03:04

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 add a radio button round button with dot in middle to HTML form website
06:07

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 you make a drop down form menu for a website in HTML
05:48

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

How to style form text boxes & check boxes in a website HTML
12:55
+ Project 3: Responsive Portfolio Website
19 lectures 02:52:23

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.

What does responsive website design mean
04:17

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

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

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 test your website on a tablet or mobile phone from Visual Studio Code
06:00

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 change the layout of a responsive website for mobile vs desktop
16:02

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.

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

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.

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

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 export responsive images for website from XD Photoshop Illustrator
05:11

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 add responsive images to website using 100% width in HTML & CSS
06:08

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

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

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 add a css style to the first line of a p tag on a website
11:18

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.

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

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
03:12

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.

Class Project 05 – Header design COMPLETE
06:25

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 use a span tag or span class in HTML to change text
10:32

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 pin the navigation to the top of a website fixed nav
03:17

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.

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

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.

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

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 make a burger menu 3 line mobile navigation for a website
15:11

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.

How to switch a menu nav from desktop to mobile phone
21:45
+ Project 4: Bootstrap Yogurt Website
28 lectures 03:35:26

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.

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

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.

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

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 the Bootstrap Grid Layout works in VS Code
10:49

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 Components works in VS Code
09:23

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.

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

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

How to customize the default Bootstrap 4 css styles
13:51
How to use Bootstrap Layout Grid Experiment 1
10:20

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

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

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 create uneven col widths in Bootstrap 4
07:27

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 add padding & margins using Bootstrap 4 in VS Code
12:03

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 change layout of Bootstrap depending on mobile or desktop
15:46

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

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

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 re-create the Bootstrap media queries in your own CSS
04:40

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

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

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

How to add shadows to text & boxes in Bootstrap 4
07:06
How to change the default Bootstrap 4 buttons size & color
06:16

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

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

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 center text & div tags in a Bootstrap 4 website
04:16

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

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

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.


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

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

How to change the default styles for Bootstrap 4 nav
12:12
How to add a sticky fixed bootstrap 4 navigation to your website design
04:41

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.

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

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 add a border & rounded corners to a box in Bootstrap
04:20

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 edit Bootstrap carousel off for mobile timing fade
05:13

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 put Bootstrap cards on one line using card groups decks & columns
03:29

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 add a drop shadow to a box or card in Bootstrap 4
02:25

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.

How to make a div tag a giant clickable link in Bootstrap 4
04:02
+ What Next
1 lecture 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."

What next in our web design essentials course
06:32