DEV Community: Abimanyu P

HTML, CSS and Bootstrap Interview Questions

Abimanyu P — Thu, 20 Aug 2026 02:49:45 +0000

HTML Interview Questions

1. What is HTML?

HTML stands for HyperText Markup Language. It is used to create the structure of a webpage. We use HTML to create headings, paragraphs, images, links, buttons, forms, tables and other elements.

2. What are semantic tags?

Semantic tags tell us what the content is about. Some examples are <header>, <nav>, <main>, <section>, <article> and <footer>.

For example, instead of using a <div> for navigation, we can use <nav>. It makes the code easier to understand and also helps accessibility and SEO.

3. What is the difference between div and span?

div is normally a block-level element and span is normally an inline element.

<div>This is a div</div>
<span>This is a span</span>

A div normally starts from a new line, while a span stays in the same line. But we can change their behavior using CSS.

4. What is the difference between id and class?

An id is normally used for one unique element, while a class can be used for multiple elements.

<div id="header"></div>

<div class="card"></div>
<div class="card"></div>

We use # to select an id and . to select a class in CSS.

CSS Interview Questions

5. What is the CSS Box Model?

The CSS box model explains how the size of an HTML element is calculated.

It contains:

Content → Padding → Border → Margin

For example:

.box {
    padding: 20px;
    border: 2px solid black;
    margin: 10px;
}

Understanding the box model is very important because it helps us understand why an element is taking more or less space than expected.

6. What is CSS specificity?

Sometimes multiple CSS rules are applied to the same element. Specificity decides which rule gets higher priority.

A simple order to remember is:

Inline style > ID > Class > Element

For example:

p {
    color: blue;
}

.text {
    color: red;
}

If a paragraph has the text class, the class selector normally has higher specificity than the element selector.

This becomes especially important when we work with Bootstrap and try to override its styles.

7. What is Flexbox?

Flexbox is a CSS layout system used to arrange elements in a row or column.

.container {
    display: flex;
}

Some important Flexbox properties are:

justify-content
align-items
flex-direction
flex-wrap
gap

Flexbox is very useful for creating navigation bars, cards, buttons and for centering elements.

8. What is the difference between justify-content and align-items?

This is one of the questions that can easily confuse beginners.

In the default flex-direction: row:

justify-content works on the main axis, which is normally horizontal.

align-items works on the cross axis, which is normally vertical.

For example:

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

This can be used to center an element horizontally and vertically.

9. What is flex-wrap?

Normally, flex items try to stay in one line. If we want the items to move to the next line when there is not enough space, we use flex-wrap.

.container {
    display: flex;
    flex-wrap: wrap;
}

This is very useful when creating responsive card layouts.

10. What is the difference between relative and absolute positioning?

position: relative keeps the element in the normal document flow and can also create a positioning reference for its descendants.

position: absolute removes the element from the normal document flow and positions it relative to the nearest positioned ancestor.

A common example is:

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 0;
    right: 0;
}

Here, the child is positioned relative to the parent.

11. What are media queries?

Media queries allow us to apply different CSS styles depending on conditions such as screen width.

For example:

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

This is one of the main techniques used to make websites responsive.

12. What is responsive web design?

Responsive web design means making a website work properly on different screen sizes like mobile, tablet and desktop.

We can use:

Flexbox
CSS Grid
Media queries
Relative units
Responsive images
Bootstrap's responsive grid

The main goal is that the website should adapt instead of creating a completely separate website for every device.

13. What is the difference between %, vw, em and rem?

These are different relative CSS units.

% is usually relative to another size such as the parent's size.

vw means viewport width.

em is relative to the font size of the relevant element or context.

rem is relative to the root HTML element's font size.

For example:

.box {
    width: 50%;
    font-size: 2rem;
}

We should choose the unit based on what we are trying to achieve instead of using one unit everywhere.

14. What is the difference between display: none, visibility: hidden and opacity: 0?

These three can make an element invisible, but they behave differently.

display: none removes the element from the layout.

visibility: hidden hides the element but its space is still reserved.

opacity: 0 makes the element completely transparent, but the element normally remains in the layout and can still interact with the user depending on other CSS.

This is a very common practical interview question.

Bootstrap Interview Questions

15. What is Bootstrap?

Bootstrap is a frontend framework that provides ready-made CSS classes and components.

For example, instead of writing all the CSS for a button ourselves, we can use:

<button class="btn btn-primary">
    Click Me
</button>

Bootstrap helps us build websites faster, especially when creating responsive layouts.

16. What is the Bootstrap grid system?

Bootstrap uses a 12-column grid system.

For example:

<div class="row">
    <div class="col-6">A</div>
    <div class="col-6">B</div>
</div>

Here, each column takes 6 out of 12 columns, so we get two equal sections.

If we use col-2:

12 ÷ 2 = 6

So six col-2 elements can fit into one row when enough space is available.

17. What are container, row and col in Bootstrap?

These are commonly used together to create a Bootstrap layout.

<div class="container">
    <div class="row">
        <div class="col-6">
            Content
        </div>

        <div class="col-6">
            Content
        </div>
    </div>
</div>

container provides the main layout container.

row creates the row.

col-* controls how much width each column takes in the 12-column grid.

18. What are Bootstrap responsive classes?

Bootstrap provides responsive classes that allow an element to have different widths at different breakpoints.

For example:

<div class="col-12 col-md-6 col-lg-4">

This can mean:

Small screens → 12 columns
Medium screens → 6 columns
Large screens → 4 columns

This makes responsive layouts much easier to create.

19. How can we override Bootstrap CSS?

We can write our own CSS after loading Bootstrap.

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="style.css">

Then we can write our custom style in style.css.

.my-button {
    background-color: black;
}

If there is a conflict, CSS specificity, source order and sometimes !important can affect which style wins.

We should not use !important everywhere because it can make the CSS difficult to manage.

20. What is the difference between Bootstrap and CSS?

CSS is the actual styling language used to style webpages.

Bootstrap is a framework built mainly using CSS, along with JavaScript components.

With normal CSS, we write our own styles:

button {
    background-color: blue;
    padding: 10px 20px;
}

With Bootstrap, we can use ready-made classes:

<button class="btn btn-primary">
    Click
</button>

So Bootstrap doesn't replace CSS completely. Understanding CSS is still important even when using Bootstrap.

web page hosting

Abimanyu P — Mon, 17 Aug 2026 03:23:26 +0000

How to Host a Website Using GitLab Pages

If you have a website made with HTML and CSS, you can host it for free using GitLab Pages. GitLab Pages takes the files from your GitLab repository and publishes them as a website. For this, you need to create a .gitlab-ci.yml file. This file tells GitLab how to deploy your website. After pushing the file to your repository, GitLab creates a pipeline. When the pipeline finishes successfully, GitLab Pages gives you a URL which you can open in a browser to see your live website.

Understanding the Pipeline

A pipeline is the process GitLab uses to run the instructions written in .gitlab-ci.yml. If the pipeline fails, the website will not be deployed correctly. Sometimes the pipeline can fail because of an invalid YAML file, incorrect indentation, unverified account or a problem in the deployment commands. Another common problem is trying to create a public folder when the folder already exists. For a simple HTML and CSS website, the important thing is that the public folder contains your website files and index.html should be directly inside it.

For example, the structure should look like this:

public/
├── index.html
├── style.css
└── images/

The index.html file is important because it is the main page GitLab Pages looks for when someone opens the website.

Hosting More Than One Website

You can host multiple websites using GitLab Pages, but if the websites are completely different projects, it is better to create a separate GitLab project for each website. For example, you can have one project called youtube-clone and another project called portfolio. Each project can have its own HTML, CSS, .gitlab-ci.yml, pipeline and Pages deployment. This makes the projects easier to manage and prevents one website from affecting another website.
So, GitLab is not only a place to store your code. With GitLab Pages and CI/CD pipelines, you can also use it to turn your HTML and CSS project into a live website that can be accessed through the internet.

JavaScript Variables

Abimanyu P — Fri, 14 Aug 2026 03:40:33 +0000

JavaScript Variables

A variable in JavaScript is a place where we can store some data and use it later in our program. We can store a name, age, number, text, or many other types of data inside a variable. For example, let name = "John"; stores the name John and let age = 20; stores the number 20. We can then use these values whenever we need them.

let name = "John";
let age = 20;

console.log(name);
console.log(age);

JavaScript has three keywords for creating variables: let, const, and var. They all create variables, but the way they work is different.

let, const and var

let

let is used when we want to create a variable whose value can be changed later. For example, if a person's age is 20 today and becomes 21 later, we can use let.

let age = 20;
age = 21;

console.log(age);

This is allowed because let variables can be reassigned. But we cannot declare the same let variable again in the same scope.

let age = 20;
let age = 21; // Error

So we can simply remember let = the value can be changed.

const

const is used when we don't want to reassign a variable after creating it. For example, if we create a variable for a value that should not be replaced, we can use const.

const pi = 3.14;
pi = 3.14159; // Error

A const variable must also have a value when it is created, so this will give an error:

const age; // Error

One thing that can be confusing is arrays and objects. A const array or object can still have its contents changed.

const fruits = ["Apple", "Banana"];

fruits.push("Mango");

This works because we are changing the contents of the array, not assigning a completely new array to the variable. But trying to replace the whole array will give an error.

fruits = ["Orange"]; // Error

So we can remember const = the variable cannot be reassigned.

var

var is the older way of creating variables in JavaScript. It can be reassigned just like let, and it can also be declared again with the same name.

var age = 20;
age = 21;

var age = 22;

This works without an error. However, this old behavior can sometimes cause unexpected problems, especially in larger programs. Because of this, modern JavaScript normally uses let and const instead of var.

Scope

Another important difference between these three is scope. Scope simply means the area of the program where a variable can be accessed. let and const are block scoped, which means they only work inside the { } block where they were created.

if (true) {
    let x = 10;
    const y = 20;
}

console.log(x); // Error
console.log(y); // Error

But var does not follow block scope in the same way.

if (true) {
    var x = 10;
}

console.log(x); // 10

This is one of the important reasons why let and const are safer and easier to work with in modern JavaScript.

Common Errors

There are a few common errors that can happen when working with these variables. If we try to declare the same let or const variable twice in the same scope, JavaScript gives a SyntaxError.

let x = 10;
let x = 20; // SyntaxError

If we try to use a let or const variable before its declaration, we get a ReferenceError.

console.log(x);
let x = 10; // ReferenceError

This happens because let and const have a period called the Temporal Dead Zone, where the variable exists but cannot be accessed before its declaration.

var behaves differently because of hoisting.

console.log(x);
var x = 10;

This does not give a ReferenceError. It prints undefined. The declaration of var is hoisted, but its value is assigned only when JavaScript reaches the assignment.

We can also get a TypeError when we try to reassign a const variable.

const x = 10;
x = 20; // TypeError

Java Scripts

Abimanyu P — Fri, 14 Aug 2026 02:47:48 +0000

JavaScript and Its History

JavaScript is a programming language mainly used to make websites interactive and dynamic. HTML is used to create the structure of a webpage and CSS is used to design it, while JavaScript is used to add actions and behavior to the webpage. For example, we can use JavaScript to create buttons that perform an action, validate forms, create animations, change HTML and CSS, and many other things. JavaScript can also be used outside the browser for backend development using Node.js.

History of JavaScript

JavaScript was created in 1995 by Brendan Eich while he was working at Netscape. The language was created very quickly and was first called Mocha. Later it was renamed LiveScript and finally JavaScript. Even though the names Java and JavaScript are similar, they are two different programming languages.

As JavaScript became popular, there was a need for a common standard. This is where ECMA International comes in. ECMA International is an organization that creates technology standards. It created the standard for JavaScript called ECMAScript. JavaScript follows the ECMAScript standard.

The first ECMAScript standard was released in 1997. Later, many new versions were released. One of the most important versions was ES6 (ECMAScript 2015), which introduced features like let, const, arrow functions, classes, promises, and modules.

Today JavaScript is not only used for webpages. It is also used for backend development, mobile applications, desktop applications, and many other areas. Because of this, JavaScript has become one of the most important languages in modern web development.

CSS Selectors

Abimanyu P — Tue, 11 Aug 2026 04:47:58 +0000

CSS Selectors

CSS selectors are used to select HTML elements and apply styles to them. We already know basic selectors like class, id, and element selectors. But CSS has many more selectors that help us select elements more precisely.

For example, instead of giving every paragraph the same style, we can select only the paragraph that comes after a heading, or only the input with a particular type.

1. Child and Sibling Selectors

Child Selector `>`

The > selector selects only the direct child of an element.

<div>
    <p>Hello</p>

    <section>
        <p>World</p>
    </section>
</div>

div > p {
    color: red;
}

Here, only Hello becomes red because it is directly inside the div.

The World paragraph is not selected because it is inside the section.

Descendant Selector

A space between two selectors means that the second element is somewhere inside the first element.

div p {
    color: blue;
}

This selects all <p> elements inside the <div>, even if there are other elements between them.

So remember:

div p     /* p anywhere inside div */
div > p   /* p directly inside div */

Adjacent Sibling `+`

The + selector selects the element that comes immediately after another element.

<h2>Heading</h2>
<p>Hello</p>
<p>World</p>

h2 + p {
    color: red;
}

Only Hello is selected because it is immediately after the <h2>.

General Sibling `~`

The ~ selector selects all matching siblings that come after an element.

h2 ~ p {
    color: blue;
}

If there are three <p> elements after the <h2>, all three will be selected.

The difference is:

h2 + p   /* only the next p */
h2 ~ p   /* all p elements after h2 */

2. Attribute Selectors

Attribute selectors are very useful when working with forms, links and images.

`[attribute]`

This selects elements that have a particular attribute.

<input required>
<input>

input[required] {
    border: 2px solid red;
}

Only the input with the required attribute is selected.

`[attribute="value"]`

We can also select an element based on the value of its attribute.

<input type="text">
<input type="password">

input[type="text"] {
    background-color: lightblue;
}

Only the text input is selected.

There are also some useful variations:

a[href^="https"]   /* href starts with https */

img[src$=".jpg"]   /* src ends with .jpg */

a[href*="google"]  /* href contains google */

These become very useful when working with many elements that have different attributes.

3. Pseudo-Classes

Pseudo-classes select an element based on its state or position.

`:hover`

:hover is applied when the mouse pointer is over an element.

button:hover {
    background-color: black;
    color: white;
}

This is commonly used for buttons and links.

`:focus`

:focus is useful for input fields. It works when the user clicks on an input or moves to it using the keyboard.

input:focus {
    border: 2px solid blue;
}

This makes it easier for the user to know which input they are currently using.

`:active`

:active works while an element is being activated, such as while pressing a button.

button:active {
    transform: scale(0.95);
}

This can make a button look like it is being pressed.

`:first-child`

Selects an element if it is the first child of its parent.

<div>
    <p>One</p>
    <p>Two</p>
    <p>Three</p>
</div>

p:first-child {
    color: red;
}

One becomes red because it is the first child.

`:last-child`

Works in the opposite way.

p:last-child {
    color: blue;
}

Three becomes blue because it is the last child.

`:nth-child()`

This selector is very useful when we want to select a child based on its position.

li:nth-child(2) {
    color: red;
}

This selects the second <li>.

We can also use:

li:nth-child(odd) {
    background-color: lightgray;
}

li:nth-child(even) {
    background-color: white;
}

This is commonly used for tables and lists.

We can even select every third item:

li:nth-child(3n) {
    color: red;
}

So :nth-child() is a very useful selector when working with lists, grids and tables.

`:not()`

:not() means except this.

p:not(.special) {
    color: gray;
}

This selects all <p> elements except the ones having the special class.

It is useful when we want to style almost everything but leave a few elements different.

`:is()`

:is() allows us to group selectors.

Instead of:

h1,
h2,
h3 {
    color: blue;
}

We can write:

:is(h1, h2, h3) {
    color: blue;
}

This is especially useful when selectors become complicated.

`:has()`

:has() is a powerful modern selector. It allows us to select an element based on something inside it.

For example:

<div class="card">
    <img src="photo.jpg">
    <h2>My Card</h2>
</div>

.card:has(img) {
    border: 2px solid blue;
}

The .card is selected because it contains an <img>.

This is useful when we want to style a parent depending on what it contains.

`:checked`

This is useful for checkboxes and radio buttons.

<input type="checkbox">

input:checked {
    accent-color: green;
}

The style is applied when the checkbox is checked.

`:disabled`

Used to select disabled form elements.

button:disabled {
    opacity: 0.5;
}

This can make a disabled button look different from a normal button.

4. Pseudo-Elements

Pseudo-elements allow us to style a specific part of an element or add generated content.

`::before`

::before adds content before the element's actual content.

h2::before {
    content: "★ ";
}

If the HTML contains:

<h2>My Heading</h2>

It can appear like:

★ My Heading

It is commonly used for icons, decorations and shapes.

`::after`

::after does the same thing but adds the generated content after the element.

h2::after {
    content: " →";
}

It can appear like:

My Heading →

::before and ::after are very useful for creating small decorative elements without adding extra HTML.

`::first-letter`

Selects the first letter of a text element.

p::first-letter {
    font-size: 40px;
    font-weight: bold;
}

This can be used to create a large first letter like we sometimes see in magazines and articles.

`::selection`

This controls how text looks when the user selects it with the mouse.

::selection {
    background-color: black;
    color: white;
}

Now selected text will have a black background and white text.

Responsive Web Design

Abimanyu P — Sat, 08 Aug 2026 11:14:26 +0000

What is Responsive Web Design?

Responsive web design means making a website that can adjust itself according to the screen size. A website can be opened on a laptop, tablet, or mobile phone, so the website should not look broken on smaller screens.

For example, a website may have three boxes in one row on a laptop. But on a mobile screen, those three boxes can come one below another. This makes the website easier to use on different devices.

We can use CSS Flexbox, Grid, relative units and media queries to make a website responsive.

Relative Units and Media Queries

When making a responsive website, using only fixed sizes like 500px may cause problems on smaller screens. Instead, we can use relative units such as %, vw, em and rem.

For example:

.box {
    width: 50%;
}

Here 50% means the box will take half of its parent's width. 50vw means half of the browser's width. em and rem are mainly useful for creating flexible font sizes and spacing.

We can also use media queries to change the CSS when the screen becomes smaller.

@media (max-width: 600px) {
    .box {
        width: 100%;
    }
}

Now the box will take the full width when the screen is 600px or smaller.

Semantic Tags in HTML

Abimanyu P — Thu, 06 Aug 2026 03:57:02 +0000

What are Semantic Tags?

When we create a webpage, we don't just want it to look good. We also want the browser and other developers to understand what each part of the page is. This is where semantic tags help us. The word semantic means having meaning. These tags describe the purpose of the content instead of just creating a box like a <div>.

Common Semantic Tags

HTML provides different semantic tags for different parts of a webpage.

<header> – Used for the top section of the webpage.
<nav> – Contains navigation links like Home, About, and Contact.
<main> – Holds the main content of the webpage.
<section> – Groups related content together.
<article> – Used for a complete piece of content like a blog or news article.
<aside> – Contains extra information such as related links or advertisements.
<footer> – Used for the bottom section of the webpage, usually containing copyright or contact details.

Why Semantic Tags?

Semantic tags make HTML code clean and easy to read. When another developer opens the code, they can quickly understand the structure of the webpage. Search engines like Google can also understand the content better, which helps with SEO. They also improve accessibility because screen readers can identify different sections of the webpage and help visually impaired users navigate the page more easily. Instead of using many <div> tags everywhere, semantic tags make the code more meaningful and easier to maintain.

HTML video,audio and iframe tags

Abimanyu P — Tue, 04 Aug 2026 17:49:36 +0000

`<video>` Tag :

Websites become more interesting when they contain videos. HTML provides the <video> tag to add videos directly to a web page without using any extra software. We can play tutorial videos, product demos, movies, or any other video by using this tag. The controls attribute displays play, pause, volume, and fullscreen buttons so users can easily control the video. We can also use attributes like autoplay, loop, and muted depending on our needs. The <video> tag is supported by all modern browsers, making it the best choice for displaying videos.

<video width="500" controls>
    <source src="sample.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

`<audio>` Tag :

Sometimes a website only needs sound instead of a video. In that case, HTML provides the <audio> tag. It can be used to play songs, podcasts, voice recordings, or notification sounds. By adding the controls attribute, the browser displays play, pause, and volume controls automatically. We can also use attributes like loop, autoplay, and muted when required. Since the audio player is built into the browser, users can listen to the sound without installing any additional software.

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

`<iframe>` Tag :

The <iframe> tag is used to display another web page inside our current web page. It is commonly used to embed YouTube videos, Google Maps, online documents, and other websites. Instead of downloading the content, the browser loads it directly from its original source. This makes it easy to include useful content from other websites without creating it ourselves. The width and height attributes control the size of the iframe, and allowfullscreen lets users watch videos in fullscreen mode.

<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    allowfullscreen>
</iframe>

Picture Tag in HTML

Abimanyu P — Tue, 04 Aug 2026 03:39:53 +0000

What is picture Tag?

Normally, we use the <img> tag to display an image on a webpage. But sometimes one image is not enough because the same image may look good on a computer but not on a mobile phone. The <picture> tag solves this problem. It allows us to keep different versions of the same image and lets the browser choose the best one depending on the screen size. This helps the webpage look better on every device.

How It Works?

Inside the <picture> tag, we use one or more <source> tags and one <img> tag. The <source> tags contain different images with conditions, and the browser checks these conditions from top to bottom. When it finds the first matching condition, it displays that image. If none of the conditions match, the browser uses the image inside the <img> tag as the default image.

<picture>
    <source srcset="mobile.jpg" media="(max-width:600px)">
    <source srcset="tablet.jpg" media="(max-width:900px)">
    <img src="desktop.jpg" alt="Nature">
</picture>

max-width and min-width

The media attribute decides when an image should be used. It mainly works with max-width and min-width.

max-width means this width or smaller.
min-width means this width or bigger.

For example,

<source srcset="mobile.jpg" media="(max-width:600px)">

This means if the screen width is 600px or less, the browser will show mobile.jpg.

Another example,

<source srcset="desktop.jpg" media="(min-width:900px)">

This means if the screen width is 900px or more, the browser will show desktop.jpg.

Why `<picture>` Tag?

The <picture> tag makes a website more responsive. Mobile users can download smaller images, which helps the page load faster, while desktop users can see larger and clearer images. It also gives us more control over how images are displayed on different screen sizes.

Bootstrap

Abimanyu P — Tue, 04 Aug 2026 02:07:28 +0000

What is Bootstrap?

Bootstrap is a CSS framework. It is used to build websites faster without writing everything from the beginning. It already has many ready-made classes for buttons, cards, forms, grids, navigation bars and many more. We only need to add the class names in our HTML. This saves time and makes the website look good with less code.

Example

<button class="btn btn-primary">Click Me</button>

Here, "btn" makes it a button and "btn-primary" gives it a blue color. We did not write any CSS for it.

Bootstrap Grid System

Bootstrap has a grid system with 12 columns. We can divide these columns to create different layouts. For example, if we want 4 equal boxes in one row, each box should take 3 columns because "3 + 3 + 3 + 3 = 12".

Example

<div class="row">
    <div class="col-3">Box 1</div>
    <div class="col-3">Box 2</div>
    <div class="col-3">Box 3</div>
    <div class="col-3">Box 4</div>
</div>

If we want 6 boxes in one row, we use "col-2" because "2 × 6 = 12".

Bootstrap Utility Classes

Bootstrap also gives many utility classes. These classes help us change spacing, colors, display, flex, width and many other things without writing CSS.

Example

<div class="bg-success text-white p-3 rounded">
    Hello Bootstrap
</div>

"bg-success" gives a green background.
"text-white" changes the text to white.
"p-3" adds padding.
"rounded" makes the corners smooth.

Flex in Bootstrap

Bootstrap makes Flexbox very easy. We only need to use classes instead of writing CSS.

Example

<div class="d-flex gap-3">
    <div>Apple</div>
    <div>Orange</div>
    <div>Mango</div>
</div>

"d-flex" places the items in one row and "gap-3" gives space between them. If there are many items and we don't want them to shrink, we can use "flex-shrink-0" and "overflow-auto" to make them scroll.

CSS Positioning

Abimanyu P — Mon, 03 Aug 2026 05:22:02 +0000

When we create a webpage, every element comes one below another by default. But sometimes we need to move an element to a different place. For this, CSS provides the position property. It has five values: static, relative, absolute, fixed, and sticky. Each one works differently, so it is important to know when to use them.

1. Static Position

"static" is the default position of every HTML element. The elements stay in the normal order of the webpage. If we use "top", "left", "right", or "bottom", nothing will happen.

.box{
    position: static;
}

2. Relative Position

"relative" moves an element from its original position. The original space is still kept, so other elements do not move into that space.

.box{
    position: relative;
    top: 20px;
    left: 30px;
}

<div class="box">Hello</div>

In this example, the box moves 20px down and 30px to the right, but its original space is still reserved.

3. Absolute Position

"absolute" removes the element from the normal page flow. It is placed relative to the nearest parent that has "position: relative", "absolute", "fixed", or "sticky".

<div class="container"> <div class="box">Hello</div> </div>

.container{
    position: relative;
    width: 300px;
    height: 200px;
    border: 2px solid black;
}

.box{
    position: absolute;
    top: 20px;
    right: 20px;
}

Here, the box appears 20px from the top and 20px from the right inside the container.

4. Fixed Position

A "fixed" element is always placed relative to the browser window. Even if we scroll the page, it stays in the same place.

.header{
    position: fixed;
    top: 0;
    width: 100%;
}

This is commonly used for navigation bars or floating buttons.

5. Sticky Position

"sticky" works like "relative" at first. When we scroll and the element reaches the value given in "top", it sticks there until its parent ends.

.navbar{
    position: sticky;
    top: 0;
}

This is useful for section headings or navigation bars that should stay visible while scrolling.

Creating a YouTube Web Page Using HTML and CSS

Abimanyu P — Wed, 29 Jul 2026 04:41:10 +0000

Building the Layout

A YouTube web page looks simple, but it contains many small sections that should work together correctly. The first step is creating the page structure using HTML. The page contains a top navigation bar, a left sidebar, and a video content section. After creating the structure, CSS is used to arrange these sections in the correct position. Flexbox is very useful because it can place the sidebar and the content area side by side and also helps make the layout responsive.

While designing the page, different CSS properties are used for spacing, alignment, colors, borders, and sizing. The box-sizing: border-box property helps keep the width and height under control because padding and borders are included inside the given size. The display: block property makes an element take the full available width and start from a new line, which is useful for arranging different sections of the page.

Scrolling and Styling

One important part of the YouTube layout is scrolling. The sidebar and the video content should scroll separately. This can be done by giving both sections their own height and using overflow-y: auto. The page itself should not scroll, so the body uses overflow: hidden. The scrollbar can also be hidden using browser-specific CSS while keeping the scrolling functionality active.

 .content{
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-y: auto;
    scrollbar-width: thin;
 }

Another useful topic is CSS selectors. The universal selector (*) applies styles to every element, but those styles can be overridden using classes, IDs, or selectors with higher specificity. IDs should always be unique even though browsers still apply styles when the same ID is used on multiple elements. Classes are the correct choice when the same style is needed for many elements. Hover effects can be added using the :hover pseudo-class because inline CSS cannot create hover styles.

Working with Bootstrap Code

While copying icons or code from Bootstrap, some built-in classes may already contain predefined styles. Sometimes these styles override newly created classes because of CSS specificity or the order in which CSS files are loaded. This problem can be solved by loading the custom CSS file after Bootstrap, creating a more specific selector, or using !important only when it is really needed.

HTML:

<span class="badge rounded-pill text-bg-secondary nav-el">Secondary</span>

CSS:

span.nav-el{
    font-size: 14px;
}

Creating a YouTube clone gives a better understanding of page layout, scrolling, selectors, hover effects, CSS specificity, and styling techniques. Every small problem helps improve debugging skills and shows how different HTML and CSS properties work together to build a complete web page.

DEV Community: Abimanyu P

HTML, CSS and Bootstrap Interview Questions

HTML Interview Questions

1. What is HTML?

2. What are semantic tags?

3. What is the difference between div and span?

4. What is the difference between id and class?

CSS Interview Questions

5. What is the CSS Box Model?

6. What is CSS specificity?

7. What is Flexbox?

8. What is the difference between justify-content and align-items?

9. What is flex-wrap?

10. What is the difference between relative and absolute positioning?

11. What are media queries?

12. What is responsive web design?

13. What is the difference between %, vw, em and rem?

14. What is the difference between display: none, visibility: hidden and opacity: 0?

Bootstrap Interview Questions

15. What is Bootstrap?

16. What is the Bootstrap grid system?

17. What are container, row and col in Bootstrap?

18. What are Bootstrap responsive classes?

19. How can we override Bootstrap CSS?

20. What is the difference between Bootstrap and CSS?

web page hosting

How to Host a Website Using GitLab Pages

Understanding the Pipeline

Hosting More Than One Website

JavaScript Variables

JavaScript Variables

let, const and var

let

const

var

Scope

Common Errors

Java Scripts

JavaScript and Its History

History of JavaScript

CSS Selectors

CSS Selectors

1. Child and Sibling Selectors

Child Selector >

Descendant Selector

Adjacent Sibling +

General Sibling ~

2. Attribute Selectors

[attribute]

[attribute="value"]

3. Pseudo-Classes

:hover

:focus

:active

:first-child

:last-child

:nth-child()

:not()

:is()

:has()

:checked

:disabled

4. Pseudo-Elements

::before

::after

::first-letter

::selection

Responsive Web Design

What is Responsive Web Design?

Relative Units and Media Queries

Semantic Tags in HTML

What are Semantic Tags?

Common Semantic Tags

Why Semantic Tags?

HTML video,audio and iframe tags

<video> Tag :

<audio> Tag :

<iframe> Tag :

Picture Tag in HTML

What is picture Tag?

Child Selector `>`

Adjacent Sibling `+`

General Sibling `~`

`[attribute]`

`[attribute="value"]`

`:hover`

`:focus`

`:active`

`:first-child`

`:last-child`

`:nth-child()`

`:not()`

`:is()`

`:has()`

`:checked`

`:disabled`

`::before`

`::after`

`::first-letter`

`::selection`

`<video>` Tag :

`<audio>` Tag :

`<iframe>` Tag :

Why `<picture>` Tag?