New web hosting for web development Video Tutorial DreamHost

New web hosting for web development

Tutorial Hosting
Hi this is Ralph and in this video I want to go over some file management that you’re going to need for making your websites so this is brand new into web development and I’ve already got my software set up them that I’m gonna be using here I’ve got notepad plus plus

Installed which is a free and very good HTML code editor and I’m also going to be using FileZilla FileZilla client and I’m going to use this connect to connect to my web server and I’ve got that installed and ready to go but file manage event is incredibly important it

Seems most most students who have trouble especially early on in web development file management is always in the area so I want to stress that here now when you’re working with making the website the files are super important obviously you’re gonna have maybe multiple HTML files and every webpage

You create every webpage is an HTML file hypertext markup language and in addition to those web page files you’re also going to have some related files for instance images that’s a real obvious example if if a single web page has five different images as five different images then you’re gonna end

Up with six total files you’ll have your one web page file and then you’ll have your five image files now if you’re using a stylesheet to control the look of this web page and images then you’re gonna have a seventh file you’re gonna have your HTML web page file you’re

Gonna have your one style sheet file and then you’re still gonna have those five image files so it doesn’t take long for a web page to start to include many many files and so you want to kind of keep these organized as simple as possible so what I’ve done here first is I’ve

Created a folder and this folder is where I’m going to keep all of my webpage work so if I open it up right now it is simply an empty folder and this folder is gonna have all of my HTML files in it it’s gonna be and I’m

Gonna consider it my root folder now within this folder I’m going to make some subfolders and that’s actually a little bit off the recording there so let me just move this up a little higher so I’m just gonna click on new folder and I’m gonna create a folder here

Called images so I’ll have a folder called images I have another folder here called Styles that’s pretty good start now if I have a special and that would be a pretty good place to go now if I had a special category or special project or part of my website that I

Might make a subfolder for that to new folder let’s say I’ll just go ahead and call this maybe it was like a store or something like that I would have a folder for that now you’ll notice that my folder names are all lowercase in those spaces and that’s a good practice

That I’d like you to do all lowercase and no spaces for all folder names and all files related to your website now you’ll notice my parent folder web development up here that has capital letters in a space that one’s okay because I’m not publishing my web development folder what I’m doing is I’m

Gonna be publishing all the files and folders within my web development folder it’s gonna make a little bit more sense in just a second go ahead and take out that store folder don’t really read that we need that right now but I have my images folder

And my Styles folder and within here I’m gonna have some HTML files let’s go ahead and try one real quick and go and pop open my my editor and delete that and just type up a super quick web page there we go so I’ve got a plain web page

Here I’ve got the doctype definition for html5 this tells the browser which version of language I’m using about an opening HTML tag with language English US I’ve got a head section for my page within the head section I’ve got a meta character encoding tag this is basically the conversion of the

Style of conversion let’s so to speak for my text into some binary code and then I’ve got the title of my page this is going to show up in the title bar of the browser or actually in the tab on the on the browser the body of my page

Here’s the body section it only contains one thing a heading one or a headline one home page index I’m gonna go ahead and save this page so I’m gonna hit save as and let’s see I will go ahead and save this over to my desktop into my web

Development folder and I’m gonna put this right here in the root my web development folder I’m gonna call this index.html the home page is always called index.html and I’ll go ahead and click Save there we go so it’s been saved now you can see that I’ve got this file index.html

Now I’m gonna publish it and to publish it I’ll need to open up my FileZilla editor there’s my FileZilla and I also need to put in my my login information now if you’re one of my students and I’ve provided login information to you and I sent you an email a little bit

Earlier with the necessary host information username and password to log in if you’re not one of my students and you’d like some login some hosting then that’ll cost a little bit and there’s some information down in the description of the video where you can get some find

Out where to go to get web hosting and also a discount code for uh for the first year so if I did provide you some hosting information as part of the class then you’ll enter that information up here at the top host user name and password those are the only three pieces

Of information you need host username and password and then click quick connect there we go so I’m logged in so I’m using web dev 188 as my host now when I first log into FileZilla I’m not in the right spot this is not where I’m going to publish my web pages

To so instead I’m gonna go into this folder web dev 188 this is where my web page my web page files are going to go now you can see I’ve already got some stuff in there it’s some things that I made a little bit number of months ago back in the

Summer I’m gonna go and take all these files select them and delete them I’m gonna delete those files so now my web space is empty and you could actually verify this if I went over to my browser let me go ahead and do that real quick and I’ll just

Bring a Chrome browser over here web dev 188 NCCC web dev org in this web page is blank there’s nothing there now if I go to FileZilla go to my desktop go to my web development folder I can see that I’ve got three things that I can publish

I can publish my index.html and I can just click and drag that over I can also publish these two folders that are empty I’ll publish those two folders also so they’re ready to go so I’ll have my web page there and now that I’ve done that

My web page is published if I go back to my browser and hit refresh you’ll now see that I’ve got my home page index so what you see when you go to my web address this web dev 188 188 address as you’re seeing my index.html file when a

File is available with the file named index.html the web browser is going to display it now if I have other files then I have to make hyperlinks to those files and that’s what web development is all about and that stuff we’ll get into in the coming weeks here is making

Multiple HTML files at all linked to each other and many if not all of those web files will refer to images that are stored in our images folder and practically all of those pages will refer to style sheets that are stored in my Styles folder now something else I’d

Like to stress in fact let me arrange these by file name there we go I want you to notice that how my web development folder my local web development folder on my computer looks just like the folder and file structure over here on my web server I’m gonna

Stress that over and over again you want the file and folder structure on your local computer to match exactly the file and folder structure on your web server super important for making your life easy so everything is all matched up if I were to create a new folder over here

Locally then I want to I want that same new folder over here so for instance let’s say I was creating a new folder create directory vacation all lowercase no spaces and let’s say this folder was going to contain web pages and images just related to a vacation that’s

Perfectly reasonable to do I want to have that same folder over here so I have two ways to go about it I can right click and create a directory on the server using FileZilla or notice I just click the double arrows to go up one level or I can take this new vacation

Folder and drag it right over and there it is now everything matches up so you want things to match up and that’s about it now you’re going to be doing this a lot so you get lots of practice so don’t forget the information you need to log

Into your web host was provided via email if you’re in one of my classes and if you need web hosting and you’re not in one of my classes then check out the the link in the discount code down in the description for the video talk to you soon
Set up your folder structure on your web server before creating and publishing new web pages. If you need web hosting, check out Dreamhost at http://www.dreamhost.com/r.cgi?13436. If you prepay for 1 year, you can use discount code RP3DISC50 to get $50 off the 1 year price, which is about $117.
#web #hosting #web #development


https://i.ytimg.com/vi/BkkcLnNQbC8/hqdefault.jpg