A web page consists of different sections and components, and we make them responsive by using CSS media queries. There is nothing wrong with that, but it has limitations.

To use container queries we have to tell the container (the parent of the element we want to apply the query to) that we care about its dimensions, we do this with the new contain property.

CSS Containment 🔥

<h1>My blog</h1>
<h2>Heading of a nice section</h2>
<p>Content here.</p>
<h2>Another heading of another section</h2>
<p>More content here.</p>
section {
contain: content;

1. none

Indicates the element renders as normal, with…

Learning CSS can be a frustrating experience sometime. One of the best things about learning to code is that people who are good at coding also happen to have the skills to make games that teach other people to code.

Here are some games which help you to master CSS.

1. Flexbox Froggy

The cursor CSS property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.

There are some cases where the default cursor behaviour from the User Agent Stylesheet doesn’t cut it. In these cases, we ought to change the cursor to something that reflects the expected user interaction on that element.

Checkout all the cursors on codepen 🧡

Using a Custom Cursor ↓

The cursor property is specified as zero or more <url> values, separated by commas. The cursor property does accept SVG files in all its glory but not Gifs.

Yes, you can create your own…

Every JavaScript developer has used `console.log(“message”)` .

It provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.

In this article we will talk about most of the console methods which everyone should start using.

All the following methods are available in the global instance console, so it is not necessary to require the console module.

Default: console.log( ) | info( ) | debug( ) | warn( ) | error( ) 🔥

These console will directly print the raw string with appropriate color based on the type of event that is provided to them.

console.log("console log")
console.info("console info")
console.debug("console debug")
console.warn("console warn")
console.error("console error")

There are multiple ways to filter out duplicates from an array and return only the unique values.

1️⃣ . Using Set 🔥

What is a Set?

Set is a new data object introduced in ES6. A Set is a collection of unique values.

  • The array is converted to Set and all the duplicate elements are automatically removed.
  • The spread syntax ... is used to include all the elements of the Set to a new array.
const arr = ["🌼", "🌴", "🌹", "🌵", "🍄", "🌹", "🌴"];const filteredArr = [...new Set(arr)];
console.log(filteredArr); //["🌼", "🌴", "🌹", "🌵", "🍄"]

Convert Set to an Array using Array.from

You can also use Array.from to…

Understanding the fundamentals is priceless. So let’s discuss the fundamental that how Javascript works 🤔

How JavaScript Works? 🤷🏻‍♀

If you are searching for best tutorials on youtube, I am sharing all the programming channels which I have used to grow my skills set as a programmer. Sharing all the youtube channels which is there in my list 😍

1. Coding Garden

Coding Garden is an open, interactive and engaging community where any coder, from beginner to veteran, can learn and grow together.

There are many times when we need to hide the scrollbar from the HTML elements. The uses can vary from person to person. It is opinionated topic to keep the scrollbar or not based on User Interactions(UI)/User ,Experience(UX).

Most of the time, I don’t like to show the scrollbar to the user because of design practices I follow.

To achieve this, you just need to tickle with CSS to add some pseudo selectors for hiding it based on Browser’s stylings

For Chrome:

/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
display: none;
.element::-webkit-scrollbar { width: 0…

A consistent branch naming convention is part of code review best practices.

Suprabha Supi

Frontend Developer sharing JS, HTML, CSS, GoLang🔥 Find all on blog.suprabha.me💛

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store