Skip to Content
We Are Launched v1.0
Get StartedHTML CSSAdvanced

1. What is the purpose of ARIA (Accessible Rich Internet Applications)?

ARIA attributes improve accessibility by providing extra context to screen readers.

<button aria-label="Close Menu">✖</button>
<nav role="navigation" aria-labelledby="main-nav"></nav>

Common ARIA attributes:

  • aria-label
  • aria-hidden
  • aria-expanded
  • role

2. What is the difference between async and defer in <script>?

Both load scripts asynchronously, but behave differently:

<!-- Loads async, may execute before HTML finishes -->
<script src="app.js" async></script>
 
<!-- Waits until HTML is parsed, then runs in order -->
<script src="app.js" defer></script>
  • Use defer for predictable execution order.
  • Use async for analytics or third-party tools.

3. What is the contenteditable attribute?

Allows users to directly edit the content inside an HTML element.

<div contenteditable="true">Click to edit this text.</div>

4. How do you use the <template> tag in HTML?

The <template> tag defines reusable HTML that is not rendered until you use JavaScript to insert it.

<template id="card">
  <div class="card">
    <h3></h3>
    <p></p>
  </div>
</template>
const template = document.getElementById("card");
const clone = template.content.cloneNode(true);
clone.querySelector("h3").textContent = "Hello!";
document.body.appendChild(clone);

5. What are custom data attributes (data-*) and why are they useful?

Custom attributes used to store extra data for JavaScript access without polluting HTML semantics.

<div data-id="101" data-role="admin">Admin User</div>
const el = document.querySelector("[data-id]");
console.log(el.dataset.id); // "101"

6. What is the Shadow DOM?

Shadow DOM lets you encapsulate HTML/CSS inside a component to avoid style or DOM conflicts.

<custom-card></custom-card>
 
<script>
  class CustomCard extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: "open" });
      shadow.innerHTML = `<style>h1 { color: red; }</style><h1>Title</h1>`;
    }
  }
 
  customElements.define("custom-card", CustomCard);
</script>

7. What is the <meta> tag used for?

Defines metadata about the document (not visible on page). Common uses:

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Free Web tutorials" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Preload tells the browser to fetch resources early.

<link rel="preload" href="hero.jpg" as="image" />
<link rel="preload" href="main.css" as="style" />

This reduces perceived load time.

9. How do HTML5 input types improve form validation?

HTML5 added input types that automatically validate user input:

<input type="email" required />
<input type="number" min="1" max="10" />
<input type="url" />
<input type="date" />

No JS required for basic validation.

10. What are the differences between inline, internal, and external CSS?

  • Inline: inside tag via style=""
  • Internal: in <style> block in <head>
  • External: linked via <link> tag
<!-- Inline -->
<p style="color: red;">Text</p>
 
<!-- Internal -->
<style>
  p {
    color: blue;
  }
</style>
 
<!-- External -->
<link rel="stylesheet" href="styles.css" />

CSS Questions

1. What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of HTML elements on a webpage.

It controls:

  • Layout
  • Colors
  • Fonts
  • Spacing
  • Animations
  • Responsive design

CSS allows developers to separate content (HTML) from design, making websites easier to maintain and style consistently.

2. What are the advantages of using CSS?

Here are some key advantages of using CSS:

  • Separation of content and style: Keeps HTML clean by separating structure from presentation.
  • Reusability: Styles can be reused across multiple pages using external stylesheets.
  • Improved maintainability: Updates to design can be done from a single CSS file.
  • Faster page loading: Reduces repetitive styling in HTML, resulting in smaller file sizes.
  • Consistency: Ensures a uniform look and feel across the entire website.
  • Responsive design: Enables styling for different screen sizes and devices using media queries.
  • Accessibility: CSS improves accessibility through layout control and screen-reader-friendly designs.

3. What are the disadvantages of CSS?

While CSS offers many benefits, there are a few disadvantages to be aware of:

  • Browser compatibility issues: Not all browsers render CSS the same way, requiring extra effort for cross-browser support.
  • Complexity in large projects: Managing large stylesheets can become difficult without proper structure or naming conventions.
  • Global scope (in plain CSS): Styles can unintentionally affect other elements unless scoped carefully.
  • Lack of logic: Traditional CSS lacks programming features like loops or conditionals (though preprocessors like SASS help).
  • Learning curve with advanced features: Responsive design, flexbox, grid, and animations may take time to master.

4. Explain the CSS Box Model

The CSS box model describes how elements are structured on a web page. It consists of:

  • Content: The actual content inside the element, such as text or images.
  • Padding: The space between the content and the border of the element.
  • Border: The edge around the padding and content.
  • Margin: The space outside the border, separating the element from other elements.

5. Differentiate between CSS3 and CSS2

Here are the key differences between CSS3 and CSS2:

FeatureCSS2CSS3
VersionOlder versionLatest major version
ModulesMonolithic (no modules)Divided into modules (e.g., Flexbox, Grid, Animations)
Media QueriesNot supportedSupported for responsive design
SelectorsLimited selector supportAdvanced selectors like :nth-child, :not()
Animations & TransitionsNot availableFully supported
Flexbox & GridNot availableSupported
Rounded Corners & ShadowsNot supportedSupported with properties like border-radius, box-shadow

6. What is the difference between id and class selectors in CSS?

Featureid Selectorclass Selector
Syntax#idName.className
UniquenessMust be unique per elementCan be reused on multiple elements
SpecificityHigher specificityLower specificity
Use caseTarget a single unique elementStyle a group of similar elements
Example#header { color: red; }.title { font-size: 18px; }

Summary:

  • Use id for unique elements (like a single header or footer).
  • Use class for reusable styles across multiple elements.

7. How can CSS be integrated into an HTML page?

CSS can be integrated into an HTML page in three main ways:

  1. Inline CSS

    • Applied directly to an HTML element using the style attribute.
    • Example: 
      <p style="color: blue;">This is a blue paragraph.</p>

  2. Internal CSS

    • Defined within a <style> tag inside the <head> section of the HTML file.
    • Example: 
      <head>
  <style>
    p {
      color: green;
    }
  </style>
</head>

  3. External CSS

    • Written in a separate .css file and linked to the HTML file using the <link> tag.
    • Example: 
      <head>
  <link rel="stylesheet" href="styles.css" />
</head>

Best Practice:

Use external CSS for better maintainability and reusability across multiple pages.

8. How does Flexbox work in CSS?

Flexbox (Flexible Box Layout) is a CSS layout module designed to arrange items in a container, even when their size is unknown or dynamic.

Key Concepts:

  • The container is made a flex container by setting display: flex;.
  • Flex items inside the container can be laid out horizontally or vertically.
  • Flexbox manages the alignment, direction, spacing, and order of items easily.

Common Flexbox properties:

  • flex-direction: Defines the main axis (row, column, row-reverse, column-reverse).
  • justify-content: Aligns items along the main axis (flex-start, center, space-between, etc.).
  • align-items: Aligns items along the cross axis (stretch, center, flex-start, etc.).
  • flex-wrap: Controls whether items wrap onto multiple lines.
  • flex-grow, flex-shrink, flex-basis: Control how items grow, shrink, and their initial size.

Example:

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

9. How can you use CSS to control image repetition?

In CSS, you control background image repetition using the background-repeat property.

Common values:

  • repeat (default): The background image repeats both horizontally and vertically.
  • repeat-x: The image repeats only horizontally.
  • repeat-y: The image repeats only vertically.
  • no-repeat: The image does not repeat.
  • space: The image is repeated as much as possible without clipping, with space between.
  • round: The image is repeated and scaled to fill the space without clipping.

Example:

.element {
  background-image: url("image.png");
  background-repeat: no-repeat;
}

10. Explain Responsive Web Design

Responsive Web Design (RWD) is an approach to web development that ensures websites adapt smoothly to different screen sizes and devices (desktops, tablets, mobiles).

Key principles:

  • Fluid grids: Layouts use relative units like percentages instead of fixed pixels.
  • Flexible images: Images scale within their containing elements to prevent overflow.
  • Media queries: CSS rules apply conditionally based on device characteristics like width, height, resolution, etc.

Example of a media query:

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}
Last updated on
IntermediateBasic