🎓

Know where you stand: Masai

self-rating interview preparation
[HTML & CSS]

Process:
Students to start zoom recording, they will be provided an assignment where they
can submit them.

Students to start the video-interview provided to them

Listen to the question carefully

Answer them in the time duration provided to you

Listen to the answer provided by the interviewer

Fill the self evaluation form for that question

Move to the next question

Once all the questions are done & the feedback form is fully filled, submit the form

stop the recording & submit the recording.

You are expected to answer using the DUBX Method.

DUBX Method
The DUBX method is a structured approach to answering technical questions, which
consists of four components:

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 1
 1. Definition: Providing a clear and concise explanation of the topic using key
technical terms.

2. Use case scenarios (real world use cases): Offering examples and explaining
when and why the topic is applied in various situations.

3. Benefits: Highlighting the advantages of using the concept, explaining why we

need it, and addressing the problems it solves. This section emphasizes the value
and importance of the topic.

4. Extra information: Sharing any additional relevant information or context related to

the topic.

Academic Integrity
The results will not impact your unit movement. But your insincerity & dishonesty will
surely impact your unit movement. The intention is the give you a way to practice and
know where you stand.

1. Whats the full form of HTML & CSS?

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 2
 Answer

1. Definition:

HTML: HyperText Markup Language is a standard markup language used

to structure content on the web.

CSS: Cascading Style Sheets is a stylesheet language used to describe the

look and formatting of a document written in HTML.

2. Use case scenarios:

HTML: Creating web pages by defining the structure, elements, and content
of the page, such as headings, paragraphs, lists, images, and links.

CSS: Styling web pages by defining visual attributes, such as colors, fonts,
layout, and responsive design for different devices and screen sizes.

3. Benefits: HTML and CSS work together to create well-structured and visually
appealing web pages. HTML provides the foundation for the content, while CSS
enhances the presentation and user experience. Separating content (HTML)
from presentation (CSS) allows for more efficient web development, easier
maintenance, and better accessibility.

4. Extra information: HTML and CSS are essential components of front-end web
development. Both languages have undergone multiple revisions, with the
current versions being HTML5 and CSS3. These latest versions introduce new
features and improvements, such as semantic elements, advanced selectors,
and support for animations and transitions.

2. What is the difference between a block element and

an inline element?

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 3
 Answer

1. Definition:

Block element: A type of HTML element that, by default, starts on a new line
and takes up the full width available, effectively creating a "block" in the
layout.

Inline element: A type of HTML element that, by default, does not start on a
new line and only takes up as much width as necessary, allowing elements
to flow next to each other horizontally.

2. Use case scenarios:

Block elements: Commonly used for structural and layout purposes.

Examples include <div> , <h1> <h6> , <p> , and <ul> .

Inline elements: Commonly used for text formatting and smaller content
pieces. Examples include <span> , <a> , <em> , and <strong> .

3. Benefits: Understanding the difference between block and inline elements

helps create a proper structure and layout for web pages. Using the appropriate
element types ensures better readability, accessibility, and responsiveness.
Block elements create a clear separation between content sections, while inline

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 4
 elements allow for seamless formatting and organization within text-based
content.

4. Extra information: CSS can be used to change the display behavior of an

element by modifying the display property. For example, you can make a block
element behave like an inline element by setting display: inline; , or make an
inline element behave like a block element by setting display: block; . Other
display values, such as inline-block or flex , offer even more control over the
layout and positioning of elements.

3. What is the CSS Box Model?

Answer

1. Definition: The CSS Box Model is a fundamental concept in CSS that

describes how space is calculated and distributed around HTML elements. It
consists of four main components: content, padding, border, and margin.

2. Use case scenarios: The Box Model is used in all web page layouts, as it
determines the positioning, size, and spacing of elements on the page. It helps
developers control the appearance and alignment of content on a web page.

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 5
 3. Benefits: Understanding and leveraging the CSS Box Model allows for precise
control over the layout and design of web pages. It ensures consistent spacing
and positioning of elements, improving the overall look and user experience of a
website.

4. Extra information: The box-sizing property in CSS can be used to change how
the box model's dimensions are calculated. The default value is content-box ,
which means the element's width and height do not include padding and border.
The border-box value includes padding and border within the specified width
and height.

4. In how many ways can you declare CSS in an HTML

document?

Answer

Definition: There are three primary methods to declare CSS in an HTML

document: Inline, Internal, and External.

Use case scenarios:

Inline: Apply styles directly to an HTML element using the style attribute.

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 6
 Internal: Add a <style> element within the <head> section of the HTML
document.

External: Create a separate .css file and link it to the HTML document
using a <link> element in the <head> section.

Benefits: Each method has its use cases and benefits. Inline CSS is useful for
quick, single-element styling, while internal CSS is suitable for small-scale
projects with limited styling. External CSS is the recommended approach for
larger projects, as it promotes better organization, maintainability, and
separation of concerns between HTML and CSS.

Extra information: External CSS files can be cached by browsers, improving

the loading time for subsequent page visits. Combining and minifying multiple
external CSS files can further optimize loading performance.

5. What is a CSS Grid? What are its uses?

Answer

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 7
 1. Definition: CSS Grid is a powerful two-dimensional layout system in CSS,
designed for creating complex and responsive web page layouts. It allows
developers to control the position, size, and alignment of elements along rows
and columns.

2. Use case scenarios: CSS Grid is used for designing web page layouts, such as
multi-column designs, responsive designs, and intricate grid-based structures. It
is particularly useful for building modern, responsive websites and web
applications.

3. Benefits: CSS Grid provides a robust and flexible way to create complex web
layouts with ease. It simplifies the layout process by offering precise control
over the position and sizing of elements, reducing the need for hacks or
workarounds. It also enhances responsiveness, making it easier to create
designs that adapt to different devices and screen sizes.

4. Extra information: CSS Grid can be used in conjunction with other layout
techniques, such as Flexbox, to create even more versatile and powerful
designs. Browser support for CSS Grid is excellent in modern browsers,
although it may require vendor prefixes or fallbacks for older browsers.

6. What is the difference between Grid and Flex?

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 8
 Answer

1. Definition:

Grid: A two-dimensional layout system in CSS, designed for creating

complex and responsive web page layouts along rows and columns.

Flex: A one-dimensional layout system in CSS, designed for distributing

space and aligning content within a container, either horizontally or
vertically.

2. Use case scenarios:

Grid: Suitable for creating complex, two-dimensional layouts with precise

control over rows and columns, such as multi-column designs and intricate
grid-based structures.

Flex: Ideal for simpler, one-dimensional layouts, where content needs to be

distributed and aligned within a container, such as navigation bars, cards, or
form elements.

1. Benefits: Both Grid and Flex offer different advantages for web design. Grid
provides a powerful way to create complex, two-dimensional layouts, while
Flex offers a more straightforward and efficient method for distributing and
aligning content within a container. Depending on the specific layout
requirements, developers can choose the appropriate method to achieve
the desired outcome.

2. Extra information: Grid and Flex can be used together, allowing developers
to create versatile and responsive designs that adapt to various devices
and screen sizes. While both methods are widely supported in modern
browsers, older browsers may require vendor prefixes, fallbacks, or
alternative layout techniques.

7. How do you write an id in inline styling?

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 9
 Answer

1. Definition: Inline styling refers to adding CSS styles directly to an HTML element
using the style attribute. The id attribute is used to assign a unique identifier to
an element for styling or scripting purposes.

2. Use case scenarios: Inline styling with an id can be used when a specific
element on a web page needs unique styling or JavaScript interaction that does
not apply to other elements.

3. Benefits: Inline styling with an id allows for quick, single-element styling without
the need for an external or internal stylesheet. However, it is generally not
recommended for large-scale projects or multiple elements, as it can lead to
code duplication and harder maintenance.

4. Extra information: Although the question refers to using an id in inline styling,

these concepts serve different purposes. Inline styling applies styles directly to
an element, while the id attribute is used for unique identification. To style an
element with a specific id in an external or internal stylesheet, use the '#' symbol
followed by the id value (e.g., #elementID { color: red; } ).

8. What is the difference between Padding and Margin?

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 10
 Answer

1. Definition:

Padding: The space between an element's content and its border, within
the element's box.

Margin: The space around an element's box, outside of the border,

separating it from other elements.

2. Use case scenarios:

Padding: Increase the space around an element's content to improve

readability or aesthetics.

Margin: Create space between elements to separate them visually or align

them within a layout.

3. Benefits: Understanding and utilizing padding and margin allows for precise
control over the positioning and spacing of elements in a web layout. This
improves the overall look and user experience of a website.

4. Extra information: Padding and margin can be set for each side of an element
individually (top, right, bottom, and left) or all at once using shorthand

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 11
 properties. For example, padding: 10px 20px; would apply 10px padding to the
top and bottom, and 20px padding to the left and right sides of an element.

9. What are Selectors in CSS?

Answer

1. Definition: Selectors in CSS are patterns used to target and select HTML
elements in order to apply styles to them. They form the foundation of CSS
rules, determining which elements the styles should be applied to.

2. Use case scenarios: Selectors can target elements based on their element
type, class, id, attribute, or even their relationship to other elements. Examples
of selectors include:

Element type: h1 , p , div

Class: .button , .title

ID: #header , #footer

Attribute: [data-toggle="dropdown"] , [href^="https://"]

Pseudo-class: :hover , :checked

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 12
 Combinators: div > p , ul + p

1. Benefits: CSS selectors provide the flexibility and precision needed to target
specific elements or groups of elements within a web page. By
understanding and using various selectors, developers can efficiently apply
styles to the desired elements, improving the overall look and user
experience of a website.

2. Extra information: CSS selectors can be combined and chained to create

more complex selection patterns. For example, div.container p.highlight
would target <p> elements with the class highlight that are descendants of
a <div> element with the class container . Additionally, selector specificity
determines which styles take precedence when multiple rules target the
same element; generally, more specific selectors will override less specific
ones.

10. What is Flexbox? What are its uses?

Answer

1. Definition: Flexbox, or Flexible Box Layout, is a one-dimensional layout system

in CSS designed for distributing space and aligning content within a container,

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 13
 either horizontally or vertically. It allows developers to control the position, size,
and alignment of elements within a flex container.

2. Use case scenarios: Flexbox is used for a variety of one-dimensional layout

tasks, such as aligning items in a navigation bar, creating responsive card
layouts, or positioning form elements. It is particularly useful for building
modern, responsive websites and web applications where content needs to
adapt to different devices and screen sizes.

3. Benefits: Flexbox provides a simple and efficient way to create flexible,

responsive layouts with ease. It simplifies the alignment and distribution of
content within a container, reducing the need for hacks or workarounds.
Flexbox also enhances responsiveness, making it easier to create designs that
adapt to different devices and screen sizes.

4. Extra information: Flexbox can be used in conjunction with other layout

techniques, such as CSS Grid, to create even more versatile and powerful
designs. Browser support for Flexbox is excellent in modern browsers, although
it may require vendor prefixes or fallbacks for older browsers.

11. What is the difference between Absolute and

Relative positioning in CSS?

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 14
 Answer

1. Definition:

Absolute positioning: An element is positioned relative to its nearest

positioned ancestor or, if no positioned ancestor is found, the initial
containing block. It is removed from the normal document flow, and nearby
elements will not be affected by its position.

Relative positioning: An element is positioned relative to its normal position

in the document flow. It maintains its space in the flow, and other elements
will still respect its original position.

2. Use case scenarios:

Absolute positioning: Useful for creating overlays, tooltips, or floating

elements that need precise positioning within a container.

Relative positioning: Suitable for shifting or nudging an element from its

original position without affecting the layout of surrounding elements.

3. Benefits: Understanding the difference between absolute and relative

positioning allows for precise control over the positioning of elements in a web
layout. This improves the overall look and user experience of a website. Using
the appropriate positioning method ensures better responsiveness, accessibility,
and compatibility with various devices and screen sizes.

4. Extra information: There are other positioning values in CSS, such as static
(the default positioning), fixed , and sticky , which offer different levels of
control over an element's position in the layout. Choosing the right positioning
method depends on the specific requirements of the design and layout.

12. What is the difference between a class and an ID in

CSS?

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 15
 Answer

Definition:

Class: A reusable selector in CSS that can be applied to multiple HTML

elements to apply a specific set of styles.

ID: A unique selector in CSS that should be used to target a single, specific
HTML element for styling or scripting purposes.

Use case scenarios:

Class: Useful for applying consistent styles to a group of elements, such as

buttons, headings, or cards, across a website.

ID: Suitable for targeting a unique element on a page, such as a header,

footer, or specific section, for styling or JavaScript interaction.

Benefits: Understanding the difference between classes and IDs allows

developers to use them appropriately in their stylesheets. Classes provide a
way to apply consistent styles to multiple elements, while IDs enable precise
targeting of unique elements on a web page. This ensures efficient and
maintainable code, improving the overall look and user experience of a website.

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 16
 Extra information: Classes and IDs can be combined with other selectors to
create more specific targeting rules. For example, div#header.navbar would
target a <div> element with the ID header and the class navbar . Additionally, it
is important to note that IDs must be unique within an HTML document,
whereas classes can be used multiple times.

13. How to align the container in the center of the

page?

Answer

1. Definition: Centering a container on a web page involves positioning the

container element so that it appears horizontally and/or vertically centered
within the viewport or its parent element.

2. Use case scenarios: Centering a container may be desired for aesthetic

purposes, such as displaying a login form, a modal, or a "Coming Soon" page,
where the content should be the focal point of the user's attention.

3. Benefits: Aligning a container in the center of a page can improve the overall
appearance and user experience of a website. By centering important content

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 17
 or elements, developers can direct users' attention to specific areas and create
a visually balanced layout.

4. Extra information: There are several methods for centering a container in CSS.
Some common approaches include:

Using Flexbox:

.parent {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* or any desired height */
}

Using CSS Grid:

.parent {
display: grid;
justify-content: center;
align-content: center;
height: 100vh; /* or any desired height */
}

Using position and transform properties:

.parent {
position: relative;
height: 100vh; /* or any desired height */
}

.container {
position: absolute;
top: 50%;

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 18
 left: 50%;
transform: translate(-50%, -50%);
}

These methods can be used to center a container horizontally, vertically, or both.

The choice of method depends on the specific requirements and compatibility
needs of the project.

14. Explain how will you create a rectangle and a circle

into it?

Answer

1. Definition: Creating a rectangle with a circle inside it involves designing two

separate shapes using CSS and positioning them in such a way that the circle
appears centered within the rectangle.

2. Use case scenarios: This design pattern may be employed for various
purposes, such as creating icons, buttons, or other visual elements that
enhance the appearance and user experience of a website.

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 19
 3. Benefits: Combining shapes like rectangles and circles using CSS can result in
visually appealing designs, adding variety and interest to a web page. This
allows developers to create unique and engaging user interfaces.

4. Extra information: To create a rectangle with a circle inside it, you can use
HTML and CSS as follows:

HTML:

<div class="rectangle">
<div class="circle"></div>
</div>

CSS:

.rectangle {
width: 200px;
height: 100px;
background-color: #f00;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}

.circle {
width: 50px;
height: 50px;
background-color: #0f0;
border-radius: 50%;
}

In this example, the outer div with the class rectangle represents the rectangular
shape, while the inner div with the class circle represents the circular shape. By

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 20
 using display: flex , justify-content: center , and align-items: center on the
.rectangle class, the circle is horizontally and vertically centered within the
rectangle.

The dimensions, colors, and other properties of the shapes can be adjusted as
needed to create the desired appearance.

15. What are pseudo-elements and pseudo-classes in

CSS?

Answer

1. Definition:

Pseudo-elements: These are CSS selectors that target specific parts of an

element, such as the first letter, first line, or the content before or after an
element, allowing you to style those parts without modifying the HTML
structure.

Pseudo-classes: These are CSS selectors that target elements based on

their state or position in the document, such as hovering, focus, or a

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 21
 specific child element, enabling dynamic styling without JavaScript.

2. Use case scenarios:

Pseudo-elements: Useful for adding stylistic flourishes to elements, like

custom bullets for list items, drop caps for paragraphs, or adding icons
before or after links.

Pseudo-classes: Commonly used for interactive styles, such as changing

the appearance of a button on hover, or for targeting specific elements in
the DOM, like styling the first or last child of a parent element.

3. Benefits: Pseudo-elements and pseudo-classes provide an efficient way to

apply styles to specific parts or states of an element without altering the HTML
structure or relying on JavaScript. This enables clean, maintainable code and
enhances the overall appearance and user experience of a website.

4. Extra information: Some examples of pseudo-elements and pseudo-classes

include:

Pseudo-elements: ::before , ::after , ::first-letter , ::first-line ,

::marker , ::selection .

Pseudo-classes: :hover , :active , :focus , :checked , :nth-child() , :nth-

last-child() , :first-child , :last-child , :not() .

Pseudo-elements are typically used with the double-colon syntax ( :: ), while

pseudo-classes use a single colon ( : ). However, for backward compatibility, some
older browsers may still support single-colon syntax for pseudo-elements.

16. How to center a div?

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 22
 Answer

1. Definition: Centering a div involves positioning the div element so that it

appears horizontally and/or vertically centered within its parent container or the
viewport.

2. Use case scenarios: Centering a div may be desired for various purposes, such
as aligning a login form, a modal, a "Coming Soon" page, or any other content
that should be the focal point of the user's attention.

3. Benefits: Centering a div can improve the overall appearance and user
experience of a website. By positioning important content or elements in the
center, developers can create a visually balanced layout and direct users'
attention to specific areas.

4. Extra information: There are several methods for centering a div in CSS. Some
common approaches include:

Centering horizontally using margins (for block elements with a specified

width):

.center-div {
margin-left: auto;

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 23
 margin-right: auto;
width: 50%; /* or any desired width */
}

Centering horizontally using Flexbox:

.parent {
display: flex;
justify-content: center;
}

Centering vertically using Flexbox:

.parent {
display: flex;
align-items: center;
height: 100vh; /* or any desired height */
}

Centering both horizontally and vertically using Flexbox:

.parent {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* or any desired height */
}

Centering both horizontally and vertically using CSS Grid:

.parent {
display: grid;
justify-content: center;
align-content: center;

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 24
 height: 100vh; /* or any desired height */
}

Centering both horizontally and vertically using position and transform

properties:

.parent {
position: relative;
height: 100vh; /* or any desired height */
}

.center-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

These methods can be used to center a div horizontally, vertically, or both. The
choice of method depends on the specific requirements and compatibility needs of
the project.

17. What is the difference between HTML and HTML5?

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 25
 Answer

1. Definition:

HTML (Hypertext Markup Language): A standard markup language used to

create and structure content on the web. It is the foundation for web pages
and provides a way to structure text, images, multimedia, and other
elements within a document.

HTML5: The fifth and latest major version of HTML, which introduces new
features, capabilities, and improvements over previous versions. It is
designed to better support multimedia, application development, and
semantic elements for improved structure and accessibility.

2. Use case scenarios:

HTML: Used for creating simple web pages, primarily consisting of text,
images, and basic formatting.

HTML5: Suitable for creating modern web pages and applications that
require multimedia integration, advanced graphics, forms, and interaction
capabilities, such as video players, drag-and-drop functionality, or canvas
elements for creating 2D and 3D graphics.

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 26
 3. Benefits: The transition from HTML to HTML5 has brought several benefits,
including enhanced support for multimedia, better semantic elements for
improved structure and accessibility, and new APIs for creating rich, interactive
web applications. HTML5 reduces the reliance on third-party plugins like Flash,
resulting in faster load times, better performance, and improved compatibility
across devices.

4. Extra information: Some key differences between HTML and HTML5 include:

New semantic elements: HTML5 introduces new elements like <header> ,

<footer> , <nav> , <article> , <section> , and <aside> to better structure

content and improve accessibility.

Multimedia support: HTML5 provides native support for audio and video
playback with the <audio> and <video> elements, eliminating the need for
third-party plugins like Flash.

Graphics and animations: HTML5 introduces the <canvas> element for

creating 2D and 3D graphics and animations using JavaScript, along with
support for scalable vector graphics (SVG) and CSS3 animations.

Improved form elements and validation: HTML5 introduces new input

types, such as email, number, date, and range, as well as built-in validation
and custom validation methods.

Geolocation and local storage: HTML5 supports geolocation APIs for

determining user location and local storage APIs for storing data on the
user's device.

Enhanced performance and optimization: HTML5 provides better support

for asynchronous operations, enabling faster load times and improved
performance for web applications.

It is important to note that HTML5 is now the standard for web development, and
modern browsers have adopted its features and capabilities.

18. What is Doctype in HTML?

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 27
 Answer

1. Definition: Doctype (short for "Document Type Declaration") is an instruction

that informs the browser about the version of HTML being used in a web page.
It is placed at the beginning of an HTML document and ensures that the
browser renders the page according to the correct HTML specifications.

2. Use case scenarios: Doctype is used at the beginning of every HTML

document to specify the HTML version being used, ensuring that the browser
renders the page correctly and consistently across different devices and
browsers.

3. Benefits: Using a Doctype declaration in HTML documents ensures that the

web page is rendered in "standards mode" rather than "quirks mode." This
results in more consistent rendering across different browsers, improved
accessibility, and better support for modern HTML and CSS features.

4. Extra information: The Doctype declaration varies depending on the HTML

version used. For HTML5, the Doctype is simplified and easy to remember:

<!DOCTYPE html>

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 28
 For earlier versions of HTML, the Doctype declaration is more complex and includes
references to a Document Type Definition (DTD). For example, here is the Doctype
for HTML 4.01 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www

It is recommended to use the HTML5 Doctype for modern web development, as it

ensures compatibility with the latest HTML features and standards.

19. What is the difference between min-width and max-

width in media queries?

Answer

1. Definition:

min-width: A property used in media queries to define a minimum viewport

width at which the associated styles should be applied. If the viewport width

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 29
 is equal to or greater than the specified min-width value, the styles within
the media query will take effect.

max-width: A property used in media queries to define a maximum viewport

width at which the associated styles should be applied. If the viewport width
is equal to or smaller than the specified max-width value, the styles within
the media query will take effect.

2. Use case scenarios: Both min-width and max-width are used in media queries
to create responsive designs, adapting the layout and styles of a web page
according to the viewport width. These properties allow developers to target
specific device widths or ranges, ensuring optimal presentation and user
experience across various devices and screen sizes.

3. Benefits: Utilizing min-width and max-width in media queries enables

developers to create responsive designs that adapt to different devices and
screen sizes, improving the user experience, accessibility, and overall web page
performance.

4. Extra information: Some examples of using min-width and max-width in media

queries include:

Applying styles for mobile devices (viewport width up to 767px):

@media (max-width: 767px) {

/* Styles for mobile devices */
}

Applying styles for tablets and larger devices (viewport width 768px and
above):

@media (min-width: 768px) {

/* Styles for tablets and larger devices */
}

Applying styles for a specific range of viewport widths (e.g., between 768px
and 1023px):

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 30
 @media (min-width: 768px) and (max-width: 1023px) {
/* Styles for devices with viewport widths between 768
}

These examples demonstrate how min-width and max-width can be used in media
queries to target specific device widths or ranges, allowing developers to create
responsive designs that adapt to various screen sizes.

20. What are metatags? Why are they used?

Answer

1. Definition: Meta tags are HTML elements used to provide metadata about a
web page. They are placed within the <head> section of an HTML document and
can contain information such as the page's title, description, author, keywords,
and other relevant data. Meta tags do not directly affect the visual appearance
of the web page but can have an impact on its search engine optimization
(SEO) and how it is displayed in search results or when shared on social media
platforms.

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 31
 2. Use case scenarios: Meta tags are used to provide information to search
engines, social media platforms, and other web services about the content of a
web page. They can help improve SEO, make the content more shareable, and
enhance the user experience by providing relevant information when the web
page is shared or displayed in search results.

3. Benefits: Using meta tags can improve a web page's visibility in search engine
results, increase the likelihood of users clicking on the page, and enhance the
presentation of the page when shared on social media platforms. Properly
implemented meta tags can lead to better search engine rankings, increased
organic traffic, and improved user engagement.

4. Extra information: Some common meta tags include:

: Defines the title of the web page, which is displayed in the

<title>

browser's title bar or tab and used by search engines as the main title for
search results.

<title>Page Title</title>

<meta name="description"> : Provides a brief description of the web page's

content, which can be displayed in search engine results and when the
page is shared on social media platforms.

<meta name="description" content="A brief description of t

: Specifies a list of keywords related to the web

<meta name="keywords">

page's content. Although its impact on SEO is debatable, it can still be used
to help search engines understand the content and context of the page.

<meta name="keywords" content="keyword1, keyword2, keyword

<meta name="author"> : Indicates the author of the web page.

<meta name="author" content="Author Name">

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 32
 <meta property="og:title"> , <meta property="og:description"> , <meta

property="og:image">, etc.: Open Graph meta tags used to control how

content is displayed when shared on social media platforms like Facebook
and Twitter.

<meta property="og:title" content="Page Title">

<meta property="og:description" content="A brief descripti
<meta property="og:image" content="URL-to-image">

Implementing relevant and well-structured meta tags can improve a web page's
SEO, user engagement, and overall performance on search engines and social
media platforms.

21. What are CSS positions? What are the position

types in CSS?

Answer

1. Definition: CSS positions are a set of properties used to control the positioning
and layout of HTML elements on a web page. By applying different position

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 33
 values, developers can manipulate the position of elements relative to their
default location, the browser window, or other elements on the page.

2. Use case scenarios: CSS positions are used to create various types of layouts,
control the flow of elements on a page, or create fixed, sticky, or overlapping
elements. They can be used to customize the appearance and organization of
web page content for improved user experience and responsive design.

3. Benefits: Using CSS positions provides flexibility and control over the
placement of elements on a web page, allowing developers to create complex
and visually appealing layouts. It also enables the creation of dynamic and
interactive user interfaces, such as sticky headers, modals, or tooltips.

4. Extra information: There are five position types in CSS:

static : The default position value for all elements. Elements with a static
position are not affected by the top , right , bottom , or left properties and
are positioned according to the normal flow of the document.

: Elements with a relative position are positioned relative to their

relative

normal position in the document flow. The top , right , bottom , and left
properties can be used to adjust the element's position without affecting the
layout of surrounding elements.

: Elements with an absolute position are positioned relative to the

absolute

nearest positioned ancestor element (with a position value other than

static ). If no positioned ancestor is found, the element is positioned
relative to the initial containing block (usually the browser window or
viewport). The top , right , bottom , and left properties can be used to
position the element.

: Elements with a fixed position are positioned relative to the browser

fixed

window or viewport, remaining in the same position even when the page is
scrolled. The top , right , bottom , and left properties can be used to
position the element.

: Elements with a sticky position behave like relative positioned

sticky

elements until a specified scroll position is reached, after which they act like
fixed positioned elements. The top , right , bottom , and left properties

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 34
 can be used to define the scroll position at which the element becomes
fixed.

Using the appropriate CSS position types allows developers to create intricate and
engaging layouts, control element placement, and improve the user experience on a
web page.

22. What are semantics tags?

Answer

1. Definition: Semantic tags are HTML elements that convey meaning about the
structure and content of a web page to both browsers and developers. These
tags provide context and help describe the purpose of the content within the
element, making it easier for search engines to understand and index the page
and for developers to maintain and understand the code.

2. Use case scenarios: Semantic tags are used to structure web pages, improve
accessibility, and provide meaningful information about the content for search
engines and web services. They help create well-organized and easily
interpretable web pages, benefiting both users and developers.

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 35
 3. Benefits: Using semantic tags in HTML documents improves the overall
structure and organization of the content, making it more accessible and user-
friendly. It also enhances search engine optimization (SEO), as search engines
can better understand the purpose and context of the content, potentially
leading to better rankings and visibility.

4. Extra information: Some common semantic tags in HTML include:

<header> : Represents the header of a section or the entire web page,

usually containing the logo, navigation, and other relevant information.

<nav> : Designates a section containing navigation links, helping users

navigate the web page or related pages.

<main>: Indicates the main content of the web page, which is unique and
central to the purpose of the page.

: Represents an independent, self-contained piece of content,

<article>

such as a blog post, news article, or user-generated content.

<section> : Groups related content within a web page or an <article> ,

providing a logical structure for the content.

<aside> : Contains content that is tangentially related to the content around

it, such as sidebars, pull quotes, or supplementary information.

<footer> : Represents the footer of a section or the entire web page,

typically containing copyright information, contact details, or other useful
links.

Using semantic tags helps create a clear and meaningful structure for web content,
which benefits both users and developers by improving accessibility, user
experience, and search engine optimization.

23. What is new in HTML5?

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 36
 Answer

1. Definition: HTML5 is the fifth and latest major version of the HTML standard,
introducing new features, elements, and APIs that enhance the capabilities of
web pages and applications. It is designed to provide better support for
multimedia, improve the semantic structure of documents, and enable more
interactive and dynamic user experiences.

2. Use case scenarios: HTML5 is used in modern web development to create

more engaging and accessible web pages, applications, and experiences. Its
new features, elements, and APIs support multimedia content, provide better
control over the layout and structure of content, and enable the creation of more
interactive web applications.

3. Benefits: HTML5 brings several improvements and benefits over previous

versions of HTML, including:

Enhanced multimedia support through new elements like <video> , <audio> ,

and <canvas> .

Improved semantic structure with the introduction of new elements such as

<header> , <nav> , <main> , <article> , <section> , <aside> , and <footer> .

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 37
 Better form control with new input types and attributes, making it easier to
create more user-friendly and interactive forms.

Improved accessibility and compatibility across different devices and

platforms.

Greater support for web application development with new APIs for features
like offline storage, geolocation, and web workers.

4. Extra information: Some notable features and elements introduced in HTML5

include:

Multimedia elements: <video> and <audio> for embedding video and audio
content, respectively, without the need for third-party plugins like Flash.

Graphics elements: <canvas> for rendering 2D shapes and images, and

<svg> for scalable vector graphics.

New semantic elements: <header> , <nav> , <main> , <article> , <section> ,

<aside> , and <footer> for better document structure.

New form input types: email , tel , url , number , range , date , time , and
more, along with new attributes like placeholder , autofocus , required , and
pattern .

Web application APIs: APIs for features like offline storage (localStorage
and sessionStorage), geolocation, web workers, and more.

HTML5 is a significant advancement in web development, offering developers a

range of new tools and capabilities to create more engaging, accessible, and
dynamic web experiences.

24. How can we put a watermark using HTML?

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 38
 Answer

1. Definition: A watermark is a semi-transparent text or image placed over another

element, often used to indicate copyright, ownership, or branding. To create a
watermark using HTML, you can use CSS to position and style an element with
a lower z-index value over another element.

2. Use case scenarios: Watermarks can be used on web pages for various
purposes, such as:

Indicating ownership or copyright of images or content.

Branding purposes, such as displaying a company logo over images or

videos.

Discouraging unauthorized use or redistribution of content.

3. Benefits: Watermarks can provide visual cues that help protect your content and
establish brand presence. They can discourage unauthorized use of your
content and ensure that viewers can identify the source or owner of the content.

4. Extra information: To create a watermark using HTML and CSS, follow these
steps:

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 39
 a. Create an HTML container element with a relative position, such as a <div>

element.

b. Place the main content and the watermark element (e.g., another <div> ,
<img> , or <span> ) inside the container.

c. Use CSS to position the watermark element with an absolute position and a
lower z-index value than the main content.

d. Style the watermark element with the desired transparency, color, or other
visual properties.

Example code:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}

.watermark {
position: absolute;
bottom: 10px;
right: 10px;
color: rgba(255, 255, 255, 0.5);
font-size: 24px;
z-index: 1;
}

.content {
z-index: 0;
}
</style>
</head>
<body>

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 40
 <div class="container">
<img class="content" src="your_image.jpg" alt="Your Content
<div class="watermark">Your Watermark</div>
</div>

</body>
</html>

This example demonstrates how to create a watermark using HTML and CSS,
positioning a semi-transparent text element over an image element. The same
approach can be applied to other types of content and customized according to your
specific needs.

25. What do the following mean in html5

<section>
<article>
<footer>
<nav>
<aside>

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 41
 Answer

1. Definition: These elements are semantic tags in HTML5 that convey meaning
about the structure and content of a web page. They help create a more
organized and meaningful structure for web content, improving accessibility,
user experience, and search engine optimization.

2. Use case scenarios: These semantic tags are used to structure web pages and
provide meaningful information about the content for search engines, web
services, and developers. They help create well-organized and easily
interpretable web pages, benefiting both users and developers.

3. Benefits: Using semantic tags in HTML documents improves the overall

structure and organization of the content, making it more accessible and user-
friendly. It also enhances search engine optimization (SEO), as search engines
can better understand the purpose and context of the content, potentially
leading to better rankings and visibility.

4. Extra information: Below are brief descriptions of the mentioned semantic tags:

<section> : Groups related content within a web page or an <article> ,

providing a logical structure for the content. It typically represents a

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 42
 thematic grouping of content, such as chapters, tabbed content, or any
related set of items.

<article> : Represents an independent, self-contained piece of content,

such as a blog post, news article, or user-generated content. It is meant to
be reusable and distributable, and can be used as a standalone item or
within a larger context (e.g., within a <section> ).

<footer> : Represents the footer of a section or the entire web page,

typically containing copyright information, contact details, or other useful
links. It can be used at the end of any sectioning content, such as
<article> , <section> , or the entire page.

<nav> : Designates a section containing navigation links, helping users

navigate the web page or related pages. It is intended for major navigation
blocks on a page, such as main menus, table of contents, or breadcrumbs.

<aside> : Contains content that is tangentially related to the content around

it, such as sidebars, pull quotes, or supplementary information. It represents
content that can be considered separate from the main content but still
related to it, and can be used within <article> or <section> elements or on
its own.

By using these semantic tags, developers can create a clear and meaningful
structure for web content, which benefits both users and developers by improving
accessibility, user experience, and search engine optimization.

26. How do you use Video and Audio tags?

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 43
 Answer

1. Definition: The <video> and <audio> tags are HTML5 elements used to embed
video and audio content in a web page, respectively. These elements provide
native multimedia support without the need for third-party plugins like Flash.

2. Use case scenarios: The <video> and <audio> tags are used when you want to
embed multimedia content directly into your web page, such as:

Displaying a promotional video on a company website.

Embedding an instructional video on a tutorial page.

Adding background music or sound effects to a web page.

Streaming podcasts or interviews on a blog.

3. Benefits: Using the <video> and <audio> tags in HTML5 offers several benefits,
such as:

Native multimedia support, eliminating the need for third-party plugins.

Better accessibility and compatibility across different devices and platforms.

More control over the multimedia content with built-in attributes and
JavaScript APIs.

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 44
 4. Extra information: To use the <video> and <audio> tags, follow these steps:
For <video> :

<video width="320" height="240" controls>

<source src="your_video.mp4" type="video/mp4">
<source src="your_video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

For <audio> :

<audio controls>
<source src="your_audio.mp3" type="audio/mpeg">
<source src="your_audio.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>

Replace your_video.mp4 , your_video.ogg , your_audio.mp3 , and your_audio.ogg

with the appropriate file paths.

The controls attribute adds built-in controls like play, pause, and volume to
the multimedia elements.

The <source> element specifies the different file formats for better
compatibility across various browsers. If a browser does not support a
specific format, it will try the next available format.

The text inside the <video> and <audio> tags will be displayed if the browser
does not support these elements.

By using the <video> and <audio> tags, developers can easily embed multimedia
content directly into their web pages, providing a more engaging and interactive
user experience.

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 45
 27. What is a flex-box? Explain justify-content, justify-
items, justify-self, align-items, align-content & align-self

Answer

1. Definition: Flexbox, or Flexible Box Layout, is a CSS layout module that

provides a more efficient way to distribute and align items within a container. It
is designed to handle dynamic sizing and adapt to different screen sizes,
making it an ideal solution for responsive web design.

2. Use case scenarios: Flexbox is used when you need a flexible and adaptive
layout for your web page elements, such as:

Responsively aligning items within a container.

Reordering items within a container based on screen size or device.

Creating dynamic layouts that adapt to available space.

3. Benefits: Flexbox offers several benefits, including:

Simplified and efficient layout management.

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 46
 Automatic adaptation to available space, making it suitable for responsive
designs.

Improved alignment and distribution of items within a container.

4. Extra information: Some important properties in the flexbox layout are:

justify-content : This property aligns items along the main axis (horizontally,
by default) of the flex container. It accepts values such as flex-start , flex-

end , center , space-between , space-around , and space-evenly .

justify-items : This property is not specific to flexbox but to the CSS Box
Alignment Module. It aligns grid items or flex items along the inline (row)
axis. In the case of flexbox, it has no effect unless applied to a flex
container that is also a grid container.

justify-self : Similar to justify-items , this property is not specific to

flexbox. It sets the alignment for an individual item along the inline (row)
axis within its grid or flex container. It has no effect on flex items.

align-items : This property aligns items along the cross axis (vertically, by
default) of the flex container. It accepts values such as flex-start , flex-
end , center , baseline , and stretch .

: This property aligns the flex container's lines within the flex
align-content

container when there is extra space on the cross axis. It accepts values
such as flex-start , flex-end , center , space-between , space-around , and
stretch .

align-self : This property allows individual flex items to override the align-

items value set on the flex container. It accepts the same values as align-

items .

By using flexbox and its properties, developers can create flexible and responsive
layouts that easily adapt to different screen sizes and devices.

Different between CSS and SCSS

What is benefit of SCSS

Know where you stand: Masai self-rating interview preparation [HTML & CSS] 47