in this video we'll go over the basic
setup and configuration of visual studio
code. What's up YouTube? This video is
intended for beginners. I'm assuming you
have zero knowledge of code writing. So
if you're just getting started you're in
the right place. Hit that subscribe
button and let's get started. The first
step to writing code is picking a code
writing application. There's a ton of
them out there like notepad++,
sublime text, Atom, and my favorite Visual
Studio code, not to be confused with
Visual Studio, VS Code is a free open
source application. It has great support
from the community and tons of
extensions. The other ones out there are
fine, there's nothing wrong with them,
this is just my preference. In this
tutorial we'll go through how to set up
VS Code for web development. I'll walk
you step-by-step through the
installation and configuration and we'll
look at some extensions that will make
your life easier. So the first step is to
install VS Code. Go to code.visualstudio.com/download
This is a
cross-platform application so it works
on Windows, Linux, and MacOS. Go ahead and
download the appropriate version and
begin the installation. I'm gonna speed
this up for time. When you get to the
section "Select Additional Tasks" I would
recommend checking everything.
This just fully integrates VS Code into
your operating system. You may or may not
see these options if you're on Linux or
MacOS. Once the installation is complete
this is what you'll see. As you can see
VS Code can be used for many different
programming languages. For now we're
going to focus on basic web development
which includes HTML, CSS, and JavaScript. So we're going to set it up for that.
Let's have a quick tour. On the left side
we have the sidebar and at the top is
the explorer. This is where you'll find
all of your project files and
directories once you have opened a
project folder. Next is search. It's
pretty self-explanatory but this will
allow you to search within your project
files and there's a Find and Replace
functionality. Next is source control.
Here you can integrate GIT. But that's
beyond the scope of this tutorial so
we'll cover GIT in its own video later.
And next is debug. Again this is beyond
the scope of this tutorial but VS Code
has great debugging capabilities.
And next we have extensions. We'll talk more
about extensions in a minute. At the
bottom there's the manage cog and in
this menu are settings, keyboard
shortcuts, themes, and at the top we see
command palette. Command palette is a
really cool
feature. You can also get to it by
pressing ctrl or command shift P. And
here you can search for just about
anything. So if you want to open a file
or change the theme or check out the
keyboard shortcuts. And you don't have to
complete a word you can even type words
together and it figures out what you're
looking for. It's really cool. It saves a
lot of time. So let's check out the
keyboard shortcuts. There are a ton of
shortcuts and you can customize them. Now
I would encourage you to learn as many
as you can as you go. The more shortcuts
you know and the less you use the mouse
the quicker and more efficient you'll be
when writing code. Now let's look at some
settings. There are only three settings
that I would recommend you change right
off the bat. Now these are just my
personal preference so you can set these
however you like. First I like to
increase the font size a bit. I have a
big screen but I don't want to strain my
eyes. The code needs to be easily read. So
for the purposes of this video I'll
change mine to 22. Next is tab size. I
prefer 2 space tabs instead of 4. When
writing a lot of code with multiple
levels, 4 spaces tends to move the code
too far to the right for my liking.
Lastly I'll search for "word wrap". I like
to turn this on. This will prevent long
lines of code from going off the right
side of the page. Next let's look at
themes. There are a few built-in themes
and I'll preview each one for you
quickly. Some of these are just
ridiculous in my opinion. There are a ton
of additional themes that you can search
through and download. A popular one is
called material dark. But I actually
prefer the default dark theme so I'll
stick to that one.
Let's move on to extensions. So in the
sidebar go to extensions and the first
one that I would recommend is called
"live server". This one is really popular
with over four-and-a-half million
downloads. What this extension does is it
sets up a local web server so that you
can see the changes made in real time
without having to reload. It's a
must-have for web development. The next
extension is bootstrap 4 and font
awesome snippets. Bootstrap is a CSS
framework. Basically think of it as a
template. This extension will help you to
build websites based on bootstrap and
I'll have a dedicated video for
bootstrap later. The next extension is
JavaScript es6 snippets. JavaScript is a
programming language that spans
front-end and back-end development. In
web development JavaScript is key. You'll
be writing a lot of it so these snippets
will be helpful. Now let's look at some
basic functionality of VS Code. I'm going
to go to the explorer and open a folder.
I've created a project folder for the
purposes of this video. Now that we have
our project folder open I'm going to add
our first file and name it index.html.
VS Code has something called Emmet. Think of
Emmet as shorthand. With it you can
easily write a lot of code quickly. Here
I'll demonstrate creating an HTML page.
You can do this by pressing exclamation(!) 
and you'll see that Emmet has popped up
as a suggestion. Now hit enter. There you
have it. A basic blank HTML web page
ready to go. Easy. Now again, I know you're
just beginning and you probably have no
clue what all of this is but I'm just
demonstrating the capabilities of VS
Code. You don't have to know what any of
this means. We'll get into the actual
code in the next video. Other things we
can do is type div then hit enter and
this creates a div tag for us. I can
quickly create a list by typing ul, enter
then li * 4, enter. I could just type
.classname and that will create a
div with the class of classname.
I can type input#foo.bar and that
will create a text input with the ID of
foo and the class of bar. And if you just
type input you'll see suggestions for
creating an input button, checkbox, date,
email, and so on.
Now these suggestions that you're seeing
pop up are called IntelliSense. This is a
built-in feature of VS Code that
suggests options and helps you to
complete your code. To show you more of
IntelliSense I will manually create an
input and define the type. When I create
the parentheses IntelliSense gives me
all of the valid input types to choose
from. Another feature is "auto close tags".
So if I type left angle bracket div
right angle bracket it will
automatically create my closing tag. So
that's the basics of VS Code. We'll go
more in depth in upcoming videos. If you
liked the video a thumbs up is
appreciated and if you want to be
notified of new videos hit subscribe and
the bell. Thanks for watching!
