Coding

Real Beginners Corner: HTML, CSS & JavaScript Basics – #1 The Basics about a Web Page

  • 00:00:00 hi welcome everyone welcome to this
  • 00:00:02 brand new series web development for
  • 00:00:05 real beginners in this course I promise
  • 00:00:08 we're gonna start at zero we will look
  • 00:00:12 at what is a web page which components
  • 00:00:15 make a web page up and then we will go
  • 00:00:18 step by step through these components to
  • 00:00:23 really get you going with web
  • 00:00:25 development now I'm not telling you that
  • 00:00:27 after this video series you'll be able
  • 00:00:31 to create super awesome complex websites
  • 00:00:34 but I will promise you that you will
  • 00:00:36 have everything you need to really get
  • 00:00:38 started with web development so let's
  • 00:00:41 dive into it so I'm here on the
  • 00:00:43 Microsoft u.s. page and this is no
  • 00:00:45 coincidence
  • 00:00:46 I'm here because this page is really
  • 00:00:50 good for talking about what a web page
  • 00:00:53 really is and which components make it
  • 00:00:56 up without any basics your on your web
  • 00:00:59 page like those you think more will end
  • 00:01:01 looking pretty okay right so we got our
  • 00:01:05 menu bar here then we got this big main
  • 00:01:11 slider here or image gallery where we
  • 00:01:14 can cycle through but in this case two
  • 00:01:17 of their main products we get a little
  • 00:01:19 more products here and so on we
  • 00:01:22 consequence scroll down we got these
  • 00:01:25 effects like this image here which will
  • 00:01:29 change every few seconds so this webpage
  • 00:01:35 really has some components you see on
  • 00:01:37 modern websites these days so what
  • 00:01:41 actually is a web page now web page is
  • 00:01:45 simply what our browser displays when he
  • 00:01:49 gets data from a server so when we enter
  • 00:01:53 microsoft.com here in the you are the UT
  • 00:01:56 URL up here in our browser URL bar what
  • 00:02:01 our browser will do is send a request to
  • 00:02:04 the Microsoft servers saying hey I got a
  • 00:02:08 wizard ur wants to see your web page
  • 00:02:11 please give me all
  • 00:02:12 information I need to show it to it now
  • 00:02:16 the Microsoft server might do some
  • 00:02:18 stephane in the background but in the
  • 00:02:20 end it will send us back some HTML which
  • 00:02:25 the browser then can then render for us
  • 00:02:28 to display now this is HTML part is
  • 00:02:31 really important because HTML in the end
  • 00:02:34 is what every web page you see is
  • 00:02:38 obviously on the server that might be
  • 00:02:40 running different programming languages
  • 00:02:43 and a very complex complex business
  • 00:02:45 logic but what you see in your browser
  • 00:02:47 will always be HTML rendered to you
  • 00:02:52 because browser developers as well as
  • 00:02:56 web developers need some standards for
  • 00:02:59 which they can develop so that they know
  • 00:03:01 ok we get this pool off in this case
  • 00:03:04 HTML tags as we will see soon from which
  • 00:03:09 we can take some to create our website
  • 00:03:12 and this will make sure that the website
  • 00:03:15 will look the same in each browser on
  • 00:03:17 each device now that is a bit of a
  • 00:03:21 simplification there are small
  • 00:03:23 differences unfortunately but in
  • 00:03:26 generally that's the logic now if you
  • 00:03:30 want to see that HTML code I can just
  • 00:03:35 right click with most browsers and then
  • 00:03:38 we will have some point which says view
  • 00:03:41 source here or a source code here so I'm
  • 00:03:44 using a German browser that's why it's
  • 00:03:47 in German but in general this would be
  • 00:03:49 an English view the source code and with
  • 00:03:51 a click it well we see the source code
  • 00:03:54 of this web page and this what we see
  • 00:03:57 here is exactly what our browser gets as
  • 00:04:01 a response upon its request it's sent to
  • 00:04:05 the server now as you can see that's a
  • 00:04:11 bit hard to read although it's at least
  • 00:04:15 a little bit indented but not the way
  • 00:04:18 you want to look at a web page probably
  • 00:04:21 and that is cool because that's
  • 00:04:23 chav of the browser it is taking all of
  • 00:04:26 this code and rendering into this
  • 00:04:29 nice-looking few here now I'll be honest
  • 00:04:32 with you pure HTML wouldn't create a
  • 00:04:36 page like this pure HTML is all you need
  • 00:04:41 to be able to render a web page to the
  • 00:04:44 user but it will look pretty ugly
  • 00:04:47 because pure HTML only get some basic
  • 00:04:51 styling a very very generic styling and
  • 00:04:55 it will not look nice and we will see
  • 00:04:57 this in the next video where we go into
  • 00:04:59 HTML a bit more so what we get from the
  • 00:05:05 browser is not only the HTML here but we
  • 00:05:10 also got some styling rules and this is
  • 00:05:14 this can always be found at the top of
  • 00:05:17 our HTML document we get back from the
  • 00:05:21 browser so here we will have a style
  • 00:05:26 section let me just look for it style
  • 00:05:31 link here get these link tags which are
  • 00:05:40 which have a relationship style sheet
  • 00:05:43 sheet and are of type text/css now CSS
  • 00:05:47 stands for cascading style sheets and it
  • 00:05:52 is the styling language of the web if
  • 00:05:55 you want to put it that way
  • 00:05:58 now there are several ways to tell the
  • 00:06:02 browser how to style element and one
  • 00:06:05 would be to write it directly into the
  • 00:06:09 element tag one would be to put a
  • 00:06:12 styling section at the beginning of an
  • 00:06:15 HTML document where you define some
  • 00:06:17 rules but the most commonly used is to
  • 00:06:20 out source it into separate styling
  • 00:06:24 sheets such called CSS files like this
  • 00:06:28 one shell Buckman dot CSS now this file
  • 00:06:33 lies in some other server or on the same
  • 00:06:36 server
  • 00:06:36 as possible and here in the HTML
  • 00:06:39 document we're basically telling the
  • 00:06:42 browser okay there is some styling which
  • 00:06:45 has to be applied to this page and the
  • 00:06:48 rules can be found in this document now
  • 00:06:52 you can absolutely specify separate
  • 00:06:56 documents and what the browser will do
  • 00:06:58 is load them all up in the order you
  • 00:07:02 specified here and this is important
  • 00:07:04 because cascading style sheets do
  • 00:07:08 cascade so they overwrite each other by
  • 00:07:12 order styles are created or entered into
  • 00:07:16 the document and we will go into detail
  • 00:07:19 much more about CSS and then next we use
  • 00:07:22 but just so you know ordering is very
  • 00:07:25 important in CSS as well as cascading in
  • 00:07:30 general but we will get back to that so
  • 00:07:33 we got our links here which load some
  • 00:07:36 style sheets here's another one link
  • 00:07:38 also referring to the sky science sheet
  • 00:07:41 and these style sheets here is one
  • 00:07:46 loaded up then define a bunch of rules
  • 00:07:50 on sizing of our font open the colors to
  • 00:07:55 spacing the way the items are aligned
  • 00:07:59 and if they sit next to each other and
  • 00:08:03 so on and so on now as you can see this
  • 00:08:07 is not very readable readable here and
  • 00:08:09 that's because it is minified that means
  • 00:08:15 for the developer certainly hasn't
  • 00:08:17 written it this way the developer has
  • 00:08:20 written it nicely spaced out and colored
  • 00:08:26 and you don't code like this right but
  • 00:08:31 in the end you got your build process
  • 00:08:33 where we will make sure that once you're
  • 00:08:35 done everything is crunched up as much
  • 00:08:38 as you can and this has one single
  • 00:08:42 reason a file like this only contains
  • 00:08:45 text but even this text will
  • 00:08:49 up file size wise if you get a lot of
  • 00:08:53 indentation blank spaces and the one
  • 00:08:56 which you will absolutely have in your
  • 00:08:58 development environment but you don't
  • 00:09:01 want it in your production environment
  • 00:09:02 because the browser has to download all
  • 00:09:06 these files because it's specified here
  • 00:09:09 in the beginning and obviously it will
  • 00:09:11 need these files otherwise wouldn't be
  • 00:09:13 able to interpret your webpage styling
  • 00:09:16 and if you get a bunch of big size files
  • 00:09:20 for a browser to download on every page
  • 00:09:22 of lessons with it this can really add
  • 00:09:25 up to your page loading speed and you
  • 00:09:28 don't want that okay so that's the
  • 00:09:32 second building block besides HTML
  • 00:09:35 cascading sky style sheets so you can
  • 00:09:38 memorize this at this point HTML will
  • 00:09:43 lay out the structure of our web page
  • 00:09:45 and CSS will apply some style to it so
  • 00:09:49 it looks nice now the last building
  • 00:09:53 block is something like these pictures
  • 00:09:58 here which change automatically that is
  • 00:10:03 achieved via JavaScript see you got this
  • 00:10:07 like Holy Trinity of front-end web
  • 00:10:11 development and they're just talking
  • 00:10:13 about front and what development here at
  • 00:10:15 the moment because we're talking about
  • 00:10:17 what the user sees which is front it the
  • 00:10:21 Holy Trinity I won't is called a vessel
  • 00:10:25 this way is HTML for structure CSS for
  • 00:10:28 styling and JavaScript for all the
  • 00:10:31 effects and good user experience really
  • 00:10:35 because the HTML document by itself as
  • 00:10:38 well as the styling is static once it is
  • 00:10:41 loaded it doesn't change by itself so if
  • 00:10:46 we wanted to change like exchanging this
  • 00:10:49 picture here opening some pop-up windows
  • 00:10:53 if user click somewhere dynamically
  • 00:10:56 reloading data we would have to employ
  • 00:10:59 via JavaScript which is a programming
  • 00:11:02 language which will run directly in the
  • 00:11:05 browser it is not precompiled it is
  • 00:11:07 interpreted by the browser on the run
  • 00:11:11 and then it will do all kinds of stuff
  • 00:11:15 so this is the program programming
  • 00:11:18 language we can use to run it on the
  • 00:11:20 client the user computer and which then
  • 00:11:26 can really enhance the user experience
  • 00:11:28 so if we were back to this HTML source
  • 00:11:34 code here let me just search for script
  • 00:11:38 which are these script tags here and
  • 00:11:43 there we have two options of including
  • 00:11:46 scripts again one is to just open a
  • 00:11:49 script tag and write our script between
  • 00:11:54 the script tags this is the case here we
  • 00:11:57 got our opening script tag here and we
  • 00:12:00 got a real closing script tag here and
  • 00:12:02 between we get some JavaScript ok you do
  • 00:12:09 this for for some scripts you want to
  • 00:12:12 have new pages but here as it was the
  • 00:12:16 case of CSS the more common cases to
  • 00:12:18 include an external script file so this
  • 00:12:22 is here Decatur's the case here we
  • 00:12:24 gather a script type of text javascript
  • 00:12:27 and between our script tags here we
  • 00:12:30 don't have anything but we're including
  • 00:12:33 this source here and this is linking to
  • 00:12:36 a script on another server in this case
  • 00:12:39 it's a query which we will talk about
  • 00:12:41 too because jQuery is a very neat little
  • 00:12:44 JavaScript library which is of use to
  • 00:12:46 webpages which really chest makes some
  • 00:12:50 operations easier and very yeah handy to
  • 00:12:54 to do so that is our javascript file
  • 00:12:58 which will ask the CSS file was be
  • 00:13:02 loaded when this page is requested and
  • 00:13:05 server sends back to
  • 00:13:07 HTML or this this document here then the
  • 00:13:10 browser will read through it from top to
  • 00:13:12 bottom and execute every line and this
  • 00:13:15 includes downloading styling and
  • 00:13:17 scripting files as well as rendering
  • 00:13:20 this and that's by the way where it's
  • 00:13:24 important to have our styling sheets at
  • 00:13:26 the beginning of this document because
  • 00:13:29 the browser will then first load our
  • 00:13:31 styling sheets and then it will go
  • 00:13:34 through the HTML structure and apply the
  • 00:13:38 styling is defined in the sheets and if
  • 00:13:41 you were to include our styling sheets
  • 00:13:43 at the bottom of this page well then our
  • 00:13:45 browser will just render everything very
  • 00:13:47 ugly and in the end I would get the
  • 00:13:49 rules but that's when everything is over
  • 00:13:52 handed word nap white so therefore
  • 00:13:54 styling has always be loaded at the
  • 00:13:58 beginning of this document whereas
  • 00:14:00 strips can reload it in the beginning
  • 00:14:03 and the hats tag I will go back and come
  • 00:14:06 back to this later two of our document
  • 00:14:09 where we define some metadata for it it
  • 00:14:11 can also be loaded in the body tag which
  • 00:14:15 is beginning here which holds the
  • 00:14:18 content of our document and it can also
  • 00:14:21 be loaded at the end of our body tag
  • 00:14:23 which is a very common place for most
  • 00:14:26 scripts because think of scripts in this
  • 00:14:30 way they enhance user action so when do
  • 00:14:34 they need to be available once the page
  • 00:14:36 has loaded obviously because the user is
  • 00:14:39 not interacting with the page in any way
  • 00:14:41 until it is finished loading that's why
  • 00:14:45 we include scripts at the bottom of the
  • 00:14:47 page most of the time because that does
  • 00:14:50 suffice it's it's okay if where they are
  • 00:14:53 loaded last because the user is only
  • 00:14:55 going to interact with them once
  • 00:14:57 everything is loaded and then you might
  • 00:15:00 say okay but it doesn't matter if I load
  • 00:15:02 them first or last right it does matter
  • 00:15:05 because script files can be very large
  • 00:15:08 they are only text but they couldn't
  • 00:15:11 connect
  • 00:15:11 in a lot of text and we can load a lot
  • 00:15:14 of scripts of files and now if this is
  • 00:15:17 the case and we were to load them at the
  • 00:15:20 top of our page then the browser would
  • 00:15:23 see okay I have to load the script it
  • 00:15:24 would start loading it and it would only
  • 00:15:26 continue once it is loaded because as I
  • 00:15:29 said it goes through this document line
  • 00:15:32 by line and it only continues with the
  • 00:15:34 next line when the line before is done
  • 00:15:38 so it's better to including at the
  • 00:15:41 bottom so it can render out all the page
  • 00:15:43 and then load the script tags so the
  • 00:15:46 user sees a paste
  • 00:15:48 page even though it might not be fully
  • 00:15:51 loaded there might be some scripts
  • 00:15:53 missing but it already asked the page
  • 00:15:57 the user already has the page to look at
  • 00:15:59 and it doesn't look like the page takes
  • 00:16:01 forever to load now if the user wants to
  • 00:16:04 interact with the page in the some
  • 00:16:06 script is necessary for this and the
  • 00:16:08 script is not loaded yet then obviously
  • 00:16:11 this interaction will fail but this is a
  • 00:16:14 very rare case we're talking about
  • 00:16:16 milliseconds and seconds of loading time
  • 00:16:19 but it's still better to load document
  • 00:16:22 first and the scripts last so that we
  • 00:16:24 get to view something on our screen as
  • 00:16:27 soon as possible
  • 00:16:29 now that's a lot of talking about this
  • 00:16:33 HTML thing and just CSS and JavaScript
  • 00:16:37 thing but it's important for you to get
  • 00:16:40 the components of a web page
  • 00:16:42 and how to play together now now that
  • 00:16:45 you get this wrap overview in the next
  • 00:16:48 videos we are going to dive deeper into
  • 00:16:50 these components we're talking about
  • 00:16:53 HTML we'll be talking about CSS and the
  • 00:16:57 end we will also be talking a little bit
  • 00:16:59 about JavaScript so I see you there bye