Deepak Yadav

Basic Interview Questions for FED (1-2 Year Experience – CSS/SCSS)

What is the color of Hello World and why? (PR Review Scenario)

<h1 id="heading" class="text title">hello world</h1>
#heading {
    color: green;
}
h1 {
    color: red;
}
.text {
    color: blue;
}
.title {
    color: yellow;
}
  • What happens if you remove the #heading from the HTML Markup, then what would be the color?
  • Keep on removing css for h1 or .text or .title after each answer to get the candidate’s specificity understanding

What are different ways to target HTML markup using CSS?

Tags        - H1, p, span, button, anchor, input, div....
attributes  - [src*=""], [data-toggle] [class]
classes.    - .title
IDs.        - #heading

What is CSS Specificity?

CSS Specificity determines which style rules take precedence when multiple rules apply to the same element. It is calculated based on the importance of inline styles, IDs, classes, and element selectors.

What is the Box Model?

The Box Model represents the structure of an HTML element, including its content, padding, border, and margin. These layers define how the element is displayed and spaced on the page.

How do you remove a applied position property like position: absolute from an element ?

.element {
    position: absolute; // How will you null the impact of it?
    top: 0;
}
// Answer
.element {
   position: static; // static removes the impact of relative, fixed, absolute, sticky.
}

How are the Media Queries helpful in Website Building?

Allows us to target devices based on their widths and allows us to create responsive websites to enhance user’s website viewing experience.

What are CSS Variables, write a basic syntax example

Custom properties that store reusable values (e.g., colors, sizes) 

:root {
    --primary: red;
}
.button {
    color: var(--primary);
}

What are mixins in SCSS/LESS?

Reusable blocks of CSS that accept arguments to apply dynamic styles efficiently.

Write a basic SCSS mixin to accept text color and background color, and call it on a button class

@mixin styleButton($text-color, $bg-color) {
    color: $text-color;
    background-color: $bg-color;
}

.button {
    @include styleButton(white, blue);
}

Difference between display: none and visibility: hidden

display: none - visually hides element from DOM and does not occupy space

visibility: hidden - visually hides the element from DOM but occupies the space required.

Name different input type attributes (apart from radio, checkbox, text, and password):

  • email
  • number
  • date
  • tel
  • range
  • color

Write JavaScript or jQuery syntax for a button to display an alert ('clicked') without using the onClick attribute:

<button id="btn-cta">Click Me</button>
<script>
// Js
    document.getElementById('btn-cta').addEventListener('click', function() {
        alert('clicked');
    });

// jQuery
$('#btn-cta').click(function() {
    alert('Button clicked!');
});
</script>

Explain the differences between var, const, let

var

  • Function-scoped or globally-scoped
  • Can be redeclared and updated
  • Hoisted to top of scope and initialized as undefined
  • Creates properties on the global window object when declared globally
//js
var x = 1;
var x = 2; // Allowed
x = 3;

let:

  • Block-scoped (only accessible within { })
  • Can be updated but not redeclared in same scope
  • Hoisted but not initialized (temporal dead zone)
  • Helps prevent accidental redeclaration
//js
let y = 1;
let y = 2; // Error: cannot redeclare
y = 2;     // Allowed: can update

const:

  • Block-scoped
  • Cannot be updated or redeclared
  • Must be initialized when declared
  • The binding is immutable, but object properties can still be modified
const z = 1;
z = 2;     // Error: cannot reassign
const z = 2; // Error: cannot redeclare

// However, object properties can be modified
const obj = { name: 'John' };
obj.name = 'Jane'; // Allowed

Best Practices:

  • Best practices:
  • Use const by default
  • Use let when you need to reassign values
  • Avoid var in modern JavaScript

Why do we follow mobile-first development for front-end?

Mobile-first development ensures that websites are optimized for smaller screens before scaling up to larger screens, improving usability and performance on mobile devices.

Best Practices for:

Website Performance

  • Minimize HTTP requests
  • Optimize images
  • Use lazy loading
  • Minify CSS, JS, and HTML
  • Using Prefetch
  • Using Preload

Code Writing (HTML, CSS, JS)

  • Use semantic HTML (lowercase)
  • Follow a standard naming conventions for CSS classes (kebab-case)
  • In CSS, do not prefer IDs for styling unless critical
  • Write modular, reusable JavaScript (camecase)

What is the meaning of Semantic Markup in HTML?

Semantic HTML markup means using HTML elements that clearly describe their meaning and purpose in the content structure, rather than just their presentation. Helpful in SEO and Accessibility

header
footer
aside
article
section
nav
main
...

What do you understand by Accessibility/a11y/WCAG?

Accessibility ensures that websites are usable by everyone, including people with disabilities. WCAG (Web Content Accessibility Guidelines) defines standards for making web content accessible like Color, readability of text and more.

What is the purpose of using the ‘role’ attribute in HTML?

The role attribute defines the functionality and the purpose of an element mainly the accessibility. It provides the additional information for the assistive technologies such as screen readers, to convey the exact meaning of the element to the users with disabilities.

<div role="alert" class="error-message">Session expired. Please log in again.</div>

<button role="tab" aria-selected="true" aria-controls="panel-1">Product Details</button>

<div role="search" aria-label="Site Search">
   <input type="text" placeholder="Search...">
</div>

What does 10vw mean on a page?

10vw means 10% of the viewport’s width.

New CSS Units

Container Query Units (cq*)
- cqi.  : 1% of the container's inline size
- cqb.  : 1% of the container's block size
- cqmin : 1% of the container's smaller dimension
- cqmax : 1% of the container's larger dimension
These enable responsive design based on the parent container rather than viewport

Viewport Units
- svh, lvh, dvh  : Small, large, and dynamic viewport height
- svw, lvw, dvw  : Small, large, and dynamic viewport width
- svi, lvi, dvi  : Small, large, and dynamic viewport inline size
- svb, lvb, dvb  : Small, large, and dynamic viewport block size
These help handle mobile browser interfaces that can change size (like when the URL bar shows/hides)

Relative Length Units
- lh.   : Equal to the line-height of the element
- rlh.  : Equal to the line-height of the root element
- cap.  : Height of capital letters in the font
- ex.   : x-height of the font (height of lowercase 'x')
- ic.   : Used for sizing based on CJK (Chinese/Japanese/Korean) characters
- rex.  : Based on the x-height of the root element's font

Logical Properties Units
- vi. : 1% of viewport inline size
- vb. : 1% of viewport block size
These are useful for writing-mode-independent layouts

Can you detect a device’s landscape and portrait orientation using CSS?

@media (orientation: landscape) {
    /* Landscape styles */
}

@media (orientation: portrait) {
    /* Portrait styles */
}

Difference between inline and block elements:

Block: Elements take up the full width of their container (e.g., <div>).

Inline: Elements take up only as much width as their content (e.g., <span>).

What would be the width of the below <span> tag?

<span style="width: 500px; background: red;">Hello</span>

The width will be equal to the content’s width, as span is an inline element.

CSS Grids and FlexBox

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
</div>

Write a basic syntax to create a grid layout with 3 columns

.parent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

Use media queries to change the 3 column layout to 4 column in viewport greater than 1200px.

Flexbox equivalent for 3 equal columns

.parent {
    display: flex;
    gap: 30px;
}
.flex-container > div {
    flex: 1;
}

Use media query to change the order of the middle div and move it to last. Candidate can use different colors using :nth-child to color the child divs.

CSS Combinators

> : Direct Child. (h2 > span) - targets direct span child of H2

+ : Adjacent Sibling (h2  + p) - targets p after H2 tag

* : Universal Selector - targets every child selector

~ : General Sibling (h2 ~ p) - targets all p tags after h2 tag

$ : Attribute combinator  [src$=".png"] - targets src ending with .png

What are psuedo classes and psuedo elements?

Pseudo-Classes

A pseudo-class defines a special state of an element. It’s used to style elements based on their state, user interactions, or other predefined conditions.

Examples:
:hover - Styles an element when a user hovers over it.
:nth-child() - Styles an element based on its position among siblings
:focus - Styles an element when it is focused.

Pseudo-Elements

A pseudo-element is used to style specific parts of an element, such as the first letter or line of a text block or to insert content before or after an element.

Examples:
::before - Inserts content before the content of an element.
::after - Inserts content after the content of an element.
::first-letter - Styles the first letter of a block of text.

How to add/remove event listeners

const button = document.querySelector('button');

button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick);

How can you target a parent selector in css without js?

:has (allows you to check if given element is present in DOM or not and style the parent selector)

body:has(.menu-open) {
    overflow: hidden;
}
// this code disables body scroll when ".menu-open" class is added to the DOM.

Posted

in

by

Deepak

Tags:

,