Ans:- HTML, div along with the span tag seems to be the same but, they are not. The div tag acts as a container for one or multiple elements, media types etc. and is a inline-block element to which we can assign any height and width. The span tag in HTML is a type of semantic tag, which means as the name "span" suggest this tag is used to span or put contenet, element anywhere in HTML document. Inspite this, the span tag is a Inline element due to which the height and width can't be assigned to this tag.

Ans:- In HTML, elements are defined by using tags i.e. to use heading elements we have 6 different heading tags ranging form h1 to h6 where h1 the largest heading and h6 being smallest heading. Every element has a opening tag and a closing tag to define a element.Self closing tags are also alternatively known as void tags, empty tags, singletons tags, etc. i.e these tags do not have contents and also can not have any child. Example of Heading element using h1 tag.

<h1>                 --> opening tag
    Hello World.
</h1>                --> closing tag

Some elements in HTML do not have a separate closing tags, so there is no need to close them by using a separate closing tags. Such elements are often reffered to as self-closing tags.
Example of self-closing tags are:- img, br, hr, input, link, meta etc.

<br>                --> no closing tags
<hr>                --> no closing tags
<img src="" alt=""> --> no closing tags
<meta>              --> no closing tags

Ans:- In HTML, Heading tags define the heading. HTML heading tags are important for both users and search engines. When users read a text, a good structure with paragraphs and headings help them orientate themselves. Paragraphs divide the text into smaller chunks, and headings clarify the structure of texts.there are total of 6 types of headings ranging from h1 to h6. h1 being the largest and boldest to, h6 being the smallest. The heading elements are as follows:- h1, h2, h3, h4, h5, h6.
While deciding where to use which heading following points might help:-
h1: It should be the main keyword of the landing page in the headline. In shops, for example, this could be the main category. In longer articles, the main keyword is usually the topic of the article.h2: The h2 headlines are well suited to secondary keywords or related keywords, or they can be used for longtail keywords or questions. h2 tags can also be used for optimizing for the Google Answer Box. h3 and h4: These headings should be used for less important topics. However, can also be used to add keywords to the main topic. h5 and h6:These are the smallest headings, mostly not used.

Ans:- Block elements: They consume the entire width available irrespective of their sufficiency. They always start in a new line and have top and bottom margins. It does not contain any other elements next to it.

Examples of Block elements:

<h1>-<h6>
    <div> 
    <hr>

Inline elements: Inline elements occupy only enough width that is sufficient to it and allows other elements next to it which are inline. Inline elements don’t start from a new line and don’t have top and bottom margins as block elements have.
Examples of Inline elements:

<a>
    <br>  
    <script&g    t;
    <input>    ;

Ans:- In HTML, strong tag is used to specify the importance, seriousness, or urgency of the text used inside it. Contents of strong tags are rendered in bold by browsers. The <strong> element is for content that is of greater importance, while the <b> element is used to draw attention to text without indicating that it's more important.
Similarly we have a em tag which is used to stress emphasis on a word or words of a sentence, perticular sentense or a part of sentense; with intent to affect the meaning of that sentence. Although the visual effects are same, however the semantic meaning is different between the <em> and <i> which is used to epresents text that is set off from the normal prose, such a foreign word, fictional character thoughts, or when the text refers to the definition of a word instead of representing its semantic meaning.

Ans:- In HTML, attributes are the special words placed inside the opening tags and used to define the characteristics of an HTML element. The HTML attributes contain two parts attribute name and its value. The attribute pairs (attribute_name, attribute_value) are separated using equal (=) operator. The attribute value is closed inside double quotes (” “). The name parameter takes the name of the property we would like to assign to the element and the value takes the properties value or extent of the property names that can be aligned over the element. Every name has some value that must be written within quotes. Further attributes are categoriesed based on their functionalities such as Content attributes, IDL attributes, Boolean attributes and Event attributes. In short attributes can be seen as the properites for the elements.

Syntax=> <element attribute_name="attribute_value"></element>

Examples of attributes are:

<img src=""
         alt=""
         id=""
         class=""
         style="">

Ans:- In HTML, tags are the building blocks of a page. Tags tell the browser how it should display content to the user as it consists of a reserverd keywords that have a unique meanings. Tags usually exist in pairs consisting of a starting and an ending tag. However, some tags do not have a closing tag.A tag starts with a > bracket and ends with a < bracket. Most tags exist in pairs in HTML. Tags have an opening and closing part. They are similar, except the closing part has a / sign after the opening bracket.
Elements consists of a generalized component that user wants to display on their HTML page. An element is like the meaningful entity that includes an openning tag, some content and a closing tag. If there is no content in an element, it is called an Empty HTML Element. Also, HTML Elements can be nested. There can be an element with another element as its content.

       Tags:                               Elements:

Opening tag: <TagName>            <p>         --> openning tag
Closing tag: </TagName>               Text    --> content
                                  </p>        --> closing tag

Ans:- In HTML, br tag is used to produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant. The text after the br tag begins again at the start of the next line of the text block.

Syntax=> 
        <br/>

Ans:- A list is a record of short pieces of related information or used to display the data or any information on web pages in the ordered or unordered form. For instance, to purchase the items, we need to prepare a list that can either be ordered or unordered list which helps us to organize the data & easy to find the item.In HTML, there are total 3 types of lists available.

1. Ordered list defined with <ol> tag. It's used to sort items in ordered manner by using either numbers, alphabets or roman numbers(numbers are used as default).
2. Un-ordered list defined with <ul> tag. It's used to arrange items in un-ordered manner by using symbols such as disk, square, circle or none.
3. Descriptive list defined with <dl> tag. It is a list of terms, with a description of each term. The <dl> tag defines the description list, the <dt> tag defines the term name, and the <dd>tag describes each term.

   Ordered list:        Un-ordered lists:        Descriptive list:

   <ol>                  <ul>                     <dl>
       <li></li>             <li></li>               <dt>
       <li></li>             <li></li>                   <dd></dd>
       <li></li>             <li></li>               </dt>
   </ol>                 </ul>                   </dl>

Ans:- In HTML, semantic tags refers to the tags that provide meaning to the HTML page rather than just presentation. It makes HTML more comprehensible by better defining the different sections and layout of web pages. A semantic element clearly describes its meaning to both the browser and the developer. Semantic tags have many advantages over non-semantic tags like the semantic HTML tags help the search engines and other user devices to determine the importance and context of web pages, pages made with semantic elements are much easier to read, it has greater accessibility, offers a better user experience, semantic tags are also of great help to screen readers, and finally they also help in code optimization.

The following HTML tags can be used to break your page into identified parts:

• <header> : It defines a header for a web page.
• <nav> : It defines a container for navigation links.
• <section> : This defines a section in a web page.
• <article> : This element contains the main part, containing information about the web page.
• <aside> : It is often placed as a sidebar in a document.
• <footer> : It defines a footer for a document or a section.

Ans:-

<ol type="I">
    <li>
        Item-1
    </li>
    <li>
        Item-2
    </li>
    <li>
        Item-3
    </li>
</ol>

Ans:-

<ul style="list-style-type: circle;">
    <li>
        Item-1
    </li>
    <li>
        Item-2
    </li>
    <li>
        Item-3
    </li>
</ul>

Ans:-

<a href="https://prepbytes.com">
    Click here to go to www.Prepbytes.com
</a>

Ans:-

<img src="https://www.pexels.com/photo/red-concrete-brick-259915/" alt="Alternate text.">

Ans:-

Ans:-

In HTML, we use rowspan attribute to make a cell span more than one row. Rowspan attribute accepts a unitless numerical value, which equals to the number of rows we wanna span. As compared to preceding table, the following table has implementation of rowspan attribute in it's 2nd row of 1st and 3rd column by specifying attribute rowspan="2" .

Ans:- In HTML, radio button and checkbox are the input-type elements, elements through which user provides input. The main difference between radio button and checkbox is that out of multiple available options, with use of radio button user can select only and only one option and with the use of checkbox user can select one or multiple available options. These input elements are primaraly used in HTML forms.

    
Course : 
       
Technology : 
    MERN           HTML
    MEAN           CSS
                     React
                     Node

Ans:- In CSS, flex property is used to define a flexible display to an element(mostly divs). Flex consist of two entities parent flex container and its child flex items and the display: flex property is applied to parent flex container. Then, we have flex row and flex column as property values for flex-direction: property. Basically, flex-direction: row renderes all child flex items in row format i.e. horizontaly on X-axis of a page; whereas flex-direction: column renderes all child flex items in column format i.e. verticaly on Y-axis of a page.

Ans:- Cascading Style Sheet(CSS) is used to set the style in web pages that contain HTML elements. It sets the background color, font-size, font-family, color, … etc. property of elements on a web page. There exists 3 ways in CSS can be applied to a HTML page which are as follows:

1. Inline CSS: It contains the CSS property in the body section attached with element is known as inline CSS. This kind of style is specified within an HTML tag using the style attribute.
2. Internal or Embeded CSS: This can be used when a single HTML document must be styled uniquely. The CSS rule set should be within the HTML file in the head section i.e the CSS is embedded within the HTML file.
3. External CSS: External CSS contains separate CSS file which contains only style property with the help of tag attributes (For example class, id, heading, … etc). CSS property written in a separate file which has a .css extension should be linked to the HTML document using link tag. This means that for each element, style can be set only once and that will be applied across web.

Ans:- In CSS, justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. The alignment is done after the lengths and auto margins are applied, meaning that, if in a Flexbox layout there is at least one flexible element, with flex-grow different from 0, it will have no effect as there won't be any available space.

Following are some of the values for justify-content property.

• start : The items are packed along with each other toward the start edge of the alignment container on the main axis.
• end : The items are packed along with each other toward the end edge of the alignment container on the main axis.
• center : The items are packed along with each other at the center of the alignment container along the main axis.
• spcae-between : The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The first item is with the main-start edge, and the last item is with the main-end edge.
• space-around : The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.
• space-evenly : The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.

Ans:- Every single element on a web page is a block, iterally a rectangle of pixels. To design a website with complex layouts the use of position: property is required to alter the typical documnet flow and override default browser styling. The position property has five values in total: static, relative, absolute, fixed and sticky . ALso other position specifying properties and values such as top:, bottom:, left:, right: are required in accordance with above position property.

position: relative; changes the position of the element relative to the parent element and relative to itself and where it would usually be in the regular document flow of the page. This means that it's relative to its original position within the parent element. This property value moves the tag based on where it currently is, relative to its usual place and relative to its surrounding tags without affecting their layout. Any element that is a child of the relatively positioned element can be absolutely positioned within that block.

position: absolute; Absolute-positioned elements are completely taken out of the regular flow of the web page. They are not positioned based on their usual place in the document flow, but based on the position of their ancestor. This property value moves the tag irrespective of where it's currently positioned this allows to to literally place any page element exactly where we want it to be. The trade-off about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn’t affect other elements.

Ans:- In CSS, grid-template-columns: is a property associated with grid layouts. This property determines the the number (and the widths) of columns in a grid layout. The values are a space separated list, where each value specifies the size of the respective column.

Syntax=> grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

Offsets for the property are:

• none : Default value. Columns are created if needed.
• auto : The size of the columns is determined by the size of the container and on the size ofthe content of the items in the column.
• max-content : Sets the size of each column to depend on the largest item in the column
• min-content : Sets the size of each column to depend on the smallest item in the column
• length : Sets the size of the columns, by using a legal length value.

Ans:- In CSS, the z-index property specifies the stack order of an element on the z-axis of a page. An element with greater stack order(z-index value) always gets rendered in front of an element with a lower stack order. z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements). If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.

Syntax=> z-index: auto|number|initial|inherit;

Offsets for the property are:

• auto : Sets the stack order equal to its parents. This is default.
• number : Sets the stack order of the element. Negative numbers are allowed.
• initial : Sets this property to its default value.
• inherit : Inherits this property from its parent element.

Ans:- In CSS, both padding and margin are the properties of box model. Every element can be described in box model layout.

Margin: It is the space around an element i.e. the space outside of an element. It is the space between an element and the elements around it. Margins are used to move an element up or down on a page as well as left or right. Margin is completely transparent, and it does not have any background color. It clears the area around the element. Each side of the element has a margin size you can change individually. In creating the gap, the margin pushes adjacent elements away. It can be negative or any float number or it can also be set to auto.

Padding: It is the space between the element and the related content inside it. It determines how elements look and sit within a container. It also shows the container background around the element in it. Padding can be affected by background colors as it clears the area around the content. To create the gap, it either grows the element size or shrinks the content inside. By default, the size of the element increases.

Ans:- In CSS, box-sizing: property allows us to include the padding and border in an element's total width and height. By default in the CSS box model, the width and height that's assigned to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen.
   width + padding + border = actual width of an element
   height + padding + border = actual height of an element

Following are the values for box-sizing: property:

• content-box : This is the initial and default value as specified by the CSS standard. The width andheight properties include the content, but does not include the padding, border, or margin.
• border-box : The width and height properties include the content, padding, and border, but doesnot include the margin as padding and border will be inside of the box.

Ans:- In CSS, animation-delay: property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation. The animation-delay value can be defined in seconds (s) or milliseconds (ms).

Syntax=> animation-delay: time|initial|inherit;

Offsets for the property are:

• time : Defines the number of seconds (s) or milliseconds (ms) to wait before the animationwill start. Default value is 0. Negative values are allowed. If you use negative values, theanimation will start as if it had already been playing for N seconds/milliseconds. A positive valueindicates that the animation should begin after the specified amount of time has elapsed. A value of 0s, which is the default, indicates that the animation should begin as soon as it's applied.
• initial : Sets this property to its default value which is 0.
• inherit : Inherits this property from its parent element.

Ans:- In CSS,

Ans:- In CSS,

Ans:- In CSS, the term "box model" is used when talking about design and layout. When laying out a webpage, the browser's rendering engine represents each HTML element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes. Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.

Margin
Border
Padding
     Content

Ans:- In CSS, display: none; and visibility: hidden; both of these properties are different and are used to hide the elements on webpage. But the way they do is completely different as display: none property is type of display property with value as : none; which not only hides but also removes the space which element occupies on a webpage as if it was not written in HTML document in the first place, which disturbes the rest of the element flow on page. Whreas the visibility property with value : hidden; makes the element invisible by making it transparent so our eyes cannot see, but it does occupies space on and its position on webpage unlike when using display: hidden; property, which does not disturbes the elements flow.

Ans:-

Ans:-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos vero, quis omnis praesentium maxime esse illum tempora qui. Laudantium, omnis alias eum blanditiis saepe a reiciendis explicabo totam necessitatibus. Obcaecati possimus adipisci assumenda dolorem mollitia aliquam, dolorum asperiores at quae necessitatibus quisquam sunt nesciunt neque recusandae voluptatum vel eligendi tempora error delectus odit. Incidunt quos eveniet, voluptate hic officia, exercitationem voluptatem quia nam tempore a velit explicabo saepe vitae asperiores.

font-family: 'Poor Story'; cursive;

Ans:-

Code=>
            on :hover;
    transform: scaleX(150%);
    transition: all 1s ease-in-out 0s;

Ans:-

Code=>
    border-radius: 50%;

Ans:- In CSS, a media query is used to apply a set of styles based on the browser's characteristics including width, height, or screen resolution. The @media is a type of At-rule in CSS. These rules will dictate what the CSS will look like based on certain conditions. The media type refers to the category of media for the device. The different media types include all, print, screen and speech. In the below code example a (max-width: 600px) for the media query exissts which tells the computer to target devices with a screen width of 600px and less and changes the background styles for the body to background-color: #87ceeb; .

@media only screen and (max-width: 480px){
    /*Styles go here*/
    body {
        background-color: #87ceeb;
    }
}

Ans:-

Code=>
    <div style="width: 250px;height: 250px;border: 3px solid rgb(129 105 149);
    border-radius: 15px;">
        <div style="width: 25%;height: 20%;background-color: darkturquoise;
        border: 2px solid azure;border-radius: 10px;
        animation: box-move 4s ease-in-out infinite forwards normal;
        text-align: center;">
            Box
        <div>
    <div>

CSS Code=>

    @keyframes box-move {
        0% {
            transform: translateX(0);
        }

        25% {
            transform: translateX(280%) rotate(-180deg);
        }

        50% {
            transform: translateX(280%) translateY(358%) rotate(-360deg);
        }

        75% {
            transform: translateY(357%) rotate(181deg);
        }
    }

Ans:-

Ans:-

Button-1 Button-2 Button-3 Button-4

Ans:-

Ans:-

Ans:-

Ans:-

Ans:-

Ans:-

Ans:- In CSS, a CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinators as they combine other selectors in a way that gives them a useful relationship to each other and the location of content in the document.
There are four types of combinators available in CSS:

• Descendant Combinator : These are represented by a single space ( ) character. It combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc.) element matching the first selector.Basically, this selector is used to select all the child elements of the specified tag. Selectors that utilize a descendant combinator are called descendant selectors
• Child Combinator : These are represented by (>) character placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Descendant elements further down the hierarchy don't match.
• Adjecent Sibling Combinator : These are represented by (+) character placed between two CSS selectors. It matches only those elements matched by the second selector that are the next sibling element of the first selector. Basically, it's used to select an element that is directly after another specific element. Sibling elements must have the same parent element, and "adjacent" means "immediately following".
• General sibling combinator : These are represented by (~) character placed between two CSS selectors. It's used to select the element that follows the first selector element and also share the same parent as the first selector element. This can be used to select a group of elements that share the same parent element.

Ans:- In CSS, a Pseudo class is a keyword which can be added to slector that's used to define the special state of an element. It can be combined with a CSS selector to add an effect to existing elements based on their states.

selector: pseudo-class{
    property: value;
}

There are many Pseudo classes in CSS but the ones which are most commonly used are as follows:

• :hover : This pseudo-class is used to add special effect to an element when our mouse pointer is over it.
• :active : This pseudo-class is used to select an element which is activated when the user clicks on it.
• :focus : This pseudo-class is used to select an element which is currently focused by the user. It works on user input elements used in forms and is triggered as soon as the user clicks on it.
• :visited : This pseudo-class is used to select the links which have been already visited by the user.