DEV Community: Coder Pink

CSS interview question and answer in brief.

Coder Pink — Thu, 06 Mar 2025 09:52:54 +0000

As a web developer, understanding CSS is very essential. CSS (Cascading Style Sheets) is the language used to style and format the layout of web pages. In this blog, we'll explore some common CSS interview questions and their answers to help you ace your next interview. These questions not only test your knowledge but also assess how well you can apply CSS in real-world situations.

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

Class: A class selector targets elements that share the same class attribute. Multiple elements can have the same class, and a class can be used more than once in the CSS.

.example { color: blue; }

id: An ID selector is unique and targets only one element with that specific ID. It can only be used once per page.

#example { color: red; }

2. What is the box model in CSS?

The CSS box model describes the rectangular boxes generated for elements on a web page. Each box consists of four areas:

Content: The actual content of the element.
Padding: Clears an area around the content (inside the border).
Border: A border surrounding the padding.
Margin: Clears an area outside the border, creating space between elements.

3. Explain the difference between inline, block, and inline-block elements.

inline: The element does not start on a new line and only takes up as much width as necessary.
block: The element starts on a new line and takes up the full width of its container.
inline-block: Combines both behaviors: the element is inline but also respects width and height properties.

4. What is the difference between em, rem, and px units in CSS?

px: A fixed-size unit, relative to the resolution of the display.

em: A relative unit that depends on the font size of the element itself or its parent.

rem: A relative unit, but it depends on the root element’s font size, making it more predictable than em.

5. What are CSS pseudo-classes and pseudo-elements?

Pseudo-classes: Used to define the special state of an element. For example:

:hover: Applied when the user hovers over an element.
:focus: Applied when an element gains focus. %}

Pseudo-elements: Used to style specific parts of an element. For example:

::before: Inserts content before an element.
::after: Inserts content after an element.

6. What are the different types of CSS positioning?

static: Default positioning, elements are positioned according to the normal document flow.

relative: Elements are positioned relative to their normal position.

absolute: Positioned relative to the nearest positioned ancestor (not static).

fixed: Positioned relative to the viewport, meaning it stays in place even when the page is scrolled.

sticky: Acts like relative until it reaches a defined scroll position, then it behaves like fixed.

8. What is Flexbox and how does it work?

Flexbox is a layout model that allows for the easy arrangement of elements within a container. It enables you to align items horizontally or vertically with ease.

Key properties include:

display: flex on the container.

justify-content to align items horizontally.

align-items to align items vertically.

flex on items to control their growth and shrinkage within the container.

9. What are media queries and how do they work?

Media queries allow you to apply different styles to elements based on the characteristics of the device (e.g., screen width, height, orientation, print). Example:

@media (max-width: 768px) {
  body { background-color: lightblue; }
}

This will change the background color of the body element on devices with a screen width of 768px or less

11. How can you create a responsive design using CSS?

Use flexible grids or Flexbox for layout.
Apply relative units like em, rem, % instead of fixed units like px.
Utilize media queries to adjust styles based on different screen sizes.
Ensure that images are responsive using max-width: 100% to prevent overflow.

12. What is the z-index property and how does it work?

The z-index property controls the stacking order of elements. Elements with a higher z-index are stacked in front of elements with a lower z-index. It only works on positioned elements (those with position: relative, absolute, fixed, or sticky).

JavaScript Strings and String Methods as a Beginners you should know

Coder Pink — Wed, 03 Jan 2024 06:07:16 +0000

String:

String is basically a sequence of characters that is used for storing and managing text data. JavaScript String is primitive data types and are immutable(means you cannot change the original string).There are two ways to create a string.

Using String Literals

let name = "Hello World";

here you have to enclosed the text inside the double or single quotes.

Using String Object

let name = new String("Hello World");

String Methods :

charAt Method: returns the character from a specified index.

let name = "Hello World";
let value = name.charAt(1);
console.log(value);
//value = e

concat method: Join two or more string together

let str = "Hello ";
let str1 = "World";
let total = str.concat(str1);
console.log(total);
//total = Hello World

replace method: replace the given string with specified replacement values

let str = "Your name";
let replaceValue = str.replace("Your", "My");
console.log(replaceValue);
//My name

search method: It searches a string against a specified values or regular expressions

let text = "Please keep quiet!";
console.log(text.search("keep"));
console.log(text.search(/quiet/));
// 7
//12

note: it will return the first occurrence of the string.

indexOf method: It return the index of first occurrence of the string. It cannot take regular expression values.

let text = "Move ahead!";
let index = text.indexOf("ahead");
console.log(index);
//5

split method: convert a string into array

let text = "Move ahead!";
let value = text.split(" ");
console.log(value);

//[ 'Move', 'ahead!' ]

slice method: extracts a part of a string and returns the extracted part in a new string.
it takes start position and end position(not included) in parameter.

let text = "Move ahead!";
let value = text.slice(6, 10);
console.log(value);

//head

Hope you find this helpful

Learn Ajax in simple way for Beginners (part - a)

Coder Pink — Tue, 04 Apr 2023 05:51:15 +0000

So Here is our question arise what is ajax and how it is work?

Ajax stands for Asynchronous JavaScript and XML
Ajax is used to exchange data with a web server
asynchronously.(asynchronously means it send and receive data in background and do not reload the page every time in doing so).
The reason ajax is famous, for it only change the parts of the page which we are updating or changing instead of reloading the whole web page.
Ajax support non-blocking calls means codes can run simultaneously.

When we are using ajax , JavaScript will make a request to the server and after getting response from server, it will interpret the response and update or show the result on the user screen.

ajax asynchronously communicate with server using XMLHttpRequest.
example:

let ajaxXhr  = new XMLHttpRequest();

here XMLHttpRequest() is object request we have created and stored it in variable name ajaxXhr.

How ajax Works :

When an event(means like a user click a button, hover a mouse etc.) occurred on a webpage.
then this awakes the ajax engine.
ajax engine send the XMLHttpRequest to the server.
then server give the response to the ajax engine in the format of JSON or XML.
after getting the response it will update the webpage(not whole).

easy example of ajax running:

btn.addEventListener("click", ajaxRun);

function ajaxRun(){
let xhr = new XMLHttpRequest();
xhr.open("GET", "file.txt", true);
xhr.send();
}

from above example, we add a event listener to button (btn), means when we click btn , it will run ajaxRun function.
in ajaxRun function, it will create a new XMLHttpRequest() object,
and store it in xhr variable.
then we use object method on xhr for further action.

we use open method in which we have three parameter
open(method, URL , async) i.e it tells where we are transmitting the data. (talk about detail in next part).
send method tells us that the request is send.

Use of Ajax :

it is used for creating dynamic Web apps.
with ajax, we can send and receive data without reloading the webpage.
It makes our web apps interactive and faster

Hope it help... we talk about it more in ajax part-b

Things to know as a Beginner in JSON.

Coder Pink — Fri, 03 Feb 2023 17:27:17 +0000

Things to remember...

JSON stands for JavaScript Object Notation.
JSON is very lightweight as compared to XML.
It is text format for storing and retrieving data.
It is human readable and easy to understand.
It is very good to use JSON rather than XML.
With JSON, can easily integrate with JavaScript.
The file type for JSON files is ".json"

example of JSON...

'{"name":"Tae", "age":26, "bike":null, "isGood" : true}'

in the above example, we can see that JSON is like an object that has key-value pairs. you have to enclose the JSON object with backticks(``).

It can take values as numbers, strings, null, Boolean, array and object.
You can also store an array in array, object in arrays as long as it is readable.



newJson = '{"name":"Tae", "age":26, "bike":null, "isGood" : true}'

//'{"name":"Tae", "age":26, "bike":null, "isGood" : true}'

parsedJson = JSON.parse(newJson)

// {name: 'Tae', age: 26, bike: null, isGood: true}

parsedJson['age']

//26

parsedJson["isGood"]

//true

Store json object in new variable named newJson.

parse the jSON object so that you will get the JavaScript object and can access JavaScript object.

Scope in JavaScript (Block Scope and Function Scope)

Coder Pink — Mon, 05 Sep 2022 08:56:50 +0000

Scope... Scope determines the accessibility of variables.

In JavaScript we'll create variable with var, let, and const keyword. they will create scope, that means we can only access the variable within the scope.

Block Scope: let and const create Block Scope. When we create a variable with let and const, they will create block scope means they can only access the block they are declared or created in.

So let's take a look at the example below:

if (true) {
    let one = "one";
    console.log(one); // "one"
}

console.log(one); // Uncaught Reference Error: one is not defined

From the above example... we can see that we get an error when we console.log to the variable one outside the if statement.
Because variable one is declared within the if statement... its scope is only limited to the if statement. and we cannot access the let one outside the if statement.

Function Scope: Variable that are declared inside of a function will create a function scope. this means you can only access the value within the function there or the parent function.

Let's take a look at the example below:

function fun(b) {
  var a = 12;
  return a + b;
}

fun(5);// 17  fun is being called
console.log(a); // Uncaught Reference Error: a is not defined

From the above example... we can see that we get an error when we were trying to access the variable a outside the function that says a is not defined as we read above.
So remember when you put or declared a variable inside the function, then it is only local to that function.