TOP 50 HTML CSS Bootstrap Interview Questions and Answers

Hello friends many people think HTML and CSS are very easy so let's not prepare them and that's my point what will happen if you are not able to answer a very simple HTML question in interview like uh I was once asked in an interview what are semantic elements in HTML and I said I am a full stack developer not an HTML developer so you can understand how was the my first impression right in interview so why to take that risk let's quickly revise top interview questions in HTML CSS and bootstrap now let me show you the structure of this course here first seven topics are from HTML starting from the basics then there are two topics from CSS and last topic is bootstrap total 10 topics questions covered in a step by step manner in learning sequence okay this this course is primarily for experienced students but even if you are beginner you can easily understand all the questions now let me just quickly show you a sample question mostly I will explain with the help of the code for practicality then diagrams for better understanding and finally very minimum and to the point Theory so that later you can revise very quickly without even listening to the full explanations before starting those who don't know I started maintaining a board in my home wall here I'm putting the comments of subscriber who my whom my videos helped in getting the offer and cracking the interview so whenever you get the job or offer just post a comment okay right now the comment count is around 50 and my target is to correct 1,000 comments you and I can reach our goals by having only one thing that is by never give up at attitude what is HTML what are the differences between HTML and HTML 5 and what are the advantages of HTML 5 first let's explore HTML HTML stands for hyper text markup language what is the meaning of each letter here let me first show you a very basic HTML document first here in HTML document hyper stands for the anchor or hyperlink element in HTML text stands for the text we provide in our HTML documents using H1 H2 headings paragraphs Etc now you might ask we also have so many other elements in HTML like the nav the table what about them actually when HTML was introduced in 1990s hyperlink and text were the only main elements in HTML therefore in the name of HTML only hyper links and texts are mentioned other elements are introduced later now you will ask what is the meaning of markup language markup language means a language that defines the structure of a document using elements like headings paragraphs link lists Etc remember just the structure of the document nothing else like a Word document HTML is also more like a document only therefore HTML is just a markup language it's not a programming language a programming language is a language where we Define variables and functions to perform some logic or operation okay uh for example JavaScript Java C are programming languages but HTML is just a markup language to structure the web page okay so finally what is HTML HTML which stands for hypertext Mark apply language is the standard markup language used to create web pages other than HTML XML is also a markup language which which is also used to just structure the document now here are the two more points about HTML that I already explained actually but I written it here in the document so that it can be used for quick revision later now let's explore what is the difference between HTML and HTML 5 by compar ing the codes first of all HTML 5 is HTML only okay they are same actually but old HTML was different here is the old HTML code which was released up to HTML 4 and here is the HTML 5 code for the same version or same old HTML okay and you can see the differences between them you can see how the doc type written you know our old HTML is very long with version number 4.01 and in HTML 5 doc type is just HTML no five nothing is required here it is short and simple also in the new HTML we have this header section and many more elements which were not there in Old HTML these newly introduced an elements in HTML 5 makes a HTML document more structured all right the whole point is HTML 5 is the fifth and the latest version of HTML going forward whenever I say HTML that means I'm talking about HTML 5 only okay finally let's quickly see the five advantages of HTML 5 over the old HTML 1 by one first is HTML 5 introduced new semantic elements like header nav article section and many more we will discuss these elements in detail in upcoming questions second HTML 5 introduced forms with input input types okay for example type equals to date type email type Etc third HTML 5 supports audio and video by using audio and video elements fourth HTML 5 provides mobile compatible code so just not just laptop compatible but mobile compatible also the last Advantage is writing code in HTML 5 is simpler than writing code in the old HTML uh we will cover separate questions on all of these advantages in upcoming questions but now you are like more confident about what is HTML what is the difference between HTML and HTML 5 and why what are the advantages of HTML 5 right and confidence is only what matters the most in the interviews what is the difference between HTML and xhtml let's understand by comparing their codes first this is the code of HTML or we can say HTML 5 and here is the code of xhtml first of all xhtml is not a version of HTML it's all together a different and separate markup language for creating web pages okay actually xsml was created before HTML 5 to cover some gaps in Old HTML basically xhtml is a combination of XML and HTML at the top you can see XML version 1.0 then the dock type and HTML tag is so long here which is not looking good right so basically this combination of HTML and XML has been done to follow some rules from XML in HTML okay but then after some time HTML 5 was introduced and launched which is shorter simpler and more powerful than this xhtml therefore xhtml is not so much in a use now that definition is xhtml which stands for extensible hyper text markup language is a markup language that follow the rules of XML remember to define the structure of web pages that is the idea now let's see the three main differences between HTML and H uh HTML first HTML and or HTML 5 has more lenient syntax rule for example this image tag does not have a closing tag and that's okay it is not recommended but it will work in HTML whereas xhtml follow a strict syntax rules like XML all tags must be properly nested and closed like this image tag second difference is HTML is not case sensitive for example Capital tags like this will work but again not recommended whereas H xhtml is case sens sensitive and only small letter TXS will work the third and last difference is that HTML is widely supported by all the web browsers and web platforms whereas xhtml has some limited support by browsers okay great now you know by H the differences between xhtml and HTML right what is the purpose of Doc type in HTML here you can see the code for very short and simple h HML 5 code and at the top of it is a doc type HTML statement what does Doc type means here doc type which stands for document type declaration it specifies the version of HTML for example uh just this doc type HTML means the version is HTML 5 okay we need not to write here five okay explicitly why we need it because doc type tells the browsers which version of HTML it is and how to inter the code so if browser know the version of HTML then it will behave accordingly to the rules as per the rules of HTML 5 only okay we also have some other document types also like this see here first stock typel line is HTML 4.01 version which is basically the old HTML then the second kind is xhtml 1.0 so there are other versions also but we are not interested in them anymore so because now we have the last one uh and the most preferred one which is HTML 5 in 99% cases uh you will see only this document type uh in the HTML web page okay clear so that was the answer and the requirement of the D doc type in our HTML hi here is a quick notification if you are the kind of person who does not want to miss any anything during their interviews then in the link in the description you will have one full front-end interview course first 100 HTML CSS bootstrap inter questions with additional Advanced topics then 200 basic plus Advanced JavaScript questions even if you are new to JavaScript you can still understand all the concepts of JavaScript in question answer format also the link to this PowerPoint and PDF interview book is present in the description for revision many students were able to TR the interviews by using my courses uh if you don't want no problem let's continue again with our next question now here is a scenario based very short question what will happen if you remove doc type HTML from your HTML 5 in that case browsers like Chrome or Edge can still render the page but but they will not able to validate the version of HTML therefore it may lead to some compatibility ISS issues with the SEO or debugging at later point of time okay and the same answer I have also written down here so that it can be used for quick revision later what is the difference between head and body in HTML where to place JavaScript link reference again here is the code for a simple HTML and here we have two things one is head and other is body what is the difference the answer is head element is where you place all the meta information meta information means information about your HTML document for example if you have a book then title of the book author of the book and index of the book this is all the information about the book right not the actual book content so that is meta information similarly in the head element of HTML title represent the title of web page and you can also place here like the style sheets the Javascript file references or css references so some meta elements like keywords description C set I will explain them in another question so basically the head element is all about the meta information about your HTML that's it so similarly like a book has all its actual content inside it in HTML also the body element is where you place the actual content of your HTML web page for example div tags H1 paragraph images hyperlinks Etc all these are elements are responsible for containing the actual content of your HTML web page right so that was the answer of the first part second was where to place the JavaScript link reference it depends when the websites loads then first the head will load and then the body will load therefore if you are manipulating HTML elements in your JavaScript functions okay then place the JavaScript Link at the end of the body section because until then all the elements will be loaded else if you are not manipulating the HTML elements in your JavaScript function then just place it inside the head tag uh same will be has been written here for later revision uh later reference and quick revision what is title tag in HTML what are the four advantages of it here is the HTML and the title tag inside it definition is very simple the title tag in HTML is used to define the title of the web page for example this is the HTML code and the web page of it looks something like this in the window title you will find the exact same title that you have mentioned in your HTML document in other words you can also say that the title is like the name name of your of your web page now the question is what are the advantages four advantages are there first is title is used for window titles okay title element text is displayed in the title window or tab of the browser second Advantage is SEO search engines like Google use the title tag as the main heading for the search results okay so when you type something in Google search box and press search then first Google will find and match your input text with all the titles of the website web pages available available with Google and then the result list will be displayed in front of you there are other factors for SEO also but title match with user input search uh text is the main one third Advantage is bookmark favorite name title tag is used used as the default name for the bookmarks okay and the last Advantage is social media sharing the title tag is often used as the default title whenever you are sharing any post with anyone great that's all about the information about the title tag what are meta taxs what are the five types of metax good question here you can see the code of a simple metatag C set definition metatags in HTML are elements used to provide meta data or additional information about a web page five types of metatags we can have like this let's quickly understand the purpose of all of these here you can see all the meta elements and their attributes the first tag is C set which is important for uh character encoding basically what it does this specify character character encoding means which helps browser to interpret the different characters in the document uh the this this C set utf8 attribute what is uh ensure is that characters from different languages will be displayed correctly for your website in the browser that is the role of this C are different languages it can handle okay now because many because many websites have different have support to multiple languages right so that's why it's so important second metatag viewport is important for uh responsive design is very crucial for like mobile friendly responsive web designs for various screen size right if you remove this tag then your website can give problems in different mobile screens also I later covers the separate question for all the attributes of the meta viewport element also third meta tag is description which is important for SEO this provides a description of the content of the page it is something little bit more than the title so search engines may use this for the search result okay now fourth is the keywords it is important for the SEO again but this meta tag nowadays is less importance means I think now we don't need it but yes I keep it here to just for the information it's a kind of meta tag then the last meta tag is author info again it's a very optional just to specify the author of the document again this keywords and author are optional but the first two the description and the viewport and the C set those are very important okay all right that's the brief something about the metax great and congrats on finishing the last chapter keep going and never give up on your goals until now you already knew that HTML was like a document like a Word document and like a document it has elements okay like word have this words statements paragraphs similarly HTML also have many elements and here are the seven questions about the most important and elements in HTML what are HTML elements span paragraph anchor break maybe you already familiar with some of them but remember a onetime revision is very important to gain more confidence therefore we will go through them at a very fast pace to revise them quickly so let's start with the first question what are HTML elements what is the difference between an element and a tag here is a simple HTML a simple head element inside that a title element and a body element and inside that we have many elements now the question is whether these are elements or tags suppose here is is a paragraph here P inside this angular bracket is the beginning is the opening tag okay and/ P at the end is the closing tag the content between these two tag is called the content or text now as a whole from start to finish this is what HTML element okay so tags are just the part of the element but yes sometimes we use the name tags and elements their names interchangeably okay but now you know the reality now here is the first conclusion about the elements HTML elements are the building block of web pages for example in this HTML document it consists of elements only right the HTML is root element this head element which contains more element title then there is a body which contains H1 all H1 list paragraph all these are just elements so an HTML document is nothing but a a combination of various elements only the second point is that an elements consists of a St tag content and end tag explained the last point is a tag is the specific part of the element that denotes the beginning or end of that element therefore tag in reality is different from element all right now here is the list of the top 10 most used elements in HTML uh in upcoming questions we will cover the questions on these elements are the most important out of them okay but yes you can now pause the video for 2 three seconds and just go through them uh create that's all about the basic of HTML elements and TXS what are the roles and uses of the div element in HTML this is one of the most important element in HTML for example if you see this HTML here we have two separate and independent H1 and paragraph elements now if you want that both of these elements share a common background color like light blue like this this is the output then what you will do which element you will use around these two elements answer you already know we will use the div as a container outside these two elements so then we can put the style we can style the container this div as per our requirement okay so the definition is that div uh which is stand for division element in HTML is a container that is used to group and structure the content on a web page so basically div is a general purpose element it is not a semantic element which I will explain later but div is for general purpose like paragraph is specifically for paragraphs right H1 is for headers but div is a general purpose okay so you can use it for structuring only so here are the top three uses of the a div first div is used for grouping and structuring the content it allows you to group related elements together like here in the example we grouped this H1 and P elements under one div container right second is div is can be used for styling and layout again apply common Styles if you want to apply to multiple elements then use the div the third is div element is used for scripting for example uh other scripting like can like if you can like JavaScript can access the div Elements by their ID or something to manipulate their content on be Behavior so it is used for scripting also div is important in that sense also great I think now you know what is div which might be already know but why div is so important that you I think know now better what is the difference between div and span element these are two very similar elements in HTML let's see the difference suppose this is your HTML here you can see the div element which is used as the container of H1 and P elements and we already know div is used to group related elements together to provide them a better structure but if you see here we are using the span also the span element in HTML is an inline container so what one is divis container another is inline container which is used to apply Styles or scripting to a specific specific section of text or content uh in short you can say that div is a block level element and span is an inline element and yes I will share the differences between block and inline elements in upcoming questions but and uh but yes for now that's it and here are the points which I just just explained for the later reference hey guys just a reminder my videos help many candidates in getting jobs but sometimes they forget to share their success with me just like And subscribe and post a comment whenever whenever you get the job or or the offer that is my motivation okay what is the role of PBR HR em image input and button elements all right after div and span there are the these are the top eight basic elements used in HTML maybe you already know most of them but let's quickly revise them first one is paragraph Elements which defines the paragraph of text like this like we have paragraph in English the same way we can have paragraphs for single line or multi-line text in HTML the second element is Anchor element which creates a hyperlink like this the href attribute specifies the URL where it will be redirected and where if you click this link and the element content is the display text of of this hyperlink in this case display text is link the third element is BR which inserts a line break so whenever you need a line break in paragraph like this or between elements or anywhere else use the BR element the fourth element is HR which creates a horizontal line break like this same as BR but in this case the horizontal line will be visible and displayed it is mostly used as a divider between two sections in HTML and here are the details of these elements if you want to revise them later from the book let's move to the next element The Fifth Element is Em which stands for emphasize it emphasize the text in italics like this okay next is the image tag that embeds the image SRC or attribute again you know specify the image path and ALT attributes alter Al native text in upcoming question I will explain the need of the alternative text now because I have not added any source file here for abc.jpg therefore this is not this is the sign of the empty image okay the next element is an input element like this this is the simplest type of input element inside which user can write something but yes there are other input elements like password input checkbox input uh radio button input so that again I will explain in the upcoming questions then the last common element is a button element this is a clickable button displayed like this both these input and buttons elements are mostly used inside forms HTML forms only and here is the list and details of all these elements for quick revision before the interviews all right I think now you have a very good idea of all the basic basic element HTML elements right what is the role of header main section footer and address elements in HTML on every website homepage there are five common things that are present and for those things HTML 5 has introduced these five elements now here is the code for all these elements together and you can understand the role of these elements even by looking at their names right so that's why they are called also the semantic Elements which again I will explain in upcoming question but before stml 5 we used the div element for this purpose but uh after HTML 5 introduced these elements are more accurate and more meaningful elements in HTML okay for example every website homepage must have some header for the title or name of the website right for example an e-commerce website name then the main content under which the different sections will be there so for example on e-commerce website different categories of products are placed in different sections so that's why section are very important finally at the bottom of the page you will find the contact information address support fuse uh that is under the footer element of the page right so that is the basic structure of almost every website and the output in the browser will be something like this therefore the role of the these elements is header main section footer are semantic elements used to define the layout and structure of a web page in a meaningful and organized way and these elements are very important from SEO point of view also okay so that is the short story about these elements why these are so important and here is the brief description of all of these elements very easy to understand same what I I already explained just now that's it what is the role of heading TX in HTML how does it impact SEO let's first understand why we need headings for example this is the text but is this text readable or well organized as a user can you understand no right now I will use the header text like this to organize the same text using H1 S2 S3 and S up to S6 TXS and the output will be something like this in the browser you can see now that it is well organized and you can understand the hierarchy hierarchy right in e-commerce applications like Amazon we also have a similar kind of categorizations under electronics we have the subheading mobile then we have the heading Mo Mobile Samsung Mobile and so on So Below every header also you you can add some paragraph also paragraph content like the information the details about the product so that's the importance of the heading taxs finally uh what are heading tags heading tags in HTML are used to define the headings of sections within a page web page now let's see the top three uses of heading taxs first is obviously organization and readability heading tax organize the content in a better way making it easier for users to understand the organization of the page uh then the second use is SEO search engine optimization search engines like Google use headings to understand the importance of the content okay H1 will be given more importance as compared to H2 okay so for example two websites have same Electronics tag in their website but in one website it is with the H1 tag electronics and the other we website has it in electronic sorry text in the div or H2 H2 or H3 text then if user will search Electronics on Google then H1 tag website will rank high as comparison to the second website okay H1 is a high priority in SEO again there are also other important factors for SEO but this is one of them also do not over write H1 tax otherwise there will be negative impact on SEO okay third and last use of heading is styling and layout for example the same CSS can be applied to all H1 tags to show their importance and the uniformity and the resemblance like they are the top headings H1 uh for example all H1 tag on your web page can be of the red color okay so that will what it will do it will make your page more consistent right great that's all about the information about the headings what is the difference between section and article elements these are two very similar elements but they have one big difference okay here is the code of section and maybe you already know this section like definition the section element is a generic container used to group related contents together okay for example in e-commerce website see how we have one section for mobile products another for books right that is how section uh can work similarly we can have many more sections for many products on web page right but if you now see the code of article then it looks something different it look like an offer or Banner of sale right for example here in the Amazon offer Banner at the top of the web page above the product section so this is an exam article this is an article which is unique and which is different from sections so that's an example the definition is the article element represent a self-contained or independent independent piece of content with a title and content uh for example other than this like a blog post a news article a forum post a comment an offer those are the examples of article which purpose is slightly different not slightly basically significantly different from the sections okay that's the answer congrats on finishing the last ch chapter where there is a will there is a way now here we have some more questions about HTML elements here are the questions and if you can closely observe these terms root parent child empty semantic block inline elements then these are not direct elements okay like div span H1 H2 but these are categories in which we divide our HTML elements for example Electronics is a category but mobile is the actual product right categories are very important in order to understand the behavior of elements okay same behavior elements are kept in one category okay so let's start with the first question what are root parent child and nested elements here you can see an HTML document with all type of elements first of all root parent child and nested are the categories of elements and HTML head title body and div are the actual elements for example electronic is the product category but mobile is the actual product right now let me represent the same code here in child and parent format the first one is the root element the root element is the highest level element in any HTML document okay in HTML 5 the root element is HTML second a parent element is is an element that contains other child elements for example head is a parent element for meta title length and script and body is the parent element for the div element the third is the child and nested element a child or nested is an element that is contained within or inside a parent element okay so for example H1 and UL are the child elements of the development also child and EST are same thing okay one more important thing one element can be a parent and a child at the same time for example div is the child element of the body element right but it is also the parent for the H1 and UL elements right so that's it and whatever I have explained that has been written in the simplest manner in this uh next slide if someone wants to reverse the book later what are empty elements let's see the code first here you can see the title element of HTML we have the opening tag right and then we have the content and then complete closing tag with this slash and element name title right so but now if you see the link and meta elements inside the head element they do not have content between starting and closing tags like in title right just a slash and element is closed these types of elements are called what empty elements other than link and meta like elements in body like image input break these elements are also empty elements the conclusion is an empty element is an HTML in an element that does not need content between opening and closing tags okay and it does not have separate closing tag for example title element need a Content but image does not second point is empty elements are also called self closing or white elements because they do not have as I said separate closing Tex and last point is here are some more examples of empty elements in HTML 5 all these are empty elements and they do not need separate closing TXS or content okay that's the answer of this question what are semantic elements is div a semantic element semantic elements are elements by looking at those names at their names only you can easily tell what kind of information or content in is present inside them for example here are the top five semantic elements we already discussed these elements in the previous questions right and here is the code for them here you can easily assume header will have the website header main will have the main section footer will have the address and other things right so the definition of semantic element is semantic elements in HTML are elements that provide meaning to the content they contain for example if you are using header semantic element then you know it will contain the Header information content is very much related to the element name right so that's why they are semantic elements but can you tell me what kind of information uh this div element can have no you can't tell right therefore div is not a semantic element because div is a general purpose a structural element it provides the structure it's not a semantic any it doesn't provide any meaning to the content okay great now let me show you some more semantic elements and here are the top 10 semantic elements with their simple definition uh not all of them are very important so that's why I'm not covering them in detail but yes you can just pause the video and and go through them at least once so that you can have a slight idea of them okay so that's the answer to to this question now here is a short and tricky question can HTML tax be written in uppercase like this is the code you can see all the tags are here uppercase is it possible or is it good the answer is yes it is possible but it is not a good practice Okay so so here is the answer yes HTML TXS are not case sensitive therefore can be written in upper case lower case or the combination of both but but it is not recommended as per the standards so always use lowercase tax only okay otherwise what will happen after you leave the project other de developers will have a hard time to understand your code okay so that's the Gap so always use lower case what are the three differences between Block Level and inline elements now there is another category of HTML elements and maybe you already know this here you can see some Block Level elements what are Block Level elements Block Level create block of content blocks okay that's why their name is Block Level so for example div paragraph H1 UL lii table so are all Block Level elements okay then what are inine in in line elements then here you can see some inline elements strong or anchor these are what inline elements inline elements uh length depends on their content length only that is the definition so for example this span anchor strong em emphasis image are all inline elements if you can see mostly inline elements are like embedded inside other elements right so that is the uh other Difference by default Block Level elements start on a new line whereas inline elements do not start on a new new line third difference is you can set both width and height of a block level element but but but you cannot set width and height for the inline elements okay in the in their style so because their height and width is dependent on the content the length of the content okay so you cannot set so that that is the answer of this question list all the Block Level and inline elements in stml so here is the top 10 Block Level elements in HTML all these header tags header element Dev footer and are all block elements okay I explained the purpose of most of them in other questions okay but uh here is the one line simplest summary I have written here maybe uh you can refer it later and then here are 10 more so article aside block on uh the point why I'm sharing is just to give you an idea of these Block Level elements you need not to remember all these elements and I'm also not going to you know read all the one line statements because you can do it by yourself okay but you should be aware of these some of these elements okay so that is all about the list of Block Level elements we have 10 and we have 10 more than similar to the list of block elements here is the list of 20 inline elements in HTML and the simplest on line summary of each element which is very easy to understand and even remember also you can go through it with your own speed okay so most of them especially most import important ones I already covered in this course span is strong span span emphasis small okay after this there are 10 more break select uh time small so these all these are inline elements in HTML that's it congrats on finishing the last chapter many people buy running shoes but they don't run they buy books but they don't read they buy courses but they don't finish therefore continuing and finishing what you have started is very important all right here we are going to see questions about different attributes of elements like ID style class attribute okay so let's start with the first question then what are HTML attributes what are the types of HTML attributes very important question for example here is an anchor element and we already know an HTML will have the opening closing TXS and content in between okay that we know but here you can see in inside the element we have few more things ID class href so what are these These are the HTML attributes so definition is HTML attributes provide additional information about HTML elements okay for example ID attribute giving information about the unique ID for this uh anchor tag class telling the CSS class name and href telling the URL link which will be open in browser uh when you click on this hyperlink right now the question is what are the two types of attributes so first are common or Global attributes like class ID style or datri so these are common and applicable for all the attributes that's why they are called common or Global attributes they are applicable to each and every element of the uh HTML now uh the second type are the specific attributes for example HF which is specific for hyperlinks only okay for anchor anchor elements only then the sorts and ALT for images only it is applicable width and height attribute for many elements it is but not for all so similarly there are other attributes which are specific some are Global so that is the two types of elements okay great this was the short story about attributes what are the ID style and class attributes of an element more important thing is when to use what now maybe you already know these attributes but let's just revise quickly these are like the most important elements and most common attributes of any element here you can see the HTML body with H1 tag and the ID attribute the first answer is the ID attribute is used to uniquely identify an element on a page this is very important because because when you refer uh to any element in JavaScript or css then there you will use the ID attribute only to get or identify the element okay to map the element with HTML for example if you know document. get element by ID so pass the ID as the parameter in JavaScript right the point is the primary purpose of ID attribute is to allow JavaScript and CSS to Target and manipulate specific elements because they are unique right they can identify the elements the second important attribute of any element is a style and here is the code of a paragraph with the style attribute simple definition is a style attribute allows you to apply inline Styles directly to the individual remember individual element now because of style the color of this parag paragraph will be blue but what if you want to apply the same style not just individual but to multiple elements so one way is to copy paste same style in multiple elements right but that will make your HTML HTML bad looking right so then you have to use the class attribute like this see two paragraph elements with the same class name highlighted and you can Define the common class style highlighted in the head section under this style tags like this then the same style will be applicable to both elements the point is class attribute is used to group together multiple elements that share common Styles okay that is the benefit of class and yes class uh are class attributes are recommended for large website not inline Styles okay uh also uh external stylesheets are used for more uh instead of these internal stylesheets which I will explain in detail in the CSS part the external Styles sheet part so that's the answer of this question a short question or you can say a scenario based question is here what will happen if two elements have the same IDs like this in the code where the div and the paragraph have the same IDs now what will happen maybe in the browser there is no direct impact okay but it will be considered as invalid HTML what does it mean to have invalid HTML invalidate HTML means it can lead to unexpected unexpected behavior on your web page so for example problems can occur in the CSS styling and when you are interacting with the IDS of the elements in the JavaScript so then you are targeting some element and because there are multiple IDs so it is going something wrong so because of the multiple style will be changed because if you are targeting to change the I uh style of one element and because of same IDs multiple elements IDs sorry multiple elements style will be changed and uh that is not what you expected right and the same can happen with JavaScript also so always make sure that all the elements IDs are unique from each other and the same detail has been written here so that you can refer it later how to specify multiple classes for a single element what is the style precedence okay now here is the code you can see two classes and how do you apply both of these classes to one single element okay here is the simple implementation and simply add a space separated list of classes names with this class attribute and now both the class Styles will be applied to the development uh but there is one catch here what will happen if both the classes update the same property style like uh both class one and class two have color color property with the different color names which one be will be applied to this second day element in that case the style defined in the last class will take the Precedence and will be the priority and will be applied okay so like this in the browser for the second if which text is multiple classes its color will it color will be green which is set in where second and the last class class two right so that is the answer to this question and the things I have explained are also posted here for reference later what are data attributes in stml now we already know that we have attributes for elements like ID class Etc right these attributes are inbuilt which means they are provided by HTML itself right similarly we can Define our own custom attributes for elements in HTML which we call what data attributes and like this code we can add them to the list of attributes of an element so two points from here First Data attributes in HTML provide a way to add custom data attributes to add uh additional information to elements for example you may need to add some extra information that does not fit into the existing normal attribute okay then we need data attributes and the second point is uh so sorry that that is is the only when we need data attributes the second point is different and that is very simple data attributes are specified using the this Dash prefix data Dash prefix hyphen prefix that is a convention or you can say it's a standard now the question is how do we access these data attributes in JavaScript uh that is not the part of this so because JavaScript is slightly different but let me show you and like from the normal elements like this you can see we can access normal attributes like ID directly right but for data attributes data attributes can be accessed by this data set property injs and that is the third point also uh for this code this will be the output on the console and see the data info attribute value will be have accessed successfully so that is the answer to this question and yes I already covered this query selector and other Concepts already in my JavaScript interview course that's alog together a different course but because that is very much related to JavaScript not HTML keep going keep going no matter the speed no matter rejections or obstacles just keep going until you get there all right in this chapter we will see questions on HTML links and navigation they are very important in web application for navigating from one part of the website to the another and here is the list of the questions we will explore five types of Link then absolute and relative URLs then nav elements fragment identifier base element and some other questions maybe you already know some of them but at least revise at least one time so maybe you can increase the playback speed of the video so let's start with the first question what are the five types of links in HTML all right maybe all of us know the basic anchor element denoted by this a tag but there are four more types of links and here is the list now let me quickly show you the code one by one and most importantly the purpose of each one anchor link is the most basic one denoted by AAG like this it is mostly used for navigating from one pce to another so when you click ABC you will be redirected to this href URL simple and this ABC is the text or this link of this link the second type of link is external resource link denoted by link it is used in the head section to connect to an external resource like a stylesheet or a Javascript file like this here Rel will specify the type of the relationship okay and href will have the location or path of this file then the third type of the link is the image link if you click on this image on the web page then the above URL mentioned in href will be opened so an image link is used to create a clickable image that's leads to another web page the next one is the bookmark Link Link or we also call it named anchor this is a new one uh here if you click on the go to section one link which is href is started with this hash symbol then the page will navigate or scroll scroll okay to the section one part of the same page this is a very good link for navigating in the same page that is its purpose the Fifth and the last one is the email link like this very simple it creates a clickable link and when you click on this send email this will open the users def default email client okay and in the two box or input or text box the email will be pre-filled pre-filled automatically great that was some information about the different kinds of links we have and here is the detail which I already explained explained and this is for just for the revision purpose what is the difference between absolute and relative URLs let's first explore the absolute URLs here you can see the code and if you notice here all the URLs are full and complete full website name full FTP URL full mail to information right these are all the examples of absolute URLs so here are two points about absolute URLs first absolute URLs provide the complete web address of a resource agree second absolute URLs are typically used to link resources on different websites okay external resources as shown is is in the example if I click any link then that will take me outside the current website right that is why absolute URLs are used to connect to exter external websites now let's see the example of relative URLs and here is the example first URL just p. HTML it's not the full URL uh where is the website name here now this type of incomplete URLs are not absolute the browser will know that these URLs are incomplete and therefore the browser will consider them as the relative URL and handle it differently for Rel URL browser will try to find the links internally in the same website in relation with this current HTML document getting my point for example suppose this current HTML or page name is index.html okay and that is inside the example folder Now browser will look for the page. HTML inside the example folder only relation relative right that's why it is called relative URL here directory and folder are the same thing then this next link means for example this example directory has again a sub folder or sub directory inside it which name which name is sub now HTML will look for this page. HTML inside the subfolder okay and in the third case the page. HTML is directly inside the root directory of the website not inside any specific folder okay okay similarly all the below URLs are related to your current website only now here are two conclusions about relative URLs relative URLs specify the location of a resource in relation to the current document full URL is not required second they are mostly used when linking resources within the same website whereas you remember absolute are used to link outside the current website what is the purpose of the nav element in HTML let me show you the code first and here it is here you can see we have this nav element and under that we have the list the output of this list will be something like this now even if you do not use the nav element here the list will remain and displayed as same okay the question is then why do we require or need this nav or navigation element right answer is because it provides semantic clear Clarity oh let me explain for example above we have the header element from a functional point of view it is also doing nothing but it is good for semantic Clarity semantic Clarity meaning if tomorrow some other developer or any search engine like Google will crawl or scan or read your website from from seo seo perspective then they can easily understand the structure structure of your website if the developer have used semantic elements like header nav footer and section elements okay this inside list can be a list of anything because and like a list of products or anything but putting all inside the navigation elements means Google will easily understand uh the SE that the links inside the clickable are for like they are clickable and they are for navigation purpose okay that's the importance of the nav element and the same points which I have explained are written here for later reference that's it what is a fragment identifier in a URL it is a very useful concept and that is nowadays used in almost every website in HTML for example suppose we have two links on our web page like this here you can see that this link is preceded by this hash symbol that means this section was is an ID of a section element that present in the in this same HTML like this and if you click on this go to section one link then the page will be scrolled or navigated to that section okay let me show you the video here so when I clicked go to section one link the page is moved to section one position and when I click on go to section two link the page is moved to section two position okay now you understand almost every website is using this fragment identifier concept right finally the definition is a fragment identifier is used to navigate to a specific section of the same web page and a fragment identifier is preceded by hash symbol that's it what is the purpose of the base element in HTML as always let's see the example first here is the code and here is the base element with the href URL inside the head section right now what is the use of it here is the body and you can see two hyperlinks here but in these hyperlinks only the page name is present without the website name right now in this case if HTML or browser will find the base element in the head section then it will prefix the base element this URL to the relative hyperlinks in the page for example now if you click this page 1. HTML then this window will be opened and see page 1. HTML will be automatically prefixed by the base element base URL abc.com okay and the same will happen with this page two also so that is the purpose of the base element which URL is used used as a common common base URL for all the other relative URLs in your web page got it so same thing I have written here if someone will refer the book later yes yes yes here are you on your next Milestone no big web application can exist without data from a from the database and the best way to display the big and huge data in web application is through HTML list and tables so here are the five questions and from them we are going to cover like type of list nested list table elements Etc so let's begin and accomplish this Milestone quickly what are the different type of lists in HTML okay so we have three type of lists in HTML ordered unordered list and description list let's see the code of the first ordered list here we use old tag and that stand for ordered list now in every list we have one or multiple Alli tags here Ali stands for list item okay and here is the browser screenshot for the same ordered list and if you notice list items are ordered and numbered like 1 2 3 by default so that's why we call them what ordered list because the items here are ordered in a sequence the next type of list is an unordered list which is the most used and the most popular kind of list for this we use the UL tag which stands for unordered list and here is the browser screenshot of list and uh this time it is without any number or order okay then the last type of list is a description list here DL tag for description list or we call it definition list also okay sometimes so then uh DT uh is the definition term and this DD is the definition description here by looking at the output you can easily understand how this list is able to cover list items and then the sub items sub list so DT is the item term one and DD is the sub item description one then again DT is the term two and it is the sub item description two and so on that kind of it item sub item listing is the rule is the purpose of a description or definition list okay so great now here is the theory and conclusion an order list is a list where the items are numbered or ordered in a specific sequence second an unordered list is a list where the items are marked with bullets last but not the least a description list is used to display a list of terms along with their corresponding descriptions or definitions okay that's it here is a short answer question what is a nested list in HTML here you can see the code and here is the output you can easily understand here we have a main ordered list of Technologies which is starting from top to bottom and then inside it we have two list items back end and front end and then inside list the item backend again we have unordered list of java.net node similarly for the second list item so this kind of arrangement is called a nested list where one list is inside the another list like parent child okay the whole point is a nested list in HTML is a list that is placed within another list item got it simple what are table elements what are table advantages and disadvantages tables are very important HTML elements to create a table structure with headers columns and rows in order to create a table you have to first use the table element like this then you have to add the first row of the table by using the TR element and then if you need a header in your table you can use the T th element in the first row like this and the table will be like this in your browser okay with the header then you can add the second row of the table this time inside the row you have to add the TD element which stands for table data or we also call it table cell sometime so like this the row will be added and you can add more and more rows and data as per your requirements finally the table is ready and yes yes table header is there at the top is optional here now let's conclude the table elements table is the container for the entire table clear table row is used to define a row in the table th is used to represent the column headers then TD is used to represent the regular cells in a table now let's see what are the advantages of the table tables are a very power tool for styling styling and dis playing structur data for example Excel Xcel if you know is a very good example right but there is some disadvantage of table also tables multiple column structure is not good for mobile devices because then it is not responsive laptops have a horizontal display but mobiles have a long display right therefore if displaying multiple Columns of a table which means horizontal right horizontal it is uh like you have to move left right and it is not a good display for mobile therefore for websites which are mostly opened in Mobile stable is not a very good idea so rather use bootstrap for mobiles okay which I will explain later that's the answer of this question what is the call span attribute in HTML if you see this table HTML code then here in the first row we have three headers right but in the second row we have only two columns how actually if you set the table set property call span equal to two then this particular cell is going to merge the two cells in a single into a single cell okay so that is call a span if call span is three then it will merge all the three cells into one okay so span column will expand basically okay so here in the browser screenshot you can see how Row one merge cell one and cell two together because the value of call span is two sometimes it is required in tables yes this mergings of the cells for that we can use call span the conclusion is the call span attribute is used to merge multiple cells horizontally into a single cell remember horizontally not vertically and call span attribute is appliable to th and TD uh not to tr you cannot merge multiple RADS with call span okay what is the best way to add a border to a table column and cell here is a table HTML code one table then one two three rows and each rows with two columns right now in order to add any style or border to the table the best way is to set the table element style okay that can be done in the same as style tags in the head section or in a separate CSS file also then in the same way for TR th and TD like this uh this will be the output in the browser like this the whole point is setting the common style common okay for table TR th and TD elements then what will happen all the multiple tables on your web page will follow a very consistent same styling and same formatting which will then looks good look good right so that is the answer of this question now after complete in the questions from HTML here are the chapters from CSS first we will cover questions on CSS Basics then selectors in CSS then questions about layout positioning and responsive design in CSS here is the first chapter and here is the list of CSS questions mostly based on the implementation of CSS in HTML so even if you know them I recommend still revise them at least once maybe you can increase the playback speed of the video so let's start with the first question what is CSS what are the five ways to implement CSS in HTML let's understand with the help of code if this is your HTML and here you can see we have applied different styles to the different elements right because of the applied Styles the elements will look something like this this coloring and the format change in the presentation of HTML is because of the applied Styles only and that is what is CSS remember HTML is just a markup language what it does to structure the document with the help of elements JavaScript is a scripting and programming language whereas CSS is a stylesheet language styling means uh setting the HTML elements look color font size width height Etc okay because uh HTML is just the content in black and white format CSS is responsible for formatting and making the HTML more beautiful and presentable the conclusion is CSS which stands for cascading stylesheets is a stylesheet language used to control the presentation of web pages remember now there are five ways to implement CSS in HTML and here are they inline Styles internal stylesheet external stylesheet import rules and CSS PR processors in the upcoming questions we will explore all of them what is inline style in CSS when to use it in real applications here are the five ways to implement CSS in HTML and the first and the simplest one is inline Styles here is the HTML code and as you can see h1n paragraph We have the style attribute when we set the style along with the the element itself then it is called inline style so two points quickly about inline Styles inline Styles apply Styles directly to the individual HTML elements using the style attribute the second point is this method is suitable like when to use in real application it is suitable for applying styles to a single element only so for applying the same style to multiple elements we have other ways other of implementing CS okay so it is basically for single uh individual elements and mostly in very small application we can use the style attribute this way of styling inline style what is internal stylesheet in HTML when to use it in real application again very simple here are the five ways the second ways is through internal sty sheet and this is the way to implement internal style sheet in your code here you will will place the style element inside the head section and inside it we can set the style properties right here div represent the tag name parab with DOT represent the class name so once the style is set then this is the way to implement the style in the HTML elements nothing special and the div style above will be applied to all the div TXS on your current web page do par applied to any element which you have the class equal to par okay so finally two points about internal stylesheet internal stylesheet can be implemented by adding the style element in the head section of the HTML okay next point is when to use it in real application this method is suitable for applying common style common style for multiple elements okay but this method is again suitable for a smaller projects not very big because what will happen adding more and more styles uh here in the inside your HTML will make your HTML document very big and complex which will not look good then okay therefore big projects we have for big projects we have the external style sheets that is what we will look next what is external Styles sheet in CSS when to use it in real application now this is the most popular way of implementing CSS in HTML here are the five ways and this is the external stylesheet in this case you will write Styles in a separate CSS file like this now how to link this with the HTML if this is your HTML then inside the head section you have to use this link element and then you have to set the real attribute to stylesheet because CSS is a stylesheet language and the hrf attribute to the path with the name of above CSS stylesheet okay so now now the above CSS file is linked to this element HTML and the HTML here like H1 paragraph will start using the above uh Styles the H1 and P Styles okay finally two points about external style sheet in external stylesheet a separate CSS file is created with do CSS extension and Linked In the HTML file using the link element okay second point is this is the most common and recommend Ed way to implement CSS in big project okay now going forward I will always not show you this link element here uh due to space issue for upcoming questions but when if you are coding it by yourself then always include this link with the CSS I am presenting in the upcoming questions okay what are the five advantages of external stylesheet here is the external stylesheet examp example and we know this is the most popular way but now the question is why here are the reason and you can say five all advantages also of using the external sty sheet okay first is separation of content HTML from presentation style now because of this separation your HTML will be very lightweight okay because the CSS Styles will be in the another file which is also then good for the structure of your website the second Advantage is the reusability of CSS class in multiple elements and in multiple web pages also so yes multiple elements across the website can use the same style from the external style sheet so internal stylesheet is uh only specific to the page but uh this external is common to the entire website right third Advantage is keep things organized and structured that is the obvious Advantage right fourth Advantage is it adapts to different devices then fifth Advantage is this increase improve the website speed because then your HTML will be very lightweight and that's why when the website with load the speed of the loading of the HTML pages will increase a little bit okay so all right that was the advantages list of the external Styles sheet as compared to the internal style sheets and also to the better than the inline Styles this is a very short question how do you include CSS in a web page or HTML this is like a indirect questions or sometimes they ask questions in a different way so but I already covered this in previous questions and these are the three ways first is by implementing the external stylesheet we can include but then by using the link element in the head section second is by using the internal style sheet by using the style element in the head section and third is inline Styles apply Styles directly to individual element using the style attribute but this is the least recommended way how to implement CSS using the import rule this is one of the five ways to implement CSS in HTML in this case you have an HTML file like this and there you have the link element with the stylesheet reference which is main. acss right now now look at the body of the main. Cs file here carefully this CSS file will have its own style properties but it is also importing the styles from an external CSS file using this import statement uh by setting its URL here of external file and here is the external CSS file now all the styles of the external. CSS like H1 will also be available in the main. CSS that is the purpose of this import URL okay then the same Styles will be applied to the main HTML file also the all the H1 tags here color will be blue okay so this is the import finally two main points about the import rule import rule is to include an external CSS in the main CSS file okay but the second point is that this method is very less commonly used used due to some potential performance issues performance issue because this kind of dependency of one CSS file on another CSS file will make things complex okay now the question is then why we created this imported rule when there are issues and performance issue with it like because sometimes in a project there are existing CSS files which we cannot change because they are used in multiple projects okay for example so we cannot change them then better we should import them and then we should write another CSS file and there we should import or we should import multiple files in a uh CSS file and then use it so basically in big projects we need such kind of you know scenarios what are CSS pre-processors what is scss CSS pre-processor is also one way to implement CSS and this is slightly more complex in comparison to the previous ways in this case the CSS processors we have to create one do CSS file like this in our project for that we have to install npm and SS also uh and scss is a type of CSS pre-processor only okay and what will happen this scss will be first converted into a CSS file and that converted file will then be referred in the link element of the HTML file getting my point now to relate it to remember it just focus on this name CSS pre-processor its English meaning is before CSS or prec css there will be a file of type scss or any other type which will then be processed to CSS file get related right that's good so that's why the English is important and that's why this implementation is called CSS preprocessor because we have a file s CSS which is uh which will be processed in the CSS file now the important question is why we need this kind of CSS pre-processing or scss instead we already have those direct normal CSS file why we need it the answer is CSS pre-processors are scripting languages like scss this is a scripting language that provide additional syntax and features that are not aail ailable in traditional CSS okay so for example variables loops and conditional statements uh these are not available in normal CSS but they are available in scss for example if you see the scss code then here you can see we have defined variables in this scss file then you can use the variable base font for calculating the heading element font size dynamically dynamically that is the purpose of the variable right now when the scss is converted to CSS there you will receive the fixed multiple multiplied font size now this variable DEC declaration and setting is not possible directly here in this CSS therefore sometimes we need a CSS for big applications then we can also have loops conditional statements which are not possible in normal CSS so that that's why CSS pre-process are Essentials and we need them in some scenarios great that was the first point and we already know the second point that is scss is a type of CSS pre-processor only uh yes there are other types also which I will just share in the next question but you have got the high level idea about what is scss and most importantly why we need a CSS right here is a very short question what are the three types of CSS pre-processors the first type CSS pre-processors we already know and that is scss which stands for sassy CSS also we call it SAS which stands for syntactically awesome stylesheets and the file extension for them is CSS this is the first type of pre-processor second type is less and the file extension is also Al doless this is the second type the Third Kind of CSS pre-processors are St stylus and the extension is do style s l these there are maybe some more types but I'm not going into very much detail about this because they are like then a separate topic from normal CSS and it is very much too much time taking but yes now you have the high level idea like okay why what are the three types of CSS pre-processors great and many congratulations for reaching the last chapter of HTML CSS and boot strap and if I'm the interviewer then I will hire you directly by looking at your willingness determination and hard work after you reach this point okay so after HTML CSS the last chapter is bootstrap here we will cover these questions bootstrap advantages grid system call classes and the most most important bootstrap components even if you are new to bootstrap still you can easily understand all those Concepts in these questions so let's start with the first question what is bootstrap what are the other five responsive design Frameworks other than bootstrap very simple suppose you have a website that opens on a laptop something like this here we have the website header and then below we have three section columns Side by site now bootstrap is the CSS framework that if you will use then the same website will open something like this on the mobile device here you can see that the columns that were horizontally aligned on the laptop are now automatically aligned vertically the main thing is that you do not have to write a single line of CSS code for this responsiveness you just have to include ude the bootstrap framework by adding this URL in your HTML and some of its classes so what's the conclusion bootstrap is a popular open-source front-end CSS framework which provides responsiveness and mobile first CSS why mobile first because now mobile ERS users are more than big screens users right now remember that bootstrap is not the only framework for responsiveness you can also use other responsive Frameworks like Foundation bu M semantic UI materialize and tail Tailwind but use only one at a time for your website okay and bootstrap is the most popular one uh these nowadays what are the five advantages of using bootstrap now this is a bit theoretical question but it is important let's see the advantages one by one First Advantage is rapid development of website if you are using bootstrap yes bootstrap provides a wide range of ready to use components like navigation bars buttons forms models and many more this saves developers time and effort in writing code for them from scratch okay second Advantage is of course responsive design bootstrap is built with a mobile first approach meaning it prioritize the designing for smaller screens first and then scales up for larger screens this ensures websites with bootstrap is responsive for every device third Advantage is cross browser compatibility meaning bootstrap provides a consistent set of styles and uh components across different browsers okay so which helps in reducing the cross browser compatibility issues which are there with other CSS normal CSS right fourth Advantage is large community and support yes there are plenty of resources documentations tutorials forums available for assistance on the internet which makes bootstrap development very easy Fifth and last Advantage is accessibility meaning bootstrap incorpor creates best practices for web accessibility uh like following web accessibility you can create websites that are even usable for people with the disabilities okay that is the meaning of accessibility great that is the answer and here are all the details of the advantages which I already explained just for the later reference what are the two ways to include the bootstrap framework for for your website there are two ways first put the link to bootstrap of bootstrap CDN in the head section like this here in your HTML head add this link element and set the attribute HF URL value to the bootstrap CDN URL then bootstrap uh what will happen bootstrap classes will be available in your project and this is the simplest and the easiest way uh but remember your website must always be available on the internet otherwise this URL will not work the benefit of this way is uh to get the new features and uh new versions of the bootstrap you just have to change the bootstrap version number here and just do a simple test but the disadvantage is if this URL is down for some reason which I think it is never uh but in that case your website will face problems with the elements and classes that it is using from the bootstrap framework okay now the second way to use bootstrap in your website is to download all the bootstrap files and then add them locally in your project so that your website is uh no longer dependent on the internet uh yes this is a bit difficult to do and also for version changes you have to download upload the files again and again uh the benefit of this way is that even if the bootstrap URL is down bootstrap frame website is down even in that case your website will not be impacted because you already have all the files in your project anyways uh normally I prefer the URL way the first way for bootstrap in my own projects uh but it depends explain the grid system in bootstrap the grid system is the basis of of responsiveness in bootstrap see this as per the grid system you can use six types of column structures for your website first a 12 column grid structure for big screens like laptops now bootstrap will automatically convert this 12 horizontal columns or cells into 12 vertical cells on smaller smaller screens like mobile okay so that is responsiveness right similarly a six column grid website for laptop will be converted to one vertical column Grid in mobiles and the same goes with four 3 two column grid structures okay so finally what is the grid system in bootstrap the grid system is a 12 column layout and is designed to adapt to various screen sizes now let me show you the conversion will how it will happen for a two column grid and how it will be displayed on the the mobile device so if you have a two column grid like this for website for laptop big screen then bootstrap convert this two column in the mobile like this and that is the whole purpose of the grid system in bootstrap right now the question is how to implement this for that you have to add the URL of the bootstrap in the head of the HTML file which I already explained in the previous question then in HTML you have to use this class Row for a single row and inside that for two column grids you have to create two columns with call md6 and call md6 classes okay now if you are using three column grid structure then you have to this call md4 class three times similarly four column grid structure go for call md3 class four times and six column grade uh you have to use call md2 class six times now these classes row and column D6 will be using the bootstrap framework CSS for responsiveness for the conversion for mobile screens okay so that's the thing great I think now you have a good idea of the grid system in bootstrap right what is the difference between call Access SM MD LG and XL the difference lies in the target screen size of the screen for example suppose we are targeting our website for laptops like laptop is the ideal device for our website users okay that's in our mind then we have to use call MD or SM classes of boot strap like this see in this case these two columns will appear perfectly like this in the laptop and in the mobile it will be of course in the vertical manner but if you use call Excel class instead of this call MD class like this then call Xcel means the target you are targeting for extra large screens then for call XEL class laptop screen is very smaller and therefore the output will be something like this in the vertical format see in your laptop it will it is not right right which is wrong right so for call XEL class laptop is is basically of a small size and it needs ideally a big screen like big TV or big screen or something to show it in the horizontal manner so mostly the normal website Target for call SM and call MD only because these two target T tablets or laptop screens now let's see the target screen for other classes here call Access applies to extra small screens phones and then call smm applies to smaller screens call MD applies to medium screens laptops call LG applies to large screens larger desktops and call Xcel applies to extra large screens large TVs that is the difference between all of them what are bootstrap components what are the top 10 bootstrap components now this is a bit theoretical question but we should know the most important Bo boot components bootstrap components are pre-designed elements that can be easily integrated into a web project and here are the top 10 bootstrap components which you can use in where your websites even without developing them just by including the bootstrap framework in your website first are buttons bootstrap buttons components allow you to create interactive button elements that user can click second are very popular Navar they provide navigational header that help users move through a website it includes features like responsive Behavior drop- down menus and support for brand logos and links right then forms bootstrap form component make it easy to create structured and interactive forms and validation will be very easy fourth is carousal carousal contents are like this allows you to create a slideshow images of or other content okay by clicking this left right arrows you can slide you can see the whole slideshow fifth are cards cards are flexible containers like that can hold various types of content like text images titles descriptions right then we have progress bars which uh displays the progress of a task or process mostly it is used to indicate the pro progress of file uploads right then pagination components provides a set of navigation links to help user like navigating through a large data set like that is divided into multiple pages right then Spinners components are animated loading indicators like this that provides visual feedback to uh users while content is being loaded or processed then badges are there small visual indicators that can use to display additional information notification count great last are models which I will cover in the next question uh I know theory is not cool but sometime it is important to know right all right if you reached here and completed all the questions and answers then congratulations because where there is a will there is a way my best wishes are with you and if you have any questions then feel free to ask me in the comments again all the best for your interviews and career and if you want to say all the best to me then like and subscribe and just post the comment whenever you get the offer or job remember only giving up can stop you now so never give up

Channel: Interview Happy

Views: 52,654

Keywords:

Id: L1Oc2ZLydvw

Length: 101min 16sec (6076 seconds)

Published: Tue Nov 28 2023