 Hello. Hi everyone. I'm Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. So today we are going to start third phase of this bootcamp. And from today onwards, we'll be talking about the front end development, right? So this front end development is basically dependent on lightning web component. But if you want to understand lightning web component, so we need to focus on certain basic things that should be in your mind before understanding lightning web component concepts, right? So if you want to understand lightning web component, and you don't have basic knowledge about web development, so understanding lightning web component will be difficult for you, right? So to make it simple, what I decided instead of directly learning lightning web component, so we need to first understand what HTML is, how we can write code in HTML. Then along with HTML, we'll go through CSS, because through CSS, we do some designing with HTML code. So we need to understand both HTML and CSS. And then we will go with JavaScript, and then we'll be jumping on lightning or a component development. And then at the end, we'll be starting lightning web component development, right? So this will be the third phase of bootcamp, right? So I just want to welcome everybody on this channel. And good evening, good afternoon, good morning. So whatever your time zone is. And I hope you are really very excited to learn about front end development. So I will be starting with HTML today. So this week, we'll be covering HTML and CSS from next week onwards, we'll be focusing on JavaScript. And then we'll be focusing on aura and LWC. So this way, step by step, I will be covering everything from the beginning, so that both technical and non technical person can understand the concepts very well, right? So I will be focusing on both the kind of audience. So my explanation will be very simple from the beginning. If you don't know anything about HTML, CSS, JavaScript, so I will be covering all the basic stuff for you. Okay, so with this note, let's jump to our day 69, right? So today is day 69 of the Salesforce learning bootcamp. And we are going to understand HTML, basic concepts, those will be leveraging for building lightning web components, right? So I am Sanjay Gupta, I will be explaining each and everything in detail, we'll be demonstrating all the practical aspects will be explaining all the theoretical concepts, right, so that you can understand the concepts well. Okay, so moving forward, those who have joined this session for the first time, the this session of this bootcamp for the first time. And if you want to know about me, so you can go through with this slide, this slide explains everything about me, what I have done, what I'm doing for the community, how much experience I have, what certifications I have done, right? So everything is listed on this slide. So just go through and get to know about your instructor, right? So moving forward, next, we have virtual learning best practices. So as this is the very first session of front end development, so I just want to cover each and every point in detail, so that going forward, you can focus on all the points properly, right? So here you can see few virtual learning best practices are mentioned. So you need to properly focus on all the live sessions, take proper notes for your understanding. So lots of folks are asking, can you please share slide decks? So I'm not sharing slide decks, other things are already available with you. But if you want to take proper notes, so you can and you can write the right doubts and you can ask them in the end of the session. And we have a telegram group as well where you can ask the doubts, then don't miss any session because everything is connected and by any chance if you miss, so recordings are available on the channel itself, you can go through those recordings anytime, then practice each session along with exercises. And if you have any doubt, you can join telegram group. So telegram group QR code I will be sharing in the next slide and keep doing above every day so that you can build strong foundation for a successful career in Salesforce ecosystem, right? So along with back end development, front end development is also equally important. So if you move forward, so this is the best code which I can share with you like consistency is the key. So please do regular practice. If you learn everything in detail and if you follow this bootcamp till the end, so you will be having knowledge of each and every aspect, right? And if you see the session tracker, so session tracker is modified and as I promised you, like I will be covering deployment process, QA process. And soon you will see business analyst process and lots of other material in this bootcamp and everything will be available in the session tracker, right? So be consistent, learn everything and you don't know whenever there will be an opportunity and whatever you are learning, you can utilize that knowledge to clear or crack any interview, right? So going forward, so this is the QR code that you can scan and you can become part of the community where all the beginners and like intermediate folks are available. They are interacting with each other, asking doubts and helping each other solving problems, right? So become part of this community and you will be having lots of folks available to help you out. And this is the timeline I little bit modified it. So this week we'll be focusing on HTML CSS only next week on JavaScript, then aura and then LWC, right? So this is our upcoming plan so that you can prepare yourself and you can learn things in proper and sequential way, right? So moving forward, so if you have not followed Sanjay Gupta Tech School, so do follow it on YouTube, LinkedIn, Instagram and Telegram so that you can receive timely notification and all the important links are available in the video description, right? So do share your reviews and feedback so that I can receive some motivation and can do a session throughout the year, right? So we are half in the year like currently June is going on. So we are half in the year and upcoming six months will be lots of session happening, different topics will be covered. So share this channel link with as much as you can so that lots of folks can be benefited with the boot camp, right? So jumping on to the topic. So today's topic is HTML. We need to understand what HTML is, why we use HTML. So initially I will be covering the theoretical aspects of HTML and then we'll be focusing on like how we can implement our code with the help of HTML. So this week and next week sessions will be very much important for those who belongs to non-technical background and they don't have any technical degree. And if you have technical degree as well and in your BTEC or any graduation or post graduation course, if you have not gone through these tools, HTML, CSS and JavaScript, so these sessions will be very much important for you, okay? So now we just need to understand what HTML is. So basically, HTML stands for hypertext markup language, right? Now, with this full form, we need to understand what is hypertext, right? So basically, whenever you visit any website, so in a website, we have two types of text. One is plain text, and one is hypertext. So plain text, if you click on that text, nothing happened, right? If you click on any plain text, nothing happened. So what you need to do if you click on any text where some link is available. And if you click on that text, so that particular link will be opened in the same tab, or it can be opened in the new tab, right? So that particular text is basically known as hypertext. Okay, so through HTML, you can convert your plain text into hypertext so that lots of pages can be connected with each other. And if you click on particular page, so that you can just move to new page, like new page or that page can be opened in the new tab. So this is basically meaning of hypertext. And that's why this language is known as hypertext markup language. Okay, so now what is markup? So a markup language is a set of markup tags. So in HTML, we have lots of tags through that we write the code. Okay, so HTML documents are described by HTML tags. So you will soon get to know like what tags are. So each HTML tag describes different document content. Okay, so I'm just moving to the next slide so that I can show you how we can write the tag. So HTML tags are keywords surrounded by angle brackets. So this is the syntax, you just need to write tag name, then content and then slash tag name. So what you need to do, you just need to start your you just need to start your content with particular tag, and it will be ended with particular tag. So here is an example like if you want to create a paragraph. So we have a tag called P. So you need to start it like this less than P greater than sign. And in between you can write some text, and then you need to close it with slash, right? So the first tag in a pair is the start tag, and the second tag is the end tag. Okay, so the same concept we'll be using an aura and LWC as well. So we will be using these tags or these are also known as elements. So in between these tags or elements, you will be writing something. And the end tag is written like the start tag but with a slash before the tag name. So this is the syntax that you need to follow. Okay, so moving forward, what is web browser? And what is the relation of HTML and web browser? So we all know, like all the web pages we view in the web browser. So if you want to visit any website, so you just need to open a web browser. And through that web browser, you can just visit particular pages. So basically HTML language is used to create web pages. And if you have written any HTML script, so that script will be showing the results in the web browser, right? So you can use any web browser that is available in your system. And web browser doesn't display any HTML tag, whatever is available in between the tag. So that will be rendered on the web browser. So here we will be using a term that is known as rendered render means whatever you write in your HTML code that will be displayed on web, web browser or web page. And that display term is here, known as render, right, R E and D E R render. So this way, first, you need to write the HTML code and then that HTML code will be rendering on the web browser. And you will see the result. So this is a simple HTML code that is written in front of you. So I will be writing this code in a text editor. And through the text editor, whatever code I will be writing, so that I will be showing on the web browser. Okay, so this is a simple code you can see here for statement is showing exclamation sign dog type HTML. So this is for a version of the HTML. So right now we have latest HTML version as five, then we need to start with HTML tag then had then inside had we have a title tag. So these tags can be nested between another tag, right? So here head tag is closed, then body inside body, we have h1p, then body is closed and then html tag is closed. And here you can see h1p tags are closed. So closing tag can be in the same line or it can be in the different line, right? So this way, you will be implementing your code. So now what I'm going to do, jumping on to the editor. So here on my screen, you are seeing visual studio code. So now onwards, whatever code we will be implementing. So we'll be using VS code. So in VS code, we'll be creating the files and through that we'll be implementing the solutions, right? Now if you want to understand how you can set up your VS code. And right now at the moment, whenever we are learning HTML, CSS and JavaScript, we don't need to connect our VS code with the org. But later on, you you have to connect your visual studio code with the org. So for that purpose here on my website, study salesforce.com, you will find a video that shows how to set up visual studio code for Salesforce to build lightning web component. Okay, so I'm just sharing this link in the chat so that you can also set up visual studio code in your system. Okay, so now here I'm going to create a file and in that file, I will be implementing the HTML code. Okay, so from here with open editors, I'm just clicking on this plus sign. And here you can see it is asking for select a language. So if I click here, so I am able to select HTML. So in visual studio code, you can write code in different different languages, right? So first you need to select those and then you can just use that particular language in which you want to write the code. So here I'm writing HTML, start and end tag. So I'm just zooming in so that you can view it properly. So inside HTML, I just need to write had, and then I'm closing it. Inside had, I'm writing title. So I'm writing my first web page, right? So this way, first block is completed that is had. Now after this had next block is body, right? Inside body, I am I will be writing few more text so that results will be shown with the help of those. So here I'm writing h1 tag, closing it, right? So inside h1, I'm going to write my first heading. Now after this, I'm going to use P tag, closing it. And here I'm writing my first paragraph, right? So this way, we generally write HTML code. So you can see beginning ending tags are available. So beginning tag is like had an ending is starting with slash. So this is basic building block of HTML code that you need to follow whenever you are writing your HTML code, right? So I hope this everybody understood like how I implemented this HTML code. So in your system also, you you can implement the code in same way. And now what I will be doing, I will be saving this code. So I'm just pressing control s. And on my desktop, on my desktop, I have a folder called web. And in that folder, I will be saving this. So I'm going to save it with web one dot HTML name, right? So name I'm using as web one dot HTML. So HTML is the extension. And before that, you can use any name, whatever you want. And I'm just clicking on save. So you can see, this file is saved under desktop, desktop is having a folder named web. And inside web folder, we have a file called web one dot HTML. And inside that file, we are under HTML and had that. So wherever you will be placing the cursor accordingly, it will be modified the first line. Okay, so now this code is saved. So we just need to test like how its result will be available on the UI. Okay, so for that purpose, what I'm going to do, I'm going to open that folder. So here you can see web one dot HTML is available. So I'm just double clicking on this. So it is opening the web browser. So I'm using Mac. So it opened Safari automatically. And in this browser, you can see this is the result. So my first heading is displayed. And then my first paragraph is displayed. Okay, now if I click on this plus, so one more tab will be available. So here you can see this is a tab. So title is available my first web page. Right. So here title is available my first web page. So this way, heading and paragraph both are rendering on the web web browser. So no tag is rendered no tag rendered here, only the text which is available in between the tag or elements, those are rendered here. Okay, so this way, if you implement your HTML code, so its result will be displayed on the web browser. Okay, so I hope everybody understood and if you see any doubt related to this code, so you can ask in the chat. So moving forward. So just a quick recap what you need to do, you just need to open a text editor, write some HTML code, save the HTML file and you can view the HTML file in the web browser. Okay, so when we'll be understanding or a component, we'll be understanding lightning web component. So there also we will be implementing HTML files. And in those HTML files, we'll be creating the similar kind of code. But that code will be having some Salesforce specific elements or tags as well. So it will be mixed off this HTML, pure HTML, native HTML, and then we'll be having Salesforce specific stuff as well. Okay, so before moving to that part, we just need to understand what HTML provides to us. Okay, so someone like metapally is asking Mamta is asking, how did I select language to HTML? So what you need to do, whenever you are creating new files, so let's say I'm clicking on plus. So as I clicked on this plus, so it is showing this option, select the language. So you just need to click here. And from here, you can select HTML. So this way, you can select particular language. Okay, so I'm just closing this one. Now moving forward. So next we have different, different heading. So in HTML, we have total six predefined heading formats. So if you want to create any heading, so you can have h12 at six tags, right? So I'm going to quickly implement these tags. So from here, I'm copying and pasting these. So that we'll be having total six headings. So I'm changing these quickly, right? So I'm just saving this code moving to my web browser, and I'm going to refresh the page. I'm going to refresh the page. So you can see different different headings are available. But each heading is having different size. Each heading is having different size. So h1 is having largest text than h2 smaller as compared to h1, then h3 smaller compared to h2, and so on. So this way, HTML provides you the six predefined tags that you can use for showing any kind of heading in HTML. Okay, so we have h12 at six, we don't have any at seven at eight tags, right? So I hope this is clear to everyone, those who are watching this live, as well as if you're watching the recording, so you can just practice it along with me. So HTML CSS and JavaScript is a prerequisite for LWC. So if you practice it, so it will be good for you. And HTML is very simple. So here you can see we have one more tag that is for paragraph. So we have p tag in between whatever you write, so it will be displayed as a paragraph. So now what I'm going to do here, I'm going to use one more paragraph. So here I'm going to write my second paragraph. Okay, I'm just saving the code. So in this code, you can see two times paragraph is used. So what will happen, both the lines will be in separate lines, both the text will be displayed in the separate lines. So if I go here and refresh. So at the bottom, you can see my first paragraph, my second paragraph. So automatically text is appearing in different lines. Okay, now I'm going to show you one more thing. For example, your requirement is you want my first in one line and paragraph in next line. So what you can do, you can use a tag that is known as BR tag. BR is basically known as BR is basically known for line break. Okay, so if you if you want to break the line, so you can use this BR tag. And this BR tag is self closed tag. Basically, it is started here and ended here only. So we will be having two types of tag, one that starts as well as ends because that pair will be having something in the middle. So here you can see H five it is having this text in the middle. H four is having this text in the middle. So that's why they are having beginning and ending tag. But this BR tag is not having anything in between. So that's why it is beginning here and ending as well. Okay, so it will be breaking the line. So I'm just saving this code. And now I'm going to refresh the page. So you can see my first is in one line and paragraph is in another line. So this way, two, like one statement is available in two different lines with the help of BR tag. And if you want to have more than one line breaks, so you can use it repetitively. Okay, so this is one more thing that you need to remember. Now moving forward. So here we have one more thing like if you write text in different lines inside P tags. So what happens as description is saying this paragraph contains a lots of lines in the source code, but the browser ignores it. So let's implement it in the same way. Right. So this way, what I did, I implemented a P tag where I mentioned different lines. But whenever we'll be saving this code and we'll be refreshing the browser. So all these five lines will be displayed in a single line. If I go here and refresh, so you will see the result. So here you can see this paragraph contains a lot of lines in source code, but the browser ignores it. So everything is available in same line. Okay, so this unit to remember if you're using P tag, and if you're writing text in any way, so it will be available in the single line. Now you might be thinking how we can show the text in the same format. So what you will be doing, you will be using pre in place of P. So if you use pre, so whatever you write inside pre tag that will be rendered as is. So if I change this P to pre, if I change this pre, sorry, if I change this P to pre, so it will be displayed as is. So now again, I'm going to refresh. So you can see it is showing this way. Okay, so whatever way you are writing the code, it will be displayed as is on the output or in the browser. Okay, now moving forward. Next, we have one more important thing. So if you are implementing single quotes and double quotes, so what you need to make sure. So let's say we are using P tag, and we have an attribute that is title. Okay, and if you're writing something in single quotes, and in between, you want to highlight something. So you will be using double quotes, right? So continue single quotes, you cannot use. And if you are starting it with double quotes, and in between, if you want to highlight something, so you will be using single quotes. Okay, so this is important to understand. So the beginning and ending will be same. And in the middle, you will be using the opposite of either single quotes or double quotes. Okay, so this you need to remember if you're working with HTML. Now this is also important, like if you are implementing the code, and you don't want to run, you want to you don't want to render particular lines of code. So what you can do instead of deleting those lines, you can just make them comment. Okay, so how we can do that. So let's say these headings I don't want to execute. So this way I can apply the comment, right? So all the headings from h1 to x6 won't be rendered on the browser. So I just saved this code. Now I'm going to refresh. So here you can see only paragraphs are displayed. All the headings are gone. So this way you can just implement the HTML comments. And these comments are important for debugging purpose. Now for formatting purpose, we have a few more text. So one I already demoed you that is BR. Now if you want to make any text bold, italic underline, so we have B, I and you tag. Okay, so now what I'm going to do, okay, someone is asking to explain single quotes and double quotes. Okay, so let me cover that as well. So here I am writing that thing, right? So this way, suppose I implemented the code. So here we have P tag where we have an attribute that is title and title is basically Sanjay Gupta Tech School and this text will be displayed on the browser. Now what I want to do, I just want to show this tech in double quotes. So here I will be using double quotes. Okay, now if I have it one more time, and here I started it with double quotes. So in between, I need to use single quotes. So this is the correct syntax. If you started it with single quotes, it should end with single quotes. And in between, if you want to use single quotes, those are not allowed, you will be using double quotes here. And if you have started it with double quotes, then in between, you can use single quotes, double quotes are not allowed. So I'm just saving this code moving to web browser, refreshing it. So here you can see we have Sanjay Gupta Tech School in abbreviated form. And if I hover, so it will show me the text like this. Sanjay Gupta and then you can see it is showing tech in double quotes. And if I hover on this, so it is showing Sanjay Gupta and tech in single quotes. So this way you can use double quotes and single quotes. Now I'm going to show you how you can use bold italic and underline. So here I'm using bold. So here I am writing this is bold text. Then I'm using I. So this is italic text, then this is underlined text, right? So this way what I did, these three I implemented. So inside P you can see we have the I and you bold italic underline. So accordingly result will be rendered on the UI. Okay, so moving to the browser, I'm just refreshing the page. So here you can see this text is in bold, this is in italic, and this is in underline form. Okay, so these are some basic tags that you can use. Now, so Harish is asking how to apply padding and column inside for each loop. So right now I'm not explaining explaining this. So it will come later, like when you will be using JavaScript, then you will be using for each loop, then we'll see how we can do that. So first we are understanding the basics of HTML and CSS. Okay. So next we have HR, then subscript and superscript. So let's see how we can use them. So HR is for horizontal rule. It will give you horizontal lines. So here I am writing it one more time. Okay, now I'm going to use subscript and superscript. So let's say I'm writing H, then subscript inside it, I'm writing two and then oh, so chemistry equation is H2O. So in that two is written a little bit bottom bottom side. So I'm writing two inside sub so that it will be in the bottom. Then if you have some power thing, let's say five raised. So then you will be using superscript. So it is subscript and superscript. So subscript shift shifts the letter or text a little bit down and superscript shifts its two up. So I'm just saving this code. And I'm going to refresh so that you can see the result. So here you can see with HR we are having horizontal rule. And let me maximize it. So here you can see we have H2O and five square. So two is a little bit down with the help of subscript and two is a little bit above with the help of superscript. Right. So this way you can just use HTML features here. So this way these formatting things I hope you are able to understand. Now moving forward, I'm going to show you a little bit more features of HTML. So now we will be understanding how we can create links between files. So how we can create local links and how we can create global links. So if you want to create links, so for that purpose, we have a tag that is known as a a basically stands for anchor tag. And this is the example you have to implement it. And here, whatever we are writing, so this is a link, this will become a hypertext. So in the beginning of the session, I told you we we are using HTML that is hypertext markup language. So here, if you create a link on particular text, so that text will be becoming a hypertext. And if you click on this text, so that particular file will be opened automatically in the web browser. And with a anchor tag, you will be using HR EF. HR EF basically stands for hyperlink reference. Okay, so now I'm going to show you how we can do this in the system. So basically, we have one HTML file web one dot HTML. Now I'm going to create one more HTML file. So from here, I'm selecting language as HTML. So from here, I'm going to copy all the code and pasting it here. So I'm just removing this code. And I'm removing the comments and removing this. So in this file, in this file, which I'm going to save as web two dot HTML. So see this file is also getting saved in the web folder, where my first file is available. So I'm going to save it with web two dot HTML. So in this file, what is happening? It is having only headings. This file is having only headings. Okay, web two. And we have web one in this web one, I'm just removing all the headings. So it is having all these paragraphs. Okay, now here, I'm going to create a anchor tag, right, HR EF. So here I'm going to write web two dot HTML. So click here to open web two. So this will become my hypertext. If I click on this text, so web two dot HTML will be opened automatically. And this code I'm writing in the web one dot HTML. This is important to understand. This line, I'm writing in web one dot HTML. And it will be redirecting the control from web one to through web two dot HTML. So I'm just saving this file web one dot HTML. And it will redirect by clicking on this link to web two dot HTML. Okay, so here, I'm going to refresh this page. So you can see right now in the browser, we have web one dot HTML, right? So web one dot HTML it is showing its result. And here we have a hyperlink. This is basically a hyperlink. And the text on which this link is available, it is basically hypertext. Okay, so now what is happening if I click on this link, if I click on this link, so you can see web two dot HTML is open. So right now here, file name is web two dot HTML. And web two dot HTML is containing containing all the headings. And those are displayed here. So from web one, we are redirecting to web two. Okay, now you might be thinking, can we create this hyperlink in web two dot HTML as well? So answer will be yes. So what you can do just copy it, open web two dot HTML. And here you can paste it. So you can name it web one dot HTML. And here you can write click here to open web one. So I just saved both the quotes. Now I'm refreshing it. So here you can see if I click, so I will move to web one. If I click on this link, I will move to web two. And this is the way how your websites are interconnected through different different hyperlinks. And those hyperlinks are made on hypertext, right? So this way, when we'll be implementing lightning web components, so they're also certain times will be creating hyperlink. So this particular tab will be able to use there. Okay, so I hope with this explanation, you are able to understand how we can link two files together. But make sure whenever you create these two files, so they are available in a single folder, right? If they are available on the same location, so it will be easy for you to have this. If files are at different locations, so you need to write fully qualified path here, like you need to write the folder slash then file name, then only you will be able to have it. Now next is how we can create a global link, right? So if you want to create a global link, like if you want to click on a link, and you want to open a website that is already available, so this way you can write the code. So I'm not going to show you I'm leaving it for you. So you can simply write this statement anywhere in the body tag, and you will be having a link. If you click on that link, so Google.com will be opened automatically. So in the first code that Google page will be opened in the same tab where your existing code is rendered. Now, if you have rendered a particular HTML file, and you want to open Google.com in a new tab, so you can use this target equals to underscore blank. So if you use this code, so your web page will be opened in a new tab. Okay, so this is important to understand. I can show you like how we can open it in new tab. So here after HRF, so you can just use target. So here I'm using target equals to underscore blank. So I'm using it in web two. So whenever I will be clicking on this link, so web one dot HTML will be opened in the new tab. Okay, so I'm just refreshing it. So right now you can see here, two tabs are available. One is showing this and one is like blank. So if I click on this link, one more tab is open. So this is available in this tab and this tab is having different code, right? So this way if you want to open your file or page or website in new tab, so you need to use target equals to underscore blank. Okay, now we need to understand how we can render images on web browser. So for that, we use IMG tag that is available in the HTML. So we'll be having different attributes first is source, name of the file, then ALT is for alternative text. So if your image is not available due to any reason, so this text will be displayed on the UI and then width and height you can mention. Right? So I'm going to implement it for you. And before implementation, I'm going to show you like in my folder I have a banner already with banner dot PNG. So this banner I will be using as an image to show. Okay, so here in this web to dot HTML, here in the beginning, I'm going to write this tag IMG SRC equals to banner dot PNG. Then here I need to write ALT alternative text. So here I can write file not found, then I will be writing width equals to 500 pixel then width equals to 500 pixel, and then we can close it here only. And these I think we need to enclose in double quotes. Okay, so this way you will be creating an IMG tag and this is SRC not SCR source. Right? So this way IMG tag is created and file is banner dot PNG. So in my system, I'm I'm again showing you in my system in this web folder, I already have banner dot PNG. That is why I'm using this image. If you have created a folder, so first of all, you need to paste some image here. And that image you can use in your code. Okay, so I'm just saving it. And then I'm going to open the browser and refreshing it. So I need to open this one and refresh. So here you can see. This is the banner for today's session. So here it is showing in the size whatever we provided. Okay, so this way, if you want to show any image on the web page, you can do. So for that, you will be using this IMG tag and then you need to provide the source. Now, for example, here I'm writing banner one dot PNG, PNG. And this banner one dot PNG is actually not available in the folder. Still I am saving the code, moving to the browser and refreshing the page. So here you can see it is showing file not found. So this is happening because of this is happening because of ALT, alternative text. Okay, yeah, so I think I did some mistakes, so people are correcting me. Yeah, so with it should be high. Thank you for correcting me. That's why I was thinking like why height didn't increase. So it is width and height. Now I just saved the code. Okay, let me just modify this again. So I'm making it better, saving the code and refreshing. Yep, so now it is having proper height and width. Okay, so it is not properly visible. So what we can do, we need to reduce the height. So I'm just saving it and refreshing. Now it is properly visible. Okay. Yeah, so Akula Sandeep Kumar is saying correct, we can use CSS as well. So one more thing I want to show you here in this that inspect is not available. So in Google Chrome, we have inspect option as well. So we'll show you later on like how we can inspect our web page. So I think we are good till here. And if I move further, so we have one more thing that is like how we can have a link on image. So we already showed one image on the UI. Now if you want to click on that image and you want to redirect to a website, so we can do that as well. So here what we can do. So this IMG tag I am enclosing in a tag. So here I am writing href equals to HTTPS colon slash slash www.google.com. Then here I am writing target equals to underscore blank. And here I am closing a tag. Okay, so basically, first I need to close it here. So I can cut it from here and paste it here. Okay, so this way our code is right now. So I just started a tag, then href, then Google.com target equals to underscore blank so that this website will be opened in a new tab. Then this is IMG tag. It is in between a tag a tag is like closing here only. So I'm just saving this code. Now moving to the browser, I'm going to refresh the page. So here you can see if I move on to this image. So I see this hand shape, which means this image is having a link. So if I click, so you can see a new tab is opened and it is opening Google.com. And here is my webpage. Okay, so moving here. So punk is asking image format. So image format means what? Can you please elaborate your question? So we have different formats like PNG, we can have JPG, we can have JPEG. So whenever you have any file, so you just need to see the extension, like which type of image file it is. So accordingly, you just need to use that in your code. Okay, so this is what I prepared for today. So I think with this session, those who are not familiar with HTML, they get to know how we can write code in HTML, because similar kind of code will be writing an aura and LWC as well. But it will be having some Salesforce related stuff as well. But after understanding HTML, CSS and JavaScript from the beginning, I'm sure you will be able to understand aura and LWC more clearly. Yes, Praveen. So here image location is in the same folder. So punk is basically you can copy any image, and then you just need to drop that image in the folder. So in your system, image can be in any folder. So just copy it and wherever you have created those HTML files, you can paste your image in that folder on the right. So that way, you will be able to implement that that IMG tag, right? So just go through with the sessions one once again, so so that you can practice properly and do practice like whenever we'll be learning aura and LWC. So all three HTML CSS and JavaScript will be used a lot. So just understand it properly, practice it so that you will be having enough knowledge prior to aura and LWC. Okay, so this is it for today. Tomorrow also, I will be explaining little bit CSS and HTML. So tomorrow, we'll be having both concepts. I will be explaining how to write CSS code, how we can implement it along with HTML. Okay, and the after tomorrow also, we'll be having some more stuff, and then we'll be focusing on JavaScript. Okay, so this is it for today. Now let me see if there is any question. So I saw like, a few folks asked about sales cloud service clouds. Yeah, so those those sessions will be there. But after QABA related sessions. So Avinash is asking in upcoming years. So first of all, we don't know like how many years, right? And I agree with your point like we are relying on flows, but some complex implementation will be implemented through LWC and Apex. So they are not going anywhere. So it is not a waste of time. So you need to understand and Salesforce didn't say like, Salesforce is going to deprecate these features. So they are available, they will be available. And till the time they are available, you need to you need to learn those. So as a consultant, it is your duty as a developer is it is your duty to understand flows like local development, as well as Apex and LWC, right? So it is not a waste of time. It is fruitful. And in an interview, lots of questions comes from Apex and LWC. So Praveen coloring thing, I will be explaining tomorrow, it will be done with the help of CSS. Yes, I will be explaining exercise sheet. So right now, like in today's session, we don't have any exercise, you just need to go through the recording, whatever I demonstrated, you just need to practice that thing. But surely I will be updating the exercise sheet. Okay, guys, thank you so much for joining today's session. And tomorrow we'll be discussing more stuff related to HTML and CSS. Thank you so much for joining today's session. See you tomorrow.