JavaScript runtimes are getting interesting again.

For years, Node.js dominated the backend JavaScript world without much competition. Suddenly Bun entered the scene claiming insane speed, better DX, and an all-in-one toolchain and the acquisition of Bun by Anthopic tells us a lot about Bun.

So I decided to slow down, ignore hype tweets, and actually understand both runtimes deeply.

This post is based on real usage, reading docs, testing simple APIs, and breaking things.

What exactly is a JavaScript runtime?

A runtime is not just “where JS runs”.

It usually includes:

• A JavaScript engine

• APIs for filesystem, networking, timers

• Module resolution

• Package management (sometimes)

• Tooling ecosystem

Different runtimes make different tradeoffs.

High-level overview

Architecture differences

Node.js architecture

Node.js uses:

• V8 JavaScript engine

• libuv for async I/O

• Event loop model

This architecture is extremely battle-tested. Almost every production bug has already happened and solved.

Node is slower in cold starts but very predictable under load.

Bun architecture

Bun is written in Zig, which already gives performance benefits.

It uses:

• JavaScriptCore

• Native APIs written from scratch

• Integrated tooling (bundler, test runner, package manager)

Because everything is tightly integrated, Bun avoids many layers Node has.

That’s one big reason it feels faster.

Performance comparison

Cold start time

Bun shines in:

• CLI tools

• Serverless functions

• Scripts

Node is fine, but you feel the delay sometimes.

Runtime execution

Most backend apps are IO-bound, not CPU-bound.
So the “5x faster” claim rarely matters in production APIs.

Package management

This is where Bun really surprised me.

bun install feels unreal sometimes.
For large repos, this alone can save hours every week.

Tooling - all in one vs modular

Node.js tooling

Node philosophy:

• Do one thing well

• Let ecosystem handle the rest

You need:

• npm / yarn / pnpm

• jest / vitest

• webpack / esbuild / vite

This gives flexibility but also config fatigue.

Bun tooling

Bun comes with:

• Runtime

• Package manager

• Bundler

• Test runner

For side projects, this feels amazing.

But less flexibility sometimes is a tradeoff.

Compatibility with npm ecosystem

This is important.

Most packages work in Bun.
But when something breaks, debugging can be painful.

Node almost never surprises you.

Production readiness

Node.js

Node is production everywhere:

• Netflix

• Uber

• PayPal

• Almost every SaaS backend

Monitoring, logging, debugging tools are extremely mature.

Bun

Bun can be used in production, but:

• Docs still evolving

• Breaking changes happen

• Some infra tools assume Node

For critical systems, Node is still safer.

Developer Experience (DX)

This is subjective, but important.

Bun feels fun.
Node feels reliable.

TypeScript compilation (where things get really different)

If you work in JavaScript backend today, you are probably writing TypeScript by default.
So how a runtime handles TypeScript actually matters a lot in daily workflow.

This is one area where Bun feels very different from Node.

TypeScript in Node.js

Node does not understand TypeScript natively.

What usually happens:

• You write .ts files

• TypeScript compiler (tsc) transpiles them to .js

• Node runs the compiled JavaScript

Typical setup looks like:

• tsc or ts-node

• ts-node-dev, nodemon, or similar

• Extra config for source maps, paths, etc

This approach is stable and predictable, but also:

• More config

• More tooling

• Slower feedback loop

It works great in production, but for local dev it sometimes feels heavy.

TypeScript in Bun

Bun can run TypeScript directly.

Yes, you can do:

bun index.ts

And it just works.

Behind the scenes, Bun transpiles TypeScript using its own pipeline without needing tsc.

This gives a much faster developer feedback loop, especially for:

• Scripts

• Small APIs

• Side projects

• Experiments

But there is a tradeoff.

Type safety and strictness

One important thing people forget:

• Node + tsc gives you full type checking

• Bun focuses more on speed than strict type checking

Bun transpiles TypeScript, but it does not replace tsc completely if you care about:

• Strict type checks

• CI validation

• Large codebases with many contributors

So in real projects, you still might:

• Use Bun to run code

• Use tsc --noEmit in CI for type safety

Which is totally fine, but good to know.

Real-world workflow comparison

When should you use Node.js?

Use Node if:

• You work on large production apps

• Stability matters more than speed

• You rely on many npm packages

• You work in teams and enterprises

Node is boring, but boring is good in backend.

When should you try Bun?

Use Bun if:

• You build side projects

• You write scripts or tools

• You want faster installs

• You enjoy modern DX

• You want to experiment

I personally use Bun for experiments and Node for work.

Final thoughts

This is not a war.

Bun is not killing Node.
Node is not obsolete.

Bun is pushing the ecosystem forward, forcing Node to improve.
That competition is healthy.

As developers, the goal is not picking sides.
The goal is picking the right tool for the job.

Try Bun.
Understand Node deeply.
And don’t trust hype blindly.

Introduction to Formik

React provides excellent support for handling form inputs and maintaining state. However, as forms grow in complexity, managing form state, validation, and submission can become cumbersome. Formik comes to the rescue, providing a simple yet powerful abstraction over forms, making it easier to manage complex forms with ease.

Formik's primary features include:

• Managing form state

• Handling form submissions

• Validating form input

• Displaying error messages

Let's explore these features step-by-step with examples.

Installing and Setting Up Formik

To get started with Formik, you need to install the package using npm or yarn:

npm install formik

or

yarn add formik

Now, you can import the Formik component and use it in your React application. Let's create a simple form with Formik.

Creating a Simple Form with Formik

Here's a basic example of a form with Formik:

import React from 'react';
import { Formik, Form, Field } from 'formik';

const SimpleForm = () => {
  return (
    <Formik
      initialValues={{ name: '' }}
      onSubmit={(values) => {
        console.log('Form values: ', values);
      }}
    >
      {() => (
        <Form>
          <label htmlFor="name">Name:</label>
          <Field id="name" name="name" placeholder="Enter your name" />
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
};

export default SimpleForm;

In this example, we have:

• Imported Formik, Form, and Field components from the Formik library.

• Defined the initial form values using the initialValues prop.

• Implemented the onSubmit function to handle form submission.

Validating Form Input

Formik makes it easy to validate form inputs using the validate prop or the validationSchema prop with Yup. Let's add validation to our example using Yup.

First, install Yup:

npm install yup

or

yarn add yup

Now, let's add validation to our form:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object({
  name: Yup.string().required('Name is required!'),
});

const SimpleForm = () => {
  return (
    <Formik
      initialValues={{ name: '' }}
      validationSchema={validationSchema}
      onSubmit={(values) => {
        console.log('Form values: ', values);
      }}
    >
      {() => (
        <Form>
          <label htmlFor="name">Name:</label>
          <Field id="name" name="name" placeholder="Enter your name" />
          <ErrorMessage name="name" />
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
};

export default SimpleForm;

In this example, we have:

• Imported ErrorMessage from the Formik library.

• Created a validation schema using Yup.

• Passed the validation schema to the Formik component using the validationSchema prop.

• Displayed error messages using the <ErrorMessage> component.

Conclusion

Formik is a powerful library that simplifies form handling in React applications. It provides an easy-to-use abstraction for managing form state, validation, and submission. With Formik, you can build efficient and maintainable forms without the hassle of managing complex state and validation logic.

In this blog, we have explored the basics of Formik, including installation, creating a simple form, and adding validation. With these building blocks, you can now create more complex forms and harness the power of Formik in your React applications. Happy coding!

JavaScript is an object-oriented language that supports prototypal inheritance. Unlike class-based inheritance, where objects inherit from classes, objects in JavaScript inherit from other objects. The mechanism for this inheritance is called prototype chaining.

Every JavaScript object has a prototype property that refers to another object, which in turn can have its own prototype property, and so on. The prototype chain ends when the prototype is null, which is the default value for the prototype property of the Object object.

By following the prototype chain, JavaScript can resolve property and method references from one object to another. For example, if an object A refers to a property or method that is not found in its own properties, JavaScript will look for that property or method in the prototype object of A. If it is not found there, it will continue searching up the prototype chain.

Prototype chaining is a powerful mechanism that enables objects to inherit properties and methods from other objects. This allows you to create objects that share common behavior and data.

Creating Objects in JavaScript

There are several ways to create objects in JavaScript. You can create objects using object literals, object constructors, or the object create method.

Object Literals

The simplest way to create objects in JavaScript is to use object literals. An object literal is a comma-separated list of name-value pairs surrounded by curly braces. For example:

cssCopy codevar obj = {
  name: "John",
  age: 30
};

Object Constructors

Another way to create objects in JavaScript is to use object constructors. An object constructor is a function that is used to create objects. For example:

javascriptCopy codefunction Person(name, age) {
  this.name = name;
  this.age = age;
}

var john = new Person("John", 30);

Object.create Method

The Object.create method is another way to create objects in JavaScript. It creates an object with a specified prototype object. For example:

cssCopy codevar person = {
  name: "John",
  age: 30
};

var john = Object.create(person);

Prototype Chaining

In JavaScript, you can create objects that inherit from other objects by using prototype chaining. Prototype chaining is a mechanism that allows objects to inherit properties and methods from other objects.

For example, you can create an object that represents an animal, and then create objects that represent specific types of animals, such as dogs and cats. The dog and cat objects can inherit properties and methods from the animal object.

javascriptCopy codevar animal = {
  type: "Animal",
  move: function() {
    console.log("Moving...");
  }
};

var dog = Object.create(animal);
dog.type = "Dog";
dog.bark = function() {
  console.log("Barking...");
};

var cat = Object.create(animal);
cat.type = "Cat";
cat.meow = function() {
  console.log("Meowing...");
};

In this example, the dog and cat objects inherit the move method from the animal object. The dog object also has a bark method, and the cat object has a meow method.

When you use the prototype chain, you can create objects that share common behavior and data. This can help you write more maintainable and reusable code.

Why even use Tailwind?

The utility-first CSS framework Tailwind CSS may be used to swiftly create unique user interfaces. The fact that Tailwind CSS offers a sizable collection of pre-defined CSS classes that may be used to implement widely-used CSS styles, like spacing, typography, and colors, is one justification for using it. This can speed up the process of designing responsively and consistently. In addition, Tailwind CSS is very adaptable and simple to integrate into any project because it was developed using a utility-first approach. It also offers a simple method for implementing responsive design on the website.

Tailwind also has the configuration file tailwind.config.js , in which users can create and add snippets for styles that can later be used as utility classes per the Developer's need.

Setting our React Project using Tailwind

In this blog, we'll be using Vite, there are other front end tooling but the most preferable one is Vite because of it because of it's hot reload, speed and other factors.

Creating our React Project using Vite

npm create vite@latest my-project -- --template react
cd my-project

Installing TailwindCSS

Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.cjs and postcss.config.cjs.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configuring your Path

Configure your paths and remember to make these changes in your tailwind.config.cjs file.

t('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],

Add the Tailwind directives to your CSS

These changes must be made in your index.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Starting your Development Server

npm run dev

Now you can start using CSS with your React.

Installing the Tailwind Intellisense Extension

For more productivity, you can Install the Extension mentioned below in VS code to get Intellisense and auto suggestion of classes when working on your project.

Happy Tailwind!

The Call Stack and Memory Heap of JS

The call stack is used to keep track of the functions that are currently executing in a program. It maintains a list of stack frames, where each frame represents a function call. When a function is called, a new stack frame is added to the call stack, and when the function completes its execution, the corresponding stack frame is removed.

On the other hand, the memory heap is an area of memory where data objects such as arrays and objects are stored. When a variable is declared and assigned a value, JavaScript will allocate a block of memory on the heap to store the data. The variable that references the data points to the memory location on the heap where the data is stored.

In simple terms, the call stack is used to keep track of the program execution flow and the memory heap is used to store the data. The call stack and the heap work together to ensure that the program executes correctly.

It's important to note that the call stack has a limited size and if the call stack gets too large, it can cause a stack overflow error. On the other hand, the heap does not have a fixed size, and it is subject to garbage collection, which means that when an object or variable is no longer needed or reachable, JavaScript will automatically release the memory allocated for it.

Pass by Value

A copy of its value is passed to the function when a variable is passed by value. This means that any changes made to the variable within the function have no effect on the original variable outside of the function.

Example

Copy codelet x = 5;

function increment(x) {
    x++;
}

increment(x);
console.log(x); // Output: 5

In this example, we pass the variable x to the increment function. Within the function, we increment the value of x by 1. However, when we log the value of x outside of the function, it is still 5, as the original variable was not affected by the change made within the function.

Pass by Reference

When a variable is passed by reference, a reference to the variable's memory location is passed to the function. This means that any changes made to the variable within the function will also affect the original variable outside of the function.

Example

Copy codelet x = { value: 5 };

function increment(obj) {
    obj.value++;
}

increment(x);
console.log(x.value); // Output: 6

In this example, we pass the object x to the increment function. Within the function, we increment the value property of the object by 1. When we log the value property of the object outside of the function, it is 6, as the original object was affected by the change made within the function.

It is important to note that in JavaScript, primitive data types (such as numbers, strings, and booleans) are passed by value, while objects and arrays are passed by reference.

Creating a copy of Array or Object

Therefore, if we want to create a new copy of an object or array, we have to use methods such as Object.assign(), JSON.parse(JSON.stringify()), or Array.slice() to create a new reference.

Copy codelet originalArray = [1, 2, 3];
let newArray = originalArray.slice();

originalArray[0] = 10;
console.log(originalArray); // Output: [10, 2, 3]
console.log(newArray); // Output: [1, 2, 3]

In this example, we create a new array by calling the slice() method on the original array. Since the new array is assigned a new reference, changes made to the original array do not affect the new array.

Conclusion

In conclusion, understanding the difference between pass by reference and pass by value is crucial for writing efficient and bug-free code in JavaScript. While primitive data types are passed by value, objects and arrays are passed by reference. Always keep in mind which data type you are working with and how it is passed to a function, to avoid any unexpected

Understand the basics of the language

Before you can answer more advanced questions, you need to have a solid understanding of the basics of the language. Brush up on concepts such as data types, operators, loops, functions, and basic data structures like arrays and objects. It's also important to have a good understanding of JavaScript’s event loop, prototype chain, and hoisting.

Get familiar with popular JavaScript libraries and frameworks

Many companies use popular JavaScript libraries and frameworks such as React, Angular, and Vue.js in their projects. Familiarizing yourself with these libraries and frameworks can give you an edge in the interview. Practice building small projects using these libraries and frameworks to get comfortable with their syntax and usage.

Practice writing clean and efficient code

In a JavaScript interview, you may be asked to write code on a whiteboard or a shared code editor. It is important to write clean and efficient code, as this is a reflection of your skills as a developer. Practice writing code that is easy to read and understand, and pay attention to best practices such as variable naming and indentation.

Be familiar with ES6+ features

JavaScript has undergone several major updates in recent years, with the introduction of ES6, ES7, ES8 and ES9. Be familiar with new features such as arrow functions, template literals, destructuring, and the spread operator.

Practice solving common JavaScript interview questions

Practice solving common JavaScript interview questions such as "What is closure in JavaScript?" or "How do you remove duplicates from an array?" to familiarize yourself with the types of questions that may be asked. This will also help you to develop a better understanding of the language and its features.

Be prepared to explain your thought process

In an interview, it's not just about getting the right answer, but also about explaining your thought process and how you arrived at that answer. Be prepared to explain how you approached a problem, the steps you took to solve it, and any trade-offs you made.

Be honest and ask questions

It's okay if you don't know the answer to a question. Be honest and let the interviewer know that you're not familiar with a particular concept or feature. Don’t be afraid to ask questions to clarify the requirements or the expected output.

In conclusion, clearing a JavaScript interview requires a combination of understanding the basics of the language, being familiar with popular libraries and frameworks, and practice writing clean and efficient code. By following these tips and strategies, and practice solving common interview questions, you will be well-prepared for your next JavaScript interview.

Express.js is a popular Node.js web application framework that allows developers to easily create server-side web applications. In this blog post, we will go through the basics of getting started with Express.js by building a simple "Hello World" application.

Installing

First, we will need to install the Express.js package. This can be done by running the following command in your terminal:

npm install express

Once the package is installed, we can create a new JavaScript file for our application. In this example, we will call it "app.js".

Creating our first route

const express = require("express"); //ie export
const app = express();

//creating route
app.get("/", (req, res) => {
  res.send("Hello World");
});

//listening
app.listen(3000, () => {
  console.log("Server running on port 3000");
});

In the code above, we are requiring the Express.js module and creating a new Express application by calling the express() function. We then define a route for the root URL ("/") that will handle a GET request. When a user visits the root URL, our callback function will be executed, which sends a "Hello World" message back to the user.

Finally, we are telling the application to listen on port 3000 for incoming connections.

Running our Application

To run the application, we can simply execute the following command in the terminal:

node app.js

and then visit http://localhost:3000 in a web browser. It should show "Hello World"

This is just the beginning of what you can do with Express.js. You can also easily define other routes, use middleware, and handle different types of HTTP requests. Happy coding!

ORM

As the name suggests, is used to interact with relational databases. Relational databases, such as MySQL, PostgreSQL, and Oracle, store data in tables, with each table representing a specific entity and each row representing an instance of that entity. The relationships between tables are defined using foreign keys. ORM provides a way to map these tables and relationships to objects in the programming language, making it easy to work with the data using the familiar object-oriented paradigm. For example, using an ORM library such as Hibernate, a Java developer can define a class to represent a "Person" entity, and Hibernate will automatically create the corresponding table in the database and handle all the CRUD operations.

ODM

On the other hand, is used to interact with document-based databases, such as MongoDB and CouchDB. Document-based databases store data in the form of documents, with each document representing an instance of an entity. These databases are more flexible than relational databases, as the structure of the documents can vary from one document to another. ODM provides a way to map these documents to objects in the programming language, making it easy to work with the data using the familiar object-oriented paradigm. For example, using an ODM library such as Mongoose, a JavaScript developer can define a schema to represent a "Person" entity, and Mongoose will automatically handle all the CRUD operations.

Usecase

So, when should you use ORM, and when should you use ODM? The main difference between ORM and ODM is the type of database they are used with. If you are working with a relational database, ORM is the way to go. ORM is more powerful and flexible than ODM, as it can handle complex relationships between tables. However, if you are working with a document-based database, ODM is the better choice. ODM is simpler and more suited for document-based databases, as it is designed to work with the flexible schema of these databases.

Database Variance

It's also important to note that there are other types of databases like Graph databases and Time series databases, which have their ORM or ODM libraries specific to them. For example, Neo4j uses Cypher as the query language and has its own ORM library called "Neo4j-OGM" (Object Graph Mapping) and InfluxDB uses InfluxQL and has its own ORM library called "InfluxDB-ORM".

Conclusion

In conclusion, ORM and ODM are powerful techniques that allow developers to work with databases more efficiently and conveniently. ORM is best suited for relational databases, while ODM is best suited for document-based databases. However, the choice of which to use ultimately depends on the specific needs of your project and the type of database you are working with.

Markdown is an easy way to take down notes, create content for a website, create readme in your github. Markdown is used for creating groceries list to a big production content creation.

Here are some most helpful and common tags (elements) of MarkDown:

Tags

1. Headings

Syntax:

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Output:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

note: Putting an space after the '#' is necessary, otherwise the formatting will not work.

2. Bold

Syntax:

**bold text**

__bold text__

Output:

bold text

bold text

3. Italics

Syntax:

*Italicized text*

_Italicized text_

Output:

Italicized text

Italicized text

4. Quotes

Syntax:

Quote with single paragraph.

>The quote will go here.

Output:

The quote will go here.

Quote with multiple paragraphs.

>This is the first para.
>
>This is the second para.

Output:

This is the first para.

This is the second para.

NOTE: If we do not put the ">" in between of two para elements, it'll come in a single paragraph.

Nested quotes

>This is the first para.
>
>>This is the nested para.

Output:

This is the first para.

This is the nested para.

Quotes with Other Elements

>We can make text **bold**.
>
>-Can add list.

Output:

We can make text bold.

• Can add list.

Nested quotes

>This is the first para.
>
>>This is the nested para.

Output:

This is the first para.

This is the nested para.

5. Ordered lists

Syntax:

1. Item 1
2. Item 2

Output:

1. Item 1
2. Item 2

Nested Ordered lists

Syntax:

1. Item 1
2. Item 2
  1. item 2.1
  2. item 2.2

Output:

1. Item 1
2. Item 2
   1. item 2.1
   2. item 2.2

6. Unordered lists

Syntax:

- Item 1
- Item 2
* item 3
* item 4

Output:

• Item 1
• Item 2
• item 3
• item 4

Nested Unordered lists

Syntax:

- Item 1
- Item 2
  - item 2.1
  - item 2.2

Output:

• Item 1
• Item 2
  • item 2.1
  • item 2.2

7. Code Blocks

Inline Code

Syntax:

`inline code`

Output: inline code

Multi-line code

Syntax:

Multi line code is inserted by ```` in the beginning and end of the code.

Output:

This 
is 
Multi-Line
Code

8. Links

Syntax:

[LCO](web.learncodeonline.in)

Output: LCO

9. URLs and Email Addresses

Syntax:

<http:// www.google.com>
<aryanamdev08@gmail.com>

Output:

http://www.google.com , aryanamdev08@gmail.com

10. Images

Syntax:

![Mountain img](https://images.pexels.com/photos/933054/pexels-photo-933054.jpeg?cs=srgb&dl=pexels-joyston-judah-933054.jpg&fm=jpg)

Output:

Here is all what i had about Markdown and i'll come up with more such blogs.

The CSS Position property is used to position an element in the webpage, and how it'll position, will depend on the property we choose to give. We'll have came around those fixed navbars on the top and those sticky navbars and guess what, they are all done with the help of CSS Position. In This blog we'll be discussing when to use which css property to get the best out of it.

Syntax:

selector{
  Position: Property;
}

Types of Positions:

1. Static Position:

Static Position is the default value of the position property. It have no effects in the positioning of any element.

2. Relative Position:

A Relative positioned element does not give any results, when {position: relative;} is applied to it. But when it is twiched with the left , right, top and bottom properties. It starts acting accordingly. If the element have left: 20px; that means from the place where it is positioned, it have to move 20px from left.

as we can see in the example:

3. Absolute Position:

The Absolutely Positioned element is removed from the document flow. The elements with whom it was a sibling, they leave no space for the element. The Absolute position is used to align the element in context to it's parent element, which have the property **{position:relative;}** in it.

as we can see in the example, we gave position: relative; to the element with ID "three" and gave it's child the {position: absolute} and give left and bottom values "0". That means the child will align relatively bottom-left to its parent.

4. Fixed Position:

When an item is position fixed, it is removed from the normal document flow and it'll be fixed to the viewport. So if even when scrolled through, it also scrolls, remaining at the same position. Syntax {position:fixed}

5. Sticky Position:

The Simplest explanation of sticky position is it sticks to the view port until it's relative parent is scrolled through. Syntax `{position:sticky;}.

Will Come again with such blogs.

Connect me: linkedin

In CSS there are various types of selectors, selectors are used to target HTML elements that we wants to style. There are so many elements in HTML, that can confuse any Beginner-Dev that is trying to build things, so the transition from beginner Web-Dev to an Intermediate one is, getting familiar with CSS Selectors.

Types of CSS Selectors:

Universal Selector:

The Universal selector selects all the HTML elements, it is used to delete the default margins and paddings. It is denoted by *

*{
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}

Type Selectors:

This group includes selectors that target HTML elements by their type. Like, <h1>, <li>, <nav>.

h1{
  color: #111;
}

Class Selectors:

This group includes selectors that target HTML elements by the class they are assigned to. Class is assigned by .classname inside an HTML tag.

.navbar{
  background-color: #111;
}

Note: Class can be assigned to many Elements at once.

ID Selectors:

This group includes selectors that target HTML elements by the ID they are assigned to. ID is assigned by #ID inside an HTML tag.

#Logo{
  height: 5em;
}

Note: IDs can be assigned to only one Element at once.

Attribute Selectors:

This group allows you to select HTML tags based on the presence of attributes they have in the tag. Attribute is targeted by tag-name[attribute]{}

img[alt="logo"]{
  height: 5em;
}

or

a[href="https://example.com"]{
  height: 5em;
}

Grouping Selectors:

This group allows you to select 2 or more elements at once. They are selected by , a,b{}. It'll apply the styles in all the selected elements.

div, span{
  display: inline-block;
}

Desendant Combinator:

The " " (space) selector selects the elements that are descendants of the first element A B{}.

ul li{
  display: flex;
}

Child Combinator:

The > selector selects the elements that are direct children of the first element A > B{}.

div > *{
  color: green;
}

Pseudo Selectors:

This group allows you to select and style certain HTML tags based on their state. The :hover pseudo-class selects an element only when it is being hovered by the mouse pointer.

.list-items:hover{
  background-color: #111;
}

or

a:visited{
  color: purple;
}

Thankyou for reading, i'll come up with more!

let's connect Linkedin