What do you want to learn? Leverged jhuang@tampa.cgsinc.com Skip to main content Pluralsight uses cookies.Learn more about your privacy HTML, CSS, and JavaScript: The Big Picture by Barry Luijbregts In this course, you'll learn what HTML, CSS, and JavaScript are and how they interact to bring content to your browser. Resume CourseBookmarkAdd to Channel Table of contents Description Transcript Exercise files Discussion Learning Check Recommended Course Overview Course Overview (Music) Hi everyone. My name is Barry Luijbregts, and welcome to my course, HTML, CSS, and JavaScript: The Big Picture. I am an independent software developer and architect with a passion for the cloud. HTML, CSS, and JavaScript are the main technologies that make up the web as we know it. Every web page that you visit contains HTML, CSS, and JavaScript; therefore, it is vital that you know what these technologies are, where they came from, and where they are going. Some of the major topics that we will cover include why you should care about how the web works, displaying the web with HTML, styling the web with CSS, and interacting with the web with JavaScript. By the end of this course, you will know what HTML, CSS, and JavaScript are and how they interact to bring content to your browser. You don't have to know anything about HTML, CSS, or JavaScript before you take this course. I hope you'll join me on this journey to learn about HTML, CSS, and JavaScript, with the HTML, CSS, and JavaScript: The Big Picture course, here at Pluralsight. Why You Should Care About How the Web Works Introduction Hi, and welcome to this big picture course about HTML, CSS, and JavaScript. I'm Barry, and I am an independent software architect and developer. You can find me on Twitter @AzureBarry and on my personal website, azurebarry.com. In this course, you'll learn about the things that make the web work, HTML, CSS, and JavaScript. And in this first module, I'll explain why it is important to know what HTML, CSS, and JavaScript are. Basically, why you need to know how the web works. To discover why you need to know how the web works, I'll first explain where the web came from and give you an overview of how it works. Once you know that, it's easy to see why you should learn about how it works, and specifically how HTML, CSS, and JavaScript work. Ready? Let's dive in! A Look into the History of the Web We'll start by looking at the history of the internet and the web. This history is action packed, but I've picked the most significant events to talk about. It all starts in the '60s. In 1960, a lot of research into network package switching techniques was done. This was done because researchers were trying to create networks that could survive nuclear war. Package switching is the technique to divide information into message blocks that each get routed separately. This technique was the basis that made the internet possible. Then, in the late 1960s, networks that implemented package switching emerged. There were a handful of these networks, including the NPL Network and ARPANET, which connected the University of California with the Stanford Research Institute. These networks were all private networks; the public didn't have access to them. In 1972, the first link between the United States and Europe was created by satellite when ARPANET was connected to the Norwegian Seismic Array. In 1981, access to ARPANET was expanded. The NSF, or National Science Foundation, created the Computer Science Network, which connected to ARPANET using TCP/IP. Also in 1981, the Internet Protocol 4 standard was published. This is an implementation of TCP/IP and still runs most of the internet's traffic today. This also started the public availability of the internet, when in the late 1980s public internet service providers emerged to offer companies and consumers access to the internet, which was very rudimentary back then because there wasn't a World Wide Web as we know it today. This World Wide Web came about in 1989 when the idea and the term World Wide Web was proposed. This was the idea of an open information system that was populated with documents that you could reach through URLs. The man who coined the World Wide Web also came up with the first tools for the web, including a web browser in 1990, which is not even 30 years ago. The documents that populated the internet were HTML documents that could be enriched with images and styles. To make all of this work and to be able to actually style the documents, Cascading HTML Style Sheets, or CSS, was introduced in 1994. By now, there were many more web browsers available to the public. In 1995, JavaScript was introduced to enhance the document experience by allowing programmable actions on the web. By now, people started using mobile phones, and in 1999 some even had very simple access to the internet. This was about 20 years ago. That's nothing in terms of human history. The internet was surging and most businesses were creating websites. By the year 2000, 414 million people were connected to the internet and were using the World Wide Web. That's just 10 years after the web was proposed and the first web browser was developed. In 2008, Google Chrome was released. That's just 10 years ago. By that time, the browser wars were in full swing and all the major vendors were heavily competing to have users use their platforms. And just in 2017, 3.9 billion people had access to the internet and the World Wide Web. Isn't that amazing, from 414 million in the year 2000. And, 49% of all web page views in 2017 came from mobile devices. Today, the modern world is heavily dependent on the internet and the World Wide Web; it has become a utility like electricity. It runs most of our businesses, our governments, and our public infrastructure, like traffic lights. We can't live without it anymore. Within this timeline, two major things happened. The internet was created, which is represented by these events. This is the plumbing that connects all of our devices and powers the World Wide Web. And, the World Wide Web was created to be able to navigate to resources and actually use them in web browsers. The creation of HTML together with CSS and JavaScript have made the web of today possible. How the Magic of the Web Works Now that we've seen where the internet came from and how the web started, let's take a look at how the web actually works. First, let's start with a definition of the World Wide Web. The World Wide Web is an information space where documents and other web resources are identified by Unique Resource Locators, or URLs, interlinked by hypertext links and can be accessed by the internet. I didn't come up with this myself, it came from Wikipedia from this link. So, it's an information space for documents and other resources that you can access through the internet. That's the basic idea. And URLs provide unique addresses to those resources so that your browser can be pointed to them and you can use them. This very simple idea is still true. The web still works like this today, everything has a unique URL and is based on a document, an HTML document. So, the web works because of some basic ingredients. The first ingredient is resources, like HTML documents, images, or other files. This is the content that we want to use, websites that we want to browse, images to look at, files that we want to share. The second ingredient is URLs. These uniquely identify the resources so that your web browser can ultimately show them to you or download them. Every resource on the web has a unique URL. The final main ingredient that makes all of this work is the Hypertext Transfer Protocol, or HTTP. This protocol is the magic that can retrieve documents and communicate them to your web browser. I'm not going to go into HTTP in this course, you just need to know that it exists and that it is very important to the web as we know it. Let's put all of the ingredients to work. There are more parts to a working World Wide Web besides the main ingredients of resources, URLs, and HTTP. So, here is how it works. Documents, like HTML documents and other resources like images, are hosted in a web server. This is just a computer, like your own computer or laptop, but it runs special software that enables it to serve up the HTML documents and other resources. The web server will have a unique address on the internet, a URL. All resources will have unique names so that they can be identified on the internet. This particular document has a URL of server.com/document1.html. We have a web server that hosts resources. You can use these resources from a client computer that has a web browser installed on it, like Internet Explorer or Google Chrome. Nowadays, there are many types of client PCs that have web browsers. Some are desktop computers, others are mobile phones or even virtual reality headsets. These web browsers then ask the internet to serve up a specific document that lives at the address of a given URL. The HTTP protocol takes care of the information communication between the web browser and the web server to actually get the document so that the web browser can render it on the screen. Whilst painting an HTML document on the screen, a web browser uses CSS and JavaScript to style the document and give it functionality. Now, a web browser doesn't only get documents from a server, sometimes it even sends documents back. It can alter the HTML that is on the client PC, by for instance entering address information in text boxes and send that back to the server for processing using an HTTP POST operation. The HTTP protocol takes care of this and can perform many operations like this. Now this is a very simplified view of how the web works. There is much more going on, like domain name server calls and TCP/IP protocol handshakes, but that is beyond the scope of this course. For now, it is good to know how the web works on a high level. Why Learn About HTML, CSS, and JavaScript? Now that we know how the web works, why should you learn about HTML, CSS, and JavaScript? The web works because of the internet. Magic happens when a web browser asks for a document by a URL and a web server returns it through the HTTP protocol. All of that stuff is infrastructure. Very interesting stuff, but not very interesting for developers and software architects. The magic that happens in the web browser, that is where we focus, the HTML document that gets rendered and painted on the screen. It gets formatted and styled with CSS, and it gets functionality from JavaScript. Those are interesting technologies. So why should you learn about these topics? Well, when you are new to these topics, you should learn about them to be able to know what the technologies of HTML, CSS, and JavaScript are on a high level. When you know this, you know why they are relevant for the web and in the modern software development world. Also, by learning about these technologies, you'll learn how people use HTML, CSS, and JavaScript and what is involved in using them. It is also useful to learn about this when you are already experienced. This reaffirms the concepts that you already know and sharpens them. By looking at these technologies from a higher level, including from the history of them, you'll get a greater context for why these technologies work the way they do. Things to Remember Let's go over the important things that you should remember from this module. We've discussed the history of the internet and the World Wide Web. Through that, you've learned that the web is only possible because of the underlying infrastructure, which is the internet, and you've seen that the internet and the web are relatively young. The internet has only been around since the '80s, and the web since the '90s. This is an incredibly short time for a technology to take over the world. There are some things that need to be in place for the web to work. There needs to be a web server that hosts resources like documents and images. The server and the documents combined create a unique URL that can be used to identify the resources on the internet. To get the documents and other files from the web server, you'll need data transfer protocols like HTTP. And finally, you need a computer or other device that runs a web browser to use the resources and view the documents. All of this leads to why you should learn about the technologies in this course, HTML, CSS, and JavaScript. You should learn these to discover what they are, why they are relevant, and how they are used. In the next module, you'll learn what HTML is, where it came from, and how it is used. Displaying the Web with HTML Introduction In this module, you'll learn the basics about the Hypertext Markup Language, or HTML. We'll talk about the basic concepts of HTML so that you can learn what HTML is and what it looks like, where HTML came from, and how it is likely to progress in the future, and, how you can go about creating HTML and what the options are for doing so. Let's take a look. Where Did HTML Come From? Let's take a look at where HTML came from. Before we look at where it came from, I'll briefly show you what it is. I'll start with an example of a web page. Here you see a web page. This is a web application that accompanies my Pluralsight course, Building a Global Application with Azure Platform as a Service. It is a simple web application with pages that display text and images, and every page can be accessed by a unique URL, like this. This URL is unique throughout the internet; that is how my web browser was able to navigate to this page. All of this is HTML, which itself can contain URLs or links to other web pages, like this GitHub page. And, when I right-click, I can select View page source to actually see the HTML that this page is made of. It consists out of elements with attributes, and we'll talk about that more later on. Now that we've seen it, it's more easy to talk about. Here is a definition of HTML that I think fits well. HTML is the standard markup language for creating web pages and applications, so it is the standard language for the web, and it is a markup language and not a programming language or a scripting language. This means that you use it to control the presentation of data just like we've seen in the website where the data is the text and the images. So where did HTML come from? In the previous module, we've seen that it sprouted up at the same time as the World Wide Web and the first web browser. HTML was originally specified in 1990 together with the web browser and the World Wide Web, and it wasn't until 1993 that the first official draft proposal of an HTML specification was defined by the Internet Engineering Task Force. This was a proposal for an actual standard, something that should be used by all web browsers. Around the same time, another rivalling specification called HTML Plus was proposed that suggested standardizing already implemented features like tables and fill out forms. After these drafts expired in early 1994, the Internet Engineering Task Force created a working group that created the HTML 2.0 specification that would serve as the standard for web browsers. After that, the HTML specification was further developed by the World Wide Web Consortium, or W3C, that proposed the HTML 3.2 specification in January of 1997. Later that year, in December of 1997, the W3C published a recommendation for HTML 4.0. Then, in 1999, a revision called HTML 4.01 was published by the W3C. And aside from drafts and minor versions, no new versions were published for a long time, until in 2014 HTML5 was published by the W3C after being developed by the Web Hypertext Application Technology Working Group, which later became a joint deliverable with the W3C. HTML5 offers a large number of new HTML elements that allow for more expressive markup and more interactive web pages. In 2016, the W3C delivered HTML 5.1, and in 2017 HTML 5.2. As you can see, developing a specification and evolving it is hard and time consuming. So, who manages the HTML specification? You've heard about several taskforces and organizations that were involved in the creation and evolution of HTML. Let's talk about them some more so that you understand who did what. In 1990, it was the inventor of the World Wide Web and the web browser, Tim Berners-Lee, that came up with the first specification of HTML, the first elements that it consisted of. This wasn't a standard yet. In 1993, the Internet Engineering Task Force proposed the first official specification, which they hoped would become a standard. This is a United States-based group that wants to create standards so that the internet becomes better. They also are heavily involved in the TCP/IP standard. Since 1996, the World Wide Web Consortium, or W3C, maintains the HTML specification with input from commercial software vendors. The W3C was actually founded by Tim Berners-Lee in October of 1994, and the following didn't show up on the timeline because it didn't have to do with a new version of the specification, but in 2000 HTML officially became an international standard, registered with the International Organization for Standardization and the International Electronical Commission. And in 2004, a new group founded by people from Mozilla, Apple, and Opera was formed. This group was called the Web Hypertext Application Technology Working Group. This group formed in response to the slow development of web standards by the W3C. The group started working on HTML 5.0, which was adopted by the W3C as the way forward and became a joint deliverable of the W3C and the Web Hypertext Application Technology Working Group. HTML5 is now considered a living standard. Some say that there will never be a 6.0 version of HTML, as HTML5 or the living HTML standard will just be evolved to have new features. What Is HTML? Let's take a look at what HTML actually is. As you've seen, it is the standard markup language for creating websites and web applications with. The things that you see in websites and web applications are rendered by the web browser from HTML documents. These are documents with the HTM or HTML extension that are served by web servers on unique URLs. HTML documents contain various elements that are specified in the HTML specification and can be understood by all web browsers. The first element in any HTML document is the DOCTYPE element. This is strictly not an element that is part of the HTML standard, but it does tell the browser that this is an HTML document and tells it which version of HTML it is written in. The DOCTYPE element here is for HTML5. Next are the HTML elements. Every element has an open and a close element. This tells the browser that everything in here is HTML. Then there is the head element. This can include a title for the document, scripts, styles, metainformation, and more. And finally, there is the body element that contains everything that you want to be displayed on the screen. These are all the elements that are necessary in an HTML document. All web browsers understand these elements and use them to display content on the screen. Now let's look at an example of this structure in HTML. All of the basic HTML elements are here. In the head element is a meta tag that has the charset attribute that tells the browser that the character encoding that is used in the document is UTF-8. It also has a title tag, which appears at the top of the browser. And in the body element, it has a div tag, which indicates that everything in this tag belongs together. This has an unordered list in it with three list items that contain text. When a web browser renders this HTML document, it looks like this, a list with text, and the title that is visible in the browser tab. There are much more elements and tags in HTML than just these standard ones. Especially with the introduction of HTML5, elements have become much more expressive. They explain what they are used for so that the browser can understand them better and search engines know better which parts of the document are actual data and which parts are metainformation. Here are some of these elements. A header element, which represents a container for introductory content or a set of navigational links. This can contain a nav tag that defines a set of navigation links. There is the main tag that specifies the main content of a document, and inside the main tag you can find things like an article tag that specifies independent, self-contained content, and an aside tag that defines some content aside from the content it is placed in. And finally, just like there is a header element, there is also a footer tag that contains things like copyright or the address of your company. These types of tags are geared towards the content that you display on a web page and provide more nuance to the HTML markup language. There are also elements that allow you to have more interaction with the browser, for instance, the audio tag. You can use this to display an audio control bar on your page and have the browser play audio. And the canvas element that provides a place in your page that you use to paint on in order to display custom shapes. And the form element, which is the basis for most interactive websites and applications. You can use this to post information from the browser to the server, for instance text that a user entered in a text field. Within the form, you can also see a button, which is an input element of the type submit. This is what a user clicks on when he or she wants to send information to the server. And there is also a video tag that can play videos in the browser. There are a lot more of these types of elements, which are very powerful. My guess is that more of these are coming in the future. Let's look at an example of this to provide you some more context. This is YouTube, and this is an introduction video of one of my Pluralsight courses. This web application provides a player to control the video. I can look at the HTML of this page by opening the web browser tools, which you can do by pressing F12 in most web browsers. And in the tool, when I select the video that is being played, it snaps to the HTML of the video. This is a video element, like we just saw in the previous slide. In there, it has attributes that tell it what the source of the video is, and also that you can't download it, and how large it is. The video element is an example of an advanced HTML element. On the site caniuse.com, you can find out which browsers understand an element like this. Here is a screenshot of that site, and it says that all of these web browsers support the video element, except for Opera Mini. Pretty handy, right? The takeaway is that HTML is a markup language with many elements, tags, and attributes that web browsers understand, and that not all web browsers support all elements. Working with HTML Now that we know where HTML came from and what it is, let's take a look at how we can create HTML. We now know that HTML that looks like this is rendered in the browser to look like this. Web browsers understand HTML elements, tags, and attributes, and display that on the screen. In the first module, we've seen the ingredients that make the web work. This includes HTML documents that live on web servers and are identified by URLs that are unique throughout the internet. The Hypertext Transport Protocol, or HTTP, then transports user requests to the web browser and HTML and other documents to users that use web browsers on client computers. To write a website using HTML, you don't need to worry about HTTP, nor the client computers. You just write HTML documents and deploy those on the web server. I won't touch on the web server any further as that is outside of the scope of this course. Just know that a web server can host your HTML documents and expose them to the internet with a unique URL. You can write HTML documents yourself from scratch by writing all of the HTML elements, tags, and attributes that we saw. There are lots of tools that you can use to do this. You can, for instance, write your HTML documents from scratch using a simple text editor, like Notepad or Notepad++. This doesn't provide you with any smart features, like checking if your tags are correct. You can also use an integrated development environment, or IDE. These are tools that provide a lot of extra features, like suggesting HTML tags to use and error checking. There are lots of IDEs out there. Some are free, some are commercial products that you need to pay for. Here are some of them. Microsoft Visual Studio, the open-source Eclipse IDE, and GitHub's Atom IDE. An IDE provides a lot of benefits over a simple text editor. There are also online HTML editors that you don't have to install on your computer. Here's an example. This is htmlivecode.com, which is a free, browser-based HTML editor. On the left you type HTML, and on the right it gets rendered, like when I type in Hello world, or when I use something more advanced like an iframe that essentially embeds another web page into this one, and in this case embeds YouTube with one of my Pluralsight introduction videos. A browser-based tool like this is very useful to just try something out. When you don't want to write the HTML from scratch, you can use a framework to generate HTML for you. Many of the websites and applications on the internet are built this way. You write software code in a programming language like C# or Java, and often you write bits of HTML as well. You do this using a framework, like PHP or ASP.NET. Using a framework does not only generate HTML for you, but also allows you to do more advanced things like communicate with a database. All of the code that you write and all of the code of the framework lives on the web server. Now the client PC, which has a web browser, can request a document from a URL. The framework will then generate HTML for the requested document and send that to the browser to be displayed on the screen. So instead of having plain HTML documents, a framework provides a layer around it, which generates HTML and provides additional features, like being able to connect to a database. Let's look at an example to give you a little bit more context. In this example, the Microsoft ASP.NET MVC framework is used. With this framework, you create CSHTML files, like this Details.cshtml file. It is a C# HTML file that uses the Razor language to manipulate data. In the CSHTML file, you'd write HTML like this, combined with the Razor language to work with data. Additionally, you have C# files like this OrderController.cs file. This code runs on the web server and responds to the URL request to serve up the details page. Before it does that, it looks for an order record in the database, which is performed by this line of code, and then it returns the view, which is the Details.cshtml file, which triggers the generation of HTML that is sent to the browser. So, a framework like this provides a lot of flexibility and features, but is also much more advanced than just HTML. To use it, you need to learn how the framework works, and in this case how C# works. ASP.NET MVC is just one example of a framework; there are many others out there that you can use. Here are some of them. PHP, which is well known for being the language that WordPress uses. Because of this, most of the websites and applications on the internet are actually written in PHP. Java, which is a programming language that has several frameworks that generate HTML. And ASP.NET MVC, which we've just seen. Ruby, Python, and Node.js, which is a framework based on JavaScript, and Google's Go language, which can be used to build web applications. These frameworks are used to create applications and websites from scratch and can generate HTML for you. There are other ways to create web pages as well, like by using wordpress.com, which is a blogging engine. This is a ready-made product that you can use to configure a website within having to build it from scratch. Another example of a similar product is ghost.org, which is also a ready-made product that you can use to display content in a web browser. The takeaway is that there are many tools, frameworks, and ways to create HTML. Things to Remember Alright, let's summarize this module by going over the things that you need to remember from it. First of all, HTML is the basic markup for the web. It is what the web consists of. Without HTML, there would be no World Wide Web as we know it today. HTML is a standard that defines elements and attributes that browsers understand and can display on the screen. HTML is a standard, which is interpreted by web browsers. Over the years, many organizations and working groups have been involved in the development of the HTML standard, and as we've seen, the HTML standard consists out of many elements and attributes, some simple, some more advanced. And it looks like it is evolving to have more and more interactive elements, like the video element. And finally, we've looked at how to work with HTML and we've seen that you can write it from scratch using tools like text editors and integrated development environments, and that you can use frameworks like ASP.NET to generate HTML and do more advanced things like connecting to a database. In the next module, you'll learn what CSS is and how it can style HTML. Styling the Web with CSS Introduction Displaying text and images on the web is nice, but we need to be able to style the content so that it is readable and useable. We'll see how to do that in this module as we talk about how to style the web with CSS, or Cascading Style Sheets. This module has the same structure as the modules about HTML and JavaScript. We'll start out by talking about where CSS came from and what it is. Once we know that, we'll talk about which ways there are to create CSS and use it to style the web. Alright, let's take a look. Where Did CSS Come From? I want to provide you with some context around where CSS came from. This will help you to understand what CSS is and why it is important. Before we look at where it came from, let's take a brief look at what it is. Here is the website internationalcookies.eu, which is a demo website for my Pluralsight course, Building a Global App with Azure Platform as a Service. What you see here is all HTML that displays the image and the text, and here on the right side of the screen you see the HTML in the browser tools, which you can access when you press F12 in your browser. In here, we can also see the CSS, which is code that tells the browser how to style the HTML. Let's select the image of the cookie. This selects the HTML of that image, and it also displays the CSS for the image, which tells the browser to vertically align an image in the middle. Alright, so that is CSS. I like to define it as such. CSS, or Cascading Style Sheets, is a style sheet language that is used to describe the presentation of a document, like we've just seen. There are also other style sheet languages to style different things, like XML. CSS is one of those, and is the most important one for the web. Now let's take a brief look at the history of CSS. It all starts in 1994 when CSS was first proposed as a style sheet language. Other languages were also being proposed at the time; however, the W3C, or World Wide Web Consortium, who were already working on the HTML standard, added CSS to the deliverables of the HTML working group. This resulted in the official recommendation of the CSS level 1 standard in 1996. Such a recommendation is considered a specification that web browsers can adopt, which they did, although in the beginning there was very little support for CSS in the major browsers. Development on CSS continued to tackle issues in CSS 1, which resulted in the publication of the CSS level 2 recommendation in 1998. After that, a lot of time went by before there were any official new versions of the standard, although browser support became better and better. Until in 2004, CSS level 2.1 became a candidate recommendation published by the W3C. It contains fixes and new features for level 2. The level 2.1 recommendation ping ponged back and forth between candidate recommendation and a working draft until it was finally published as an official recommendation, so the actual specification of CSS in 2011. In the meantime, work on the next level of CSS had already begun. This new level was CSS level 3 and wasn't going to be one all-encompassing recommendation, but rather an ever-evolving collection of CSS modules that each described a category of capabilities. This resulted in the publication of the standard recommendation for a couple of CSS level 3 modules, including the CSS3 selectors and CSS3 colors module. Official recommendations for more CSS3 modules emerged, like the CSS3 media queries module in 2012, and the CSS3 UI module in 2017. Future developments of the CSS specification follows the module principle where some modules reach level 4 and new modules are introduced as level 1 modules, like the CSS flexbox level 1 candidate recommendation in 2017. It is important to remember that these versions all contain different capabilities of CSS and are all determined by commissions, like the World Wide Web Consortium. This results in standards that are agreed upon capabilities that only work because web browsers implement them. What Is CSS? Let's dive in a bit deeper to see what CSS actually is and what it consists of. First of all, let me say that at least to me styling the web, so styling HTML in a web browser, is still difficult. It still feels hard to do basic things like displaying something in the absolute middle of a page, always, regardless of the size of the screen or the object, just like you see here. CSS is awesome is the text that you might have seen on some coffee mugs that famously point out that CSS is difficult. Let's take a look at how it works. We've seen what HTML looks like. This HTML here results in this web page with an unordered list with text. Now how can we go about styling this? Suppose I want my web page to look like this, blue text and one of the list items in italics. I could do that with HTML that looks like this. Here I've added a style to the div that contains the list and the text, and told it to use the color blue, and here on the list item I've added a style that tells it to display its text as italic. This works, and this is CSS, which I've added inline in the HTML elements. Now that's one way of doing it. I could also do something like this. In this HTML, I've declared the styles here in the head element. This tells the rest of the HTML document that every div should display blue text, and it declares a CSS class that I can use on items that I want to be italic. This is more reusable than inline styles, as I can reuse these styles anywhere in the HTML document. This HTML would also result in this web page, just like the previous HTML. There is another way of using CSS, and that is by using external style sheets. This makes my HTML look like this for the same web page that we just saw. Here I link to a StyleSheet.css file, which contains these styles. When the browser loads this HTML, it also loads this CSS file and uses the styles on the HTML, making the color in the div blue. Using CSS like this in external style sheet files provides maximum maintainability and reusability. First of all, the styles are not in the HTML document anymore, which makes everything easier to read and to maintain. Also, because the styles are in a separate document, I can link that document in multiple HTML documents and apply the same styles there. Maximum reusability, which results in the styles being applied to both web pages when they are rendered by the browser. As we saw, CSS consists out of properties and attributes, like the color being blue or the text being italic. And as you might have noticed already, CSS can indicate to what elements the property should be applied. You do this with so-called selectors, like this one that selects all of the div elements in an HTML page, or this one that selects all of the elements that have a class attribute set to class1. And there is this selector that selects all elements in an HTML page that have an ID of para1. You can also nest things like this. This selector selects all paragraph elements that have a div element as their parent, and this one selects multiple elements on an HTML page. It selects all heading1, heading2, and paragraph elements. These are some of the CSS selectors. There are many more selectors that you can use in CSS to select elements in HTML and apply properties to them. CSS is called cascading, as in Cascading Style Sheets, because properties are applied in a specific order based on priority. Consider this HTML. Two paragraph elements with text in them. They both have the class specific assigned to them, and one of them has an ID of morespecific. Now we apply this CSS to the HTML, which results in this web page. Let me explain what happened here. The paragraph selector in the CSS says that the background color should be blue, but it hasn't been applied to either paragraph. Well, why not? Well, because the class attribute on the paragraph element has a higher priority. This means that the gray background color is applied, but not on both paragraphs. You guessed it. That is because the ID attribute has an even higher priority and overwrites the background color to red. Now you would think that this would also result in the paragraph having a solid black line around it, right? No, because that is overwritten by this property, as it has the important value, which has the highest priority of all. As the specific class applies to both paragraphs, none of them have borders around it. And what about the white text color and space in between the paragraphs, which we also call padding? Well, that comes from the paragraph selector, and that is because none of the higher priority selectors have overwritten these properties. You can create large and complex hierarchies within CSS, which can be very useful and can also make your CSS difficult to read and maintain. We've seen some of the most common capabilities of CSS already, like changing color, applying borders, and so on. There are also more advanced capabilities, which can be found in the newer properties of CSS. One of those is the media query property. In this example, I tell the browser that whenever we are displaying HTML on the screen as opposed to when we print a page, for instance, and when the screen has a minimum width of 480 pixels, I want the body element to have the background color lightgreen. This results in a web page that looks like this. Whenever the width of the page is less than 480 pixels, the background color is the default one, which is white in this case. And whenever I expand the width to a minimum of 480 pixels, it turns light green. This is what we call a responsive web page and it responds to change and adjusts accordingly. This enables you to have a different look and feel for bigger screens than for smaller screens, like on mobile devices. Another advanced property is the gradient property. In this example, I tell the browser to render everything with the ID grad with a gradient color that linearly goes from red to yellow. Cool, right? There are a lot more advanced properties that can do things like this, including things like animations. Just like with HTML, the web browsers are the ones that provide the actual capabilities of CSS. CSS just specifies the standard of what they should do when they interpret a certain property, and just like with HTML, not every browser provides the same support for every CSS property. Nowadays, most browsers support most of the CSS standard, but not everything as well. On the website caniuse.com, you can find out if a certain property, like in this case the gradient that we just saw, is supported. And in this case, we can see that it is mostly supported, but not by any version of Opera Mini. Working with CSS Now that we know what CSS is and where it came from, let's look at how you can create it. In order to understand how you can create CSS and work with it, it is important to remember how the web works with CSS in it. The web consists out of HTML documents that can optionally be styled with CSS documents. HTML documents and CSS documents live on a web server somewhere and are identified by unique URLs. HTML and CSS can live on the same web server or on different web servers, it doesn't matter, as you can link to any document from an HTML document. These documents are then transported through the HTTP protocol, which sends them to web browsers that requested them on client computers. To work with CSS, all we need to know about is how to couple CSS to HTML, which we've seen already, and that we need to host CSS documents on web servers. The other important thing to keep in mind is that it is the web browser that does all the work when it styles HTML. It takes the HTML file, interprets it, and applies the styles to it that are described in the CSS document. Alright, there are several ways to create CSS. One way is to write it from scratch. To do this, you can use tools like text editors. An example of a text editor is Notepad or Notepad++. Another way of writing CSS from scratch is by using an integrated development environment, or IDE, like Visual Studio, Eclipse, or Atom. These provide advanced features that help you write CSS more easily. These are just a few examples of text editors and IDEs. There are thousands that you can use. Let's look at an example of writing CSS from scratch in Visual Studio, which is an IDE created by Microsoft. In here, you see a CSS file. Visual Studio recognizes that this is CSS and knows the CSS standard. This is how it is able to show different colors for the different parts of the document, and once I start typing it helps me. For instance, when I type font it shows me all of the possible properties that have the word font in them. And then it even shows me the possible values for this property. This is really helpful to reduce errors and to speed up your development. Another way of using CSS is to use CSS from a library. These are CSS files that are written by other people that already contain a lot of styles that you can use in your HTML document. There are lots of CSS libraries around, and most of them are open source and free. Some contain only CSS styles, others contain a lot more stuff like JavaScript files, images, and more. A very popular CSS library is Bootstrap, which is created by Twitter. Another one is hamburgers.css. And there is Font Awesome, Ionic, and Materialize. Each of these provides different styles and different capabilities, and all of these are designed to make life easier for you as you don't have to create the styles, you just use them. Let's look at how you could use Bootstrap as an example. To get Bootstrap linked to your HTML, you could point to a URL like this. This URL points to a Bootstrap CSS file, which is hosted on a CDN server, so somebody else's server. When you use a URL like this, you don't have to worry about hosting the CSS file on your own web server, but you do need to be aware that this server that you don't control can sometimes be unavailable. Anyways, once you have the CSS file, you can start using the Bootstrap styles. One example is to use rows and columns. This would look like this where you'd have one div with a row class attached to it, which contains multiple divs that have the col-md-4 class attached to it. This results in a web page that looks like this, two columns in a row, and because you are using Bootstrap, these columns are responsive, which means that if you are on a smaller screen, the columns would move under each other automatically. Using something like Bootstrap can save you a lot of time, but you do have to learn how to use it. You need to learn what the different styles are, what they are called, and what they do. Besides writing CSS from scratch and using CSS libraries, you have another option, using a CSS preprocessor. A CSS preprocessor is a framework or language that is used to create CSS styles with. CSS preprocessors can do more advanced things than CSS. They were created because some people aren't happy with the simplistic expressions that you can do in CSS and how this can lead to large and difficult to maintain CSS documents. There are lots of CSS preprocessors out there, like Sass and LESS. When you use a CSS preprocessor, you write your style code in the language of the preprocessor, like this. The language of the preprocessor is more advanced than CSS and in the case of LESS has features like variables. This can be very useful. In this example, I use a variable named color that defines the color instead of having to type the actual color value in the properties of the style. When you are done writing your styling codes in your preprocessor, you compile it to generate CSS files. This compilation can be done with a tool that comes with the preprocessor. Once compiled, you end up with regular CSS, like this, where the color value is written out for each property. This CSS can be used just like any other regular CSS on a web server to be served up and style HTML. CSS preprocessors, like LESS, can be very useful and can increase your productivity, but you do need to learn how to use them, just like with CSS libraries. Things to Remember That's it. Now you know where CSS came from, what it is, and how you can go about creating it. Let's take a look at the key things that you should remember. As we've seen, CSS, or Cascading Style Sheets, is the styling mechanism for the web. It is a standard that describes selectors to select HTML elements and properties and value attributes to assign styles to HTML elements. This standard continues to be developed as new features are added to the standard all the time. The CSS standard itself doesn't do anything, it just tells the people who created the web browsers, like Chrome, Edge, and Firefox, how to interpret the CSS language and how to style HTML with it. Each browser interprets CSS. Hopefully, they all interpret it exactly to the standards, but this is not always the case. CSS is useful to separate style from content, where style is described in the CSS documents, and content in HTML documents. CSS is a very rich standard that describes lots of capabilities. CSS3 brought many advanced capabilities like media queries, animations, and gradients. And it looks like CSS is evolving to include more and more capabilities that make it easier to style content for mobile devices and to create animations. We've seen that there are different ways to use CSS. One of them is to write it from scratch, just as you can write HTML from scratch using text editors or integrated development environments. Another way of using CSS is by using a CSS library, like Bootstrap, which provides premade styles. And another way of using CSS is by writing it in CSS preprocesses, like Sass or LESS. CSS preprocessors provide a richer language to write CSS in and compile into regular CSS files when you are done. The web as we know it couldn't exist without CSS. It is a useful and necessary standard. In the next module, you'll learn how JavaScript enables the web to be interactive. Interacting with the Web with JavaScript Introduction In this module, we'll talk about the glue of the web, JavaScript. We'll discover how you can use JavaScript to interact with HTML, the browser, and other systems to make the web more interactive. Just like the modules about HTML and CSS, we'll start by taking a look at where JavaScript came from, and then look at what it actually is and how you can write JavaScript. Where Did JavaScript Come From? We'll start our journey to learn what JavaScript is by looking at where it came from. Before we do that, let's see it in action to give you a little bit of context around what we are talking about. This is a website from w3schools.com, a free front-end learning ground where you can learn and practice. This is a simple JavaScript example. On the left, we see simple HTML that displays some text and a button. Inside the HTML of the button, we can see an onclick event. This is what gets activated when a user clicks on the button. Inside the onclick is a piece of JavaScript, which you write inline in HTML, just like you can write CSS inline. This JavaScript simply pops up an alert that says, This is a JavaScript alert! So this little piece of programming language actually interacted with the web browser to show us more than just the HTML web page. Pretty cool, right? Alright, time for a definition. JavaScript, which we've just seen in action, is a high-level, interpreted programming language. Let's break that down. It is a programming language with all the bells and whistles that come with something like that. And it is an interpreted language, which means that you don't have to compile the code before you execute it, it is interpreted at runtime. And it is a high-level programming language, which means that it is a high abstraction from the computer, which makes it easy to use. In contrast, the C programming language is a low-level language, which is more complicated, but gives you more control over things like memory management. JavaScript sounds like it is the script version of Java. It really isn't. It has been marketed like that, but it only shares its looks with Java, not its implementation. Alright, now let's discuss the history of JavaScript. It all started in the few years before 1995 when the Netscape Navigator web browser was being developed by the company Netscape Communications. Netscape was very popular in the '90s and dominated the browser market. The founder of Netscape Communications believed that HTML needed a glue language that was easy to use by web designers. For this purpose, Netscape Communications hired Brendan Eich in 1995 to integrate the Scheme programming language into Netscape Navigator. He created a prototype of what was called LiveScript in 1995. Later in the year when the first version shipped with Netscape Navigator, it was renamed to JavaScript. As Netscape just closed a deal with Sun to incorporate Java into their products, JavaScript was positioned as the lightweight scripting language for the web that complements the Java programming language, which you choose for more robust tasks. However, JavaScript just looks a little bit like Java, but its implementation is more like a combination of the programming languages Scheme and Self. Also in 1995, soon after JavaScript released in Netscape Navigator, Netscape introduced a server-side implementation of JavaScript that worked with Netscape Enterprise Server. On the other side of the camp, Microsoft also included scripting languages in their browser, Internet Explorer. They used JScript and VBScript to do similar things to JavaScript. As Internet Explorer and Netscape had different implementations, creating websites that would run on both browsers was difficult. Around 1996, websites popped up with messages like, This website is best viewed using Netscape. So, in 1996, Netscape submitted JavaScript to ECMA International to create a standard specification, just like the standards for HTML and CSS. Having a standard would encourage all web browsers to implement it, which would make it easier for people to create web applications that work in all browsers. This led to the first official standard called ECMAScript in 1997, which was implemented by JavaScript, but also by other languages, like ActionScript and JScript. The standard evolved with more features into ECMAScript 2 in 1998, and version 3 in 1999. In the year 2000, the work started on ECMAScript 4, but these efforts didn't result in a standard and were scrapped in 2004. In 2007, ECMAScript was evolved a bit further to version 3.1 to oppose the version 4 effort. Finally, in 2008, everybody with different implementations, like JScript, came together to further the development of the standard. This resulted in the rename of ECMAScript version 3.1 to version 5 in 2009. An evolution followed soon in 2011 in the form of ECMAScript 5.1. Later in 2015, the standard was called ECMAScript 2015 and evolved into 2016 and 2017, with a lot of new features and paradigms. Nowadays, almost all the major browsers implement the ECMAScript standard and often offer more functionality than just the standard. Let's continue to call it JavaScript, as that is an implementation of ECMAScript. Nowadays, you can find implementations of JavaScript everywhere. It runs in web browsers, on your mobile devices, and server side in implementations like Node.js. Let's look at that definition again. Now we can understand why it is high level and interpreted. This was intentional to make the language easy to use without the need for compilers or otherwise complicated tooling. This has also been a point of controversy as many developers wrote and still write the language of as too simple and error prone. However you feel about it, JavaScript is everywhere, and it is more popular than ever. What Is JavaScript? Let's take a look at what JavaScript is and what it looks like. We'll start with a simple example. JavaScript can be used to manipulate HTML, the browser, and to talk with services like APIs that live on other servers. In this example, we see simple HTML with a button on it. This will display a button that has the text, See the date, on it. Now, when you click the button, the onclick event will execute, and that executes this line of code, which is JavaScript. This is inline JavaScript. You can basically write it anywhere in HTML, just like you can have inline CSS. This particular JavaScript code first selects an element with the ID of demo, and that is this paragraph element here, and it then sets the innerHTML property of that element to the value of the date function. The date function is a built-in function of JavaScript that generates the complete current date and time. This results in a web page that looks like this. The complete date and time, including time zone, is displayed as the inner HTML of the demo paragraph, so as text that is inserted within the paragraph element. Think about what happens here for a minute. JavaScript is used to select an HTML element and alter one of its properties. That is pretty cool. And, it does that without refreshing the page. Let's look at this example with the different formatting. This is the same HTML and the same JavaScript, only here the JavaScript code is moved to the head element in script tags. Now it is reusable in the rest of the HTML document by just calling the ShowDate function, which fills the demo element with the current date and time. This results in the exact same web page as the previous example. And now the same again, but again slightly different. This is the same HTML as before, and the onclick element still calls the ShowDate function, but the JavaScript itself is now removed from the HTML page to a separate JavaScript file called ScriptFile.js. And here in the HTML document, we reference that file. This is very similar to how you can include external CSS in your HTML document. This results in the exact same web page as the previous examples. When you separate JavaScript from HTML, it becomes reusable, because now I can use this function in this page, but also in other pages. Alright, so we've seen that we can use JavaScript to interact with and change HTML, we can also use JavaScript to interact with the browser that it runs in. The JavaScript here does exactly that. It opens up a prompt from the window object and asks for a name, which it then stores in the name object. If there was a name entered, the text variable gets the value of Hello with the entered name. And finally, this text, including the name that was entered, is displayed in the name element by changing its HTML. When you run this, it looks like this in a web browser. This prompt is no longer HTML, but is a part of the web browser, in this case the Google Chrome browser. So you can use JavaScript to interact with its environment, the browser. Also, you see in this example that we can use variables in JavaScript and that we can have if statements and string concatenations. These are all typical features of a programming language. Another thing that we can do with JavaScript is make AJAX calls. This was all the rage back in the day because using AJAX, you could do all sorts of interactive and advanced things from the browser without having to refresh the page. AJAX, by the way, stands for Asynchronous JavaScript and XML, and is just a certain technique that involves JavaScript. It is not an additional technology. Here is how it works. In your web browser, you have loaded an HTML document and some JavaScript that might have come from an external JavaScript document. Now from the browser you can call an external API that might have a URL like this. This API can return something like a document that you then process using JavaScript in the browser. The point of this is that using JavaScript in the context of the AJAX technique, you can call server-side resources like APIs without refreshing your browser. This allows developers to create very interactive web applications. Let's look at an AJAX example. In this example, I run code in the W3School's online editor. This allows me to test out HTML, CSS, and JavaScript without having to install anything on my computer. Here I have some regular HTML that contains a button. When the button is clicked, it fires the loadDoc JavaScript function. This uses AJAX. What that means is that it uses the XMLHttpRequest object in JavaScript. You can use this object to make calls to servers that are somewhere else without having to refresh the page. This is the essence of the AJAX technique. In this case, I attach this event to the XML HTTP object. This fires when the state of the object changes, which usually happens when it makes a call to an external server. When it does that and when all went well, it changes the text of the HTML object demo, which is a div here. It gets the text to put in the div from a document that it gets here. In this case, the document is located on the same server as the HTML document, but from here I can call any URL to get info or to post something to. Let's see it in action. When the button is clicked, it retrieves the text from the document and displays that, all without refreshing the page, only the content. Now, this is pretty advanced, so don't worry if you don't get it. The main takeaway here is that you can use the AJAX technique to do advanced things like call APIs and work with results without refreshing the page. Essentially, this provides the tools to create a complete application in JavaScript without any code that runs server side, like C#. Alright, we've seen that JavaScript can be used to interact with HTML, the browser, and even resources like APIs that aren't in the browser. Most of the features of JavaScript are described in the ECMAScript standard, which is implemented by web browsers. This is similar to how web browsers implement the HTML and CSS specification. This means that browsers not always support the specification completely and might have different implementations or features. It's all up to the browsers. So, in the case of the XMLHttpRequest object in JavaScript that we've just seen, it is supported by all major browsers except for Opera Mini. Also for JavaScript, you can look up which browsers support which features using the website caniuse.com. Working with JavaScript We've already seen what JavaScript looks like and where it came from, now let's talk about how to work with it. Before we do, let's recap how the web works and let's incorporate JavaScript in it. Any web page or application consists out of three main documents, HTML that contains content like text and images, CSS to style the HTML, and JavaScript to make it interactive. These documents are hosted on a web server that exposes them to the internet using unique URLs. Then, web browsers that are used from client computers can access these documents to the HTTP, or Hypertext Transfer Protocol. As a web developer, you just need to worry about creating the documents and putting them on the web server. Once the documents are on the client machine, the web browser interprets them and styles the HTML with CSS and loads the JavaScript to be executed. The web browsers are the main ingredient that actually run the code that you write in your HTML, CSS, and JavaScript documents. Just like with HTML and CSS, there are several ways to work with JavaScript. The first one is to write it from scratch. You can write HTML, CSS, and JavaScript from scratch because they are just text. The magic is in the web browsers that interpret them, you just create text. And, just like HTML and CSS, you can write JavaScript from scratch using simple text editors, like Notepad or Notepad++. Or you can use more advanced tools that provide you more guidance and error checking, like integrated development environments, or IDEs. There are a lot of IDEs that you can use for writing JavaScript, like Visual Studio, Eclipse, Atom, and many more. Let's look at an example of that. Here we are in Visual Studio, and here is a simple JavaScript file. I've already written a function in it. And now when I start typing, you can see that it tries to figure out what I want and suggests it for me, and it recognizes that I'm in a JavaScript file, so it recognizes words from JavaScript and suggests those. This is one of the many things that an integrated development environment can do for you. Another way to work with JavaScript is by using libraries and frameworks. Just like there are CSS libraries that provide premade styles for you, there are JavaScript libraries that provide premade JavaScript functionality for you. There are so many JavaScript libraries that it is hard to keep up with. Here are some of them. A very well-known library is jQuery. You can use this to do all sorts of things that you don't have to write yourself. It can, for instance, help you to select HTML elements in a simpler way than when you write JavaScript from scratch. All of these libraries provide functionality like that. Bootstrap, which we've seen as a CSS library, also contains JavaScript functionality in the form of jQuery plugins to do things like animations. Libraries like this can speed up your development time significantly. However, you don't know exactly what they are doing, and often they are relatively large in size. This introduces the risk that a library might contain bugs or security flaws that you don't know about, and that you load unnecessary kilobytes of JavaScript into your web page where you only use a small part of a library, which can make your web app less performant. It's up to you to weigh the pros against the cons of using a JavaScript library. The same goes for the more advanced libraries and frameworks. These are things like Angular, Knockout, React, and TypeScript. They all help you to be more productive in some way, but they also require specific knowledge. Frameworks and libraries like these are abstractions on top of plain JavaScript and you need to learn how they work. Let's look at an example of using Angular. Angular is very popular nowadays and helps you to be more productive when you create web applications. Here on the left I have some HTML. There's no JavaScript here, just some text that aren't part of the HTML standard, and a link to the Angular library. This is actually an example of an older version of Angular, but for the purpose of demonstrating it, that doesn't matter. The weird HTML attributes start with this one. This tells Angular that this is an Angular app. Another one is here on the text input element. This tells Angular to take the input from the text box as data into its model. And then I can use this tag to bind the text of this paragraph element to the data in the name model of Angular, which comes from the text box. This results in this behavior. I enter text in the text box and immediately it shows up in the paragraph. This is called data binding. Angular does this for us in JavaScript that you don't see, but is loaded in the browser. Can you imagine how much JavaScript we would have to write to create functionality like this? So using a library like Angular can be very useful and help us to speed up development a lot. But keep in mind that you need to learn how Angular works, in this case what these HTML attributes do. And also, using a library like this means that you don't know what JavaScript is actually loaded, so you have to trust Angular to be secure. Things to Remember Now you know what JavaScript is, where it came from, and how to work with it. Let's recap the things to remember from this module. JavaScript is truly the glue of the web. It is the language that makes web applications interactive and come alive. And JavaScript is not derived from Java, although it was marketed as a companion language to Java. JavaScript kind of looks like Java, but works very differently. JavaScript is a high-level programming language that was created to be easy to use by web developers and designers, and you can do a lot with it. You can use JavaScript to interact with HTML and change it on the fly. You can use it to interact with the browser to do things like pop ups, but also to interact with things like the webcam and microphone that the web browser can access. And you can use JavaScript to interact with other systems like APIs that live on other servers. It can do all of this without refreshing the web page, which creates a seamless experience for users. The functionality of JavaScript is a standard that is described in the ECMAScript standard. Web browsers implement this standard. Some do it to the letter. Others like behind or have different implementations for features. The point is that without tools like web browsers, ECMAScript is just a standard. Just like HTML and CSS, JavaScript is just text. This means that you can write it from scratch in text editors or using integrated development environments, or you can use premade functionality from a library, like jQuery or with something like Angular. In the next module, we'll summarize the most important points from this course and you'll learn how to dive deeper into HTML, CSS, and JavaScript. Where to Go from Here Introduction In this final module, we'll finish our journey through HTML, CSS, and JavaScript. We covered a lot of material in this course, so we'll start by going over the most important things to remember for HTML, CSS, and JavaScript, and then I'll show you some resources that you can use to go beyond this course and learn more about each technology. Things to Remember Let's make sure that we remember the most important things that we've discussed in this course. All of it is about the most important technologies that make the web work. These are HTML, or Hypertext Markup Language, CSS, or Cascading Style Sheets, and JavaScript. These three technologies work together to create the web as we know it today. Any website that you visit today consists out of these three technologies. It is important to remember that HTML, CSS, and JavaScript or ECMAScript are standards that describe functionalities. They don't do much by themselves. These standards are implemented in web browsers, like Chrome, Firefox, Edge, and Safari. The web browser is the one that determines how it interprets the HTML, CSS, and JavaScript that it gets. Let's look at HTML. HTML documents contain the content of a web page. This is often text with images, and sometimes richer media like audio and video. HTML has lots of elements to display content, and also has elements that lets users interact with content. Examples of interactive HTML elements are the canvas, which you can use to draw on, and audio and video elements that you can use to control audio and video. HTML can contain links, links to sections in the HTML document and links to other documents. This is the way the web works. Everything has a unique address, a unique URL, and pages linked to each other to get from one page to the other. HTML is just text. You can use it by writing it from scratch in a text editor or more advanced tools, or you can use a framework to generate HTML for you. There are lots of frameworks out there, like ASP.NET. On to CSS. You can use CSS to style HTML. CSS can change the look and feel of HTML, like its color or font. You can write CSS in files that you reference from your HTML documents. When you do that, your CSS styles become reusable and your HTML becomes more readable and maintainable as you separate style from content. CSS has evolved to have advanced styling mechanisms. Examples are using CSS to animate HTML elements, and using CSS to apply gradient colors, and using media queries to create web pages that look different when the screen size changes. This last one is great for creating responsive websites that you can use on desktop devices and on mobile devices. Just like HTML, CSS is just text, which you write from scratch using any tool that you like, and there are lots of CSS libraries that you can use that provide premade styles for you. And the last technology is JavaScript, which is the glue of the web. You can use it to interact with HTML, with a browser, and even with services and APIs, all without refreshing the page. A common misconception is that JavaScript is some sort of lightweight version of Java. That is not true. JavaScript was marketed as the companion language to Java, but it only shares some of its looks with Java. JavaScript is also just text and can be written from scratch in any tool that you like, or you can use one of the vast amounts of libraries and frameworks out there so that you don't have to write everything yourself. JavaScript is one of the core technologies of the web, but web browsers are not the only ones that can interpret and run it. There are also server-side implementations of JavaScript, like Node.js. If you want to learn how to develop applications for the web, you need to learn to program in HTML, CSS, and JavaScript. This is the case at the moment, and will be the case for many years to come. Resources to Learn More Now that you've learned the concepts of HTML, CSS, and JavaScript, you might want to learn more. Here are some links that I find very useful. These can help you to start learning how to develop in each of these technologies. First of all, some general links. At w3schools.com, you can learn everything about HTML, CSS, and JavaScript. It contains information and tutorials that you can use for free. The next one is caniuse.com, which we've seen in previous modules. It's a great resource to use when you are looking for which browsers implement which features of HTML, CSS, and JavaScript. And to dive in deeper with the specific technologies, Pluralsight has great courses. In fact, for each of the technologies, there are dedicated Pluralsight skill paths. There's one for HTML, for CSS, and for JavaScript. These paths are filled with courses about the topic for beginning, intermediate, and advanced learners. And all of these skill paths offer a Pluralsight skill IQ test that tells you how good you are in each of these technologies. So, go out there and learn. And thank you for watching this course. Course author Barry Luijbregts Barry is a software architect and developer with a passion for the cloud. He has worked for lots of companies throughout the last decade and is keen to share his knowledge with the community. He... Course info LevelBeginner Rating (242) My rating Duration1h 28m Released23 Apr 2018 Share course