Now hopefully, you're now excited to get started and so am I. Before we get started, we just have to make
sure that we have a proper development environment,
so a good environment where we can write code and dive into Javascript because writing code in a
system text editor as we did it earlier in this module is really too cumbersome, not really a great experience.
If we have a look at that,
well this is really hard to read and if we write a lot of code there, that's not fun at all.
So we need a better code editor which makes working on our code easier, which takes some work off us
and makes it more pleasant in general
and we also need an environment where we can test our web page and our code.
Now for the editor, I strongly recommend using Visual Studio Code,
this is not the only code editor or IDE, for integrated development environment, which you can use
but it is free and it's really really great.
It's super fast, very modern, under active development, really extensible and customizable,
it's my strong recommendation to use Visual Studio Code and we'll install it together in just a second.
You can combine it with a lot of extensions which you can install from inside Visual Studio Code and
you can configure it to suit your needs
and I have a module where we'll dive deeper into that but I'll also show you a basic setup which I use
right in this lecture. Now for testing and seeing our code in action,
we also need a browser and there,
I recommend using Google Chrome.
Of course we will write code that runs in all browsers
we want to support, more on that in the browser support module but for development, Chrome is really amazing,
It has a lot of features that make development easier
and my strong recommendation therefore is to use Chrome for development even if you normally use a different
browser.
Really use Chrome to have the same result as I do here and to follow along smoothly. Again,
later you will learn how to make sure that the code runs in all browsers where it needs to run.
Now in Chrome, we will also use the developer tools which are built into Chrome, to have a look at our code,
debug it and so on and I'll also have a look at that
in the development and debugging section later in the course.
But with that, let's get started with the code editor, with the IDE, with Visual Studio Code. For that, you
can simply google for Visual Studio Code and you should find this page, code.visualstudio.com,
there you can learn more about this code editor and you can always check out the docs if you're interested
in diving deeper and of course you can also download an installer. Here it should already pick the right one
for your operating system, otherwise choose one from the dropdown, Visual Studio Code is available for
Mac, for Windows, for Linux. Simply download the installer from this page where you then also see some
getting started instructions and run through the installation process once you did so. It's a straightforward
installation process, nothing fancy about that, you can just go through the download and installer and install
Visual Studio Code on your system. Once you did that, you can open the editor and it should look something
like this.
Now if it doesn't have this dark mode look here, you can change the theme by going to your options here,
preferences and then color theme or using the shortcuts you see there, under windows you will find the
preferences under file. When you choose color theme, you can pick a theme and you see a bunch of themes
available. You can simply cycle through these themes with the arrow keys and check out which theme you
want to use.
Now I like this dark plus theme but of course you can go with the theme you like. You also see a
bunch of elements here at the start,
you can also customize this under view, appearance and there for example, you could get rid of that status
bar at the bottom if you wanted to.
Now I will add it back but you can tweak this to your likings to make sure that you see the information
you want to see.
Now as you see, we don't see our code here, so we can click open folder here or choose file open and then
choose the folder you do want to open
and here, I chose the folder with the starting code we saw earlier in this course, you'll find it
attached to this lecture again. Simply open the whole folder and now this will load this project into
Visual Studio Code here.
Now the colors of these files might look different,
that has something to do with version control,
something we don't have to worry about right now but you should see these files and folders here.
Again you won't see the gitignore and vscode file here,
these are folders and files only I have here for my configuration,
you should see the assets, info and index.html folders and file though.
Now what might also be different for you however is the icons you see here.
Now that's coming from a so-called extension I added, extensions are plugins you can add into your editor
to change it and tweak it to your likings.
You can add plugins and extensions by going here to these extensions part,
you can also get there by clicking on view extensions
and that's actually how I will navigate and I will remove that activity bar here on the left and just
navigate around with view
and then here, these shortcuts or these options
and now we're on the extensions part.
Now I already got a bunch of extensions installed, most of them are not required here for this development
but there are some which I do recommend using and one is the material
icon extension. You can just search for material icon and you should find the material
icon theme package.
Now this is totally optional but you can install it, you will have an install button here to get the same
file icons as I do,
so you can install it and then load the extension with the buttons you see here too add the same icons.
Another extension
I recommend using is prettier.
You can search for prettier, written like this and install and enable this extension,
this is an extension which helps us with code formatting.
Now code formatting allows us to write clean and well-readable code because as you will see, a lot of
code is valid from a technical perspective but can be hard to read,
I'll show you an example in a second.
With that, we have all the core extensions
I would recommend here,
you don't need the other extensions I have here, they are not even related Javascript development necessarily
and therefore we should be good here.
You can now go back to the explorer view here to see your files again
and now let me show you how you should basically configure your project and what this code formatting
is all about.
For that, let's open the assets folder, scripts in there, app.js and there you see the script I'm giving to
you. Now
you already see here why we're using a code editor, this and also in the HTML file is much more readable
than this here,
right.
It's much more readable,
keywords are highlighted,
we also get information if we hover over something, we get useful auto completion if we type and so on
and you'll see all of that throughout this course as we write code.
You don't need to understand this code here of course, we'll learn all about that throughout this course
but I want to show you this auto formatting. Let's say here in line 6,
I don't have this whitespace at the beginning or I even have code like that.
Technically this is valid code, I can already tell you that, Javascript is able to understand and execute
this code but to us humans, it's a bit harder to read and that's where we can use so-called auto formatting.
If you go to code, preferences, keyboard shortcuts and there you search for format document, you will find
this shortcut with a certain shortcut attached to it, if you don't have one here, you can right click
on this and change the key binding to assign a shortcut
and this is a shortcut you can then press to auto format your code. You saw that, the code magically
changed to a more readable version,
this is something where prettier helps us. Now in general of course, you can tweak your keyboard shortcuts
here, not just the format document but any shortcut you might be using here in these settings
and you got a lot of shortcuts can use, of course you can use the official documentation to learn all
about Visual Studio Code already if you want to.
I will also share some useful hints with you in the development and debugging section later in the course.
One thing which I would recommend that you do is that you also dive into preferences settings right now
though and there, you can switch between user and workspace settings.
Basically user settings are settings that apply to all projects you manage with Visual Studio Code, workspace
settings only apply to this project,
for example here I got a workspace setting and that's where this .vscode folder is coming from, where
I set the zoom level to 6 so that this is more readable to you,
that's all I have in there. Now
under preferences settings, you can tweak your user or your project specific settings and there for example,
you can search for prettier and configure prettier here as you see and the various options it offers
to you to format code as you want,
for example some things I have set up there is that I want to add semicolons at the end of every line,
I have this checked.
I have single quote check to use single quotes for text and I have a tab width of two.
Now this is not something you have to do,
these are just my settings in case you want to have the same code output as I have it here.
And with that, we have a basic editor setup which we can use to write our code throughout this course.
Now let's come back to the browser.
As I said, I recommend that you use Chrome there and you might want to use incognito mode to avoid any
distractions by any Chrome extensions you might have installed which might interfere with your web page
and maybe do something which is not caused by your code but by some extension. Also important in Chrome
are the developer tools. You can get there by using view, developer, developer tools or the shortcut which
is shown there and these are the developer tools we'll also spend a lot of time in, I'll zoom in a bit
here to make it bit bigger and there for example, we have this console where we can output some development
log messages, something we'll do throughout the course. We have the elements tab where we can see the
rendered HTML content and so on.
Now one important setting I want you to make here in the developer tools to also have the same output
and behavior here as I have it, in a console area
if you click on the gear icon here, make sure preserve log is not check.
This simply makes sure that whenever you reload the page, this log will be emptied and we see a new
log output for the currently running page,
now that's all. Now we'll have a close look at the developer tools in a separate module,
I just already want you to be aware of them and I want you to make sure that you use Chrome and have a
properly setup editor and with that, we're all set,
we can now dive into Javascript, its basics and get started learning this amazing language.