Welcome back to the beginner's guide. In the last video, we had a look at how the web works and we wrote our first HTML code, this one right here. Now in this video, it's time to take a look at how web developers work.
Because as you can imagine, as a web developer, we don't write our code like this. We use specific tools which make writing our code a lot easier. These tools are called IDE, Integrated Development Environment. Let's have a look at these in this video.
So that's again the code that we wrote in the last video. You remember, we just used the integrated text editor. In my case, on the Mac, this was text edit.
And as you can see right here, although this code works, we can see it right here, we have these three lines, I'm the header, hello, I'm a web page, and this is line two. Well, it's not really well structured. It's basically only black and white text. if we take another look at apple.com right here, you remember we went to apple.com, used the Chrome developer tools, went to the network tab, and then went to preview right here after opening the index HTML file.
Well, if we scroll down again, we can see that we have, of course, a lot more code. But this code is structured already. You can see this body tag, for example, right here.
And you can see a side, then the indented diffs, and you can see some colors in there. So all these things that make this code easier to read and better to understand. Now as you can imagine if you have to write a lot of code then you need these helpers to make sure that you can really work with that code.
Otherwise it would just be a wall of text basically. Now as already the browser integrated tools offer such a functionality of course we as a developer also can use specific codes when we want to write that code. Because in that case we only display the code. but when writing the code you also need structure. Now for this purpose we use IDEs as said before integrated development environments.
Before we continue one important note. Actually we should differentiate between text editors like notepad then we have text editors which make writing our code easier or more convenient. Let's call them code editors maybe and then we have IDEs which have these code editor functions so to write the code in a more convenient way. But these IDEs also have integrated tools for debugging or compiling. If you don't know what that is at the moment, no worries, we'll not talk about that at this stage of the series.
The important thing is that for simplicity reasons, I would just refer to IDE whenever I talk about tools which make writing AuroCode more convenient or easier, just to keep that in mind. Now that we defined IDE, let's have a look at why we might need such an IDE. Because, as I said before, an IDE makes it easier for us as a developer to write our code.
So we can differentiate between Notepad or TextEdit, so the editor we use so far, and the IDE. Now, what are the advantages of the IDE then? Well, the first advantage is the better structure.
Because if you think back about the text editor, then the structure was something like that. You have the body opening and closing tag, and in this body element you have a paragraph and a header. Now...
This is still not a lot of code, but structure, well, not really there. With an IDE, you get this structure automatically. And you can immediately see that you have this body element, with the opening and the closing tag again, and inside this body element, you have the paragraph and the header.
This will become really important later, but for the moment, the important thing is that you immediately see that the IDE allows you to structure your code more efficiently. Because, as I said before, this structure was... basically created automatically by the IDE.
That's the first thing. An IDE helps us to improve the structure of our code. What other advantages do we have? Well, the second advantage is that an IDE is adding colors to our code. Again, if you think about an example in text editor, well, the only thing you see is black and white text.
Now, with an IDE, this would look something like that. And all these colors are added automatically again. Now, in combination with the structure in the first step. And the color in the second step, this becomes already much more readable and better to understand for the user.
So that's the second advantage. We have colors in our code. And the third advantage is the file management.
Because if you think back about the structure of our project, this could look something like that on our computer. We have folders with images, with scripts and styles. We'll talk about that later throughout the series. And we have some HTML files.
Now if we want to open another file, we have to open that folder and open that file with the text editor again. That's not really comfortable. And therefore, with an IDE, we have all these folders integrated into this tool.
And this makes it really easy to navigate between the different folders and files and also to open different files inside the IDE. And as you can imagine right now, just these three points show us that using an IDE is probably a good idea. if you want to write your web application in a really comfortable way.
Because the important thing about the page should be the code, the structure of the code, the logic of the code, and the functionality of the page. And not things like, how can I get the basic structure into the code just to be able to read it? That shouldn't be the focus of us as web developers. This should be done by the tool that we use. Now, talking about the tools that we should use now, which IDE should we use or which IDEs are available?
Well, the answer is we have... lots of different IDEs available on the market. Just to name some, we could use Atom or Sublime Text or WebStorm or Visual Studio Code. And as you can hear by my voice, we will use Visual Studio Code throughout this mini-series.
Now, why will we use Visual Studio Code right here? Well, the first reason is it's for free, which is always good. The second reason is that it's really easy to use and it's a nice working environment actually.
And the third reason is that Visual Studio Code is actually a code editor. You remember we talked about code editors versus IDEs. But it comes with some IDE-like features.
And therefore it's kind of a hybrid between the code editor or the pure code editor and the real IDE. So because of that we will use Visual Studio Code. Now where can we find it actually?
Well, the answer is quite simple. We can simply go to code.visualstudio.com and here we can find the latest stable build as a download. Now the important thing is that if you click right here, you can also find insiders.
So these are the pre-release candidates of Visual Studio Code to download. But for the purpose of this mini-series, we will just stick to the stable release version of Visual Studio Code. Now simply click download to, well, download Visual Studio Code for your operating system. And if you then open Visual Studio Code, this is what you should see. Now in case you cannot see this explorer right there, simply click onto this symbol right here.
So in my case it's now hidden. And if you click again, it should be visible. Now with that, we made sure that you see the same screen that I see. And before we now think about the question, how can we now open the index.html file that we created in the last video, let's have a quick look at code up here. Go to preferences and go to color theme right there.
Because right here you can see that you have lots of different color themes available in Visual Studio Code, which helps you to, well, kind of define the look. that you want to have to make sure that you can enjoy coding. Now, in my case, I will stick to the dark plus default dark theme right there. Now, back to the question how we can open the index.html file now.
Well, as you can see right here, we have this open folder button. And if we click onto that, well, then we should navigate to the folder that we created in the last video and where we save that index.html file to. In my case, this is the...
how the web works folder right there here you can see the index.html file now if you now select the folder and press open well then you can see that you have the folder name right here so how the web works and we can open this folder by clicking right here select the index.html file and we can see it right there in this ribbon right here now as you can see this is exactly the content that we created in the text editor but we already have some color in here because we see that the text were automatically colored blue. And with that, we now have all the tools we need to start our first little web development project. And by that I mean creating our first basic web application. For this purpose we will dive deeper into HTML, CSS and JavaScript throughout the next videos of this series.
And after finishing the CSS part, we will have built this web app. As you can see, this is of course a basic web app, but we have some images in it. We have some styling and we also have a desktop and a mobile design implemented. And this is quite awesome actually I think because these are our first steps in web development.
So I hope to see you in the next video when we will start creating this web app and dive deeper into HTML. Bye!