 Hello, everyone. I am Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. So today, as you can see, we are having day 71 of this Salesforce Learning Boot Camp. And today, I'm going to discuss about HTML and CSS that we'll be using for Lightning Web Component. Right? So this week, like HTML and CSS will be completed. And from next week onwards, we'll be discussing about JavaScript. Okay, so I welcome you on this channel. And I hope everybody is doing good. So I hope everybody is ready to understand a few more concepts related to HTML and CSS. And all these topics are very much important for Aura and LWC. So please pay attention on these topics. Okay, so moving forward. If you have joined this bootcamp for the first time, and if you are watching this video and you don't know about me. So this slide is for you. So with the help of this slide, you will be able to know like who is your instructor and what your instructor have done or doing for the community. Right? So all the details are available on this slide. So moving forward. Now I'm going to show you one more slide. So this is also an important slide which shows you all the virtual learning best practices that you need to follow. So not specific to this bootcamp. If you are following any other course or videos. So there also you just need to apply all these best practices so that you can understand things pretty well. So be consistent because consistency is key and do regular practices. Right? If you do regular practice, so you don't know whenever there will be an opportunity and you just need to appear for an interview. So be prepared and do regular practice. So this is my telegram group and more than 2500 folks are connected with this group. And if you have any doubts, so you can discuss with the group and I hope your questions will be resolved. So just join this group and moving forward here you can see today we are going to complete week number 20. And from next week onwards, we'll be starting JavaScript and then we'll be learning about aura and LWC. Okay, so do follow Sanjay Gupta Tech School on YouTube, LinkedIn, Instagram and Telegram and all the important links are available in the description of this video. So you can just find all the links there. So moving forward, if you can see on this slide, it is mentioned like please share a review or feedback about the bootcamp. So I can see lots of folks are sharing their reviews on YouTube, LinkedIn, Telegram. So I feel very happy to become part of this community where I'm sharing my knowledge. And like whatever I'm doing this year, it is totally free of cost and a lot, lot more sessions will be happening. And from tomorrow onwards, like one more bootcamp, I'm going to start that is for logic building. So I will be teaching C and C++ with the help of these two programming languages. Non IT folks will be able to master their logic building or problem solving skills. Okay, so after learning those concepts through C and C++, it will be very easy for you to understand the logic building. If you're implementing any flow, apex trigger or going forward lighting web components. So logic building and problem solving skill is very important and everybody needs to have that in their mind. So moving forward, now let's jump on to the topic. So today's topic, like in continuation, we need to understand few topics related to HTML and few related to CSS. So yesterday I showed you few examples related to CSS like with the help of CSS, how we can modify our HTML design or you can say look and feel. So if you see this example, so here in CSS, we provide some styling with the help of element or tag name. But if you don't want to use that element name and you want to define a CSS with this way. So this is basically known as ID selector. So in the style tag, you can create a block. You can name that block with any name and you need to put hash prior to that. So with the help of hash, if you write any name and you create a CSS, so that will be known as ID selector. So below you can see we have a paragraph in this paragraph. We are using that para one CSS with the help of ID. So this way you can implement your code. So let me just show you how we can do this. And before moving to the code, I just want to show this session tracker. So this is common session tracker for Sanjay Gupta Tech School, all the boot camps. So at the bottom you can see different tabs are available. So all sessions related to Salesforce admin and development are available in this tab. And next step is for C and C++ than other subjects tabs are available. So if you want to learn anything for free, so everything is available in this sheet. Now, if I implement that example in front of you, so what I'm going to do, I'm creating one more file. So I'm creating HTML file and here I will be implementing the code. So I'm going to take code from a file. So I'm just copying it from web to and pasting it here, right? So from here, I'm going to remove these. So yep. So here we have this basic building block. Now what we need to do, we just need to implement this CSS where a text align is center and color is red. So I'm going to implement this for you. So hash para one then curly basis. And then here we need to provide the CSS. Right. So here I just use name as para one. So this name can be anything you can use any name with this hash. So whenever you use hash, so it is basically known as ID selector. So now if I use any paragraph, so with the help of ID, I can provide it. And inside P tag, I can write the code. So I'm using one more P tag and here I'm writing second paragraph. Okay. So whatever CSS I implemented here. Okay. So one more thing I need to use. I just need to use style tag as well. So this CSS I need to put in the style tag. Okay. So this is important inside had you need to create style tag and inside style tag. You just need to provide the CSS. And then with this P, I use this and what we can do with H1 also, we can use it this way. Right. So one one common CSS, you can apply with P element or you can apply with H1 element because this CSS is not specific to any element. It is basically implemented with the help of particular name. Right. So I hope with this way, you are able to understand like how we can implement the CSS. Now, one challenge is ID basically we use for identification purpose. So if you want to provide some identification to particular element, then also we use this ID. So basically if you reuse this name, so it means both are having same ID. So it will create a conflict. Right. So we have a solution for this problem as well. But right now what I'm going to show you this para one CSS we applied on P element H1 element. So it will apply for both. But this is not the right approach. Generally ID selector we use with one element only. If you want to use that CSS with different different elements. So we have class selector for that. We have class selector for that that I will be demonstrating just after this. So I'm going to save this code and it will be web six dot HTML. I'm saving this code. Now I'm going to open the folder here. I'm having web six dot HTML. I'm double clicking. So you can see first paragraph and first heading both are in center and in red color. And second paragraph isn't black and in left hand side because the CSS which we applied that applied on one P element and one H1 element. Okay. So I hope this way you understood how we can create a common CSS and then we can use that common CSS with different elements. Now instead of ID selector if you want to use that common CSS with multiple elements. So in place of ID selector we use class selector and in case of aura and LWC. We will be using lots of predefined classes. So if you want to implement any class. So what you need to do you need to write a dot with the dot. You can use any name for that styling and any style you can define in between the curly braces and then you can see with H1 and P we are using the same class. Right. So you just need to provide the class name and that CSS will be applied for both the element. So this is the basic difference between ID and class selector. So I hope you understood the difference. So we will be preferring class selector over ID because in case of class selector that class name you can use with any number of elements. And in case of ID what happens that ID is basically used for identification purpose also. So if you use that ID with multiple elements so that there can be ambiguity like more than one elements will be having same ID so it will be creating a problem. So whenever you want to define a common CSS so in place of ID selector always use class selector. So now I'm going to modify that code. So here we have Paramount so instead of hash I'm using dot name can be anything this Paramount I can use or if I define any other name so that will also work. And here in place of ID I just need to use class. So in lots of aura and see LWC code like whenever we will be writing HTML so you will be seeing will be using lots of classes there and lots of predefined classes are available where predefined CSS is available. So with the help of that will be will be implementing like with the help of class will be implementing the CSS. Okay. So I hope everybody understood the difference between ID selector and class selector. So before I proceed further if anyone is having any doubt so you can raise your concern so that I can help you out. So please let me know if you have any issue any question so I explained you both the differences are differences of both the selectors. So I'm just waiting for your responses. Okay. So I guess there is no question everything is clear to everybody those who are watching live and if you're watching this as a recording and if you have any questions you can either ask in the comment section or you can just raise your question in the telegram group. Okay. Okay. So I can see Anu is saying completed yesterday's assignment. So that is good. Akshay is saying please repeat again sir. Okay. So as Akshay is saying so Akshay quickly I'm going to cover this so we have two selector one is ID selector where we are using hash and we can use any name inside currently basis we can define CSS then we can use it like this like ID equals to paravan but the problem is this ID is basically known as identification so the CSS we can use with one element only if you use it with multiple elements so there can be chances like this ID will become a problem because of ambiguity. If you're using same CSS name with more than one element so it will be a problem. Okay. So here we're using class selector so in case of class selector you need to use dot and after dot you can use any name and then that class you can use with multiple elements. Okay. So you just need to remember how we use class selector. Okay. Now few topics related to HTML so in HTML we can create lists so in HTML we have three types of lists unordered list ordered list and description list so generally we use two first one and second one ordered and unordered list. Okay. So first let's see how unordered list will be used. So here we have two elements first one is UL UL is for unordered list and LI is for list item. Okay. So here it is also mentioned like UL is unordered list and LI is list item. So if you implement this code in your HTML file so you will be having a list format. Okay. So I'm going to implement it for you. So here after this I'm going to implement unordered list and here I'm going to write list item. So let's say coffee tea milkshake. So this way you can have any number of list items. So I'm just saving this code and now I'm going to refresh the page and this way you can see the unordered list is available. So automatically bullets are available. So these are dark circles. Right. So these bullets will be available automatically whenever you will be executing the code. Now you might be thinking can we have different styles? Right. Can we have different styles? Okay. So people are saying voice is low. So just want to check is my voice low for everyone? Can everybody confirm like my voice is audible or you are facing some issues? Okay. So few are saying it is good. Few are saying low. Try to speak louder. Okay. And maybe it is due to some internet issues at your end because few people are able to listen. So I think voice is clear. So if we move forward. So here you can see we have different styles as well. So if you want to apply some style like whatever dark circle we saw if you want to change it. So here you can see we have style equals to list style type colon disk. Then we have circle. So disk is by default. So we'll be applying circle. So what I will do I will apply a style here. So an ordered list then style equals to list style type circle. So I'm just saving this code and I'm going to refresh the page. So here you can see instead of filled circle now empty circles are available. Okay. So this way you can apply styles. So I hope you understood how I implemented this. So we have more examples. So we have square. We have none. So these also you can apply. So if we write square and if I refresh the page. So here you can see squares are available. So this way whatever type of option you want you can use it. Okay. So moving forward next we have ordered list. So as name suggests it is ordered list. So there will be some numbering. So here we have elements O L O L stands for ordered list. And here we have some items like list item. Okay. So instead of unordered list we'll be using ordered list. So what I'm going to do I'm going to copy it and I'm pasting it below. And from here I am removing the style and changing it to ordered list. And here also I am changing it to order list. So now in my code I have both I have unordered list as well as I have ordered list. Okay. So now I'm going to save it and if I refresh the page. So you will see both. So above you can see we have unordered list where symbols are available. And next we have ordered list where one two three are available. Okay. So this way if you want to have different type. So here we just have type type equals to one. So one two three will be there type equals to a so ABC will be there. So these you can try whenever you will be practicing. Then if you want to start with small a so you can define type as small a then if you want to start with Roman uppercase I like one two three four Roman. So you can start it with that as well. And we have small Roman like lowercase Roman as well. So whatever you want to use it depends on your requirement. Okay. So we have different styles for this ordered list. Okay. So I hope these are straightforward and you can implement and practice. Now third type of list is description list. So this description list is very simple. Here we have DL description list. Then we have DT description term and then we have DD description data. So description term and description data like it will be available in form of nested. Coffee will be displayed and then as a sub option black hot coffee will sorry black hot drink will be displayed. Then second term is milk and its data is white cold drink. Right. So this way if you want to show sub options so you can use this description list. Okay. So this way you can implement description list. These we won't be implementing much in Aura and LWC. So if you if you skip this so that is also okay. No problem. Now this is important like how we can implement nested HTML list. Okay. So nested HTML list is having UL under UL we have LI then we have one more LI then for this LI list item T we have one unordered list. Right. And in this unordered list we have two more list items. Okay. So I think I can implement this for you so that you can understand it. So under T I am going to implement this. So here we have data this way. So here I am going to implement unordered list. So I'm having list item black T then I'm pasting green T. Okay. So I just modified this. Now this is kind of nested list. Now if I refresh it so you can see this way you will be having the data. Okay. So in list like if you if you read the note. So note says list items can contain new list and other HTML elements like images and links as well. So yesterday I demoed you like in table under TD you can use images and links. So similarly what you can do here under list item you can use some hyperlinks or images. So that I'm going to show you with the help of next example. So if you focus on this example. So you will be able to understand like how we can use HTML links in list items. So just go through with this example. So at left hand side all the CSS is available and at right hand side HTML code is available. Okay. So just just go through the code then I will be implementing this code for you so that you can understand what is happening here. So under style we have an order list padding is zero. Then inside an order list we have ally. So if you see on right hand side inside an order list we have one more element that is li and inside li we have a element. So for ul li display will be in line display in line means list items won't be showing in separate lines they will show in same line in a single line all the list items will be displayed. This is the meaning of ul li right so display in line means all the list items will be available in the same line then we have ul li a so this CSS will be applied on a element. So a element background color will be black foreground color will be white padding will be 10 px 20 px so 10 px from like top and bottom and 20 px from left and right then text decoration none. So generally if we create hyperlinks so there we have an underline so if you want to remove that underline so you need to use text decoration none and this is border radius so we have four borders of particular block so like it is having four borders so two are having four pixel and two are having zero so with the help of result you will be able to understand like how radius will be available and on a element if you hover hover means if you take your mouse on that link so background color will be changed to orange so initially background color will be black but if you hover on that link so it will be changed to orange right and at right hand side you can see we have h2 heading then we have unordered list inside that we have list item and list item is having a element with the href and all text then one more li with one a element then one more li with another a element then we have one more li with one more a element so this way four list items are available under this unordered list okay so this is about the code that I explained to you and I hope you are able to relate what is happening here now I am going to implement this code for you so that you can understand what is actually happening in this code okay so what I am going to do I am going to copy all this code because if I will be typing so it will take lots of time so I am just creating a new file and here I just pasted the CSS part now I am going to copy the HTML part and I am pasting it okay so let's understand this now so this is unordered list CSS padding will be zero one more unordered list so li like output will be in same line then this CSS is for a element that is used inside li so make sure like if we write CSS like this so it means it will be for inner element that is used inside ul li right if you have used any a element outside so this CSS won't be applied on that element so we have background color foreground color padding text decoration and border radius then we have hover if you hover on the link so it will be converted into orange color then we have this CSS sorry we have this HTML so here you can see under this order list we have list item one two three four each list item is having a element and this way data is available so now I am going to save it so it will be web seven dot HTML right so file is saved now I am going to open it so you can see this way output is available so horizontal list and you can see all the list items are available in same line because of display in line why it is happening because here we are using display in line okay now if you see the output so background color is black foreground color is white and if I hover on any link so it is converting into orange color right and we have padding as well so you can see in between we have a distance and if you see it carefully so top border is in round form and bottom is sharp why it is because here we are using a CSS border radius so 4px 4px is for top left and top right so corners are getting rounded off and 00 means bottom left and bottom right so they are sharp so if you change these 0s to 4x or 5px so it will be changed automatically yes Anush we can see this code with the help of inspect so for that I just need to open this code in chrome so I am just closing it and I am going to open it with the help of chrome so I am opening it in chrome and here you can see the result is available now in chrome if you right click so here we have this option inspect if you click on this option so your code will be inspected and at right hand side you can see these are available so all the code is available here right so what is the benefit of inspecting if you want to modify something here like if you want to do some changes in the CSS and if you want to check it like here we have 0 and I am going to change it to 4px right if I press enter so you will see the changes will be applied so here you can see for HTML 3 corners are rounded for CSS JavaScript and PHP as well one is sharp so this way if you want to do some temporary changes in the HTML so through this inspect you can do that thing right so I hope this is very important and you understood like you just need to right click click on inspect and you can see the code here now one more thing if you click on this icon and if you go anywhere so you will be seeing the CSS right and things will be selected automatically at right hand side you can see on right hand side changes are happening right so you can just click and select something so this way you will be able to identify like which element is available with the help of which code okay so this we'll see when we'll be implementing or in LWC right so this is important and here you can see at the bottom this padding border margin is also available which I explained you yesterday so this is basically margin then padding so it is not shown so margin is shown here okay so this way you can inspect your code and you can do necessary changes now moving forward so Ashutosh if you change something in the inspect it won't be reflecting in your actual file so in actual file you need to go and you need to make the changes and then you need to save it so those inspect changes will be for timing only okay so Sai Venkatesh this thing I demoed with the help of label I didn't explain custom metadata so maybe you can use label but if you want to use custom metadata so custom metadata basically creates an object where you can create certain fields and those things you can query in the code okay moving forward next we have HTML div so it is also important if in your whole document whole HTML page if you want to create separate blocks so those are created with the help of div and div is basically division here div is basically division so the HTML div element is a block level element that can be used as a container for other HTML elements the div element has no special meaning it has no required attributes but styles are common because it is a block level element the browser will display line breaks before and after it and when used together with CSS the div element can be used to style blocks of content so here you can see we have a code where div is implemented okay and okay I am moving back to the slide so I think you are not able to see few lines so now I think you are able to see all the statements properly so just go through again so last statement says when used together with CSS the div element can be used to style blocks of content right so here we have an example so we have a div where we have inline styling applied background color foreground color padding then we have h2np element so this is a div one div okay and here style will apply on whole div so h2np also use same style right so what I am going to do I am going to copy this code for you and I am going to implement it so here under this I am going to paste it okay so this div is created and inside div you can see we have p tag inside div we have h2np tag and lots of content is available I am just saving this code and if I refresh okay let me open it again so here you can see this is the result of div background color is black foreground color is white so that's why it is showing it like this and if I go to the code and if I change the color so background color I am changing to red if I go here and refresh so it will be changed okay now if I want to use one more div so what I can do I am just copying it and I am pasting it so I have two div so here I am using color and code I am having same so here I am using one more like second div okay so this way like you can have different codes in different divs and different styles you can apply for different div so if I refresh so here you can see we have one more div and this div is having color as green background color so this way if you want to have different blocks in your html so you can implement that with the help of div okay so I hope you are able to understand this now I am moving further so we have one more example that is span so it is also used sometime so basically it is also simple so in a text in a complete text if you want to change styling of particular word so that you can do with span so span is basically inline element and at the bottom you can see we have an example and with the help of that example I hope you are able to understand how we are going to use it okay so what I am going to do here after this div I am going to implement it so you need to write it like this my red heading and now I need to apply okay no here I need to write h1 and in between I will be writing the span so this text red I just want to show it in red color so here I am writing style equals to color colon red so this way what will happen only this red text will be in red color my heading will be in black so if I go here and refresh so here you can see this middle is in red color and rest are in black so this way as per your requirement like you can use span tag as well okay so I hope you are able to understand the difference between div and span so this is it for today so I hope you are able to understand whatever I explain and if you have any doubt so you can ask and I will try to answer so Marais way you mentioned cheapest so I like I just want to know you are saying it in positive sense or negative sense I am not sure but I am trying my best to give the content to the audience to whatever we will be using for like Aura and LWC so all the basics related to HTML and CSS we are understanding so if it is not up to the mark so I am sorry for that but I am trying my heart to give you enough knowledge because HTML, CSS the basic is same right so I am explaining it in simple way so that you can understand and everything whatever we have discussed this week we will be using in Aura and LWC so Jana whenever you need to apply some CSS on whole block of code so then you can use div like here in this code what happened for H2 and P we need to apply same CSS for these three elements H2, P and H1 I need to apply same CSS so I created a div and basis on that div that CSS will be applied right so okay so I think Marais also liked so thank you so I hope yeah Chandan these are enough and while Aura and LWC if we need more elements so we will be discussing there I just wanted to share basics because in this bootcamp there are lots of known IT folks who have never worked with HTML and CSS so that's why I kept these sessions as a prerequisite so that whenever they will be understanding Aura and LWC so they don't think we don't know about HTML and CSS so with this basics everybody is on same page right and next week we will be discussing about JavaScript so all the JavaScript basics I will be explaining you so that you will be understanding that as well then we will be focusing on Aura and LWC yes Akula Sandeep we can change anything so if you want to change the border radius so you can apply CSS on div yeah so LeoTech we will be creating that with the help of Aura and LWC so Praveen for that we have marquee tag like Raj Shekhar already mentioned we have a marquee tag through that we can move the words from left to right and right to left so if I write let's say I am writing Sanjay Rukta Tech School I am saving this code and if I refresh it is not coming so I don't know it is working yeah you can see this way text is moving from right to left so somebody is asking about Java bootcamp so right now I have not planned but surely I will do Java bootcamp as well so my priority is Salesforce right now along with I am focusing on C and C++ after that I can start Java bootcamp as well so lots of bootcamp I have planned so in Salesforce like right now we are having lightning web component bootcamp after that we will be having deployment related session so if you see this session tracker so HTML CSS we covered then we have JavaScript then we will be doing Aura component development then lightning web component then we will be having deployment process and GitHub then QA related session then you will be having BA related session then few cloud specific sessions will be there and I will be having sessions on Omni Studio as well that is a powerful tool for industry clouds and apart from that next month Sumit who took sessions on cyber security so he will be taking sessions on DevOps and one more friend of mine will be taking sessions on data science and machine learning AI things so I am just creating team of people so that they can come and deliver sessions so I will try to have someone who will be delivering sessions on Java as well right so like in one year or so like this year or maybe till next year everything that is related to IT if someone wants to make their career in IT so all those tools will be tools, techniques, languages will be taught freely on this channel so you can see after deployment I will be having QA sessions then I will be having BA business analyst related sessions right so I will be updating this sheet so keep an eye on this sheet and link of this sheet is available in the description of the video and if you go here so you can see from tomorrow like C and C plus plus bootcamp will be starting so tomorrow I will be giving the brief overview like what is the bootcamp and everything and from next week Monday proper sessions will be starting so this will give you enough insight like how we can build the logic basics of coding everything I will be covering and this coding bootcamp like C and C plus plus it will be helpful for all the BTEC students, freshers non IT folks those who are having career gap so if you want to stand on your logic building ability so everybody will be benefited with this okay so I hope you are liking whatever I am doing for the community so it takes lots of effort so do support me because it takes additional hours so along with job I am doing this so in morning I do my regular job I am also doing a job in a software company and when I come back at 5pm so after that from 5pm to 10 or 11pm I am dedicating all my time for these bootcamps which are part of Sanjay Gupta Tech School so this is my passion and now I have like I am doing this everything for the community so that needy people can understand the coding and they can try at least to understand how they can implement the coding and if they are able to understand the coding so they will be giving some interviews and like if everything goes good so lots of folks will be getting job in IT sector right so this is my initiative and I am doing lots of effort so please support me and share this initiative with everybody whatever I am doing related to sales force ecosystem and other languages okay so this is it from my side yeah Shriveli CPQ will be there so it will take some time so step by step everything will be there on the channel yes yogis definitely this is great opportunity and on my youtube channel lots of videos are already available related to C and C++ if I show you my youtube channel if I show you my youtube channel so on home screen only you will see lots of videos like here you can see I have a C programming course so this is a playlist for C interview question and answers looping related programs 1D array, 2D array, strings if we go forward then we have pointers, functions, file handling dynamic memory locations, structures, graphics so lots of videos like more than 500 videos I already created on C and C++ those are available on my channel and like all BTEC student whoever doing BTEC in India so they are watching these videos and they are learning programming so I will be using these videos for reference purpose but everything will be I will be explaining through my live sessions as well yes Shian like right now there is less information available regarding Einstein GPT so once lots of information are available on platform so first I need to learn that then I think I will be having content on that as well so whatever is written here so I am trying to do that so C and C++ I am starting soon sales force is already on going cyber security one part is done and next part will be starting soon DevOps I will be starting from next month and I am searching for someone who can teach Java and then data science and web and app development so everything will be there by the end of this year like all bootcamps will be started and you will be having enough knowledge okay so just one request do share the word and write some reviews, feedback okay so thank you so much for appreciating my efforts Jyoti, Gurija and I will be doing this for community now this is part of my life so YouTube and Udemy just changed my life and I got recognized throughout the world people from all over the globe watching the content so this motivates me so thank you for supporting me so this is it for today so we will be connecting next week and tomorrow we will be having an overview session on C and C++ bootcamps so if you are interested so you can join for C and C++ bootcamp tomorrow session will be at 7.30pm but regular timing will be little late so what I am planning sales force timing will be 8pm sales force timing will be 8pm for C and C++ I am thinking to have it on 9.30pm IST so this I did decided as of now right because prior to 8pm I need some time to prepare some content and slides all so after my job like 5 to 8, 3 hours I need for that purpose and after that like 8 to 9 I will be available for sales force and C and C++ I will be delivering from 9.30pm I need half an hour break as well so 9.30pm to 10.30pm we will be having C and C++ and if I find someone who can deliver the session so maybe 6.30pm to 7.30pm I will be having one more bootcamp but that will be from next month okay thank you everybody for supporting me so keep following the channel and spread the word with the community thank you so much see you tomorrow with the new bootcamp launch thank you bye