Coding

HTML Course – How Web Developers Work | Beginner’s Tutorial | #2

  • 00:00:01 welcome back to the beginner's guide in
  • 00:00:03 the last video we had a look at how do
  • 00:00:05 web works and we wrote our first HTML
  • 00:00:07 code this one right here now in this
  • 00:00:11 video it's time to take a look at how
  • 00:00:13 web developers work because as you can
  • 00:00:15 imagine as a web developer
  • 00:00:17 we don't write our code like this we use
  • 00:00:20 specific tools which make writing our
  • 00:00:23 code a lot easier
  • 00:00:24 these tools are called IDE integrated
  • 00:00:28 development environment let's have a
  • 00:00:30 look at these in this video
  • 00:00:35 so that's again the code that we wrote
  • 00:00:38 in the last video you remember we just
  • 00:00:40 used the integrated text editor in my
  • 00:00:43 case on the Mac this was TextEdit and as
  • 00:00:46 you can see right here although this
  • 00:00:48 code works we can see right here we have
  • 00:00:50 these four lines and the header hello my
  • 00:00:51 web page and this is line two
  • 00:00:53 well it's not really well structured
  • 00:00:56 it's basically only black and white text
  • 00:00:58 and if we take another look at Apple
  • 00:01:01 comm right here you remember we went to
  • 00:01:04 Apple comm used the chrome developer
  • 00:01:07 tools went to the network tab and then
  • 00:01:09 went to preview right here after opening
  • 00:01:12 the index.html file well if we scroll
  • 00:01:15 down again
  • 00:01:15 we can see that we have of course a lot
  • 00:01:17 more code but this code is structured
  • 00:01:20 already you can see this body tag for
  • 00:01:23 example right here and you can see a
  • 00:01:25 side then the indented ifs and you can
  • 00:01:28 see some colors in there so all these
  • 00:01:31 things that make this code easier to
  • 00:01:33 read and better to understand now as you
  • 00:01:36 can imagine if you have to write a lot
  • 00:01:37 of code then you need these helpers to
  • 00:01:40 make sure that you can really work with
  • 00:01:42 that code otherwise it would just be a
  • 00:01:44 wall of text basically now as already
  • 00:01:46 the browser integrated tools offer such
  • 00:01:49 functionality of course we as a
  • 00:01:51 developer also can use specific codes
  • 00:01:54 when we want to write that code because
  • 00:01:56 in that case we only display the code
  • 00:01:58 but I've been writing the code you also
  • 00:01:59 need structure now for this purpose we
  • 00:02:02 use IDE s as said before integrated
  • 00:02:05 development environments before we
  • 00:02:07 continue one important note
  • 00:02:09 actually we should differentiate between
  • 00:02:11 text editors like notepad then we have
  • 00:02:14 text editors which make writing our code
  • 00:02:17 easier or more convenient let's call
  • 00:02:20 them code editors maybe and then we have
  • 00:02:22 IDE s which have these code editor
  • 00:02:25 functions so to write the code in a more
  • 00:02:27 convenient way but these IDE s also have
  • 00:02:31 integrated tools for debugging or
  • 00:02:33 compiling if you don't know what that is
  • 00:02:35 at the moment no worries will not talk
  • 00:02:37 about that at this stage of the series
  • 00:02:39 the important thing is that for
  • 00:02:41 simplicity reasons I will just refer to
  • 00:02:44 ie
  • 00:02:45 whenever I talk about tools which make
  • 00:02:47 writing oral code
  • 00:02:48 more convenient or easier just to keep
  • 00:02:50 that in mind now that we defined IDE
  • 00:02:53 let's have a look at why we might need
  • 00:02:56 such an IDE because as I said before an
  • 00:02:59 IDE makes it easier for us as a
  • 00:03:02 developer to write our code so we can
  • 00:03:04 differentiate between notepad or
  • 00:03:06 TextEdit so the editor we used so far
  • 00:03:08 and the IDE now what are the advantages
  • 00:03:11 of the IDE then well the first advantage
  • 00:03:13 is the better structure because if you
  • 00:03:16 think back about the text editor then
  • 00:03:18 the structure was something like that
  • 00:03:19 you have the body opening and closing
  • 00:03:22 tag and in this body element you have a
  • 00:03:25 paragraph and the header now this is
  • 00:03:27 still a lot of code but structure well
  • 00:03:30 not really there with an IDE you get
  • 00:03:33 this structure automatically and you can
  • 00:03:35 immediately see that you have this body
  • 00:03:38 element with the opening and the closing
  • 00:03:39 tag again and inside this body element
  • 00:03:42 you have the paragraph and the header
  • 00:03:44 this will become really important later
  • 00:03:46 but for a moment the important thing is
  • 00:03:48 that you immediately see that the IDE
  • 00:03:50 allows you to structure your code more
  • 00:03:53 efficiently because as I said before
  • 00:03:55 this structure was basically created
  • 00:03:57 automatically by the IDE that's the
  • 00:04:00 first thing an IDE helps us to improve
  • 00:04:02 the structure of our code what other
  • 00:04:04 advantages do we have well the second
  • 00:04:06 advantage is that an IDE is adding
  • 00:04:09 colors to our code again if you think
  • 00:04:12 about an example in text editor well the
  • 00:04:14 only thing you see is black and white
  • 00:04:16 text now with an IDE this would look
  • 00:04:19 something like that and all these colors
  • 00:04:21 are automatically again now in
  • 00:04:23 combination with the structure in the
  • 00:04:25 first step and the color in the second
  • 00:04:27 step this becomes already much more
  • 00:04:30 readable and better to understand for
  • 00:04:32 the user so that's the second advantage
  • 00:04:34 we have colors in our code and the
  • 00:04:37 further advantage is the file management
  • 00:04:39 because if you think back about the
  • 00:04:42 structure of our project this could look
  • 00:04:44 something like that on our computer we
  • 00:04:46 have folders with images with scripts
  • 00:04:48 and styles we'll talk about that later
  • 00:04:50 fraud is serious and we have some HTML
  • 00:04:52 files now if you want to open another
  • 00:04:54 file we have to open that folder and
  • 00:04:56 open that file with the text editor
  • 00:04:59 again that's not really comfortable and
  • 00:05:01 therefore with
  • 00:05:02 IDE we have all these folders integrated
  • 00:05:05 into this tool and this makes it really
  • 00:05:07 easy to navigate between the different
  • 00:05:09 folders and files and also to open
  • 00:05:11 different files inside the IDE and as
  • 00:05:15 you can imagine right now
  • 00:05:16 just these three points show us that
  • 00:05:19 using an IDE is probably a good idea if
  • 00:05:22 you want to write your web application
  • 00:05:24 in a really comfortable way
  • 00:05:26 because the important thing about the
  • 00:05:28 page should be the code the structure of
  • 00:05:30 the code the logic of the code and the
  • 00:05:32 functionality of the page and not things
  • 00:05:34 like how can I get the basic structure
  • 00:05:36 into the code just to be able to read it
  • 00:05:38 that shouldn't be the focus of us as web
  • 00:05:40 developers this should be done but a
  • 00:05:42 tool that we use now talking about the
  • 00:05:44 tools that we should use now which IDE
  • 00:05:47 should we use or which I des are
  • 00:05:49 available well the answer is we have
  • 00:05:51 lots of different ideas available on the
  • 00:05:54 market just to name some we could use
  • 00:05:56 atom or sublime text or webstorm or
  • 00:06:00 visual studio code and as you can hear
  • 00:06:03 by my voice we will use Visual Studio
  • 00:06:04 code throughout this mini series now
  • 00:06:07 what will we use Visual Studio code
  • 00:06:09 right here well the first reason is it's
  • 00:06:11 for free which is always good the second
  • 00:06:13 reason is that it's really easy to use
  • 00:06:16 and it's a nice working environment
  • 00:06:18 actually and the third reason is that
  • 00:06:20 Visual Studio code is actually a code
  • 00:06:23 editor you remember we talked about code
  • 00:06:25 editors versus IDs but it comes with
  • 00:06:27 some IDE like features and therefore
  • 00:06:30 it's kind of a hybrid between the code
  • 00:06:32 editor or a pure code editor and the
  • 00:06:34 real IDE so because of that we will use
  • 00:06:37 Visual Studio code now where can we find
  • 00:06:38 it actually well the answer is quite
  • 00:06:41 simple we can simply go to
  • 00:06:42 code.google.com and here we can find the
  • 00:06:47 latest stable build as download now the
  • 00:06:50 important thing is that if you click
  • 00:06:51 right here you can also find insiders so
  • 00:06:54 these are the pre-release candidates of
  • 00:06:56 Visual Studio code to download but for
  • 00:06:59 the purpose of this miniseries we will
  • 00:07:00 just stick to the stable release version
  • 00:07:03 of Visual Studio code now simply click
  • 00:07:05 download to well download Visual Studio
  • 00:07:07 code for your operating system and if
  • 00:07:10 you then open visual studio code this is
  • 00:07:12 what you should see now in case you
  • 00:07:14 cannot see this Explorer right there
  • 00:07:16 simply click onto the symbol right here
  • 00:07:18 so in my case it's now hidden and if you
  • 00:07:20 click again it should be visible now
  • 00:07:22 with that we made sure that you see the
  • 00:07:24 same screen that I see and before we now
  • 00:07:27 think about the question how can we now
  • 00:07:28 open the index.html file that we created
  • 00:07:31 in the last video let's have a quick
  • 00:07:34 look at code up here go to preferences
  • 00:07:37 and go to color theme right there
  • 00:07:39 because right here you can see that you
  • 00:07:42 have lots of different color themes
  • 00:07:43 available in Visual Studio code which
  • 00:07:46 helps you to well kind of define the
  • 00:07:48 look that you want to have to make sure
  • 00:07:50 that you can enjoy coding now in my case
  • 00:07:52 I will stick to the dark plus default
  • 00:07:55 dark theme right there now back to the
  • 00:07:57 question how we can open the index.html
  • 00:08:00 file now well as you can see right here
  • 00:08:03 we have this open folder button and if
  • 00:08:05 we click onto that well then we should
  • 00:08:08 navigate to the folder that we created
  • 00:08:10 in the last video and where we save that
  • 00:08:13 index.html file to in my case this is
  • 00:08:17 the howdy web works fall over there here
  • 00:08:19 you can see the index.html file now if
  • 00:08:21 you now select a folder and press open
  • 00:08:25 well then you can see that you have two
  • 00:08:27 folder name right here so how the web
  • 00:08:30 works and we can open this folder by
  • 00:08:32 clicking right here select the
  • 00:08:34 index.html file and we can see it right
  • 00:08:36 there in this ribbon right here now as
  • 00:08:38 you can see this is exactly the content
  • 00:08:41 that we created in a text editor but you
  • 00:08:43 already have some color in here because
  • 00:08:45 we see that the tags were automatically
  • 00:08:47 colored blue and with that we now have
  • 00:08:50 all the tools we need to start our first
  • 00:08:52 little web development project and by
  • 00:08:55 that I mean creating our first basic web
  • 00:08:58 application for this purpose we will
  • 00:09:00 dive deeper into HTML CSS and JavaScript
  • 00:09:03 throughout the next videos of this
  • 00:09:05 series and after finishing the CSS part
  • 00:09:08 we will have built this web app as you
  • 00:09:11 can see this is of course a basic web
  • 00:09:13 app but we have some images in it we
  • 00:09:16 have some styling and we also have a
  • 00:09:18 desktop and a mobile design implemented
  • 00:09:22 and this is quite awesome actually I
  • 00:09:23 think because these are our first steps
  • 00:09:26 in web development so I hope to see you
  • 00:09:28 in the next video but
  • 00:09:30 we will start creating this web app and
  • 00:09:32 dive deeper into HTML by