Scribd
Upload
4 views

Crio Interview Questions - by own

The document provides a comprehensive overview of HTML and CSS concepts, including how browsers load HTML and JavaScript, the purpose of doctype declarations, and the differences between various HTML elements and versions. It also covers CSS selectors, specificity, the box model, layout techniques like Flexbox and Grid, responsive design, and the Bootstrap framework. Additionally, it explains CSS positioning and the z-index property for controlling element stacking order.

Uploaded by

Anusree
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Crio Interview Questions - by own

The document provides a comprehensive overview of HTML and CSS concepts, including how browsers load HTML and JavaScript, the purpose of doctype declarations, and the differences between various HTML elements and versions. It also covers CSS selectors, specificity, the box model, layout techniques like Flexbox and Grid, responsive design, and the Bootstrap framework. Additionally, it explains CSS positioning and the z-index property for controlling element stacking order.

Uploaded by

Anusree
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Concepts - HTML

Questions
1.​ How does the browser loads HTML and JS files upon visiting a particular website?
2.​ What is the purpose of the 'doctype' declaration in HTML documents?
3.​ What are the differences between block elements, inline elements and inline-block
elements?
4.​ What are the differences between HTML and HTML5?
5.​ What are the differences between semantic and non-semantic HTML tags?
6.​ Explain CSS selectors and their types
7.​ What is CSS selector specificity and how does it work?
8.​ What is CSS Box Model?
9.​ What is the difference between absolute and relative length units in CSS? Provide
examples.
10.​ What is CSS Flexbox?
11.​ What is responsive web design?
12.​ What are the differences between CSS Grids and Flexbox?
13.​ What is Bootstrap?
14.​ What are the different CSS position property values?
15.​ What is z-index in CSS?

Chatgpt Answers

1. How does the browser load HTML and JS files upon visiting a particular website?
When you visit a website, the browser follows these steps to load HTML and JavaScript files:
1.​ DNS Resolution: The browser first resolves the domain name into an IP address
using the Domain Name System (DNS).
2.​ Sending HTTP Request: The browser sends an HTTP request to the server where
the website is hosted.
3.​ Server Response: The server responds by sending the requested HTML document
(and any associated assets like CSS, JavaScript, images, etc.).
4.​ Parsing HTML: The browser begins parsing the HTML document and constructing
the DOM (Document Object Model) tree.
5.​ Fetching External Resources:
○​ The browser identifies external resources like CSS and JavaScript files
(linked with <link> or <script> tags).
○​ It sends additional HTTP requests to fetch those resources.
○​ JavaScript files are executed in the order they appear (unless async or
defer attributes are used).
6.​ Applying Styles: The browser parses CSS files and applies styles to the DOM
elements.
7.​ Rendering: After the HTML and CSS are parsed and styles are applied, the browser
renders the page on the screen.
8.​ Execution of JS: JavaScript files can manipulate the DOM and CSSOM to update
the content and style dynamically (e.g., user interactions, animations, etc.).
2. What is the purpose of the 'doctype' declaration in HTML documents?
The <!DOCTYPE> declaration tells the browser which version of HTML the document is
written in, ensuring that the page is rendered correctly.
●​ In modern web development, <!DOCTYPE html> is used to declare the document
type as HTML5, instructing the browser to render the document in standards mode.
●​ Without a doctype declaration, browsers may switch to quirks mode, which can lead
to inconsistent rendering across different browsers.

3. What are the differences between block elements, inline elements, and inline-block
elements?
●​ Block Elements:
○​ Occupy the entire width of their parent container.
○​ Always start on a new line (they are stacked vertically).
○​ Examples: <div>, <p>, <h1>, <ul>.
●​ Inline Elements:
○​ Do not start on a new line and only occupy the width necessary for their
content.
○​ They can be placed inside block elements and other inline elements.
○​ Examples: <span>, <a>, <strong>, <em>.
●​ Inline-block Elements:
○​ Behave like inline elements (do not start on a new line), but they can have set
widths and heights like block elements.
○​ Examples: <button>, <img>, <input>.

4. What are the differences between HTML and HTML5?


●​ HTML5 is the latest version of HTML and comes with new features and
improvements over previous versions of HTML.​
​
Key Differences:​

○​ New Semantic Elements: HTML5 introduces new tags like <article>,


<section>, <nav>, <header>, <footer>, etc., to improve the structure
and meaning of web content.
○​ Audio and Video: HTML5 has native support for embedding audio and video
using the <audio> and <video> tags, without the need for third-party
plugins (e.g., Flash).
○​ Local Storage: HTML5 introduces localStorage and sessionStorage for
storing data on the client side.
○​ Geolocation API: HTML5 supports the Geolocation API, allowing websites to
access the user's location.
○​ Forms: HTML5 introduces new input types (e.g., email, date, range) and
attributes (e.g., placeholder, required).
○​ Deprecated Tags: Tags like <font>, <center>, and <marquee> have
been deprecated in HTML5.

5. What are the differences between semantic and non-semantic HTML tags?
●​ Semantic HTML Tags:
○​ These tags describe the meaning of the content enclosed within them,
providing context for both developers and search engines.
○​ Examples: <article>, <section>, <header>, <footer>, <nav>,
<main>.
○​ They improve accessibility and SEO (Search Engine Optimization).
●​ Non-Semantic HTML Tags:
○​ These tags do not convey any meaning about their content; they are used
mainly for structuring or styling the page.
○​ Examples: <div>, <span>.
○​ These elements require additional context or class names to define their
purpose.

6. Explain CSS selectors and their types.


CSS selectors are patterns used to select and style elements in an HTML document.
Common types include:
●​ Universal Selector (*): Selects all elements.
* {​
color: red;​
}
●​ Type Selector (Element Selector): Selects all elements of a specific type.
p {​
font-size: 16px;​
}
●​ Class Selector (.): Selects all elements with a specific class.
.my-class {​
background-color: yellow;​
}
●​ ID Selector (#): Selects a specific element with an ID.
#my-id {​
border: 1px solid black;​
}
●​ Attribute Selector: Selects elements with a specific attribute.
a[href] {​
color: blue;​
}
●​ Pseudo-classes (:): Selects elements based on their state.
a:hover {​
text-decoration: underline;​
}
●​ Pseudo-elements (::): Selects parts of an element.
p::first-letter {​
font-size: 2em;​
}

7. What is CSS selector specificity and how does it work?


CSS specificity determines which CSS rule is applied when multiple rules target the same
element. The more specific the selector, the higher its priority.
Specificity Hierarchy:
1.​ Inline styles: style="color: red;" (highest specificity).
2.​ IDs: #id-name
3.​ Classes, attributes, pseudo-classes: .class-name, [type="text"], :hover
4.​ Elements and pseudo-elements: div, p, ::before (lowest specificity)
Example:
#header { color: blue; } /* Specificity: 1 (ID selector) */​
.container { color: green; } /* Specificity: 10 (Class selector) */​
div { color: red; } /* Specificity: 100 (Element selector) */

In case of conflicting styles, the rule with higher specificity is applied.

8. What is the CSS Box Model?


The CSS Box Model describes the rectangular boxes generated for elements in the
document. It consists of:
●​ Content: The actual content of the box (text, images).
●​ Padding: Space between the content and the border.
●​ Border: Surrounds the padding (optional).
●​ Margin: Space outside the border, separating the element from others.
Diagram:
| Margin | Border | Padding | Content |

The total width and height of an element are calculated as:


●​ Total Width = Content Width + Left Padding + Right Padding +
Left Border + Right Border + Left Margin + Right Margin
●​ Total Height = Content Height + Top Padding + Bottom Padding +
Top Border + Bottom Border + Top Margin + Bottom Margin

9. What is the difference between absolute and relative length units in CSS? Provide
examples.
●​ Absolute Length Units: Fixed units that are not affected by any other factors (e.g.,
screen size, parent elements).​

○​ Examples: px, cm, mm, in, pt, pc.


Example:
width: 200px;​
height: 5in;
○​
●​ Relative Length Units: Units that are relative to other factors, such as the parent
element or viewport size.​

○​ Examples: %, em, rem, vw, vh, ch.


Example:
width: 50%;​
font-size: 2em;​
height: 100vh;
Relative units like em and rem scale dynamically, making them useful for responsive design,
while absolute units like px are fixed.

10. What is CSS Flexbox?


CSS Flexbox (Flexible Box Layout) is a layout model that allows you to design complex
layouts using a one-dimensional space (either horizontally or vertically). It enables more
efficient alignment, distribution of space, and resizing of elements within a container.
Key Features:
●​ Flex container: The parent element where the flex properties are applied.
●​ Flex items: The child elements within the flex container.
●​ Flex direction: Defines the direction of the flex container (row or column).
●​ Justify-content: Aligns items along the main axis (horizontal or vertical).
●​ Align-items: Aligns items along the cross axis (perpendicular to the main axis).
●​ Align-self: Allows individual items to be aligned differently than the others.
●​ Flex-grow, flex-shrink, and flex-basis: Control how the items grow, shrink, or
maintain their size.
Flexbox is ideal for creating layouts that need to adjust dynamically to different screen sizes
and content sizes.

11. What is responsive web design?


Responsive Web Design is an approach to web design that makes web pages render well
on a variety of devices and screen sizes, from small mobile screens to large desktop
monitors. It involves using a combination of flexible layouts, media queries, and fluid images
to create a website that adapts to the user’s device.
Key principles:
●​ Fluid grids: Use relative units like percentages instead of fixed pixel values for
layout elements.
●​ Media queries: Apply different styles based on the screen size, resolution, or
orientation of the device.
●​ Flexible images: Images and other media resize to fit different screen sizes using
CSS techniques like max-width: 100%.
This approach ensures that users have a consistent and optimized experience, regardless of
the device they’re using.

12. What are the differences between CSS Grids and Flexbox?
Both CSS Grid and CSS Flexbox are powerful layout systems, but they serve different
purposes and are used in different scenarios:
●​ CSS Grid:​

○​ Designed for creating two-dimensional layouts (both rows and columns).


○​ Allows precise control over both the rows and columns of the layout.
○​ Suitable for complex layouts with multiple rows and columns.
○​ Provides a more comprehensive way to control the positioning and sizing of
items.
○​ Works best when you need to align content both horizontally and vertically.
Example:
.grid-container {​
display: grid;​
grid-template-columns: repeat(3, 1fr);​
grid-gap: 10px;​
}
●​
●​ CSS Flexbox:​

○​ Designed for one-dimensional layouts (either rows or columns).


○​ Great for aligning items along a single axis (horizontal or vertical).
○​ More straightforward to use for simpler layouts.
○​ Allows items to adjust their size dynamically based on available space.
Example:
.flex-container {​
display: flex;​
justify-content: space-between;​
}
●​
When to use:
●​ Flexbox is better for linear layouts (like navigation bars or simple form layouts).
●​ Grid is better for more complex layouts where you need to control both rows and
columns.

13. What is Bootstrap?


Bootstrap is a popular front-end framework that helps developers build responsive,
mobile-first web applications quickly. It provides pre-designed, ready-to-use components like
grids, buttons, forms, navigation bars, and modals, along with utilities for spacing, alignment,
and layout.
Key Features:
●​ Grid system: A 12-column responsive grid system that adapts to different screen
sizes.
●​ Pre-styled components: Includes UI components like buttons, dropdowns, alerts,
and modals.
●​ Customizable: Allows developers to customize themes using Sass variables.
●​ JavaScript components: Includes interactive elements like carousels, modals,
tooltips, and more.
Bootstrap helps streamline development and ensures consistent styling across browsers.

14. What are the different CSS position property values?


The position property in CSS specifies how an element is positioned within its container.
The main values are:
static: The default position. The element is positioned according to the normal document
flow (top, right, bottom, and left properties do not work).
position: static;
1.​ relative: The element is positioned relative to its normal position in the document
flow. You can use top, right, bottom, and left to adjust its position.
position: relative;​
top: 10px;
2.​ absolute: The element is positioned relative to its nearest positioned ancestor (i.e.,
an ancestor element with a position other than static).
position: absolute;​
top: 20px;​
left: 10px;
3.​ fixed: The element is positioned relative to the viewport (the browser window),
meaning it stays in the same place even when the page is scrolled.
position: fixed;​
top: 0;​
left: 0;
4.​ sticky: The element is treated as relative until the page is scrolled to a certain point,
at which it becomes fixed in place.
position: sticky;​
top: 0;

15. What is z-index in CSS?


The z-index property in CSS controls the stacking order of elements on the z-axis (which
runs perpendicular to the screen). It determines which elements appear in front of or behind
others.
●​ Higher values of z-index are placed in front of lower values.
●​ Only elements that have a position value other than static (i.e., relative,
absolute, fixed, sticky) can have a z-index applied.
Example:
div {​
position: absolute;​
z-index: 10;​
}​
​
div.overlay {​
position: absolute;​
z-index: 20; /* The overlay will appear on top of the first div */​
}

In this example, .overlay will be stacked above the first div because its z-index is
higher.

You might also like