Fundamentals of HTML, CSS, and JavaScript

Hi, welcome back, in this chapter, you'll learn what HTML is, what it looks like, how it is likely to progress in the near future, Also, how and what options are there for you to design HTML. Now, let's jump in.

Start with an example, here is how you see a web page. This is an online shopping web application mockup where you can use it to implement a PoC, proof of concept, or to learn Test Automation. 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.

As this URL is unique throughout the internet, it has in turn enabled my web browser, in this case, Google Chrome, to navigate to this page.

All of this is HTML, contains URLs or links to other web pages, like this product page. And, on the browser, when I right click, then select 'View page source' to actually see the HTML that this page is made of. It consists of elements with attributes, which we'll talk about that more later on. As for now, having seen what HTML actually is, let's get started on defining it.

The definition of HTML is the standard markup but not a programming or scripting language for creating the web pages and applications. In other words, HTML is used to control the data presentation including texts and images. The things that you see in websites and web applications are rendered by the web browser from HTML documents, which ends in the .HTM or .HTML. HTML documents contained various elements that are specified and supported by all web browsers.

Now let's take an example of this structure in HTML. In the head element, a title tag defining the page title will appear at the top of the browser. And in the body element, it has <h1> and <p> tags, which indicates that everything in this tag belongs together. This has a heading 1 and a paragraph that contain text.

When a web browser renders this HTML document, it looks like this, including a heading and a sentence, and the title that is visible in the browser tab.

Next, the HTML element is everything from the start tag to the end tag. The first element in any HTML document is often the !DOCTYPE element. All of the basic HTML elements are here. This is definitely not a part of the HTML standard, but it does tell the browser which version of HTML it is written in. In this case, the !DOCTYPE element here is for HTML5.

Next, we have HTML elements, each of them has an open (start tag) and a close element (end tag). Moving on, there is the head element that can include a title for the document, scripts, styles, meta information, and more. Last but not least, there is the body element that contains everything to be displayed on the screen.

There are a lot more elements and tags in HTML than just the standard ones. Especially with the introduction of HTML5, elements have become much more expressive on their own AS they explain what they are used for. Therefore, the browser and search engines can have a better understanding to determine if parts of the document are actual data or meta information.

There are other elements that support the interaction between users and 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.

In addition, the canvas element will provide a place in your page that you use to paint on in order to display custom shapes.

Also, the form element, which is the basis for most interactive applications and websites. You can use this element to post information from the browser to the server, for instance, text that is entered in a text field. Within the form, you can also see a button where users click on when he or she wants to send information to the server.

Let's look at an example on Youtube of this to give you some more context. Using one of Katalon's public videos, this web application has provided a player to control the video.

I can look at the HTML of this page by opening the web browser tools, it is often called devtools, which you can do by pressing F12 in most web browsers or right-click on the web then click on Inspect.

And in the devtools, when I select the video that is currently playing, it snaps to the HTML of the video. In there it has attributes that tell it what the source of the video is and also how large it is. The video element is an example of an advanced HTML element.

The takeaway of this is that HTML is a markup language with many elements, tags, and attributes that web browsers understand however, not all of them.

Now that we know what HTML is, let's take a look at how it works and how we can create it.

Web browsers understand HTML elements, tags, and attributes, and display that on the screen. Already knowing what is required to make a web work, when users browse your website through the internet, based on the URL like an address of a house, it gets to your server. The server gets HTML, CSS, and javascript.

Then, it responds to the users as the same route. All of the HTMLs and related files like audio and images will be transferred to the user's browser. After that, this browser will render everything and display the web content for users to view.

Writing a website using HTML will not involve knowing about HTTP, nor the client computers. If you've scripted a simple HTML page on your local device, you'd be able to view it with any common browsers. However, this is only accessible to you. Allowing others to have access to it would require deploying it on a web server, where all internet users can go on and view it publicly.

When it comes to writing HTML documents and necessary elements, you can do this from scratch by using any scripting or text editor tools like Sublime Text or Notepad++, my all-time favorite.

However, these don't provide smart and advanced features like checking if your tags are correct. Using an integrated development environment, often called IDE, can give you 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. A few examples include VS Code, IntelliJ, Webstorm, and Eclipse IDE.

Writing from scratch, however, would require lots of manual efforts in scripting each line of code. To avoid this hassle and speed up your web application development process, using frameworks to generate HTML for back end and front end is a very common option.

Many of the websites and applications on the Internet are built this way. When using programming languages like C# or Java when writing software codes, you often are writing bits of HTML with frameworks like NodeJS or React. All of the code that you write and the ones on the framework live on the Web server.

Using any given web browsers, users can request a HTML document from a URL. The framework will then generate HTMLs for the requested document and send that to the browser to be displayed on the screen. So instead of having plain HTML documents, applying frameworks, or using premade packages and folders of standardized code will allow you to do more advanced things like communicating with the databases.

Now, let's sum up everything we've covered. First, HTML is the basic markup for the Web and a standard, interpreted by Web browsers, that defines elements and attributes that browsers understand and can display on the screen, which can range from files to more interactive elements, like the audio element.

And last, having seen what makes up a website, including the header, body to the footer, with corresponding tags like <title>, <h1<, or <p> inside, we've also looked at how to work with HTML with many ways like text editors and integrated development environments to write from scratch, or have more advanced features with frameworks like NodeJS.

Up next, we'll learn about what CSS is and how it can style HTML.

Hi, welcome back, in this chapter we will talk about Cascading Style Sheets or just call it 'CSS.'

In the previous chapter, we know that HTMLs also allow color and font modifications on a website to help improve the readability of the displayed text on the web. Specifically, we will use HTML with CSS, the language made for changing colors or fonts - in other words, to style presentation of the web.

I will walk you through what CSS is, working with CSS, the last but not least, CSS libraries and preprocessors.

First of all, we need to understand what CSS is. CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts that is adaptable to different types of devices, such as large screens, small screens, or printers. Or just simple, CSS styles the HTML.

CSS is independent of HTML and can be used with any XML-based markup language.

Let's take a look at how it works. This is what a typical 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? What about changing their colors and their typographical emphasis, like italicizing them?

I could do that with a 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. Next, on the list item, add a style to display it as italic.

Here, I'm writing HTML and CSS using Sublime Text (as mentioned in the previous video, it's a Text Editor) on my local machine. Now let's copy the code to an online HTML tool, I'm using Tryit Editor of W3C. With the CSS inline added along with HTML elements, you could also reuse this to write CSS in any other place in an HTML file.

A second method that also works is as follows. In the head element of this HTML, a style has been set, in which signals that every div should be displayed in blue for the rest of the HTML document. Additionally, a CSS class will be declared to be used on items that require italicization.

A point to note here is that these styles, unlike inline styles, could be reused regardless of the place in the HTML document. Similar to the HTML shown before, this webpage would also be a product of this HTML. To create an email as shown, this would require programming using HTML, and inline CSS.

Another different approach to manage CSS is using external style sheets. With the same webpage, now I'm moving this style to an external file. Let's call it 'my style [dot] CSS.'

Then link the my_style.css file with the given styles of blue and italicized texts to the current HTML file. So, when this HTML is loaded on the browser, the my_style CSS file would simultaneously be loaded using the styles on the HTML as well, thus turning the color in the div blue.

On top of that, provided with a separate document that only contains the given styles, we can in turn apply that same style to a different web page by just linking it to other HTML documents to ensure optimal maintainability, readability, and reusability since the styles no longer are put in the HTML document anymore.

Up until now, you should know that CSS is simply dealing with attributes and properties like the text's color or style. However, it also acts as an indicator to know which elements should be applied into the property.

As we saw, CSS consists 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 selectors. This part is most important for you as you want to work with UI automated testing. You need to interact with the web elements using scripts such as Selenium Driver.

Let's see some examples of CSS syntax selectors. Like this one that selects all of the div elements in an HTML page, or this selector that selects all elements in an HTML page that have an ID of paragraph_name. And this one that selects all of the elements that have a class attribute set to class_name.

Nesting could also be done. In this case, the selector has selected all paragraph elements with a div element as their parent, and this one with multiple elements selected on an HTML page. This includes the heading1, heading2, and paragraph elements.

These are just to name a few. There is a wide range of selectors within CSS for you to choose from.

Take a look at this HTML, where both have the class specific assigned to them and one of them has an ID of more_important. Now this CSS will be applied to the HTML and we'll end up with this web page. 'What just happened' you might ask.

To help you easily picture what had just occurred, let's start with the first thing that happened. For an HTML file like this, this would be the displayed result on your browser when CSS has been applied.

You can see the text is white on the gray background because there are CSS settings assigned to ALL <p> elements. It means that all <p> tags in this web page are applied to the same settings.

If you want to have more specific settings for some paragraphs (using <p> elements), you should use a 'specific class name' to define specific CSS settings for them.

For instance, in this example I set background BLUE for two paragraphs with the class name 'specific.' Despite assigning the background color to be gray, none of the paragraphs has been applied into since there's a higher priority for the class attribute on the paragraph element.

The same idea with this, but you can assign an ID to an element to make it appear with differ color. The ID attribute has an even higher priority and overrides the background color to GREEN and the black thin border as well.

And now, the black border around the second paragraph has disappeared because it has been overwritten by this property, important. As the specific class applies to both paragraphs, none of them have borders around it. The text color is white as there isn't any higher priority CSS to overwrite these settings.

With that being said, the order of CSS priorities would be from tags, to classes, to the ID then the important attribute.

In addition, the call padding, the white text color and space in between the paragraphs, comes from the paragraph selector due to the fact that none of the higher priority selectors have overwritten these properties. To maintain and read your CSS easier, creating large and complex hierarchies within CSS would make this possible.

We've seen some of the most common capabilities of CSS already, like changing color, applying borders, and so forth. There are also more advanced features that can be found in the newer CSS properties. One of those is the media query property.

In this example, I will tell the browser that whenever we are displaying HTML on the screen, with a width of 800 pixels, I will want the body element to have the background color gray. This will give us something like this.

The default background color would be displayed if the width of the page is lower than 800 pixels, but it will change and respond to adjustments made. We call this a responsive web page as it allows you to see different UI elements on different screen resolutions and browsers' sizes.

As a whole, CSS just specifies the standard of what they should do when they interpret a certain property. However, similar to HTML, not every CSS property is supported by every browser. On W3C, you can visit CSS Reference Browser Support site to check if a particular property is supported.

As I mentioned before in the Chapter 'How the web works,' understanding how HTML and CSS work is important. Just a reminder, the web has HTML documents that can optionally be styled with CSS documents where they are identified by unique URLs. As you can link documents to any HTML document, its location doesn't matter, whether on the web server or on different web servers.

Afterwards, they are then transported through the HTTP protocol to the clients' web browsers. When styling the HTML, the browser takes the HTML file, interprets, and applies these styles as said in the CSS document. That is the way CSS works cooperatively with HTML.

Similar to writing HTML, creating CSS could be done from scratch using any text editor like Sublime Text or Notepad++, or even by using an integrated development environment, or IDE, like VS Code, Eclipse, or WebStorm.

Let's write a CSS with Sublime Text editor. It recognizes the CSS standard after the file format has been selected. Additionally, through many formats and simple prompts, like autocomplete, Sublime Text supports a lot of scripting languages like HTML, CSS, JavaScript, and PHP, and is also able to show different colors for the different parts of the document, properties of the used fonts to help reduce errors and a faster development.

And once I start typing, you can see its prompts for autocompletion as shown. For instance, when looking for font-style, when I type font, it shows me all of the possible properties that have the word 'font' in them, then all the font-styles for this property. This is really helpful to speed up my work.

Another way of using CSS is to use CSS from a library. These are ready to use CSS files with styles that have been scripted by other people. They 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 option is Bootstrap, but there are others like Tailwind CSS. Each of these provides different styles and different capabilities, all of which are designed to make life easier for you as you don't have to create the styles. You just use them. But, you need to learn how to use them and what they provide.

Let's look at how you could use Bootstrap to code a simple web page. 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 beware 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 simple example is to use rows and columns to style your information on the website. This would look like this where you'd have one div with a row class attached to it, which contains multiple div that have the col class.

I pasted a piece of code that I wrote in the Sublime Text editor. There are many options for col class to support multiple devices from mobile phone, tablets, to desktop devices. Bootstrap will collapse columns when the screen size is under, and your column will be horizontal when the screen size is above breakpoints.

For instance, the option .col-sm- is for tablets - small devices, the breakpoint is 768px. Similarly, .col-md- is for desktop - medium devices, and its breakpoint is 992px. This results in a web page that looks like this, two columns and a row with some dummy list items.

As I just mentioned, 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.

Using CSS preprocessors, an advanced version of CSS, is also an option. It essentially is a framework or language that is used to create CSS styles with and can help in maintaining CSS documents more efficiently.

Some examples of a CSS preprocessor would be LESS, Myth, Stylus, and Sass. Your style code would subsequently vary to your preferred type of CSS preprocessors, like having variables with LESS, which stands for Leaner Style Sheets, a language extension that's very similar to CSS, but just with a few additional features.

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. You can use this for all places in your web application. Once you change the value of this variable, it will affect all elements that use this variable.

In case you want to have a special color for other elements, just use another variable. Here, I've used @specialColor for heading 3 texts.

When you are done writing your styling code in your preprocessor, you'd have to compile it to generate CSS files. This can be done with a tool that comes with the preprocessor.

Once compiled, you'll end up with the color value written out for each property, a regular CSS in other words. Similar to using CSS libraries, even though this approach could be efficient, it would require some time to get used to. If you want to update the color, just update the variable value.

Now you know what CSS is, and how you can create it, let's recap the key things that you should remember.

CSS, or Cascading Style Sheets, is the styling mechanism for the web and a standard that describes selectors to select HTML elements, properties and value attributes to assign styles to HTML elements.

CSS is useful to separate style from content, where style is described in the CSS documents and content in HTML documents, with many other capabilities included.

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 such as VS Code.

Other ways of using CSS is by using a CSS library like Bootstrap, which provides premade styles, or to use CSS preprocessors like Less, which provides more dynamic features to write CSS in and simply gather into regular CSS files when you are done.

In the next module, you'll learn how JavaScript enables the web to be interactive.

Hi, welcome back! Let's take a look at what JavaScript, or basically the 'cement and brick' that holds the web together including the HTML, CSS, the browser, and communicating to APIs to make the web more interactive. In this chapter, I will walk you through this agenda.

Before going to the detail, let's see JavaScript in action to give you a little bit of context around what we are talking about. Again, I will use Tryit Editor powered by w3schools.com, a free front-end learning ground where you can learn and practice.

In this example, we'll use JavaScript to display a popup when the button is clicked on by the user. On the left, you can see simple HTML that's displaying 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, just like you can have inline CSS. This will have a 'javascript' alert popped up. So this little piece of programming language actually interacted with the web browser to show us more than just the HTML web page.

Alright, time for a definition. JavaScript is an interpreted programming language for the Web. Given that it's a high level programming language, meaning that it's highly abstracted for humans to understand than lower-level ones that are made for machines, JavaScript can update and change both HTML and CSS, calculate, manipulate and validate data.

An important note that you should always remember is that despite sharing the same root name of 'Java,' JavaScript and Java have no correlation or similarities whatsoever in terms of their capabilities and purposes used. While Java is designed to help browsers, virtual machines or applications, say an Android app, JavaScript is a programming language that allows developers to write code for web interactivity and develops client-side scripts.

With JavaScript, you can manipulate HTMLs, the browser, and to talk with services, like APIs that live on other servers. Let's start with a simple example to see how javascript manipulates HTML. Here is a simple HTML with a button labeled 'What date is today?'.

This particular JavaScript code first selects an element with the id of currentTime, 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 like this. The complete date and time, including time zone, is displayed as the inner HTML of the demo paragraph, as well as text that is inserted within the paragraph element.

Now, when you click the button, the onclick event will execute and that starts the inline JavaScript, based on the onclick event of the button. You can basically write these inline Javascript anywhere in HTML, just like you can have inline CSS. This sample JavaScript is used to select an HTML element and alter one of its properties without having to refresh the page.

With this simple code, let's move the javascript to another place. Let me think. I will create a function called showDate() in the head element inside script tags. This results in the exact same web page as the previous example, but it will call the showDate() function when you click on the button. You can see the result is the same.

What if I want to share this function with other HTML documents and other teams? With the same HTML as before, and the onclick element still calls the ShowDate function. But the JavaScript code itself is now removed from the HTML page to a separate file called aJSfile.js. And here, without that javaScript, the button does not work, thus brings the need of referencing that javaScript file. This is very similar to how you can include external CSS in your HTML document. And now, you can see these results in the exact same web page as the previous examples. When you separate JavaScript from HTML, the function becomes reusable in this page and other pages as well.

So far so good! You'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 will open up a popup from the window object and asks for your name, which it then stores in the userName object. If there was a name entered, the text variable gets the value of 'Hi' with the entered name. And finally, this message, 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, Google Chrome. Along with being able to interact with its environment, the browser, you can also see in this example that we can use variables in JavaScript to have IF statements and stream concatenations. These are all typical features of a programming language.

Again, we've already seen what JavaScript looks like. Now let's get building it. Remember, any web page or application consists of three main documents: the 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.

For software development teams, you just need to worry about creating the documents and putting them on their web server. Once the documents are on the clients' machine, the web browser interprets them and styles the HTML with CSS, then loads the JavaScript to be executed. The web browsers are the main ingredient that actually runs the code that is written in your HTML, CSS, and JavaScript documents. That's why when testing web applications, regardless of doing it manually or applying automation, you need to verify them on multiple browsers such as Chrome or Firefox, or in other words, cross-browser testing.

OK, back to JavaScript. Just like with HTML and CSS, there are several ways to develop JavaScript. The first one is to write it from scratch. And just like HTML and CSS, you can write JavaScript from scratch using simple text editors like SublimeText or Notepad++. You also have the option to use more advanced tools that provide you with 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 VS Code, WebStorm, Eclipse, and many more.

Let's do an example in Sublime Text and VS Code. And here I'm developing a simple JavaScript file. You can see after selecting the file type JavaScript, it recognizes that I'm in a JavaScript file. So, when I start writing, Sublime Text will suggest based on what I'm typing. The same on VS Code, an IDE, it also assists you with suggestions. This is one of the many things that an integrated development environment can do for you. But, you can see, on VS Code, you can go to the definition or implementation of a function by right clicking on it, then click on the corresponding menu item. This is something simple text editors cannot do.

If you prefer something else or just simply want to explore your horizons, using libraries and frameworks would also be possible. Just like there are CSS libraries that provide premade styles for you, there are JavaScript libraries that provide premade JavaScript functionality for you, like Angular. Unfortunately, while these libraries can help improve productivity in some way, they also introduce the risk that a library might contain bugs or security flaws as they have been created by somebody else. Therefore, it would be best to swap between different libraries to see which one works better.

I'll use Angular in this case, which is also in the latest version. Here on the left, I have some HTML. There is no JavaScript here, but just some text that isn't part of the HTML standard, and a link to the Angular library. You can see the weird HTML attributes here, and also on the text input element right here to help Angular recognize that this is an Angular app and take the input as data into its model.

From this, I can now perform data binding, or synchronizing the text of this paragraph element to the data in the name model of Angular, which comes from the textbox. This subsequently results in this behavior. When I enter text 'Katalon' in the textbox, it immediately shows up in the paragraph as I type it out. Having loaded in the browser, Angular has actually done this for me but I wouldn't be able to see it.

With functionality like this, it would require great effort and time to put out and write a large amount of Javascript. With Angular's library, it would bring a lot of support and help you speed up development. However, using these libraries would ask for additional time of learning how to use them and how they work. In the previous example, you'd have to know the capabilities of those HTML attributes.

That's it! Now you know what JavaScript is and how to work with it. Let's go over the things to remember from this chapter. JavaScript is a high-level programming language that enables interactivity for a web and holding everything together. From interacting with HTMLs to browsers, all the way to creating pop-ups and all other actions that the web browser can access, you could also use it to communicate with other systems, like APIs on other servers.

As JavaScript is just text, similar to HTML and CSS, you have the option to write it in text editors, or using an IDE. You can even use premade packages from a library like jQuery or Angular.

Another thing that we can do with JavaScript is it makes AJAX calls, an acronym of asynchronous Javascript and XML. AJAX is just a technique that involves Javascript that allows interactive and advanced tasks from the browser without having to refresh the page.

Here is how it works. I already mentioned this in a previous chapter when we talk about HTML. Once, 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, your javaScript can call an external API that might have a URL like this via the internet or internal servers. 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 or external APIs, without reloading, or having any effects on the display and behavior of the existing page. For example, you could think of it as when an internet banking application calls the API from an external Credit Score service to check the information of a user, say their current amount of debt or repayment history, in order to validate their worthiness of borrowing and repaying the money.

This allows developers to create very interactive web applications. Let's look at an AJAX example. In this example, I run code in the W3Schools online editor. This allows me to test 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 with 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 attached this event to the XMLHttp 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 goes 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 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.

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. Similar to how web browsers implement the HTML and CSS, remember that NOT all browsers support the JavaScript completely. 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.

Well done. You've completed HTML, CSS, and JavaScript Fundamentals. In this course, we'll finish our journey through HTML, CSS, and JavaScript. We covered a lot of material in this course, so I will recall the most important things to remember.

Before taking the quiz, here are important things to remember. The most important technologies that make the web work are three technologies that work together to create the web as we know it today. Any website that you visit today consists of these three technologies. They are HTML, or hypertext markup language, CSS, or cascading style sheets, and JavaScript.

It is important to remember that HTML, CSS, and JavaScript are standards that describe functionalities. HTML documents contain the content of a web page, this is often text with images, richer media like audio, video, and hyperlinks that link to other documents. Whereas you can use CSS to style HTML. CSS can change the look and feel of HTML like its color or font. As for the glue of the web, Javascript, it can allow you to interact with HTML with the browser and even with services and APIs all without refreshing the page.

Next, testing on different web browsers is very important as it will determine how the HTML, CSS, and JavaScript will be displayed. Given that most browsers are free and users usually have their own browser of choice, which raises the need to perform cross-browser testing for your web applications to make sure they work fine in terms of accessibility, usability, and security as well.

Along with this, memorize the fact that JavaScript is not the same as Java, nor do they have anything to do with each other. It's a common misconception that JavaScript is some sort of lightweight version of Java, this is NOT correct. 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 NodeJS. On top of that, you also can use JavaScript to develop your automated test cases since it is one of the common languages that Selenium supports.

Last, HTML, CSS, and JavaScript are just text and can be written from scratch or use libraries and frameworks out there so that you don't have to write everything yourself. If you want to learn how to develop applications for the web, you'd need to learn to program in HTML, CSS, and JavaScript.

Now that you've learned the concepts of HTML, CSS, and JavaScript, you've built for yourself a basic understanding of how web applications work and should be able to work with UI end-to-end automated testing for your web applications efficiently and effectively.

And thank you for learning this course. Your next course should be about using Selenium or Katalon to develop automated tests. See you in another course.