Creating Objects in JavaScript

In JavaScript, objects can be created using the object literal syntax, constructor functions, or the ES6 class syntax. Let's take a look at each of these methods.

Object Literal Syntax

The simplest way to create an object in JavaScript is to use the object literal syntax. An object literal is a comma-separated list of name-value pairs enclosed in curly braces. Here's an example:

const person = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA'
  }
};

In this example, we've created an object called person that has three properties: name, age, and address. The address property is itself an object with its own properties.

Constructor Functions

Constructor functions are another way to create objects in JavaScript. These functions are used to create multiple instances of the same type of object. Here's an example:

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

const person1 = new Person('John', 30);
const person2 = new Person('Jane', 25);

In this example, we've created a constructor function called Person that takes two parameters: name and age. We then create two instances of the Person object using the new keyword.

ES6 Class Syntax

The ES6 class syntax provides a more concise way to create constructor functions. Here's an example:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const person = new Person('John', 30);

In this example, we've created a Person class with a constructor that takes two parameters: name and age. We then create an instance of the Person object using the new keyword.

Object Methods in JavaScript

In addition to properties, objects in JavaScript can also have methods. Methods are functions that are associated with an object and can be called using dot notation. Let's take a look at some common methods that are available on JavaScript objects.

Object.keys()

The Object.keys() method is used to return an array of the object's property names. Here's an example:

const person = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA'
  }
};

const keys = Object.keys(person);
console.log(keys); // ['name', 'age', 'address']

In this example, we use the Object.keys() method to get an array of the person object's property names.

Object.values()

The Object.values() method is used to return an array of the object's property values. Here's an example:

const person = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA'
  }
};

const values = Object.values(person);
console.log(values); // ['John', 30, { street: '123 Main St', city: 'Anytown', state: 'CA' }]

In this example, we use the Object.values() method to get an array of the person object's property values.

Object.entries()

The Object.entries() method is used to return an array of the object's property names and values. Here's an example:

const person = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA'
  }
};

const entries = Object.entries(person);
console.log(entries); // [['name', 'John'], ['age', 30], ['address', { street: '123 Main St', city: 'Anytown', state: 'CA' }]]

In this example, we use the Object.entries() method to get an array of arrays, where each subarray contains a property name and its corresponding value.

Object.assign()

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. Here's an example:

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const result = Object.assign(target, source);
console.log(result); // { a: 1, b: 4, c: 5 }

In this example, we use the Object.assign() method to copy the properties from the source object to the target object. If a property already exists on the target object, its value is overwritten by the corresponding property value in the source object.

Object.freeze()

The Object.freeze() method is used to freeze an object, preventing any properties from being added, removed, or modified. Here's an example:

const person = {
  name: 'John',
  age: 30
};

Object.freeze(person);

person.age = 31; // This has no effect, because the object is frozen
console.log(person); // { name: 'John', age: 30 }

In this example, we use the Object.freeze() method to freeze the person object. When we attempt to modify the age property of the object, it has no effect because the object is frozen.

Conclusion

JavaScript objects and their methods are essential components of modern web development. They allow developers to create complex data structures and manipulate them in various ways. By understanding the different methods available on JavaScript objects, developers can write more efficient and effective code.

What are Media Queries?

Media queries are a CSS technique used to apply different styles based on various attributes of the device, such as screen size, resolution, and orientation. This means that a website can look different on a desktop computer than it does on a mobile device, for example, without having to create separate websites for each device. Media queries allow developers to create a single website that can adapt to different devices, which is known as responsive design.

How do Media Queries Work?

Media queries use the @media rule in CSS to apply styles to different devices based on their attributes. For example, the following media query applies styles to devices with a maximum screen width of 600 pixels:

@media screen and (max-width: 600px) { 
    /* styles applied here */ 
}

Why are Media Queries Important?

Media queries are essential for creating effective and user-friendly web designs for several reasons. First, they allow developers to create responsive designs that adapt to different devices, which is crucial in an era where more and more people are accessing the internet on mobile devices. Second, they can help improve the performance of websites by reducing the amount of data that needs to be loaded. For example, if a website has a large image that is only necessary for larger screens, a media query can be used to load a smaller image on smaller screens, reducing the amount of data that needs to be downloaded. Finally, media queries can help improve accessibility by allowing developers to create designs that are easier to read and navigate for people with different abilities.

Media Queries for Mobile, Tablet, and Desktop

When using media queries, it's important to understand how to use the min-width and max-width properties effectively. These properties are used to set conditions for when certain styles should apply based on the width of the device's screen.

min-width: This property sets a minimum width for the screen size, and the styles inside the media query will only apply if the screen width is greater than or equal to the specified value.

max-width: This property sets a maximum width for the screen size, and the styles inside the media query will only apply if the screen width is less than or equal to the specified value.

By using both min-width and max-width, developers can create a range of screen sizes for which specific styles will apply. Here's an example of how this can be used to create effective and responsive designs for mobile, tablet, and desktop devices:

Mobile: For mobile devices, it's recommended to use a min-width of 320px and a max-width of 767px. This will ensure that the styles applied to the website are optimized for smaller screens and touch-based interfaces. Styles for mobile devices may include larger font sizes, simplified layouts, and larger touch targets for buttons and links.

@media only screen and (min-width: 320px) and (max-width: 767px) {
    /* Styles for mobile devices */
}

Tablet*: For tablet devices, it's recommended to use a* min-width of 768px and a max-width of 1023px*. This will ensure that the styles applied to the website are optimized for larger screens but still provide a touch-based interface. Styles for tablet devices may include a more complex layout with more elements on the screen, smaller font sizes, and more detailed navigation menus.*

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    /* Styles for tablet devices */ 
}

Desktop*: For desktop devices, it's recommended to use a* min-width of 1024px*. This will ensure that the styles applied to the website are optimized for larger screens and a traditional mouse and keyboard interface. Styles for desktop devices may include a more complex layout with multiple columns, smaller font sizes, and more detailed navigation menus.*

@media only screen and (min-width: 1024px) {
    /* Styles for desktop devices */ 
}

In summary, by using media queries min-width and max-width properties, developers can create effective and responsive designs for mobile, tablet, and desktop devices. By optimizing the design for each screen size, users will have a better experience on the website, which can lead to higher engagement and increased conversions.

Conclusion

Media queries are an essential tool for modern web design, allowing developers to create responsive layouts that adapt to different devices. They work by applying different styles based on various attributes of the device, such as screen size, resolution, and orientation. Media queries are important for creating effective and user-friendly web designs because they allow for responsive layouts, can help improve website performance, and can improve accessibility for people with different abilities. If you are a web developer or designer, it is essential to understand how media queries work and how to use them effectively to create effective and engaging web designs.

Creating Arrays in JavaScript

An array can be created in JavaScript using square brackets and the values can be separated by commas. For example, the following code creates an array with three elements:

const fruits = ['apple', 'banana', 'orange'];

Different JavaScript Array Methods

In JavaScript, arrays are a fundamental data structure that stores collections of data in a single variable. Arrays can hold any type of data, including numbers, strings, objects, and even other arrays.

JavaScript Arrays have many built-in methods that can be used to manipulate and work with arrays. Here are some of the most common methods.

push()

The push() method adds one or more elements to the end of an array and returns the new length of the array.

const fruits = ['apple', 'banana'];
fruits.push('orange');
console.log(fruits); // Output: ["apple", "banana", "orange"]

pop()

The pop() method removes the last element from an array and returns that element.

const fruits = ['apple', 'banana', 'orange'];
fruits.pop();
console.log(fruits); // Output: ["apple", "banana"]

shift()

The shift() method removes the first element from an array and returns that element.

const fruits = ['apple', 'banana', 'orange'];
fruits.shift();
console.log(fruits); // Output: ["banana", "orange"]

unshift()

The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

const fruits = ['banana', 'orange'];
fruits.unshift('apple');
console.log(fruits); // Output: ["apple", "banana", "orange"]

splice()

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements.

const fruits = ['apple', 'banana', 'orange'];
fruits.splice(1, 1, 'kiwi');
console.log(fruits); // Output: ["apple", "kiwi", "orange"]

In the above example, the splice() method removes one element from index 1 and replaces it with 'kiwi'.

concat()

The concat() method is used to merge two or more arrays. This method does not change the existing arrays but instead returns a new array.

const fruits = ['apple', 'banana'];
const vegetables = ['carrot', 'potato'];
const food = fruits.concat(vegetables);
console.log(food); // Output: ["apple", "banana", "carrot", "potato"]

slice()

The slice() method returns a copy of a portion of an array into a new array object selected from start to end (end not included). The original array will not be changed.

const fruits = ['apple', 'banana', 'orange'];
const citrusFruits = fruits.slice(1, 3);
console.log(citrusFruits); // Output: ["banana", "orange"]

In the above example, the slice() method creates a new array containing elements from the original array starting from index 1 and ending at index 3 (not inclusive).

reverse()

The reverse() method reverses the order of the elements in an array.

const fruits = ['apple', 'banana', 'orange'];
fruits.reverse();
console.log(fruits); // Output: ["orange", "banana", "apple"]

sort()

The sort() method sorts the elements of an array in place and returns the sorted array. By default, the sort() method sorts the elements alphabetically.

 const fruits = ['banana', 'apple', 'orange'];
fruits.sort();
console.log(fruits); // Output: ["apple", "banana", "orange"]

However, it is important to note that the sort() method sorts the elements as strings, which can lead to unexpected results when sorting numbers. To sort numbers, you can pass a compare function as an argument to the sort() method.

const numbers = [4, 2, 8, 1, 5];
numbers.sort((a, b) => a - b);
console.log(numbers); // Output: [1, 2, 4, 5, 8]

In the above example, the compare function subtracts the second number from the first number, which sorts the array in ascending order.

indexOf()

The indexOf() method returns the index of the first occurrence of a specified value in an array, or -1 if the value is not found.

const fruits = ['apple', 'banana', 'orange'];
const index = fruits.indexOf('banana');
console.log(index); // Output: 1

includes()

The includes() method returns true if an array contains a specified value, otherwise, it returns false.

const fruits = ['apple', 'banana', 'orange'];
const includesApple = fruits.includes('apple');
console.log(includesApple); // Output: true

const includesGrapes = fruits.includes('grapes');
console.log(includesGrapes); // Output: false

reduce()

The reduce() method executes a provided function on each element of an array, resulting in a single output value. The method reduces the array to a single value by iterating over each element and accumulating the result.

The reduce() method takes two parameters: a callback function and an optional initial value. The callback function takes four arguments: the accumulator, the current value, the current index, and the array.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(sum); // Output: 15

In the above example, the reduce() method adds up all the numbers in the array by accumulating the result in the accumulator variable. The initial value of the accumulator is not provided, so it defaults to the first element in the array.

If an initial value is provided, the reduce() method will start with that value instead of the first element in the array.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 10);
console.log(sum); // Output: 25

In this example, the reduce() method starts with an initial value of 10 and adds up all the numbers in the array, resulting in a final sum of 25.

forEach()

The forEach() method is used to iterate over an array and perform some operation on each of its elements. The method takes a callback function as its argument, which is executed on each element in the array.

The callback function takes three parameters: the current element, the index of the current element, and the entire array. You can use any or all of these parameters inside the callback function to perform the desired operation on each element.

Here's an example of using the forEach() method to log each element in an array to the console:

const fruits = ['apple', 'banana', 'orange'];

fruits.forEach((fruit, index) => {
  console.log(`${index + 1}. ${fruit}`);
});

// Output:
// 1. apple
// 2. banana
// 3. orange

In this example, the forEach() method is used to iterate over the fruits array and log each element to the console along with its index. The callback function takes two parameters: fruit and index. The fruit parameter is the current element being processed in the array and the index parameter is the index of the current element.

The forEach() method is a useful tool for working with arrays when you want to perform a simple operation on each element, without the need to create a new array or modify the existing one

filter()

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]

In the above example, the filter() method creates a new array containing only the even numbers.

map()

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

In the above example, the map() method creates a new array containing the doubled numbers.

Conclusion

JavaScript Arrays are an essential data structure in the language, providing developers with powerful tools for managing collections of data. The built-in methods provided by JavaScript allow for efficient manipulation of arrays, making it easy to add, remove, and modify elements within them. By understanding the various methods available for working with arrays, developers can write cleaner, more concise code and create more robust applications.

Let's first discuss how functions can be created in JavaScript.

There are several ways to create functions in JavaScript. The most common way is to use the function declaration syntax, which uses the function keyword followed by the function name, arguments enclosed in parentheses, and the function body enclosed in curly braces. Here is an example:

function addNumbers(a, b) {
  return a + b;
}

In the above example, the addNumbers() function takes two arguments a and b, and returns their sum.

Another way to create functions in JavaScript is to use function expressions, which involve assigning a function to a variable or property. Here is an example:

const addNumbers = function(a, b) {
  return a + b;
};

In the above example, the addNumbers variable is assigned to a function that takes two arguments a and b, and returns their sum.

A third way to create functions in JavaScript is to use arrow functions, which provide a more concise syntax for creating functions. Arrow functions use the => symbol instead of the function keyword, and do not have their own this or arguments bindings. Here is an example:

const addNumbers = (a, b) => a + b;

In the above example, the addNumbers variable is assigned to an arrow function that takes two arguments a and b, and returns their sum.

Regardless of how you create a function in JavaScript, you can call it by using the function name followed by parentheses, with any necessary arguments enclosed in the parentheses. Here is an example of calling the addNumbers() function:

const result = addNumbers(2, 3);
console.log(result); // 5

In the above example, the addNumbers() function is called with the arguments 2 and 3, and the result is assigned to the result variable and logged to the console.

Functions are an essential part of JavaScript programming, and understanding how to create and use them effectively is crucial for building robust and maintainable applications.

Now let's explore some unique and powerful features of JavaScript Functions, along with some code examples.

First-Class Citizens

In JavaScript, functions are first-class citizens. This means that functions are treated like any other value in the language, and they can be assigned to variables, passed as arguments to other functions, and returned as values from functions. This feature makes JavaScript incredibly flexible and allows developers to write code more concisely and expressively.

Default Parameters

JavaScript functions can have default parameters, which are used when an argument is not passed to a function or is undefined. This is useful when you want to provide a default value for an argument or when you want to prevent errors in the case of missing arguments. Here is an example of a function with default parameters:

function addNumbers(a = 0, b = 0) {
  return a + b;
}

console.log(addNumbers()); // 0
console.log(addNumbers(2, 3)); // 5
console.log(addNumbers(2)); // 2

In the above example, if no arguments are passed to the addNumbers() function, it will return 0, as both a and b are set to 0 by default. If one argument is passed, the other argument will be set to 0 by default.

Rest Parameters

JavaScript functions can also have rest parameters, which allow a function to accept an indefinite number of arguments as an array. This is useful when you want to create a function that can handle multiple arguments of different types. Here is an example of a function with rest parameters:

function addNumbers(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(addNumbers(2, 3, 4)); // 9
console.log(addNumbers(1, 2, 3, 4, 5)); // 15

In the above example, the addNumbers() function accepts an indefinite number of arguments using the rest parameter ...numbers. The function then uses the reduce() method to sum up all the numbers in the array.

Named Parameters

JavaScript functions can also have named parameters, which allow a function to accept arguments as named properties of an object. This is useful when you want to make function arguments more self-documenting and easier to read. Here is an example of a function with named parameters:

function createUser({ name, email, age }) {
  return { name, email, age };
}

console.log(createUser({ name: 'John', email: 'john@example.com', age: 30 }));
// { name: 'John', email: 'john@example.com', age: 30 }

In the above example, the createUser() function accepts an object with named properties name, email, and age. The function then returns an object with these properties.

Currying

JavaScript functions can also be curried, which means that they can be partially applied to create a new function with some of its arguments already set. This is useful when you want to reuse a function with different sets of arguments or when you want to create a specialized version of a function for a specific use case. Here is an example of a curried function:

function add(a) {
  return function (b) {
    return a + b;
  };
}

const add5 = add(5);

console.log(add5(3)); // 8
console.log(add5(7)); // 12

In the above example, the add() function returns another function that adds its argument to the original argument a. The add5 variable is created by partially applying add() with the value 5. add5() then adds 5 to its argument, returning a new value. This allows you to reuse the add() function with different values of a by creating new functions with add() as a factory.

Higher-Order Functions

JavaScript functions can also be higher-order functions, which means that they can take other functions as arguments or return functions as their result. This is useful when you want to create functions that can work with a wide range of inputs or when you want to abstract away specific behaviors of a function. Here is an example of a higher-order function:

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

In this example, we have an array of numbers [1, 2, 3, 4, 5]. We then use the map function to create a new array doubledNumbers where each number in the original array is doubled.

The map function takes a function as its argument that will be applied to each element of the original array. In this case, the function takes a number parameter and returns the result of multiplying that number by 2. The map function applies this function to each element of the numbers array and returns a new array with the results.

Finally, we log the doubledNumbers array to the console, which outputs [2, 4, 6, 8, 10].

Functions Can Be Memoized

Memoization is a technique where the results of a function call are cached so that future calls with the same arguments can be returned from the cache instead of being recalculated. JavaScript functions can be memoized using closures or by using third-party libraries such as Lodash or Underscore. This feature is useful when dealing with computationally expensive functions or when you want to optimize performance.

Functions Can Be Used as Constructors

In JavaScript, functions can also be used as constructors to create new objects. When a function is called with the new keyword, a new object is created and the function's prototype is set as the prototype of the new object. This feature is useful when you want to create new objects with shared properties and methods.

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
}

const alice = new Person('Alice', 30);
const bob = new Person('Bob', 25);

alice.greet(); // logs "Hello, my name is Alice and I'm 30 years old."
bob.greet(); // logs "Hello, my name is Bob and I'm 25 years old."

In this example, the Person function is used as a constructor to create new objects with properties name and age. The this keyword is used inside the function to set these properties for each new object that is created.

The Person.prototype property is used to add a new method greet() to the Person function. This method is shared by all objects created with the Person constructor since it is added to the constructor's prototype.

Finally, two new objects alice and bob are created using the Person constructor, and the greet() method is called on each object to display a greeting message.

Using functions as constructors in JavaScript can be a powerful way to create new objects with shared properties and methods, and to create modular and reusable code.

Conclusion

JavaScript functions are a powerful tool for developers, providing a wide range of functionality and flexibility. By using default parameters, rest parameters, named parameters, currying, and higher-order functions, you can create functions that are reusable, adaptable, and easy to read. These features are unique to JavaScript and can help you write more efficient and maintainable code.

What is TailwindCSS?

Tailwind is a utility-first CSS framework that uses the concept of utility classes to accelerate your workflow. The framework is lightweight, has a small footprint, and loads very quickly, making it the perfect option for your projects. It is an ideal solution for websites of all types, from blogs to eCommerce stores. Unlike other CSS frameworks with a massive library of styles, Tailwind is a focused toolkit. It is created for developers with a focus on simplicity and ease of use, and it doesn’t require any predefined structure within your project.

How to Install Tailwind?

Before you start using Tailwind, you first need to install it in your project. Or you can use the Play CDN to try Tailwind right in the browser without any build step, and You can do this by adding the Play CDN script tag to the <head> of your HTML file and start using Tailwind’s utility classes to style your content.

Add the Play CDN script to your HTML

<script src="https://cdn.tailwindcss.com"></script>

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

Try customizing your config

You can also edit the tailwind.config object to customize your configuration with your design tokens.

<script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            myBlue: '#2827CC',
          }
        }
      }
    }
  </script>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            myBlue: '#2827CC',
          }
        }
      }
    }
  </script>
</head>
<body>
  <h1 class="text-3xl font-bold underline text-myBlue">
    Hello world!
  </h1>
</body>
</html>

How to use CSS flexbox in tailwindcss?

The flex feature enables you to create a responsive layout for various screen sizes. This means that different screen sizes will display your content differently. This feature is helpful for situations where you want to create a layout that adapts to different screen sizes. For example, if you create a layout for your website’s article section, you can use the flex feature to create a layout that fits the article’s content.

For flex-direction, it uses the below class:

flex-row class in tailwindcss used for flex-direction: row;
flex-row-reverse class in tailwindcss used for flex-direction: row-reverse;
flex-col class in tailwindcss used for flex-direction: column;
flex-col-reverse class in tailwindcss used for flex-direction: column-reverse;

For flex-wrap, it uses the below class:

flex-wrap for the property flex-wrap: wrap;
flex-wrap-reverse for the property flex-wrap: wrap-reverse;
flex-nowrap for the property flex-wrap: nowrap;

Flex

Utilities for controlling how flex items both grow and shrink.
flex-1 can have property flex: 1 1 0%; in tailwind.
flex-auto can have property flex: 1 1 auto; in tailwind.
flex-initial can have property flex: 0 1 auto; in tailwind.
flex-none can have property flex: none; in tailwind.

How to use Hover, Focus in tailwindcss?

The hover and focus features allow you to create a hover-based action that appears when a user hovers over an element. This feature is helpful for situations where you want to add an action to an element that is not clickable. For example, if you want to create a hover-based effect on your website’s logo, you can use the hover feature. You can use it anywhere as per your choice.

Each utility class in Tailwind can be applied conditionally by adding a modifier to the start of the class name that defines the condition you want to target.

For example, if you want to apply the bg-red-400 class on hover, use the hover:bg-red-400 class:

<button class="bg-red-800 hover:bg-red-400">
  Save changes
</button>

Before hover:

After Hover:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>

  <div class="flex items-center justify-center h-screen">
    <button class="bg-red-800 hover:bg-red-400 p-3 text-white rounded-md">
      Save changes
    </button>
  </div>

</body>
</html>

Some of the modifiers that Tailwind includes:
Pseudo-classes, like :hover, :focus, :first-child, and :required
Pseudo-elements, like ::before, ::after, ::placeholder, and ::selection

There are many more in Tailwindcss; you can explore the Tailwind Docs for more classes.

Setting up user and email on Git

You can setup the username and email by running these codes: git config --global user.name “Username” then press enter. Again type git config --global user.email “user@usermail.com” and press enter again. Now type git config --list to show the configuration and verify that you have entered the correct name and email

git config --global user.name “Username”

git config --global user.email “user@usermail.com”

git config --list

Initialize an empty repository (repo)

To initialize a repo, you must create a directory where your project will live. Once you've done that, you can open up your terminal and change into that directory. Then, you can run the command git init, which will initialize an empty repo. You can then start adding files to this repo and committing changes.

git init

Adding or staging file on your repo with Git add filename.extension

To add a file to your repository, you first need to tell git which files you want to track. This is done with the git add command. Simply type git add followed by the file name you wish to track. For example, if you wanted to track a file named test.js, you would type git add test.js. If this is the only file in your repo, then git will now track it. If you have more than one file in your repo, then git will prompt you to select which files to track, or you can use git add . to stage all the files.

git add test.js

git add .

Commit your changes into a repo

To commit your changes, you'll need to stage them by running git add . Once your changes are staged, you can commit them by running git commit -m "Your commit message here". If you forget to add a message, you can always run git commit --amend to add one. To make an interactive commit with the ability to edit the message, run git commit -a instead.

git commit -m "Your commit message here"

git commit --amend

git commit -a

List changes using git status

If you want to check the status of your repository and see which files have changed, you can use the git status command. This will give you a list of all the files that have been modified since the last commit. You can also use the git diff command to see what changes have been made to a file since the last commit. You can also use the git diff --staged command to see what changes have been made to a file in staging.

git status

git diff

git diff --staged

Push change from local directory to GitHub using git push origin master Section:

To push changes from your local directory to GitHub, you first need to initialize a git repository. This can be done by running the git init command. Once you have initialized a repository, you can add files to it using the git add command. Finally, you can push your changes to GitHub using the git push origin master command. Note: you must connect your local git to GitHub using the ssh key or token method.

git push origin master

git push -u origin master

Get changes from GitHub into the local directory using git pull origin master

If there are any changes on the remote repository that you don't have locally, git pull will fetch them and merge them into your local copy. For example, if someone commits a change to a project branch on GitHub before you've updated your local branch with a commit from that branch, when you run git pull origin master, it will tell you what is different between your two branches. Once this is done, it'll tell you if anything was done since the last time you ran git pull.

git pull origin master

Deleting Files In Git

we use the command: git rm filename.extension To delete files using git

git rm filename.extension

Renaming Files In Git

we use the command: git mv filename.extension To rename the files using git

git mv filename.extension

Untracking Tracked Files:

we use the git rm --cached file.extension command. it will become an untracked file.

git rm --cached file.extension

Git Log

we need to type git log. After typing this, you can see the commits made on the repo. To exit, we need to type q on our keyboard and press enter.

git log

Unstaging

To unstage a file, use git restore --staged file.ext. It will unstage the file, and you can verify it using git status.

git restore --staged file.ext

Creating & Switching Branches In Git

create a branch by typing git checkout -b branchname. git checkout branchname we will switch from the master branch to your newly created branch. git checkout master then you will see that the files on your repo will revert to the master branch.

git checkout -b branchname

git checkout branchname

git checkout master

Markdown is a lightweight markup language created by John Gruber. It is regarded as one of the most popular languages used to add formatting elements to text documents easily. Markdown doesn't have tags to define the structure, and the syntaxes are special characters with plain texts. In this guide, we'll cover everything you need to know about Markdown so that you can start using it yourself!

Markdown is easy to learn and use, making it a popular choice for document formatting. Markdown doesn't have tags to define the structure, and syntaxes are made up of these special characters with plain texts.

Headers, Paragraphs, and Line Breaks

Markdown is a language used to add formatting elements to text documents. The syntaxes are special characters with plain texts. Headers are created by adding one or more # symbols before a line of text. To create headings, follow this format: ## Title and text can be customized as you like. Paragraphs are created by leaving a blank line between lines of text. Line breaks are created by adding two spaces at the end of a line.

# Heading 1
## Heading 2
### Heading 3

Output:

Bold, Italic, and Strikethrough

Markdown is a simple way to add formatting to your text documents. To make text bold, surround it with asterisks or underscores. For example, **this text would be bold**. You can also make text italic by surrounding it with asterisks or underscores, like this: *this text would be italic*. Finally, you can strikethrough text by surrounding it with tildes. For example, ~~this text would be struck through~~.

Blockquotes

The > symbol is used as a prefix for blockquotes. It is also used to create nested blockquotes. You can also use the > symbol with space as a list prefix.

> Dorothy followed her through many of the beautiful rooms in her castle.
>
>> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

Output:

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

Horizontal Rules

Horizontal rules can be used to separate sections of content in a document. In Markdown, a horizontal rule is created by using three asterisks (***),

three dashes (---), or three underscores (___) in a row. These symbols create a line that spans the width of the document.

Link

Adding links in Markdown is pretty simple. You just need to use the following syntax: [Brave Browser](https://brave.com/). My favorite browser is Brave Browser.

Image

You can add images in Markdown by using the exclamation point (!) followed by the square brackets ([]) and then the parentheses ( ). In the square brackets, you will add the alt text for your image, and in the parentheses, you will add the URL of your image's location. The! Syntax defines an image with a title on top and a hyperlink below it.

![The San Juan Mountains are beautiful!](https://mdg.imgix.net/assets/images/shiprock.jpg?auto=format&fit=clip&q=40&w=300)

Output:

Code/Fenced Block Code

To denote a word or phrase as code, enclose it in backticks (`).

`let site = "Hashnode"`

Output:

let site = "Hashnode"

In fenced block code, use three backticks ("`) or three tildes (~~~) on the lines before and after the code block. This tells the markdown parser to treat everything inside the backticks as code. You can specify the language of the code block after the opening backticks.

Output:

<!DOCTYPE html>
<HTML>
   <head>
    <style>
    </style>
  </head>
  <body>

  </body>
</html>

Ordered List

1. To create an ordered list in Markdown, start each line with a number followed by a period.
2. Make sure there is a space between the number and the period.
4. You can use any number you want, but all items in the list must start with the same number.
7. If you want to add nested items, indent each item in two spaces.
5. To create a sub-list, you indent each item in the list with two spaces like this,
  1. First Item
  2. Second Item

Output:

1. To create an ordered list in Markdown, start each line with a number followed by a period.
2. Make sure there is a space between the number and the period.
3. You can use any number you want, but all items in the list must start with the same number.
4. If you want to add nested items, indent each item in two spaces.
5. To create a sub-list, you indent each item in the list with two spaces like this,
   1. First Item
   2. Second Item

Unordered list

- To create an unordered list in Markdown, you use the dash character (-) followed by a space.
- You can also use the asterisk character (*) instead of the dash.
- To create a nested list, you indent each item in the list with two spaces like this,
  - First Item
  - Second Item
- You can also create a nested list using the dash or asterisk characters.

Output:

• To create an unordered list in Markdown, you use the dash character (-) followed by a space.
• You can also use the asterisk character (*) instead of the dash.
• To create a nested list, you indent each item in the list with two spaces like this,
  • First Item
  • Second Item
• You can also create a nested list using the dash or asterisk characters.

Static Position

All the elements in HTML are positioned static by default. A static positioned element is an element that has no special positioning applied to it, and it is the default position for every element. It is always positioned according to the normal flow of the page.

Fixed Position

A fixed position element is positioned relative to the viewport or the browser window itself. The viewport doesn't change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled. Position fixed takes the element out of the screen, and the coordinate system is bound to the screen, and the element sticks to it. It is often used for navigation elements and can also be good for things like a logo or advertisement that you want to stay in one spot on a page no matter how far someone scrolls.

Relative Position

If you use the position property in CSS with a relative value, you tell the element to move relative to where it would generally be on the page. This element is positioned relative to its normal position.

Absolute Position

Absolute positioning takes an element out of the flow of the page so that other elements are positioned as if that element didn't exist; Absolute positioned elements are removed from the normal flow and can overlap elements. Usecase occurs when the element has absolute value and has a relative parent. The element position absolute uses the relative position element as a coordinate system. Position absolute takes the element out of the regular Html coordinate system and puts it to the nearest relative parent. However, if an absolute positioned element has no positioned ancestors, it moves with the document body and changes when you scroll.

Sticky Position

Sticky positioning is a hybrid of relative and fixed positioning. An element with a sticky position is positioned based on the user's scroll position. An element with a sticky position is positioned like a relative element until it reaches a specified point, which becomes fixed. The top, right, bottom, and left properties to specify the distance from its containing block.

Using CSS selectors effectively will help you write cleaner and more maintainable code. CSS selectors point to an HTML element so that CSS rules can be applied to that element and its children. This tutorial will teach different CSS selectors to help you better organize your code and manage your stylesheets. Let's get started!

Universal selector🐱‍💻

The universal selector, represented by an asterisk \( (*)\), is used to select any element on a page. So, if you wanted to make all the text on your page bold, you could use the universal selector like this: * { font-weight: bold; }. The main downside to using the universal selector is that it can adversely affect performance because it's very broad. Basic Syntax:

* {
  text-align: center;
  color: blue;
}

The following example can select all the elements:

<!DOCTYPE html>
<html>
<head>
<style>
* {
  text-align: center;
  color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>

Output:

Class Selector🐱‍👤

In CSS, a class selector is a name preceded by a full stop (.) representing an HTML element's class attribute. The class attribute can be used on any HTML element. You can also use multiple class names on the same element, separating each class name with a space. The style rule will affect all HTML elements in the document that have the same class attribute value.

Basic Syntax:

.center {
  text-align: center;
  color: blue;
}

The example is given below:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  color: blue;
}
</style>
</head>
<body>

<h1 class="center">Blue and center-aligned heading</h1>
<p class="center">Blue and center-aligned paragraph.</p> 

</body>
</html>

Output:

Id Selector🐱‍🏍

The ID selector selects an element based on its unique id attribute value. We use the id selector followed by the id value to select an element with a specific id. The id value must be unique within the document. We can only use one id selector per page.

Basic Syntax:

#parag1 {
  text-align: center;
  color: blue;
}

The example is given below:

<!DOCTYPE html>
<html>
<head>
<style>
#parag1 {
  text-align: center;
  color: blue;
}
</style>
</head>
<body>

<p id="parag1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>
</html>

Output:

Type Selector🐱‍💻

A type selector is the most basic type of CSS selector. It is used to select an element based on its name. For example, if we wanted to select all p elements on a page, we would use the type selector p.

Basic Syntax:

p {
  text-align: center;
  color: blue;
}

The example is given below:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-align: center;
  color: blue;
} 
</style>
</head>
<body>

<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>

Output:

Grouping Selector🐱‍🏍

A grouping selector is used to select multiple elements and style them together. To do this, list the element selectors you want to group, separated by commas. For example, if we wanted to style all h1 headings and paragraphs on a page, we could use the following grouping selector: h1, p { }

Basic Syntax:

h1, h2, p {
  text-align: center;
  color: blue;
}

The example is given below:

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
  text-align: center;
  color: blue;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

</body>
</html>

Output:

Pseudo-Selectors🐱‍👤

These are generally two types of pseudo-selectors:-

1. Pseudo-Element selctors

These selectors are used to style specific parts of the document tree that can't be selected using regular element selectors. For example, the::first-letter pseudo-element selector can be used to add a special effect to the first letter of a paragraph. Similarly, the ::before and ::after pseudo-elements are often used to create content before or after an element's content.

Basic Syntax:

p::first-line {
  color: #ff0f00;
  font-variant: small-caps;
}

The example is given below:

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
  color: #ff0f00;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more like lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>

</body>
</html>

Output:

2. Pseudo-Classes Selectors

A pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can change the color of a button when the user's mouse hovers over it. Several different pseudo-classes are available, each with its specific use case.

Basic Syntax:

a:hover {
  background-color: red;
}

The example is given below:

<!DOCTYPE html>
<html>
<head>
<style>
a:hover {
  background-color: red;
}
</style>
</head>
<body>

<h1>This is a header.</h1>
<p>This is a paragraph.</p>
<a href="https://example.com">This is a link.</a>

</body>
</html>

Output: Before Hover- While Hover-

Combinator selector🐱‍💻

A combinator selector is a compound selector that combines two or more selectors. There are four combinators in CSS:

1. The descendant combinator
2. The child combinator
3. The adjacent sibling combinator
4. The general sibling combinator Each of these has a different meaning and use case.

   1. Descendant Combinator

   The descendant selector matches all elements descendants of a specified element or any element that is a direct child of another element.

Basic Syntax:

div p {
  background: violet;
}

The following example selects all p elements inside div elements:

<!DOCTYPE html>
<html>
<head>
<style>
div p {
  background: violet;
}
</style>
</head>
<body>

<h1>Descendant Selector</h1>

<p>The descendant selector matches all elements that are descendants of a specified element.</p>

<div>
  <p>Para 1 in the div.</p>
  <p>Para 2 in the div.</p>
  <section><p>Para 3 in the div.</p></section>
</div>

<p>Para 4. Not in a div.</p>
<p>Para 5. Not in a div.</p>

</body>
</html>

Output:

2. Child combinator

The child selector is used to select elements that are direct children of a specific element. For example, if we wanted to select all p elements that were direct children of a div, we would use the child selector like this: div > p.

Basic Syntax:

div > p {
  background: yellow;
}

The following example selects all p elements that are children of a div element:

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
  background: yellow;
}
</style>
</head>
<body>

<h1>Child Selector</h1>

<p>The child selector (>) selects all elements that are the children of a specified element.</p>

<div>
  <p>Para 1 in the div.</p>
  <p>Para 2 in the div.</p>
  <section>
    <!-- not Child but Descendant -->
    <p>Para 3 in the div (inside a section element).</p>
  </section>
  <p>Para 4 in the div.</p>
</div>

<div>
    <p>Para 5. in other div.</p>
    <p>Para 6. in other div.</p>
    <footer>
        <p>Para 7. in the footer element of the other div.</p>
    </footer>

</div>
<p>Para 8. Not in a div.</p>

</body>
</html>

Output:

3. Adjacent sibling combinator

The sibling selector is very similar to the child selector, but instead of selecting direct children, it selects elements that are siblings of a specific element. The adjacent sibling combinator selects elements next to each other on the same level, which could be either children or siblings.

Basic Syntax:

div + p {
  background: violet;
}

The following example selects the first p element that is placed immediately after div elements:

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
  background: violet;
}
</style>
</head>
<body>

<h1>Adjacent Sibling Selector</h1>

<p>The + selector is used to select an element that is directly after another specific element.</p>
<p>The following example selects the first p element that are placed immediately after div elements:</p>

<div>
  <p>Para 1 in the div.</p>
  <p>Para 2 in the div.</p>
</div>

<p>Para 3. After a div.</p>
<p>Para 4. After a div.</p>

<div>
  <p>Para 5 in the div.</p>
  <p>Para 6 in the div.</p>
</div>

<p>Para 7. After a div.</p>
<p>Para 8. After a div.</p>

</body>
</html>

Output:

4. General Sibling Selector

The general sibling selector selects all elements that are subsequent siblings of a specified element.

Basic Syntax:

div ~ p {
  background: yellow;
}

The following example selects all p elements that are next siblings of div elements:

<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
  background: yellow;
}
</style>
</head>
<body>

<h1>General Sibling Selector</h1>

<p>The general sibling selector (~) selects all elements that are next siblings of a specified element.</p>

<p>Para 1.</p>

<div>
  <p>Para 2.</p>
</div>

<p>Para 3.</p>
<code>Some text or code.</code>
<p>Para 4.</p>
<p>Para 5.</p>
<p>Para 6.</p>

</body>
</html>

Output:

So these are the most common and essential CSS selectors; there are more CSS selectors that you can explore while learning to code.