Skip to main content

Making a Website Live

Lesson 31 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

Making a Website Live

Lesson 31 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

31. Making a Website Live

Next Lesson: Uploading via SFTP

Lessons

Class Trailer

Getting Started

1

How This Class is Structured

01:41
2

What to Download

02:57

Introduction to HTML & CSS

3

Creating Our First Webpage

05:55
4

What is HTML5 & CSS3

08:24
5

Head vs. Body vs. Html Tag

09:01
6

Title & Description

05:54
7

What Code Editor Should I Use

02:42
8

Using Diy Tags

06:26
9

What is a CSS Class

09:05
10

How to Create Nested Divs

05:03
11

Class Project

05:24
12

External CSS

09:07
13

Creating Our Index Style Pages

12:16

Project 1: Restaurant Website

14

Testing Your Website

08:47
15

Check Your Code For Errors

11:01
16

What are HTML5 Structure Tags

05:47
17

Add HTML5 structure elements

16:02
18

How to Set the Color of the Background

05:10
19

Adding Images to a Website

04:38
20

How to Center an Image

01:14
21

Change the Font Size & Color

14:11
22

Make a Clickable Link

08:45
23

Stretching Background Image

05:38
24

Making a Div Tag Transparent

02:36
25

Simple Website Text Navigation

06:43
26

CSS Compound Classes

07:02
27

Class Project 02

02:05
28

Class Project 02 - COMPLETE

04:48
29

Add an Email Button to a Website

03:49
30

Add Google Maps to Your Website

11:25
31

Making a Website Live

16:50
32

Uploading via SFTP

11:50
33

Setting Up Our New Project

03:46

Project 2: Bike Repair Website

34

CSS Reset

15:22
35

Min-height vs. Height

07:01
36

Div Tags Onto One Line

05:23
37

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

05:23
38

Evenly Spaced Div Tags

04:42
39

Two Div Tags of Different Sizes

07:13
40

Vertically Center Content

07:20
41

Class Project 3

02:51
42

Class Project 3 - COMPLETE

05:39
43

Change Default Fonts

04:19
44

Installing Google Fonts

12:44
45

What are PX & EM & REM

14:56
46

Change Line Height

04:33
47

SVG vs. JPG vs. PNG

07:04
48

How to Create a SVG, JPG, or PNG

11:00
49

Block Images vs. Background Images

08:32
50

Finishing Up Our Cards

09:10
51

Icons via Font Awesome

16:31
52

Making a Div Container Clickable

09:55
53

Box-sizing & Border-box

06:19
54

How to Make A Colored Button

07:46
55

Why Can't I Add Margin or Paddding

11:08
56

Rounded Corners

04:17
57

Drop Shadows

06:24
58

Backup Your Website

05:00
59

Reusing a Button Class

03:10
60

Class Project 04

02:58
61

Class Project 04 -COMPLETE

05:45
62

Adding a Horizontal Rule

03:51
63

Make Divs Wrap Onto Separate Lines

12:14
64

Hover Color & Animating a Button

03:33
65

Pseudo Classes

09:31
66

Simple Dropdown Navigation

20:04
67

Adding Our Dropdown to the Website

14:50
68

Useful Shortcuts and Tips in VS Code

13:28
69

Large Background Image

09:24
70

How to Connect 2 Pages

10:42
71

Simple PHP Form Work

17:49
72

Placeholder Form Text

05:46
73

Multi Line Form Text Box

02:18
74

Form Check Marks

03:04
75

Form Radio Button

06:07
76

Form Drop Down Menu

05:48
77

How to Style Your Form

12:55

Project 3: Responsive Portfolio Website

78

What does responsive website design mean

04:17
79

How to change a website layout size color when at different sizes using media queries

11:28
80

How to test your website on a tablet or mobile phone from Visual Studio Code

06:00
81

How to change the layout of a responsive website for mobile vs desktop

16:02
82

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

06:03
83

What is pixel density responsive images pixel ratio dp px in webdesign

14:47
84

How to export responsive images for website from XD Photoshop Illustrator

05:11
85

How to add responsive images to website using 100% width in HTML & CSS

06:08
86

How to use srcset to change images in HTML for responsive website

10:15
87

How to add a css style to the first line of a p tag on a website (

11:18
88

How to make the header footer full width but the inside centered

05:36
89

Class Project 05 – Header design

03:12
90

Class Project 05 – Header design COMPLETE

06:25
91

How to use a span tag or span class in HTML to change text

10:32
92

How to pin the navigation to the top of a website fixed nav

03:17
93

How to make a simple responsive mobile menu using CSS only

08:21
94

What is Javascript vs Jquery in website web design

06:35
95

How to make a burger menu 3 line mobile navigation for a website

15:11
96

How to switch a menu nav from desktop to mobile phone

21:45

Project 4: Bootstrap Yogurt Website

97

Overview of what Bootstrap 4 is in website design

07:57
98

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

06:27
99

Quick overview of how the Bootstrap Grid Layout works in VS Code

10:49
100

Quick overview of how Bootstrap Components works in VS Code

09:23
101

Quick overview of how Bootstrap CSS Styles works in VS Code

08:20
102

How to customize the default Bootstrap 4 css styles

13:51
103

How to use Bootstrap Layout Grid Experiment 1

10:20
104

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

07:16
105

How to create uneven col widths in Bootstrap 4

07:27
106

How to add padding & margins using Bootstrap 4 in VS Code

12:03
107

How to change layout of Bootstrap depending on mobile or desktop

15:46
108

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

05:30
109

Google Chrome Inspect

12:40
110

Add Shadows to Text & Boxes

07:06
111

Change the Default Buttons

06:16
112

Responsive Images in Bootstrap 4

09:34
113

How to Center Text & Div Tags

04:16
114

Customize the Bootstrap Navbar

07:29
115

Add Your Own Logo

03:58
116

Change the Default Nav Styles

12:12
117

Fix the Navigation to the Top

04:41
118

Col Images & Col Background

07:56
119

Bootstrap Border & Rounded Corners

04:20
120

Bootstrap 4 Carousels

05:13
121

Card Groups

03:29
122

Drop Shadows On Bootstrap Cards

02:25
123

Clickable Boxes in Bootstrap 4

04:02

Final Quiz

124

Final Quiz

Lesson Info

Making a Website Live

Hey Betty, it's live me and you. I felt like this morning, I'm going to start the day we're gonna do a live video so that because I feel like we're being stuck behind the screen too long and today is a very exciting day, or at least this video is a very exciting video because we get to stick our internet, our internet, our website online. So we're going to do two things. We're gonna buy a domain name and get some hosting. Okay. And then we're gonna stick it up and other people will be able to see it. So the domain name is something like Dub Dub Dub dot Adair restaurant dot com. We'll check to see if that ones available and we'll buy that and then we need something called hosting and that's just a service where they're going to say, we will look after your website for you, your your images and your html and CSS and we'll look after it and we'll make sure it's available to everybody. That's the hosting part. And the name, the domain name is just the name. Alright, exciting times. Let's j...

ump in behind the computer again and see if we can get it all set up. Alright, before we get started though, I want to show you what we do at the end. This is it, it's outside and you're like, I've seen that before, We've done it. But look, it's now at a deer restaurant dot com. Okay, It's actually live on the internet, people can see it. People start making reservations and checking us on our map. Alright, that's what we're gonna do. Let's jump in now. Alright so let's get this started. We're gonna there's gonna be two parts. We need to sign up for our domain name and our hosting. We kind of do that together and then we need to work out a way of connecting our kind of V. S. Code with that hosting to upload it. So where are we going to buy our domain name and hosting? It's up to you. There are lots of sites that do it. My recommendation is a place called Blue Host and that's what we'll do in this video. But there are lots of other alternatives. And why do I choose Blue Host? If you want to go to Blue Host, go to bring your own laptop dot com slash blue and it will redirect you there. I like blue hosts because it's the one I use. I also like it because two reasons we both win um I've got an affiliate deal with them where I get a small cut of your sign up. So when you sign up I get a little bit you can go around me if you don't want to you can go to Blue Host dot com. That's okay. But if you use bring your laptop dot com slash blue two things happen. I get a little bit extra and you get a big discount on your sign up. So if you use this, look it's Blue host and it's got my face on there. We do some stuff together with Blue Host. So it's a nice little they made a little website for me, which I can't believe. Okay, so the cool thing about it is you get your domain name free as part of it and it has all the things we're gonna need for this and kind of future classes that I have planned, where are we going to do? Wordpress? We're not doing it right now. So if you do you know if you are looking for other alternatives for hosting, there's a couple of things you just need to watch out for. Okay. And not watch out for just make sure it's included. You need a domain and hosting. Those are the basics after that. You really would, it would be really cool if they had really simple wordpress installation. You don't have to for this entire course because we're not doing it. But if you plan on following it on to later courses be super handy. The other little things to look out for is something called an ssl certificate, make sure they have that Most of them have it now and it should be free as part of your hosting. This blue house. One does other nerdy stuff is to make sure that it's an Apache server and that you can run PHP on it because later on in this particular course, we're gonna run some basic PHP to do some cool form validation stuff if that went all over your head and you're like, what is he talking about? Just use blue host and follow me. All right, let's get started. Let's click get started now. All right. We got to choose our plan. Now. There's always three. Why is it always three for you for this class? All we need is the basic plan. You can do the plus or the choice plus. It's not that much more expensive. But the reason you would is if I'm just designing one website, say I am the owner of a deer restaurant. Okay. And I do not need to have 10 other websites. I'll just use basic because that's the big thing that's different down here parked domains. Sub domains. Okay. Just means this one here. I can be more of a web designer and go, all right, I've got 10 clients and they're all using the same host. Okay. I have to buy 10 domain names. So a deer restaurants dot com. And then I'm doing something for a dance dentist and then dan's web design and then dan's auto mechanics. Okay. So I'm doing lots of sites for people that's where you might decide to use this plus or choice plus. So that you get to do like lots of lots of websites using the same monthly cost rather than you know, imagine like I bought one and then I had to buy a second one. I'm already at like $5 a month. So I might as well go for something like this. You can switch later on. So for the moment we're going to use select and we're going to pick a new domain name now at this stage you've got two options. Three options actually. New domain name. Okay, well you got to pick your dot com or whatever one you want and if you already have a domain name, type it in here and Blue Host will help you basically the two separate things, right? The domain name gets pointed towards the hosting and if you already have a domain name, type it in here, Blue Host will help you point it to the hosting that we're about to sign up for. If you don't have one, put it in here. If you try and leave, where is it? Um because like sometimes you're like actually I'm not too sure. There you go. If you kind of, I didn't know how to activate this, but it seems when you try and leave this it says, hey, can't decide on a domain name. You can do it later. You just get a credit and you can add it later. So if you've spent like already an hour trying to figure out a domain name, come back later and do it kate and how to activate that little pop up. No idea. Just wiggle your mouse around. I think if you go towards this crossing it out, it seems to launch it now, we're going to check if a deer restaurant is available. Okay, let's click next. I think a deer it's a weird word anyway. Yeah. So nobody has its available, which is awesome. And so next thing to do is obviously you know what to do there, package details. So the price we got okay, I think it's 2 95 for us. It's a little bit less than euros, but that is based on 36 months, three years and you might be like, wow, big commitment And you can go down to 12. It just cost you more per month. That's up to you. The other thing to think about is these. Now this is up to you have a little read through. And the main one that I'll kind of talk about is the domain privacy protection. So when you fill out the details for a domain name like this stuff and it's actually public domain knowledge. Okay. So people can go in and find out who owns the domain name and find out the address. So what people do not me is some people just put in a fake address. Never heard of that before. But another way is to do this domain privacy protection. I have no idea how like how they do a monthly cost that blocks it from people but it does, you've got to then kind of reach out to blue host to get the information. It's just not easily available but have a little read of this. I don't use any of these. Okay. And they're just optional extras. Have a read through them. I get a little bit blase about some of these things and so have a little read through yourself and decide whether they're right for you and what else? I don't need the email hosting, credit card details. Sign your life away, fill in all the details and I will see you in a second after you've kind of gone past this page and we'll do the rest. All right. This is the page you end up at. Remember if you're watching this in the future, everything might be slightly different, but we should end up in a similar sort of place. So we're gonna set our password for the account. I'll do that without you looking. You look away, promise and I'll see you in a second. Okay, password complete. Let's go to login. Alright. I'm going to go to my hosting login and I'm going to sign in. I'll see you in a sec. Alright. It's trying to get us to install wordpress, which is just a different way of building a website. Okay? You're not actually well, you're building it. Yes, but using kind of templates. So what we're gonna do is skip this. Step down the bottom, yours might be a little different. They changes. Onboarding all the time. Okay. They're telling us here, they're going to kind of put the Wordpress installation on a kind of temporary domain. We're not going to use it. So let's skip start building because it's start building a Wordpress website was going to go to our hosting account. Alright. And this is your kind of like dashboard getting started. There's lots of I do not want to buy now. Thank you. I'm sure. I don't want it. Thank you very much. Mhm. Alright. So what I want to do now is upload my site. Next thing we want to do is I'm going to show you two ways of uploading your website to your new domain. We'll use the Caveman way which is super simple and can't be broken. And then there's the way of automatically doing it straight from V. S. Code, which is helpful but a little bit harder to set up. So we're looking for the file manager, it might not be here when you go to here, they might move this around a little bit, but you're looking for the file manager somewhere. Okay? Fire managers going to load up and this big thing opens up. Okay. And this is looking at remember before we had something called the local site. So let me show you. Alright. So on our desktop we created this local folder called Project one and inside of that is our website. And the only problem is we've got an index page and we can see it but the rest of the world can't and all hosting is is that there's a company like blue host that says we'll take these files and we'll share them with the world and we'll make sure it's alive and connected to your domain name. So when people go to a deer Restaurant.com, they're going to be shown this index and they promise to always have 100% uptime so that everyone can see it all the time. So what happens is that this is the kind of like uh you know, this is the folder structure that you get, your website is kept in this one called public html. Okay. So double click public html to go inside of it. And this is currently what's in your website. Okay. It's not what we need. Just, you know, it's got a it's got a kind of like a placeholder website in here for us. We're going to select it all and delete it. So select all and on the top here, delete. Okay. And we're gonna add all that to the delete, leaving the trash. You can bend the trash. It's up to you. But now I've got an empty file. So now I want to upload some stuff. Remember we're in the public underscore html. So let's go to upload and here we can drag files in or click them one at a time. Select the file. Index open. It's not going to work unless we have all the rest of the files will half work. So we need to do both CSS and the html or you can just drag it. It's up to you. You can't drag folders into this thing for some reason. That's why it's a bit caveman ish doing it this way. Okay. But I've got my index and my html uploaded. Okay. Now I want to do is I want to add an images folder and upload them separately. Cool, So let's go back. So I've got those two and we just need to rebuild this. Right? So index, so we need this folder called images. Make sure it's spelled exactly the same. Okay. And I'm going to make a new folder. Put them in, grateful the open it up by double clicking it load some stuff to it. Final images don't have much to, I'm going to drag them across. Images will take a little bit longer to upload. I'm on some terrible internet here so it's going pretty fast. I'm the web designer who's working out of a shed next to sheep with their ones in it. Anyway, it's fast enough. Alright, let's go back and we inside the yep. So go back to public dot html just to see you got all them in there. Let's go check it out already. This is a pretty big moment. I'm going to go a new window. We're going to type in a deer restaurant dot com. Are you ready hold stead even like this is just like do it dan and then talk later, Make it load. Hey, there's a map and the good thing about it is you right now as a student can go to a deer restaurant dot com and it will probably be here. Let me know if it's not because I haven't paid my, my hosting fees. It might come down at some stage because as much as I like this website, it doesn't serve any real purpose other than learning and but that's the cool thing about it is that yeah, now anybody can go and see if you can see it to your mom, you can send it to your friends and say, go check out my website, Start posting it on social media. I made a website anyway, I get excited because even if it's like just my, like I've made a zillion sites and that's just that moment. It's like the birthing of your website, it's alive. All that hard work other people can see it. The trouble is that nobody is really going to see it, right. Nobody's going to find this website unless I start sharing around and telling people and adding it to lists and that sort of stuff. But it's alive. It's exciting. One thing you might find is when you get started is that like surprisingly I assume during this course we were going to go and where is it? We're going to upload it here by our domain name and the domain names take a long time to populate so often you need to wait for a day or a few hours for a deer restaurant dot com to work. I'm really surprised at how fast blue host got that up. And I don't know if it's just like because they're awesome or it's because yeah, like it's taking me between recording this and actually doing that launch there. I don't know about 15 minutes like. So that's pretty amazing if you go to your host domain and it's like you've got dan's web design dot com and it's still not loading, it's coming up with not recognized or can't find it. Give it at least you know, give it the maximum a day if it's still not working after a day contact Blue host. Blue hosts are awesome at like just customer service. They are like that's the reason I am real happy to like send people their way because blue host 24 hour support is is really amazing. So where are we? Um Yeah, these guys, you can call them, you can lose live chat, you can email them and like they're crazy fast at getting back to you. It's not a pitch. I guess it's just more of, I don't know, not all businesses are as good as this. I wish more were. But anyway, so the domain name came through. You might have to wait a little while. Alright I just want to jump in here real quick because I said just wait a little while actually you don't have to you do have to wait a while for the domain name to get populated but there is a temporary domain name that you will get. Okay. So they'll send you an email saying they'll send you probably three males your account sign up some details like this one so check through them all and you'll find one of them that has this important account information. And this is the one that you can use temporarily because if you're like a bit deflated because you're like I've got a domain name and it doesn't work use this copy and paste this into the browser and this is like a temporary holding for your domain name that would later on become live. So just use that yours won't be a dare risk. Okay yours will be whatever domain name you're using. So this will be different for you. But anyway let's jump back into the video and again if you run into any problems with this okay with the hosting you can contact me and I'll help you as best they can but because this is kind of more blue hosts thing and they change things and move things around it can get a little bit well it's it would be easier for them and quicker probably for them to help you. So home is where we kind of started let's just recap and what blue host wants you to do is sign up for Wordpress. Okay. So we ignored that and deleted that kind of template id stuff from the site and what you want is file manager and just kind of re create the folders and upload it manually. Other interesting parts about your host is under this advanced one. Okay, click on that. You'll see all of these again. But there's some other useful things in here. It depends on how nerdy you want to go. You can set up your email address from in here, you can set up kind of tracking how many people have been to your site, all sorts of cool stuff. And the other thing is your something called an ssl certificate will get created and applied to it later on at the moment. If we go to a deer restaurant dot com, you'll see that it says not secure. That's just because it hasn't been like made and done yet. That will become secure later on. So if you go to your site and says, hey, this is a dodgy looking website, it's because the security hasn't been put on it yet and it's fine to you to look at. It's fine for anybody to look at because it's not malicious, but it will need to be there eventually because google doesn't like unsecured sites but that will happen automatically for you if it doesn't reach out to Blue host and ask them to help out but it seems to be an automated process with them now. I promised you we'd do the long way, which is kind of using C panel and file manager. Okay. And manually updating it now would be nice just to kind of be envious code and just kind of automatically send it. So let's do that now. And this video is epic, right? It's pretty long. Um Let's do it in the next video, kind of separated out. Alright. I'll see you in a sec.

Class Materials

Bonus Materials with Purchase

Exercise Files
Completed Files

Ratings and Reviews

Viwosoft Technologies
 

Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!

Student Work

RELATED ARTICLES

RELATED ARTICLES