Web Development Tutorial For Beginners - how to make a website

Hi there .

My name is Will Stern and I've been a professional web developer for almost 20 years .

And in this course , we are going to learn professional web development absolutely free from the very beginning .

My previous course on this on youtube has had millions of views , thousands of comments and I've learned a lot about the common hang ups people find and run into when they're learning web development .

So we're gonna redo this course for 2018 , 2019 , the most modern skill set to get you a career as a web developer , we're gonna make it easy , fun and hopefully help you to avoid any confusing pitfalls that are common for people to end up with along the way .

Now , I want to mention really quickly before we get into this course that if you're here because you just need a website for yourself or for your business , you do not want to learn all of this .

It's not the right road for you .

Instead look in the description .

I have a link down there for the X ad I .

That's their artificial intelligence uh web development tool .

And it's basically with a few questions going to build a whole website for you that you can then customize .

That is the fastest and cheapest way to get your website up .

If all you want is a website , if that's not you and you wanna learn web development because you know how great of a career it is and it is a great career with good pay and tons of demand .

Then let's get into developing websites and being a web developer in this day and age .

So the first thing you'll need to do is let's install some professional web development tools , good news .

They're all free because web developers love free stuff .

So what I want you to do is open your web browser , which I prefer chrome and most web developers do these days .

But open your web browser and go to visual studio code , just Google search , visual studio code and that's gonna take you to this and I want you to download it .

This is the best web development tool out there that is free .

Um Not everybody uses the same text editor , but visual studio code is probably the most popular text editor these days .

So go ahead download it , install it , start it up and you'll end up with something like this visual studio code right here .

Although you'll probably see a welcome screen that looks like this .

Now , I want you to install one thing once you get it open , I want you to click over here on to this square button and you can install all these great extensions for free from the marketplace .

And the one that we're most interested in right now is called live server .

So go ahead search for live server and get this top one right here .

Launch a development local server with blah blah , yes , install that .

We want to install that and reload and you'll see in just a second what that does for us .

So now that live server is installed and we have visual studio code installed , we're ready to start coding .

Uh This is exactly what professionals see all day , every day when they're coding is visual studio code or the text editor of their choice if they don't want to use visual studio code .

So let's make a project and create our first super ugly super basic website .

Before we wrap up this tutorial , I want you to go over to this files tab here and click on it and you can see it says , hey , you haven't opened a folder yet .

Let's go ahead and open a folder .

Um In this case , you get to choose where you want to go , maybe create a new folder somewhere .

In this case , I already have a folder called Learn Code and I have a folder called my website .

So I'm going to use this one .

And then in this folder , you want to create your very first file , which you can do the new file button or you can go file new or you can just do command N or control N if you're on a PC .

So let's go create our new file .

And we always want to call this first file the home page of our website index dot html index is what the website is automatically going to open when you go to your awesome website dot com .

So here we have in dot html and I want you to do something really sneaky here , just hit exclamation mark and then hit tab and boom .

Don't freak out .

This looks like a lot of code , but it's actually not confusing at all .

Um We with exclamation tab , we created the empty website template .

What you want to do is go in between these two body tags , body tag and body tag and go ahead , say something .

Let's say hi and hit save .

Um And you'll want to learn to hit save from your keyboard , which on a Mac is command S or control S from windows or you can just do file save , but that's a lot slower .

You're gonna want to save a lot once you've saved your page , right ?

Click and click open with live server .

You should have this because you created your live server or you install live server .

So now you can see I've got this live server that it created on my machine instead of a website and it's going to index dot html .

And there's my website .

Hi what I can do now is I can kind of create a layout here by dragging my two windows so I can see them both at once .

And if I change this , maybe add an exclamation mark and it's safe , it automatically reloads .

That's because my live server is doing something called live reloading .

Where whenever my my website changes , I get to see that change right away .

It's a great development experience .

So I can say hello , World hit save and my website is updated .

So there you go .

We've created your first website .

You don't really understand any of this .

This is called HTML .

And it's the first thing a web developer learns .

And so in the next video , we're going to get into learning HTML .

And then we're gonna add to that cs S and javascript .

And once you learn all three of those things , you are a web developer .

So let's get into that next HTML video .