So now we created our first website and we now know how to
create HTML pages.
And we wrote our first piece of HTML code,
but the approach we've been using thus far has a flaw whilst
using a text editor like does text edit app on Mac Wes or
notepad on windows works for a,
such a very basic HTML file for such a basic webpage will
definitely face some issues. If we work on bigger projects,
on bigger websites, with more content and with more code,
if we have a look at page like amazon.com,
then we can get some doubts. If this is the best approach.
If you go to amazon.com and you right click in there to view
the page source, right, click here on a non image.
For example, if we click here and view the page source, wow,
that's a lot of source code.
And if you imagine writing code like this and this length
and this complexity in an editor like this,
that doesn't sound like fun. It's easy to mistype to,
for example,
forgets such a slash a forward slash which then renders
this an invalid element
and they offer you don't want to do that.
You don't want to use a text editor like this.
Instead,
you want to use an editor which brings more features,
which was built for development for programming, possibly,
which was built for web development specifically because it
turns out that there exist specific editors for development,
which allow us to edit plain text files,
which are HTML files still is in the end,
but which still give us more support, more convenience.
For example,
by highlighting certain language features by highlighting
these H one tax, for example,
by highlighting potential errors, we might be making.
And by giving us a lot of our assistance and functionality
that simply makes working with code like this easier.
And that makes it easier for us to spot errors and to write
correct code and such editors exist. And best of all,
one of the most popular and best editors out there is
available completely for free.
So it is an extra piece of software,
which we want to install, but it's free.
And it's available for all operating systems.
Now, which editor is this?
It's an editor called visual studio code.
And that's important.
There also is an editor called just visual studio
and both are from Microsoft.
But visual studio is not primarily focused on
Web development.
Instead,
you would typically use it for other programming languages.
So therefore it's not visual studio, which you want to use,
but visuals to do code.
And this is available for free. As I mentioned,
if you visit code.visualstudio.com,
or if you just Google for visual studio code
and you visit the website there,
you can download it for various operating systems.
Your operating system should be preselected here by default,
and you can simply download it and then install it,
on your system.
Now, once this download finished, you can click on it to,
in my case here in macro S unzip, this folder,
which I download
and then drag this visual studio code app file
into the applications folder,
On windows you can download an installer
from code.visualstudio.com. So that's what I'll do here.
So let's wait for this download to finish here,
which can take a couple of seconds or minutes depending on
your internet speed.
Now the download did finish for me here.
So I'll start this installer you're on windows.
And the installation process is really straightforward.
We accept the agreement and then you can basically confirm
all these defaults. Of course,
you can also install it into a number folder though,
if you want to.
So here I switched to a different folder
on a different partition click next and next,
here you can also keep all the defaults,
and then click install.
Now the installation can also take a short while,
and I'll be back once it finished.
And once it did finish,
you can keep this checked and start visuals to do code.
You can, of course also started it on macro S.
Now, once you started, you should see a starting screen,
a welcome screen that looks something like this.
The exact look can differ over time,
but it should look something like this.
Now here, you can learn more about visual studio code
and how you can tweak it,
and definitely feel free to play around with that.
We will also do that later in a couple of minutes.
For the moment,
I just want to open and edit that file that we created
before this we could click open file here or go to file open
file or on macro S just open on Macro S,
this option is just called open instead of open file
Here It is open file though.
So I'll choose this.
And then we can navigate to this folder in which we added
our index HTML file and select that file and open it.
Now, once you were selected this file and clicked open,
you might see a trust warning like this.
This is a feature built into visual studio code,
which tries to warn you that you're not opening an editing
and possibly executing files where you don't understand
the code. Here, Of course it's our own file.
So we do trust it so we can click open here,
and then you should see the code that's stored in this file
here inside of visual studio code.
And you'll see that it already looks a bit different
compared to what we had before in this plain text editor,
the HTML tag, for example, this H one tag here is blue.
In my case,
it has a different colored in the text between the tags
and it's color coding,
syntax highlighting as it's called like this,
that helps with programming. Here, Of course,
we have a simple file with just one line of code,
but if you had bigger files with more code in them,
as we will have them throughout this course,
or if you're working with multiple files tools like visuals
to do code, make working with that much easier, for example,
it will be much easier to see where your HTML tags are.
The blue things here and where to content between the tags
is because they have different colors.
So that's pretty nice to have.
Now you can open an added single files like this,
but it's even better if you opened the entire project folder
instead of a single file with visual studio code.
Because throughout the discourse section,
we're going to add multiple code files to our project.
For example,
we'll have separate files for a CSS code at some point,
and we want to manage them all in the same project and
conveniently manage them with visual studio code,
in the same editor window,
to achieve this, We can again go to file.
And then choose open folder
on macro S this option doesn't exist there, instead,
It's again, the open option on Mac OS.
You'll use open for both files and folders on windows.
You have separate options.
So here I choose open folder on windows,
and now I select the entire folder,
which contains my index HTML file.
Now, when you open that entire folder,
you might again get the trust warning, where you again,
of course can simply confirm it and click open.
And once you've selected that folder,
you will see that the interface changes a bit.
Now you're on the left.
We have a list of all the files in that folder
at the moment that, that's only one file,
but soon we'll have more files in here
and you can click on those files,
to then open and edit them here on the right
That's how you can open a folder with visual studio code.
And that's the mode with which will work for
out this course, of course, both on windows and Mac OS.
Now, before we started working on that code again,
let's talk about the configuration of visuals do you code.
And the look I have here, as you can tell,
I have a dark mode here and you might have that same look
if you don't and you want it,
or if you have it and you don't want it,
you can go to code references.
And then there, to color theme,
and there you can then pick a different color theme.
And if you select them with the arrow keys,
you get a preview instantly.
Now I will switch to the stark plus theme, but you can,
of course use any theme you want.
You can also explore the settings here.
And the shortcuts though, to get started,
there is nothing special that would need to be configured.
I will assume in a bit here though,
to make sure that you can read this code a bit better.
And I will also often disabled this bar on the left,
since it's takes up a lot of space.
And currently we have only one file anyways,
and I'll do that with view.
And then there under appearance, I can disable this sidebar.
And here you can also control whether you have a status bar
at the bottom, for example,
and a couple of other things simply play around with that
and make sure you configure the editors such
that you personally like it.
I will try to go for a minimal approach here,
for the most part to make it easy for you to follow along.
And they are for all, for example,
also disabled breadcrumbs,
which wants this part above their code to really have this
lean setup here.
So now we got this editor is set up and it's this editor,
which we're going to use for the entire course.
You can use other editors as well.
There are alternatives like sublime text or Adam,
but my strong recommendation is using visuals Studio Code.
Unless you have a personal favorite already,
and you know that you prefer some other editor.
We're also going to tweak this editor here from time to time
throughout the course,
we're going to install certain extensions
to help us with certain aspects.
We might dive into the settings,
but to get started,
we now got everything which we need,
and therefore let's move on.