2021 Edition - HTML, CSS, Bootstrap, JavaScript, jQuery for absolute beginners | Engineering Tech | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

2021 Edition - HTML, CSS, Bootstrap, JavaScript, jQuery for absolute beginners

teacher avatar Engineering Tech, Big Data, Cloud and AI Solution Architec

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

29 Lessons (1h 57m)
    • 1. Introduction

    • 2. Why HTML, CSS, JavaScript?

    • 3. HTML Hello World

    • 4. CSS Hello World

    • 5. JavaScript Hello World

    • 6. Online code editor Codepen.io

    • 7. Visula Studio Code IDE & Live Server

    • 8. Resources for the course

    • 9. HTML Elements, Attributes, DOM and validator

    • 10. CSS rules

    • 11. More ways to apply style

    • 12. Flexible layout

    • 13. Adding Header and Footer

    • 14. JavaScript language basics

    • 15. Interactive web page with JavaScript

    • 16. Having a separate script file

    • 17. Debugging JavaScript

    • 18. JavaScript variable type & operation

    • 19. Changing style with JavaScript

    • 20. JavaScript Loops - for, while and forEach

    • 21. JavaScript IF loop and Ternary operator

    • 22. Bootstrap introduction

    • 23. Bootstrap Hello World

    • 24. Styling table with Bootstrap

    • 25. Styling image with Bootstrap

    • 26. Building a responsive grid layout with Bootstrap

    • 27. Mobile-first design with breakpoints

    • 28. jQuery Hello World

    • 29. Applying styling with jQuery

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this course you will learn the fundamentals of building a modern mobile-first responsive website. You will understand how HTML, CSS and JavaScript are used to construct a web page. You will learn how to build mobile-first responsive pages with the Bootstrap framework. This course will introduce to one of the most popular JavaScript libraries called jQuery.

The course doesn't expect you to have any knowledge in any of the technologies. You will start with a blank page, understand how an HTML page is constructed with different elements, how styling is applied with Cascading Stylesheet and how the page is made interactive with JavaScript and jQuery step-by-step.

You will also understand how to get up and running with a local web development environment using Visual Studio Code and Live Server.

Meet Your Teacher

Teacher Profile Image

Engineering Tech

Big Data, Cloud and AI Solution Architec


Hello, I'm Engineering.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Welcome to this web development course for absolute bigness. In this course, you learn how to build is given basis, how to apply styling using CSS and how to make the business dynamic using JavaScript. You will start with a blank page and step-by-step understand the basic building blocks of HTML, CSS, and JavaScript. We will use Visual Studio Code for all our development work. It's really easy to get started with. Web development using Visual Studio code. Will have a local web server running with Visual Studio Code extension to paste all our changes. You'll also understand Bootstrap, which is the most popular framework to build mobile foster responsive website. You will learn how to design a page for different devices, different resolutions using the Bootstrap framework. You will also understand the jQuery framework step-by-step. Jquery is a powerful JavaScript liability using which you can modify styling of your page much more efficiently and quickly with very less chord. So this is a course for absolute beginners. No prior analysis required in any of this technology. However, having a programming background will definitely help you succeed in this course. So let's dive in and get started. 2. Why HTML, CSS, JavaScript?: Let's understand why we need to learn HTML, CSS and JavaScript. Html CSS and JavaScript are called building blocks of a webpage. So what exactly is a web based and what exactly is with any webpage that we see contents, HTML, CSS, and JavaScript. So this is Google.com webpage which we access through a URL, google.com. Every webpage has a unique address in the internet. It has STDP, www.google.com. So what exactly is www and HTTP? Www is worldwide wave where documents can be found with URLs. Google.com is the URN. These documents are HTML pages, which can be text, images or videos. So how are these documents subdue the integers? It is done through East UDP protocol. Every URL you see starts with HTTP or HTTPS, which starts for HTTP secured history, DPS, Hypertext Transport Protocol. In the worldwide web or internet. Every document has a URN. Customers, somebody requested document specifying the URL, HTTP or Hypertext Transport Protocol be quizzed is sent to the server which host that page. So this is typically decides on a subtler which is called webserver. And the page is accessed through a unique Resource Locator or URL, and the document is subject to the individual who might be accessing it from a desktop, browser art from a mobile phone over the transport protocol. And in this course, our focus is more around building this document using HTML page. So why do we need to learn HTML, CSS and JavaScript? We display the content using a stamen. We styled it using cascading style sheets or CSS, and we make it interactive using JavaScript. So the best way to understand is HTML, CSS, and JavaScript is by looking at some examples. 3. HTML Hello World: Let's create a Hello World HTML page. We'll dive into this tags later. First, let's create a sample page and see the output. I'm using. Notepad Plus Plus. Feel free to use any other text editor that you might have. Later on will try to look at another tool, Visual Studio Core. And you'll see how easy it is to do HTML programming using that tool. Will say this is title. Then Hello World. This is his body. We'll close the tag and let's save it in a directory. Will create a working directory for all our files. Hello HTML. And we didn't dark will have a index dot HTML file, which will have discontent. Now let's open that page. By default it opens on IE browser, but you can not idyllic and open in some other projects also, you see the page title and whatever we put within the body tag that you see in the main body. Let's fix the typo in the page title. Saved the file, press F5 to replace the page or just reload the URL. You can right-click and open the index.html file in Chrome or any other browser. So this is how we can build a standard pitch and display content. And as you can see, the tags that are not visible, only the content is visible. You can go to the page source and view the source. Or you can just right-click, say inspect. And you can inspect all the elements. We'll talk about what is the element and all that. But these are the ways you can see what is behind this HTML page. Thank you. 4. CSS Hello World: Let's now see an example of CSS or cascading style sheet will add a div tag. Again, all this tax will be explained in detail later on. We just want to get a feel of how HTML and CSS and JavaScript looks. And then we'll dive into the details of each of these topics. There are many ways you can add style or cascading style sheet to your pitch or your HTML page. Let's look at one such technique will have a style element within the head. And now we can define how this div element, it is going to be styled. Let's save this and refresh the pitch rate. Nowadays, no style will start playing style to this div element, which contains this text. So the text is within a div element and we'll apply a style to this div element. Notepad automatically prompt us for background color. And we'll also have the same experience using Visual Studio Code where as soon as you start typing it will prompt you for the text that you're trying to. So how would we find the core for different background colors? There are many places where you can find the number for different colors. Let's pick something from the Wikipedia page. We'll pick the color code for gray and capture it in the background colour section. Now save the changes and dataframes the page and you can see the background of their development is now ugly. So this is how you can apply style to HTML elements. 5. JavaScript Hello World: Let's now look at an example of JavaScript. Using JavaScript, we could make a paste interactive and we can manipulate different elements. Let's add a JavaScript function on mouseover. So whenever we over the mouse on the div element, the background color would change to some other color, let's say red. Instead of writing the code, we can also simply type grid and the browser will recognize that it's for red color. So let's see that now will decrease the page by default, gray color appears, but when we take the mouse over the div, the background becomes red. Now we'll say on mouse out, it should be white. Refresh the page initially it's gray. When you hover the mouse, its rate and when you take the mouse out becomes quite. So. We've made the space interactive using JavaScript. We're manipulating the div elements using JavaScript functions. So modern JavaScript later. 6. Online code editor Codepen.io: There are various editors available online to write is HTML code. Let's look at one of them. Codepen.io, go to their website and start coding. Let's copy a stimulus code that you've written so far. We'll paste it here. And we can see the output at the bottom. Let's add another div. This is the second div. Note that both the dips are great because they're both using this CSS or stale Gray. On the first one when you hold, it becomes red. And the second one, there is no JavaScript function, so the color doesn't change. The JavaScript that we had written is specific to the first div. So this is how you can code online using CodePen.io. 7. Visula Studio Code IDE & Live Server: You will be doing most of our development using Visual Studio code. So let's download and install the software. This is a very popular IDE or integrated development environment to write HTML, CSS, and JavaScript code. You can simply download it and start using it. Note that it is Visual Studio Code, not the Visual Studio IDE, Visual Studio code that you need to download. And once you've downloaded and installed, then you can open it and start writing your code. So within Visual Studio code, you'll have to open the folder. Will open the folder which convinced though, latest index.html file. You'd open the folder and we can see the index.html within that. And here we can start making changes. Let's add another div. It'll prompt you for what you're trying to art. And you can also read more about the element. You'd automatically completed our dv to automatically added the closing tab. This is the second bin. You can save it or you can configure it to opposite. You can make changes and see the output. There are various extensions available. Let one of them that will make working with HTML daily easy. It's called Life server, larger development local server with live reload feature for static and dynamic pages. So we lard this extension, just click on this extends our search for life server. You'd get in started within a few seconds. Once it is installed, let's go back to the explorer view. Will open index.html. Make some changes. Now will say right click open with live server. The strength to start a server at port 55, 0-0 will allow axis. Using the leaps that, or we can have the same experience as a web server. Now our site is loaded it 127001, which is the local laws, IP, then port 55 00 And index.html. So instead of opening it, specifying the complete file path, we now have a local web server running which displays the content of this webpage. As soon as we type something that changes will automatically get that afflicted in the lifestyle index.html page. 8. Resources for the course: You will find resources for this course. It Puja IQ scale is HTML, CSS, JavaScript, GitHub repository. You can easily figure out what sequence you should be looking at them. 9. HTML Elements, Attributes, DOM and validator: Let's understand some of the details of HTML. We'll create a new HTML file, abc dot HTML, a 100 new folder. In Visual Studio Code, you can simply type HTML and then select this table five, it'll generate the basic structure for you where the first slain his, they still worsen, which is by default five. And then it has the head tag and then you get the body tag onto which you can have the content, whether main body. So let's add a few more elements. We have added fuel, DFS, her deep start for division. Typically that is the way you build an HTML page. You create multiple divisions and now the data, you put your content. Here. Let's look at some of the elements that we've added. Each one stands for heading one, and p stands for paragraph. Similarly, you can have an element for image, for link, anchor, a chorus for link. You can visit developers dot mozilla.org is emoluments reference page to know the list of all HTML elements available and then the description. You do not need to remember all these estimated tax. You get lot of online editors IDs using which you can generate the stephen files by simply typing your text and formatting it. But just for your reference, all the HTML elements are captured here, the developer dot mozilla.org webpage. So all this HTML head body, these are all elements and each element is a tag. For example, this one element, the tag is each one then the for the P element the tag is B. And an element can have one or more attributes. For example, is an attribute href that tells you which Likud 1s2. Similarly image has an attribute called sorts, height and width. Let's say Lord, this Bayesian does heat output, will open it in Chrome. Inspect the limits. So we can see all the ribs, all the building blocks of the page. This is the heading. This is the paragraph. It highlights the one that you selected di Inspector tab. This is the table we have. Let's add a bargainer. Should that the table is clearly visible to the table element will add a border report. Now you can see that the border is visible. This is an ordered list. This is an unordered list. And this is how you write an unordered list. So these are some examples. The key thing to understand is how to create the structure of the page by having different divisions within the page. And then under each division you can have elements had specify their attributes. And that is how you keep building an HTML page. Let's understand another concept called DOM or Document Object Model. But the way a browser represents a weak base in memory is through Document Object Model or DOM. Let's see how that works. Go to the Console tab and type document. And it returns you a reference to the page which is shown here. When you hover over document, you see the entire page. Everything you see under the elements tag is also available under the document reference. For the browser, the document object represents the entire page. Element is an object which represents certain section of the page. You can think of it as a hierarchical tree structure in memory for the browser. And the browser is able to read and interpret each element or each object, and then takes action on it. Now let's go to the element stack and silicon element. If you see here you see $1. Now if you go to the console and type $1, you get the object map to that particular element. Let's select the table. Let's type $1. And we see that table element here. What you are getting here is a reference to that element. Let's select the paragraph. You again see $1. You type $1 and hit enter. You'll get that paragraph, will look at DOM and how we can use it to manipulate different elements later in the course. One last thing I wanted to point out is the HTML standard is defined by the W3.org or worldwide web consortium. And they were validator page using which you can validate with your HTML is following the correct standards and die it has the right syntax or not. Here you can specify your URL and validate the page, or you can upload your HTML file. Simply paste up contain ten c if it is correct or not. Let's validate the HTML we have written so far. Copy the entire contained and paste it here, and check. It gave a few edits. Can the image element must have an attribute except under certain conditions. So in Altay, Tribute is required so that when you hover over the image, you see what is a description of that image. That's a best practice though the image loaded. But as a standard practice, we need to have an alternate report. We got another error that the border attribute is obsolete because it should be defined using a CSS. Though it loaded fine. But the best practice is to define the border and certain styling using the CSS are pays glory displayed these zeros, but there is a certain way that ties demolished with developed and W3.org or worldwide web consortium they defined that stand out, are succumb to this validator page and validate and understand whether you are following the right standards or not. 10. CSS rules: Let's now look at cascading style sheets or CSS in detail. We'll open the HTML page. Let's change the title. As you have seen earlier, we can define the style within the head element by having a separate element style. There is an option to include a separate style sheet also, which we'll look at shortly. And one thing to note here is HTML is not case sensitive. You can create in caps or in smaller latest. Let's try to apply some styling to this paragraph. P tag. For that will define an object. And we'll say background color. Estimate you type background color. Visual Studio code will show you different color options available and you can just simply select that. Reload this page with live server. Let's refresh the page. You can see that all P tags, now I have a background color of brown. Let's now add another style for the P tag and see what happens instead of Brown will say rate. Because the waste GML CSS works, it picks up the styles that APRs last in the hierarchy. Now you can see that the paragraph is red. Cascading nature of the stylesheet, whatever the rule is, the last will have higher precedence over any other rule. Let's now see another way of applying style to an element by using the class had to report, will define a class edge paragraph. Now here, let's get rid of this. We can say dot, paragraph and background color. Let's say green. We can now see that whichever element has that class defined will have background-color rich green. You can even class defined by the H1 tag. And you will notice that the heading is also having a background color green. Now let's try to define styling for the P element will say trade. And let's see what happens in the page. The paragraphs except for the one which is a class attribute define are showing up with red background. But the paragraph at the top, which has a class attribute that is a styling of background color green is still showing up in green. Though this is the latest styling in terms of hierarchy. But paragraphs telling wins here because that is more specific. Whatever specific style we have for a particular limit that when so we're any generic styling that we might have declared for all the elements of that category. Though all the Ps are supposed to have color rate. But we've defined a specific styling for this particular element, which is done through the class attribute and that wins over the other styling. Let's now see another example. We'll define the background color up the entire page. Now enter page's background color of yellow and all the elements will inherit that background color. Let's now have a specific background for the H1 tag. You can see that now the heading attribute has a green background. He micelle, it inherited yellow. But as soon as we gave a specific background, the H1 tag that had, had precedence over the background color of the entire body. This is how inheritance works. But just keep in mind that this may not be applicable for all that tributes for a particular element. You can also directly apply style in an element. You can see that this element is now having a gray background. Style can be directly put him in an element that is not the best practice. Typically you have a separate section for the style, but in a real-world application, you want to control style through a separate file because the same style can be applied to all the pages, not just one page. So you take the style out and put it in a separate stylesheet, which we'll see you next time. 11. More ways to apply style: Let's now move the styles are to a separate stylesheet. Before that, let's check out the page in the current state. Will create a new folder for this module. Will create a new folder, separate stylesheet and more styles copy the same file. Let's select this folder now and will launch. The same file. With slaves server. Site is launched, let's insert is pointing to the correct. Yet the title changes. It's pointing to the correct. Will open the code editor in the Chrome browser next to each other so that we can see all the tildes. Let's try to move dash to the CSS file and remove it from here. And as soon as you remove the judges get reflected their homepage, the styles are gone now. Now we'll put those tails at the site dot CSS. He says do not reflecting because we need to give a reference to the site dot CSS. And we do that using the link element. Just take blink and it tap. Visual Studio code will automatically populate the link attributes you need to give a reference to the psi dot CSS using the HREF attribute, simply take psi dot CSS here, and it would pick up styles from thes i dot CSS and the same is getting reflected here. Now let's look at the psi dot CSS. So we have a body background color yellow, and we have a background color for the H1 tag. Let's do one piglets artist title for the H1 tag. And we'll say background color. So what would happen immediately that is getting reflected. So this has higher precedence over the site dirty CSS. And if we go to, let's say the Jordan tag and put a style here, we'll say background color, grey. Now graze getting deflected. So you can overwrite the styles that are present inside that CSS by heavy pays specific styles are having style statically in the element. Now that you have understood how to create a separate stylesheet, let's look at some of the other features of CSS. Earlier we looked at the class attribute, will have a gentry class for our tax, will add another paragraph and say this is paragraph up to. Now we have not defined any property for the paragraph class. We have removed that. Let start it back. We can say dot paragraph. And again background-color. We'll say grid. The background color of both the P tags have changed to green because both have the class attribute. We can also have an idea attribute to target specific element or multiple elements can belong to the same class, but I d will be unique to a particular element. We will call it P1. And let say there is another ID, we'll call it. Now how do we target a particular P tag? And let's say we want to change the color of this particular paragraph. Or we can do that by applying styling on the IDP to when we do that using the hash symbol hash B2, that would pick up DID P2. And we'll say background color, gray targets replicating the grey color. In the second paragraph. Typically the practice you put it dash with diet and bagging the number to easily identify. Let's say this is p1 and p2. And then we'll send this also, you can see the gray background for the second P tag. So as you have symptom now you can apply styling, class liberal lead, ID, label and target specific elements. And you can also target and list of elements in the single cord blood. For example, you can see all H1 and H2 should be of background-color read. Let's see if there is any S2 and the page will change one of the text which will make it H2. Now this also isn't it. You can also have a list with elements. Class will remove this one, H2, and paragraphs should have white background. Now, another thing we wanted to show you is how you can target the child elements. So we didn't domain element. Let's have a class are defined for our div. We'll call it, let's say div class. For now, we'll just remove this tense that are available at the element level. Let's start a new P tag without any class. Let's add another one at the top. We can define the background color for the entire class. Will say green. Now the entire div is green. And wherever we have overwritten giving element level styling, that is getting reflected. Now here we cannot target a specific element. If a 100 target P tags of this div tag, we can say. Now we are seeing all the p tags of the div class should have blue background. This is how you can change the style of a child element. And since this is a computing after the B class background or the specific element background that is taking precedence. In this lecture, we have understood how to get a separate style sheet and how to apply different styles at class level, target levels, and also how to apply style for a particular child element. And we have also understood the precedence of styling and how the cascading style sheet works behind the scenes. Thank you. 12. Flexible layout: Let us understand how to build a layout for our page. Currently they enter, content is getting displayed in a single column. Typically we're British would have it two or three column layout. So let's understand how we can build that using different HTML and CSS properties. One of the easiest ways to be Layout is by using the flexible layout option. Let's understand how that would work. Will put all our dibs under a parent div. And let's declare a class for the main div. Now let's give some properties to the men div class. Will see for the main div class, the display type is flex. Flexible column will say plexus. Now let's open the space with slaves that were looking. So when we refresh the page, we can see that the entire base has been divided into multiple columns depending on the number of deaths. We have. To make it simple. Let's get rid of some of the dibs and just keep three divs. Now we have a three column layout. Note that it did not take up the entire space. It looked at how much makerspace is required for each of the two that the Texture2D naught get wrapped. And based on that, it decides on the layout. If we had a longer text, it would have taken up more space and then it would have equally distributed the space among three columns. Now if want to increase the width of the first block or the first column, we can do that by giving more space. But this particular div. You can do that by men selling a metal tape and then specifying which div you want to target. One is for the first div. And then you capture how much space you want to give. If we give flicks to them, to the first div, which would give more space. It will calculate the total width of the page and give more space to the first column. If we target per second instead of first, we can see that the image is occupying more space. If we increase it further, it nothing happens because the page would also look at how much space is required for the other elements without wrapping the text. This is how you can build a two column, three column layout for your pitch and capture content under each of the column. 13. Adding Header and Footer: Let's now understand how navigation to the beach. Before navigation lets beach contact human. Babies. German, select HTML5. With the basic structure of the page. We live simple text here. Let's check out this beach. So now we have two betas. Let's see how we can link the two pages. Having a header navigation, genetic and navigation is really easy using Visual Studio Code. Dave header. And let's say we weren't done nav. And we want a 100 list with two links, data and hit enter. And you can see on the right-hand side, MIT's prompting you the structure and you just hit enter here and you'll get the basic navigation structure. We would also have and can link. As you can see now, we do list items with encodings. And we'll say this one is for home. And this one is word. Contact Us. And here it will point to abc dot HTML, which is our home. And here it would point to contact dot HTML. And let's add the navigation to the contact dot HTML page also. Now let's go to the page and ticket out. Okay, as you can see here, we have two navigation element, home takes to the homepage and contact us sticks to the contact us page. And we're going to pick on home and come back to the homepage. Should this is how you can create a separate section for the header. And you can generate header quickly with Visual Studio Code and give links. Typically will give link to the pages within your website nor to the external states. Because the search engine looks at Herder and sees what are the pages that are available on the website? Let's now RDF footer to the page and report that typically you would divide the page into 3-6 and header man, where you have the main content. And we'll move this here, will have a header, will have the main section where we let domain content for the page. Then we'll create a footer. And we have footer navigation list. And let's say list like header and a. And we'll just copy paste disrupt the header section will have the same pitch. And for the main page also will have a main section. And we'll move disclosing tag today and just before the footer element. In Visual Studio or other editors, you can easily collapse and expand elements and see where the data properly or not. Now, cuz you can notice here we have a herder, We were men and we will put our section. And that would be the basic structure of the page. And then we didn't man, we keep adding content to build out page. Let's check out our base now is you can see we have a header navigation, we have put a navigation, and we're men body section in each apart pitch. 14. JavaScript language basics: We now understand JavaScript basics using java script, we can are the intelligence to the page. We can make the page interactive. Before we dive into manipulating HTML and CSS elements with JavaScript, let's understand the JavaScript language basics. So there are various ways you can practice JavaScript. The best ways to add a script tag and write your JavaScript code. Within that, we'll declare a variable, correlates a red one. And we'll say Hello World. To learn any language, The base case to print something to the console and see the output. For a webpage. We can do the same by doing console.log. As you might have guessed, this will get printed to the console up to browser. We have written this chordal in the script element of Contact Us pitch. Let's see the output. When we load the page, we'll right click and say inspect element. Now you can see that hello world is getting printed to the console. So this is the way you can try out different JavaScript syntax and see the output. You can also directly code here. For example, I can write VAD one equals hello and print VR1. It'll get printed. And I can even say Y1 plus World. And it will print your I can write. I can do some arithmetic operations and see the output here. You can do Control L to clear the console. So you can also practice so JavaScript directly the Console tab of the browser when you do the inspect element. But let's write all our code here and see the output in JavaScript, the sentences with a semicolon. So that is optional. We'll make it a practice to art semicolon. Let's look at what else is there in the language. It's like java or any other programming language. The syntax is very close. And Java, okay, let's do some arithmetic operation, 5X plus nine. And we can do multiplication and division. Just remember that variables are declared using LET. We can also say let v two equals three, equals six. And then now we can say that for. And therefore equals 2x plus three. And we can now try to print VAR for. We can put up ten plus six. You can declare a boolean type. And we can write if that fails. Then console dot log. This is true. These are your AD block, like any other programming language. Hell's console, dot log is false. And if we change verify to false, should print. This is false. This is an example of how you can declare Boolean variables. Let's see how to declare an array. We live at 61234. So this is an area we've declared. We can also have combination of integer and string in an array. Javascript is flexible on that. We can say one, ABC PQR. It would not complain. Nor to print an element of direct. We'll say console.log verse 70, which is one. And if we do that 71, it should print abc. Now you can write JavaScript code and see the output. If you've done programming, you'll find it very easy to pick up. Syntax is very simple. It's like Java language. You can play D flow for loop while loop. To get started on JavaScript programming, you need to know the language basics. And after that, you need to apply JavaScript to make your pace dynamic or to make your page intelligent. So that's the part you should focus on. Language basics is really easy to pick up. You can write comments in your code like this. This is a comment. So it would not print this lane. But if we move it outside, and now liquid is getting printed. You can also write command single-line comment with 2's classes. This is also one of the things that we'll be doing quite frequently in JavaScript is writing new function. So let's say we have a function which takes in two input parameters and equals a plus b will give some name to it, my sum function. It takes a and b and a plus b declared. Now we can print this to console. Print the sum of a plus b. This should be a comma. We need to return this sum. Now it should print out. You can see 12V is getting printed. So these are, you can write a function and invoke it from your CT function contains reusable code which can be invoked again and again. And in JavaScript, this is how you can write functions. These are some basic syntax of JavaScript is not everything, but hopefully this has given a good starting point and you can explore more on JavaScript. But the key thing, as I said, you need to understand how to make use of JavaScript to give intelligence to your page. Javascript is the language for wave. There is angular, there is react, that is jQuery and does so many other front-end languages. They're all based on JavaScript. 15. Interactive web page with JavaScript: Let's now see how to build interactive webpage using JavaScript. Let's open the console. The very first object that you need to understand in JavaScript is document object that gives you a reference to the entire page. It was simply typed document and hit Enter. You can see that the entire page content is available under that object. Using this object, we can extract different elements and manipulate them. Let's look at some example. We'll say document, get element by ID. Let's open the Visual Studio code on the leptin shade. So we have a paragraph with ADP to we tried to print it out. So this returns the paragraph P2. If we change this to some other ID, will get that particular id. This is paragraph P1, similar to ID, we can also get classes using document dot, get element by class. We do not need to give dot here. It returns all the elements having classes paragraph. So wherever classes, paragraph that is getting fetched. We'll add a simple button to the pitch. And onClick up that button. We'll invoke a method. Change me. Let's name it. Tried JavaScript. And we can write the code anywhere. So let's write it right here. Is a best practice to have all the JavaScript code in a separate file, which we'll see later. For now, let's try to change the content of paragraph p2 or p3 using this button. Now you've written the function changed me. And when the user clicks on this change, we brought on this function would get invoked. I'm invocation of this function will get element by ID. And that should be, let say, P2. And we will change the inner HTML of that change. With JavaScript. We'll also print di limit to console. Click on JavaScript button. We can see the limit contending console. And we can also see the paragraph text has been changed to change with JavaScript in the HTML page. This is how we can get an HTML element and then try to modify different properties. Here we modified innerHTML. You can also change the ID and other properties. 16. Having a separate script file: Let's now understand how we can move this JavaScript code into a separate file. We'll create a new file called spider.js. And let's now copy this JavaScript function to the site ab.js will remove this script tags. Now back on the page. If we click on prior JavaScript, nothing happens because we need to include the JavaScript file in the main HTML page. We can include the JavaScript by simply doing script, specifying the source and the type is take slash JavaScript. It's standard practice to have the included the end so that if there is any error in the script, the page will not fail to load. So now when we click on our type JavaScript, that text changes to changed with JavaScript. So this is how you can have JavaScript code in a separate file and include that in your main HTML file. Now this can be included in all these terminals of the page and the functions will be available in all the pages. 17. Debugging JavaScript: We now understand how to debug JavaScript. Let's go back to contact ODS Kimmel, where we had written some JavaScript code and will introduce an error here. Instead of R5 will survive a prefab. And let's see what happens. Opened with live server. Reload the page. Let's inspect the element and as soon as we loaded the page, we see an error and we click on that. And we know where they're at is. It says uncaught error that 55 is not defined. We can go to the Sources tab and go to Contact dot HTML. And we can see the line where we're getting there. Let's click here. And that would introduce a big point. So next time when we load the page, YouTube comment, stop pre-written, not load the complete page. Then we can step over to the next function. And when we hover over different variables, we can see also that values. This should help us in debugging getter where we think that something is wrong with our function execution. Are there the mother errors which we want to figure out? So by just hovering over the variables, we can see that value and we can not just see them here. And the variables that are undefined, those have not been faded with values because you have not reached that point with the code. So we can step over and then see the output. Now we know that viral 45 doesn't exist, so we can change the value. Now let's change the rate of R5. And we'll refresh the page. Now there is gone, but the breakpoint is still there. So we can continue and the program will get executed, die as expected. You can look at step out and step into different functions, and then you can be at pivot breakpoints by clicking on this. This is how you can debug JavaScript and this is very useful, especially when your basis is big and you can easily figure out what the problem is. Using this sources tab. You can put the points and then see what's going on in your page. 18. JavaScript variable type & operation: Now that we understand how to manipulate HTML elements using JavaScript, and also we learned the basics of JavaScript syntax. Let's see what else we can do with JavaScript. We have opened the contact us page, which is a very simple page with just one element, will be trying out different HTML element manipulation with JavaScript to unknown data element. So let's comment some of these chord. So that will focus on what is new. And we'll also remove the footer element. So now we have the navigation and only one statement in the main body will be modifying this element with JavaScript. We'll say ID, contact us. Let's add another script element. Will get the Contact Us element and we know how to do that. Document.getelementbyid. And then this particular AD in our HTML changed. So now we can see that the text has been changed to. Since tau will remove this. We can put this within a function. Change, Contact Us. We'll pass the string as a variable. And here we would call this change, contact us. With new text. We'll put a semicolon. That's still best practice. Now let's see if that text is getting modified. New text. We have a function that can modify this three element with ID contact us and we are calling that on the page. And we'll also print the actual Mrs. being passed to the console. Console.log contact so that we can see what is the value in the memory which is getting printed in the console, and also how it is getting shown in the page. Let's declare a variable. And we do that using elite. Let, LET contact us. And typically we write the variables sin camelCase starting with small letter and then every ward for slit Rubin caps. And it's a standard practice to initialize variables when we declared. And we'll call this function using contact us valuable new text 123. Let's move the function to side George JS. And as soon as we move it to displace the original contact us. And it says that since Contact Us is not defined, we'll paste it in the script. Then that arrow should go away. Let's come back to the page. There is still there because we have not included the script in the Contact Us HTML. Let's do that. Will copy it and paste it in contact dot HTML. Now that error is gone. It we just met send. Makes sure all variables follow camel case naming convinced. And they can also start with dollar underscore. But it's a good practice to start it with a letter and then use camel casing naming convention. You can't start variables with number. If I change this to three, Contact Us. It says invalid or unexpected token because it's not expecting the variable to start with a number. So let's first try to modify contact us. And we'll say contact us here. So we are able to modify it. We can also declared constants. Constraint is something that cannot be modified. Contact store, contact store. We'll try to pass contact store to change Contact Us function. Okay, now if we try to modify contracts stored, contact tomorrow, as you can see, your assignment to constraint variable two that is not allowed. We cannot change constant time, we can only change variable types in JavaScript. So remember the difference between the two tape LEDs for the variable constant is what construct. If want to declare some variables which you do not want to modify, change them to type constant. Otherwise you declared them as variables using LED will remove this for now. You can also declare multiple variables in a single lane. Let a equal to B equal PQR, which is of String type comma c equal 10.3, which is of float type. So this is allowed. We can print console.log. A plus B plus C. So when we print a plus b plus c, the values that are getting printed, and because we have one stream, it treats all three strings. The result is also a string. The key thing that we're trying to highlight here is variables can be declared in a single lane, which is allowed in JavaScript. Let's now understand a skip character. If we want to display CT unit to put any skip character, then the court would be visible. Backslash. You can have a skip character, otherwise it will treat this section is a string and then it will complain that you are not concatenating or zip code two, which is not expected. You can use glasses in a skip character. You can go to developer dot mozilla.org to see the full list of escape characters. There is another way to declare string that is with back ticks. And let's say that instead of double quotes, we can add back ticks, which is usually available on the lip corner of the laptop or desktop keyboard. Contact store. Tomorrow. You can declare like that. And there is no change in the behaviour. It's still getting displayed. Using tactics. You can have string interpolation. For example. You can have any variable included in this string using dollar and curly braces. And it, the runtime, it'll get populated. So let's pass. One of these variables. Would pass c. Now it says contact store 10.3. Tomorrow. You'll be using strings very frequently in JavaScript are web-based development. String is lot of functions or methods. We'll see some of the example of that. Contact us toward closed. And instead of passing contact us, we can do to lowercase and pass that. We need to put the parenthesis here. Store closed. We can also do that right here to lowercase. Similar to lowercase, we also have uppercase. You can go to developer dot mozilla dot hard, or just do a Google search and see all the methods that are available on JavaScript strings. Let's try out another function which is substring. And we'd say substring starting from position one. So it started from first character. Character is this fast characteristic which started from there. And we are seeing the output both in console and both on the page. There is something called typeof, using which you can see the type of any variable, console.log type of. And we'd say contact us, that's available. Contact us. It's of type string. And if we do that of a, it shows number. So using typeof, you can check the type of any variable. Let's declare another variable and will not initialize it. And Let's see what happens when we pass it to the page. On the screen it says undefined. And in the console also it printed undefined because we have not really defined this variable. And if you want to display blank on the page, you can simply do new contact equal null. This is the way of removing certain variables from the page. You can just set it to null and that will go. And in the console you can see the value null, but on the page it doesn't display anything. So that's the way to clear any content from the page. Nothing would show up on the website. But if it is not declared, then you'd see undefined edge we just saw earlier. We can also declare objects in JavaScript. Let's see how we can do that. Will have a object called store, and we'll say equal. Within curly braces, we can have different properties. Stored name, colon, stored one, and give a comma. And you can declare another field at this, which can be addressed one. Now to get a particular field, app.js, we can simply say store, store name and stored one is getting printed. And we can also print the address by simply saying store dot atlas. So these are, you can have an object and I have different fields, and then extract values from that store data. 19. Changing style with JavaScript: We'll now check how to modify styles with JavaScript. We have opened the same contact dot HTML page where we have one element getting displayed. And earlier we saw how to use JavaScript to modify the content of that element. Let us now understand how we can apply different styling, different color, different font using JavaScript. Let's comment out the code that we had written earlier. Let's understand how to change styling of this element. Contact us. We can get the element by doing document.getElementById and then pass di di name, which is contact us and stored it in a variable. You can give it any name. Then you can simply say contact ID, style. And you can see different properties like color font. Let's try out Khaled first rate. So immediately the color change to rate. You can also function and invoke this on click a button. And let's try out something else. You can go to developer dot mozilla.org and see all the foreign font families and other styling aspects and try out different things. Let's try to change the font for our Contact Us element. Let's try out one of these. You can see that the font exchange to Italy, Finnish sense. This though we can chain styling your page using Javascript. You can get elements by ID or by class name, and then look at different properties and apply styling based on your requirement. And you can have this entire corps within a function. And invoke that on click of a button. We learned Wharton and we'll say on click. And we would write a function, change me and put discord within a function. Click on Click Me. You can see that the font and color is getting changed. 20. JavaScript Loops - for, while and forEach: Let's look at different types of loops available in JavaScript. Ruby again opened the contact dot HTML and also the page on life server. Let's inspect and open the console. Now let's try our for loop. This is how you can write a for loop in JavaScript or lose ensure the code to come out of the loop is written first. Otherwise it might get into an infinite loop before I finish writing i plus plus, which will increment i and ensure i is greater than two d after looping through 20 times, the pace got loaded and the for loop get executed. Now it has gone into an infinite loop and the pages continuously loading. Now it would not stop unless you stop the labour server. To just be very careful while working with loop in JavaScript because they automatically load it fewer. Loop is in a function it's fine for loop is getting executed when the page loads, there's a risk that loop will start before you're finished your code. To stop lifesaver, place, Control Shift P, and type stoplight server. The command is called C to stop the server. If the server doesn't stop, go to your task manager and kill the Chrome process. That is the only way it can kill the page and stop it from running. So let's now look at wild loop and refer. We write the condition, let's increment the variable. Let j equal j is less than ten. And it can show will print j. Now let's start the server again. This time it loaded fine. Let's go to console. We can see that i and j values are getting printed in the loop. I 20 times starting from 0 all the way up to 19 and J five times sin a while loop. You check whether condition and then make changes to the variable so that the condition on we've made up to certain number of execution. There is a for each loop also, let's declare an array. And you can say had dot for each. We'll say print function. You declare a function called print function. We'll pass item and print that in the console. You can see that 10203040 are getting printed. So this is how you can iterate through an array using for each, you can also do that using a for loop, but for each allows you to directly apply some function on the array without having an additional four loop. You can also grab the item index. At what index a particular value is. We'll try to print that. You can notice for each element, the index is getting printed for 100 is the index, for 21 is the index and so on. This is how you can work with for each in JavaScript, with foreach, you are able to call a function. And the function takes the item in index. And based on your requirement, you can grab item ended decks and do your programming here. 21. JavaScript IF loop and Ternary operator: Let's now look at the blue whale rating. If look always use triple equals M equals ten, console.log. Yes. Console.log. No. You can see a yes is getting printed. Let's try to compare ten M-Pesa with ten strings. We can see noise getting printed. So when we compare an integer with the ten strings, get Gibbs No. But if you have w equal, we get yes, converts the integer to string and then compares. If under strictly compare values with type, then always use triple equal. Similarly, we have not equal. Not equal, use two equal signs along with exclamation sign. We can see is getting printed in the console. This is correct. This means ten number is not equal to ten string, but if you have a single equal sign, you get no. So again, in nautical also, always ensure your two equals sine m one exclamation mark and you use triple equal. While chicken give two sites are same or not. There is a ternary operator in JavaScript. The way it works is like this. Instead of a flue, you can write a condition. Let's say ten is greater than five. Question mark, then lose some operation. Let's print something to the log else. So you do that by a colon, sign and read something else to the console. So question mark and a colon. If the condition is true, this should get executed outweighs the other one would get executed. Change this and check that the other block is getting executed. In a single line. You can check a condition. And based on that, execute some code, you can invoke a method here. Articles have the entire expression later to a variable. Jvc will have this value. And we can do a console.log. 22. Bootstrap introduction: Next we'll understand Bootstrap and how we can style the page and make it responsive. Before looking at what Bootstrap is and how it works, let's try to load the page on a mobile device. We've opened this abc dot HTML on a desktop browser. You don't need an actual device to know how the page would look like on a mobile phone. All browsers, including Chrome, have features to show you how a page would look like on a mobile device. When you inspect, you can see there is a device toolbar. You can click on it. And you can see different options on the top here. So when you click on this toggle device, but you can see how the page is going to look like in a different layout. You can change this value, or you can simply click on this and try to rotate how the page is going to look like in different orientation. You can select different mobile devices and see how the page would look like on those devices. Let me select iPhone. And you can see that it would look like this, which is not that great. On an iPad, the page would look like this. This is not really responsive. Let's understand how we can make the space responsive. Many websites that you see there was similar structure. They will navigation there. Two or three column layout. If you have to make a responsive page, would do not need to do everything from scratch. There is a framework available called Bootstrap, using which you can quickly and rapidly build responsive pages. So what exactly is Bootstrap? You can visit getbootstrap.com to learn more about it. It's an open source framework using which you can build responsive layouts, rapidly. Responsive mobile-first sites. Mobile first means the site is first designed for mobile, and then it is optimized for other devices such as desktop. And there are many sites in the real world which are built using Bootstrap. With Bootstrap, you can quickly build websites. So let's see that in action mixed. 23. Bootstrap Hello World: Let's understand how to build pages using the Bootstrap framework. We'll create a new folder, my website. Under that, we'll copy all the content that we've developed so far. So we're, we're abc dot HTML. We were contact duties, KML, we were Hadoop image and then we have site dot, CSS and spider.js. Let's open this folder in Visual Studio code. Will now clean up the code, remove the styling that we avoided. Go to abc dot HTML, and remove all the styles. And we'll remove all the classes that we have learned so far. Let's remove this border attribute also. Cleaned up the VC dot HTML, removed all the styling. Let's not remove styles.css from here. If required, we can add a custom styling later to the site dot CSS. Similarly, the contact dot HTML will ensure there is no styling. Let's open this page with live server and we're back to the original state in which we do not have any styling. Go to getbootstrap.com and download the latest version of Bootstrap. At the time of this recording, the latest version is port dot-dot-dot T2. When you extract it, you see a CSS folder and a JavaScript folder. Within the CSS folder, you will find multiple files. Bootstrap.css is the main file and there is a mini version also, which is a compressed version. And before do use some specific models of bootstrap. You can do that. There is Bootstrap Gilead and reboot for specific features of Bootstrap. But in this course we'll work with the main file. So let's copy the Bootstrap CSS and take it to our website folder, will go to my website and paste trip. There. In fact, is a best practice. We should have a separate directory for CSS. So let's move bootstrapper does site psi dot CSS is currently black. Back into Visual Studio code. We can see bootstrap.css and psi dot CSS. Within bootstrap.css, you will see lot of styles already defined. So let's now art bootstrap.css to the main page. We can do that the way we added style.css, This will be CSS class bootstrap.css. Similarly, psi dot CSS, we need to modify the path. Now, let's now see how the page looks. After we have included bootstrap.css. We have not used any of the styling of bootstrap.css. But let's see if I just simply putting the bootstrap.css changes anything in the site. You can see that the fonts look a lot nicer. Now, we haven't done anything. But bootstrap has some default styling which it uses to override the style for different p tags. There are different other elements like beef to the font is automatically changed. Now let's see how to apply more styling using Bootstrap will go to the boughten, changed me and apply some styling using Bootstrap. If the bootstrap.css, if you search for btn, our button, you can see dot btn class, BTN, which is nothing but btn class. And if you search further, you can see many other styling defined for the button, the button class on homework, on focus. You'll see a lot of things. Are that button class here. We'll say classical PTEN. Now you don't see any color. The button is there, is there with the white background. There is a steady level, level BP and dash info. Can it is with a different background. Let's add that class also. You can have multiple classes separated by space. Now we can see a nice 24. Styling table with Bootstrap: Let's look at what else we can do with Bootstrap. Bootstrap has many classes for tables. Let's try out one of them. Let's try out the table class. We'll go to our page and apply the tablecloth on the table element. Once we do that, you can see that the table styling is Chase and it is occupying the entire space. And we can see different heroes getting highlighted. And the moment we are just the screen size, the table width gets automatically adjusted. So Bootstrap has applied styling and also made the table responsive. There is also a class available called table dark. Let's apply it and see the effect. We can see that now the table looks nice shirt with a darker background. All the classes in bootstrap or by default, responsive. We can also apply this styling to the table header or table body. We have not hardheaded table header. So let's do that. Instead of P body, this should be the head and the rest of the table should be under the body. When it could change these two th, table heading. Let's say about a header P-hat. And we did that PR and pH for each column of the header. And then we have the table body with two rows will go and apply class equal p head light to the table header. You can see that table header is now in a light color. Again, it's a responsive table. Similarly, you can apply styling on the other elements of the table and go to the Bootstrap CSS and explore different styling options available for tables. And you can also look at the documentation on their website to learn more about styling, not just stable, but different other elements. 25. Styling image with Bootstrap: Next we'll understand how to apply Bootstrap on images. Will replace this image with another image with slightly darker background so that we can see effect of different styling. There is a desktop dot PNG in the project folder. Will use that image for this demo. Instead of Hadoop dot PNG will have desktop dot PNG. Let's see how that looks. So it has a heightened width. Let's remove that will change the order to desktop also. Now we can see the images taking. And when we resize, eBay's doesn't get resized. It gets cut from the side. Bootstrap has lot of glasses for images using which you can easily apply different responsive styling. Let's see some examples. First, styling we replace, make the image surrounded, classical, rounded. To know more about the round date the class, you can go to the Bootstrap CSS file and search for our data. Border radius to give a rounded effect. Now let's see how it looks. You can see that the image is now little grounded in the Cotner will also our little margin here. Um, does three will add a class IMG desk fluid to make the image responsive. Now this is how the image looks with a full weight. And when we resize the pace, the image gets automatically resized. It doesn't get cut. And you can also check the effect on different devices. Iphone, iPad, the image gets adjusted based on the width of the device. So this is how we can apply styling to images using Bootstrap and make them responsive. This is not everything about the images, but hopefully you got an idea about how to leverage Bootstrap to quickly apply styling and make your website looks great. 26. Building a responsive grid layout with Bootstrap: Let's now understand how to have a grid layout with Bootstrap. To demonstrate how the grid layout works with Bootstrap, let's create another page. We'll create a new page layout, one dot HTML. And let's type HTML5. We got the basic structure of the pitch. Creating a grid layout with Bootstrap is really easy. Let's harder div, and this will be the main div, the pitch that we learn. Another div, which will be the first draw. And then we'll have two columns. Row one, column one, row one, column two. So this is a very simple structure with one main beef and we are trained to have two columns within a row. Bootstrap gives us certain classes to create a grid layout. We'll say class equals container. And this should be a row, class equals row. And this should be column class equals. Let's see how this looks. Will open this page. We'd leave server. We don't see the effect P8 because Bootstrap is not included on this new page. Let's copy that in. It went from abc dot HTML. Now we can see two columns occupying the full width of the beach. And when we resize, this space gets automatically. Lets our border to the royal limit. To see this in a better way. Let's go to bootstrap.css and search for dark grow. And we lard border 10px solid. You can make changes to the default. Bootstrap styling is pretty requirement for now, we are trying to understand how the rows and columns should look. So we introduce a border here. Now we can see that boarded for the rule. Let's add the border for the columns also. One picks dotted. Now we can see the rows and columns clearly. And when we say the rows and columns get resized automatically is part of the page width, width bootstrap. You can be radioed rose up to two L columns. Let's add one more column. Will correct this paper. Row one, column two, and row one. Column three. Now you can see three columns and they get adjusted. His partner page weight down. You can keep on adding like this for up to 12 columns. Bootstrap has various classes to give columns is specific weight. Let's say that. You can also say call for call fork. So they would all occupy for column space. Nothing changes. Mix your cards up to 12. You can call 444, or to wait two, it's up to you to define how much width you want to give to each column. But they should all add up to raise your take stood, float to the next rule. Let's make it eight columns. And from to n will give two column H to the first column and the third column. And now you can see that second column is occupying more space. We haven't added dotted styling to the call dash to call dicey classes. That's why we're not seeing that. We can do that also here with bootstrap.css. Let's add a border. One picks dotted to all this column classes. Now we can see the change. And as we resize the page, though it will automatically get adjusted from the total space. Eight column space would be given to column 22, would be given to column 12 would be given to column three. So this is a very simple concept, but using which you can build your base layout easily and make your base responsive. With this much understanding, you can build any pays layout. Let's see how we can give a grid layout to our abc dot HTML. What we want to do here is keep the image in the center. You have the table on the right and have this text on the left. Let's build this simple three column layout. We'll go to abc dot HTML. Are men div will give a classes container called picks up to the image. We'll put it in one single div. The image is in another div, and the table is in the third div. So we'll make them three columns. First, we need to our day before the row. And we'll move this closing div to have it after the def. This is the ending of the row. And now we'll have three columns. Classical call. We can call for sim class for the next one called for and for the table also call for. Now, let's see how the page looks. So this is our base looks now, looks fine. Up to a certain size. After that, the table occupies more space. So for this demo, let's move this table to a new row. Will close the row just before the table and introduce a new div with class equals row. And for the pebble, let's occupy the entire space. So let's see if this is getting close properly. It does, and then this is rho. And finally, we need to end the main container also. This is closing the main container. Nine, the first row will have four columns for the text section and eight columns for the image section. Let's close and make sure it's all aligned properly. So he ever did for text, which takes four columns and a div for image which takes eight columns, and that, that is our first row. Then we have another rule where we have a table which picks up the entire space. And these are our two rows. And then we have the main container, which is getting close here. So with Visual Studio code or any editor, this mixture you're div sir. Quoted properly, otherwise your base layout might break. Softer. This we can see that we have Paragraph section, then image, then table. And this is fully responsive. We can reduce the size and we can see that it is getting recycled properly. 27. Mobile-first design with breakpoints: Let's look at the page we have built till now. We have applied Bootstrap grid layout and applied to make the page responsive, but easy to fully responsive. Let's check it out. We'll go to Inspect and tried to load this page on a smaller device, let's say iPhone. If you see this text is now overlapping the image section. So up to a certain point, it looks fine. But then when we gradually reduce the width of the page, this starts overlapping the other section. Bootstrap provides an easy way of handling this for different device sizes. Bootstrap has different responsive classes for different device types. Let me capture it here as a comment. So depending on the width of the device, we can decide what class to use. For example, the call class is the default class that we've been using to styling on our columns. We also have small, medium, large, and extra large called classes. They are defined like this call does, is same for small and so on. So what this means is if a page width is greater than 576 pixel, then only this time you'll get applied. So this is called big point. When you increase your page width beyond the breakpoint, beyond the minimum width, then a particular style gets applied. So let's understand this with an example. Instead of call Das For, we'll call conceived for and for the image will sick call SM eight. If your page with his more than 576 pixel, then this four by eight layout will be applied. Otherwise, everything will appear in one column. Let's check it out. So this is the full width of the page and will gradually reduce the pace size. And at some point you would see that everything is appearing in one column. This takes section and the images appearing in one column. Now, four by eight layout is applicable only when the pace with this more than 576 pixel. Let's now put this page on a mobile device. Now when we open the page using iPhone, you can see that it's a peering in one single column because I have one as a woodcut 375. Now the issue of heading one, overlapping the image 600 is gone. The paces fitting nicely to a mobile device. If we opened it an iPad, which is a 768 pixel width, it appears into column. Let's change it to 5765 76 its two column. And if we reduce it to just below breakpoint 575, then it occurs in one column. In the web development, it's a best practice to design your pages for smaller devices. That's way. The approach is called mobile-first. You first check how your page is going to look like in smaller devices. Then we gradually build the pages for larger size devices. You can also convenience and of these, for example, we can have a certain layout for up to 768 pixels. We want that we can have another layout. So let's check it out. So we have said four by eight layout for smaller sized devices. And for medium size, we would say six by six. And let's say eight by four. Up to 576 pixel is going to appear in one column from 576 to 768 will have four by eight beyond 76 eight we levied for. Let's check it out. So this is more than 76 eight. So when it is more than 768, we're seeing eat by Ford layout. Let's gradually reduce it. Now below 768. It is four by eight. Alert was eight waveform. If it is less than 576 pixel, it's not picking any of the two layouts you have defined. That is four by eight or eight wafer, putting the entire contentedness single column. So while building your page, always design it for smaller devices and then gradually check how the page is going to look like in higher resolution devices. And depending on your requirements, you can decide how to apply these breakpoints effectively to make your page look good on all devices. 28. jQuery Hello World: Jquery is one of the most popular JavaScript liabilities. And it is used to manipulate HTML and CSS, but in a much more efficient way. Jquery initially gained popularity because of its ability to handle cross-browser issues efficiently. With jQuery, you can write code without worrying about whether it's going to run a naive Chrome Safari or any other browser. And with jQuery, you can build very powerful, feature rich UI applications with very less code. There's a very strong community out there. You will find many free plugins using which you can build very complex UI application in a very short time. Jay equities is single JavaScript file. Let's pick a look. Go to download jQuery. And you can either download the compressed version which is required for production code, or you can download the uncompressed worsen and take a look at the source code. Let's download the uncompress worsen. So when you click on it, you see the content. So this is the JavaScript file and this is all about jQuery, one single JavaScript file, but with very powerful features. You can simply right-click it and save it in your project folder. Jquery 3.5.1. This is the latest worsen time of this recording. Now let's go to Visual Studio code and take a look at the jQuery source, fine. Jquery 3.5.1 ab.js kept at the root of the project folder. So it has variables, it is functions and using which we can do lot of things much more efficiently, which we'll see shortly. To use jQuery, we need to include it in our HTML file. And you can include it like any other JavaScript file. Once it is integrated, you can start writing g equity code. Let's write a helloworld program, will declare a script tag. And within that, we'll say dollar document, dark, ready and a function. We'll call an anonymous function. Then within curly braces will do something and closed-off ready function. So what does this really mean? Dollar is an alias for jQuery and document does what the DOM or Document Object Model. So when the document is ready, that means when the DOM is loaded, not necessarily all the content loaded. When the DOM is loaded means the structure of the page is loaded. The images and content might take time to load, but the basic structure of the page is loaded. Then using jQuery, you can start manipulating different elements. Let's try to print something to the console. The 3D port equity. Let's load the page and see what happens. We'll open the Patriot late server and inspect and go to console. And we can see that ready for jQuery is getting printing. This is the starting point of jQuery. When the document is ready, you do something. Let's try to change the content of one of the elements using jQuery. We have a paragraph with IDP. Do we know how to get the element by ID and manipulate with jQuery. You can also achieve the same thing. Dollar starts, but again, G equity, IDP to HTML should be changed with jQuery. Now when we go to the page, we can see that that takes test when modified. We can also change the color. Let's change it to red. And the color is getting changed to red. And if we change it to green, it will get genes to clean. One thing to note, if there is any syntax letter g, equity would not complain. Jquery would simply ignored it. And let your page load. We just did late, late and didn't do anything. Or let's say we've missed a court with the equity whenever there are syntax errors, the page will continue to load. You must be wondering why we need jQuery when we can achieve many of these things with plain HTML, CSS, and JavaScript. First reason is jQuery. Functions should work on any browser. Most of the modern browser supports extracting elements from DOM and manipulating them. But people are working on some of the older browsers, then those things might not work. But if we are written with jQuery, you can be assured that most of it is going to work. Secondly, with jQuery, you can build very powerful UI components. Beta slider, beta, carousel. To critic, gives you a lot of power to manipulate HTML CSS elements and build very interactive UI components. And also you will find lot of plug-ins available online. You can easily take a plug-in and included in your code. Those plug-ins are mostly free plug-in, and you can easily build very complex UI using jQuery. 29. Applying styling with jQuery: Let's see what else we can do with the equity. Typically the LA ports, tryout or JavaScript and jQuery in the console. And once they are fine with it, moved to the main source file. Let's try out some of the jQuery features directly in the console. We'll copy this. And we have done Inspect Element and open the console tab. And here we can directly type and see the output. The advantage here is you can highlight and see how which element you are interacting with. Similarly, you can change the color now and see the output directly here. Instead of create, let's change it to green. And you can make changes and directly see the effect on the browser. With jQuery, you can get element by ID or class or by illumined name and perform different operations. When it could do multiple operations on the same element. Instead of fetching the element twice, you can face the eluent once and then do multiple operations. For example, you will to change the HTML and also change the color, get their limit once and do both the operations that we're the performance would be a lot faster because you are not trying to find the element again and again. You can also store it in a variable if you have to use it later new program. So grab the element P2, stored it in a variable p2, and then modify by invoking various function directly on the variable. We faced element by Id. Similarly, we can fit directly, giving the element name. Here we face the H1 tag and you can just hover over each one and see which one we are looking at. We had just one H1 tag. So it faced that if there are multiple, It would have fetched all the items. Let's try to fetch p tags. We know we have multiple P tags in the page P1, P2, P3. And you can store it in a variable and Luke treat and far from different operation. Or you can directly make changes to all the elements the way you do for a single element. For example, we can change all p elements to green. With this command. You can see that all the p tags are now changed to green. To know how many elements are there. You can have p dot length and get the element length. You can take advantage of the Visual Studio Code assist feature. Just type in element and type dot and see all the functions that are available. Let's try it out again because we've made some changes on the Visual Studio Code of the Pays got refreshed. Now all the paragraphs are red. You could try it on H1 where we know only one element is there. One element will get modified. So you can modify multiple elements or a single element with the same code. You can get all the bibs in your page. We have container, we have rho, we have some deeps with Bootstrap classes. We can see all the divs and we can get the length of that array also, how many ships are there? Let's grab the container class, which is the main page and change the styling. We can see that we managed to change the border up doc container with the jQuery. So this is how easy it is to work with jQuery. You don't need to grab element by class or by ID and then try to do something with jQuery. It's really easy to find a particular section of the page and change the styling or change the behavior. You can also add. Classes, will get all the p elements and art class, which is a margin class provided by bootstrap. And you can see margin for has been applied. Now you can remove the margin also by saying remote Class info. Let's get the div, which has the call is m for class, we know that is the first row, first column, and the players solid green border on it. We can see that the green water has been applied on it. So you can pretty much should grab anything from the page, be BB, type, particular class or element by Id and do operations on them. With dot parents, you can get parents of whatever you have fetched. So this is the main selector. And then you are grabbing the patents for collars, him for the parents are the row and the container in the main, in the body and the HTML. Similarly, the children out. Anything that we see within this row one, column one, all the p tags to hitting the button Control L to clear the console, we can get all the rows of our table by doing peabody dot children. And if you have to change the color of all the rows, just simply do peabody dot children dot CSS, color green. This would change color of the text in the entire body section of the table. We can hide an element by invoking function. We can see that P3 got hidden. Now we can show it by doing a dot show. We can also do toggle if it is shown it to be hidden. If it is hidden, it will be shown. Let's grab the bottom element. We can also grab it with the class, but since we have one button, we're able to grab it with the bottom element name. There are multiple buttons would have faced this particular button with a particular class or ID name, not this button we have fetched. It's really easy to work with events with jQuery. You can grab a button and then the onclick up that you can call a function and only must function, which will let say height H1 element. Or you could do any operation, whatever you pled till now, you can put the intercourse. We did the button click function and try it out. Let's execute it. Now click on try JavaScript. They join element is getting hadn't and it toggles. So every time you click it either shows, it gets hidden. Go to Visual Studio code and see what are the other functions available on the button. Or you can also look at the jQuery documentation to learn more about different event types. These are various things you can jQuery, it's really easy to apply styling and do operation on various events. And you can easily reach out to an E6 and up the page and do some operations. Whatever we tried in the console is also available in the abc dot HTML page. Two key concepts in jQuery, document.ready to start jQuery operations. And you use Select the expression, grab eliminates classes or IDs, and then invoke different functions to manipulate those elements or classes or IDs. So this is how you can apply styling with jQuery.