Skip to main content

Uploading via SFTP

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

Daniel Walter Scott

Uploading via SFTP

Lesson 32 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

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

Uploading via SFTP

Hey there in this video, we are going to use V. S. Code to connect directly to our host rather than using kind of anything else or using their website. It's all done within V. S. Code. We're gonna install this plug in called S FTP. It's gonna show me everything on my site nicely and when I want to upload stuff, I just right click it and say upload and it ends up on my website, symbols. Alright, So in this video we're going to connect directly from V. S. Code, We're going to use something called S. FtP. Okay. And it's one of the extensions like we did earlier, remember we did the extensions for html hint and live server? Like the other ones there is SFTP is the most common one at the moment. It's the one that I use and it seems to work real good. It has 4.5 stars. Okay. And has a chunk of downloads. So you will check when you're doing it. You know, there's other ones in here that one's got less less stars. That's what we're going to use for the moment. I have a little read through how i...

t works. I'm going to show you how to do it. The main one for this one is usage says you need to do this thing. Okay, You need to open the command line. Sorry, the command palette and run this thing and I'll show you how to do that in a second. But basically there you go. There's a that's what we need to put in the kind of details. So let's install it first. Give it a sec. Alright. It's installed. Nothing really happens. You might have noticed there's a new little icon over here which doesn't quite work yet. We're going to set it up and that's what they're saying here. They say, do this, run the shortcut on windows or on Mac and then type this in. So we'll do that. And the long way is under view and command palette. So command palette is, you're able to tell the, you know, give kind of commands to these plug ins. It's kind of a crude way of doing. It depends you might be happy with terminal or command line. Some people aren't. So what I want to do is I want to type in S FTp, it should pre fill it in. Okay. And to configure this bit of software, this is what we need to type in. Let's go what ends up happening is let's close it all down to make I'm going to close down my html and my CSS. I'll even close down this by double clicking it. So it's nice and clean. So this little Jason file is the kind of details that you need to populate for this thing to work now, you're like, where do I get all of these details. So they are the things that came through in an email. So they either come through from an email from Blue Host or if you go to FT your blue host account, you'll find them from home. Go down to Advanced the Advanced go to FTP accounts and you'll find them at the bottom of this. So this top one here is the one that is automatically generated. Okay. And that's kind of our details in it. You click on configure FTP account and here are the basics that you need. Okay. So the user name, the server that's going to and the ports. Alternatively, if you don't want to use this plug in that we're using in V. S code you can use, if you're more familiar with files, ella or cyber dark for Mac, you can use those cool instructions of how to use it. It's just another way. So let's copy and paste them across. So what do we got the name of the server? It's called Blue Host. This doesn't matter. You can type in anything there. This next one, the host address is really important at the moment. It's local hosting. So on my machine, that's not what I want. So I'm gonna grab this one here ftp. Now, if you're using something other than Blue host, sometimes it cannot have the FTp in front of it and sometimes it does in case of using some other hosting company, you can just sometimes it's Yeah. Ftp. Sometimes it's not okay. In this case it is. Now I think in this case we're just using FTP nor Sftp. Let's check. I think you can use either in this case I put in my password. So where's my password really doesn't have it as an option. I remember this when I was setting it up first so this needs a password to get in. Okay password so you just type it in inside of the quotation marks, colon and your password goes in quotation marks as well and ends with a comma. So we've got our name, we got a house without a password. We've got FTP support number. Often it's 22 in case of blue host they are 21 they are your user name. Where's my user name there it is there a deer rez in the remote path. Okay. In this case they say my remote path is now that's not it. Okay. Generally for pretty much all hosting companies that have ever dealt with its remember when we're in let me have a little look. File manager remember public dot h t underscore html. That's the one we want. Maybe this one that's the folder because at the moment we're logging into this kind of like big, this big director of all the stuff we don't need. Okay we want to find this public underscore html to get to our website. So in here we go to public underscore html and this one is up to you. So upload on save I turn it to false just because and the problem with having it is true. It means every time I hit save remember file save all it's going to then try and push my website live to a deer restaurant dot com and if I'm messing about with it and it's all broken and half working the website is going to be half working on the site. So I said mine are false anyway. That's what that guy needs. We're going to save it and we're going to close it and we're gonna go to this option here. Okay for our SftP you can see our little host. They're gonna drop it down. This little blue bar is going to run across for a while until it connects to your server and fingers crossed. It does. Alright. There you go. So it has found my index and my style and my images and the thing is this is not on my computer. This is actually looking at this folder here on blue host which is connected to my you are a which is this. So yeah, that's what that is. If I go in here now and I click this and I right click it and I say delete, Be very careful. You see it on the bottom here says, are you sure you want to delete your index page? I'm okay with it cause I'm gonna stick it back up in a sec because I've deleted it here. This thing's going to my website is going to freak out because it doesn't have an index page. Okay I'm gonna hit refresh. Let's have a look down here as well. You see it kind of humming away thinking about it, it's checking the survey. It's never a fast process. This thing's gone. Did it delete delete? Are you sure? Delete file doesn't exist? Cool. This thing could take a little bit to update even though I clicked update, it still was listing there. There it is, it's gone. So now if I go to a deer restaurant, he goes, hey, I'm freaking out. I got no index page. That's the, that's the reason we need index dot html and it's showing me other stuff in here. I've got a CSS sheet and some images, but that's not very helpful. So how to get stuff back up. Let's say that I'm in my file Explorer. Okay, so this top one and in here I'm gonna open up index page and I'm working on it. So this is my local explorer is my local stuff. This down here is the remote, so remote considered their blue hosts hard drive. Okay. That's where your site is for other people. This is, you know, you do your work locally and then you push it live to push it live, you right click it and say upload and off it goes and it should be uploading and hopefully in a second I can go to a deer restaurant dot com and it should be back nice now that is going to work fine for like half of you and the rest of you who have got hosting other places are going to be like, man, it's not working. We're so close so how do we fix it? A couple of things is you need to open up the same thing as before. Okay. To get back in to do the settings and that's really weird because like yeah, anyway, it's just the way plug ins work in V. S. Code. I can go to 65. You gotta command palette and it's the last thing I did and I can open up this Jason file if you can't remember how to do it, you go to the extension and then you find close these out and it shows me the ones I have enabled, I can click on it and then kind of read through the documentation again on how to do it. You can see we've just done some basic stuff. There's a lot more that can go in there. You can do watch folders, which is cool. There's lots of stuff that you might need to do to make it work. Maybe your school or your university or your work. All right, so what are we doing? Oh yeah, problems. Okay, so we wanted to open up, I'm going to close all the extensions down and I want to go to view command palette and open up this again. So if it doesn't work. Okay, a couple of things you can try easily yourself is sometimes that your user name has an email address so it could be ah it might be this at a deer restaurant dot com. Okay. That sometimes can get, you know, some some hosts do that. Sometimes you don't need the public slash underscore it can just be left by itself. Okay, just leave the slash there. Okay, sometimes that works. Sometimes it needs to be sftp. Sometimes you might get your password wrong. Okay. We talked about the host, sometimes it doesn't need the FTP at the front, you can delete that. Sometimes the host name doesn't do anything. Okay, just get listed in this little folder here and if that still doesn't work, copy this. Okay, I'll actually copy and paste this into a word doc right now and stick it in your exercise files. And what you do is you contact your host city with go daddy or host skater or somebody else. Okay, just seeing the support ticket and say, hey, I've got an account with you and I can't connect it. Um can you tell me what to put in this and they might go, oh yeah, you're doing it wrong, you've got to put in poor 23 or 22 or something else or they'll tell you how to kind of change it around. Okay. And the way to test it is once you've done it, save it, that might be a thing that you've done wrong as well as go file, save, click on this and cook on blue host and hopefully this eventually will populate with the things on your site. Now, what else can you try if it's still not working? Um FTp can be blocked by your internet provider, not your internet provider, but you're say you're at a, I don't know, coffee shop or a hotel that you're trying to do this in and sometimes the, like the infrastructure there, the wifi network will block kind of weird stuff like this because you're trying to connect with a server online and they freak out sometimes. So if that's happening or at least yours is broken, try connecting to a different wife. I say you're at work, try it at home. If you're at home, try it at a friend's and try the exact same thing because sometimes it's your internet. That's wrong, it's not the details, it's not obvious code. Um I've got around it sometimes by doing a hotspot on my phone, okay? Like what do you call it? Tethering on an iphone or mobile hotspot on my android phone and I connect my laptop to that and go and try it and it works fine. And if it's still not working, contact your host that they're the real quick blue host are really good at getting back to you and helping you out. Same thing. I'll put this in a word, doc now try and remember, come on, then I'll put it in your exercise files in the second and it will be under project one and I'll call it FTp code and that's it. We've connected it, it's online. It's exciting. People can see it, we can update it and if we need to make any means well uploaded to our site is we need to do now is click on it, you can actually grab a chunk of stuff. Okay? You can say I want images in all of this. Right, click all of them and say upload and it will upload to your host. Alright. That is it for project one. We're done Okay. And that's as far as we're going to get with this one, we are going to move into another project project to even Okay, this bike repair shop, we're gonna add loads more details to it. We're gonna add forms. It's going to be exciting. It's gonna be lions, take a break, shake it off. I'm going to and we'll prepare ourselves for the next project. 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