DEV Community: Madelyn Mathew

Sneakers 3d Product Card Hover HTML CSS 🔥🙌

Madelyn Mathew — Tue, 07 Mar 2023 12:08:06 +0000

Sneakers 3d Product Card Hover HTML CSS 🔥🙌 When Hover Shoes will Move Up that Will Blow your mind 😨

!! FOLLOW US TO LEARN CODING !!

Follow for more https://dev.to/backlinkss 💙

Tags Your Friends 😉

Don't forget Like ♥️ and share 💬
Save for future references 📖

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Sneaker Product Cards </title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<main class="container">
  <section class="card">
    <div class="product-image">
      <img src="https://i.ibb.co/cNWqxGx/red.png" alt="OFF-white Red Edition" draggable="false" />
    </div>
    <div class="product-info">
      <h2>Nike X OFF-white</h2>
      <p>The 10: Air Jordan 1 off-white - Chicago</p>
      <div class="price">$999</div>
    </div>
    <div class="btn">
      <button class="buy-btn">Buy Now</button>
      <button class="fav">
        <svg class="svg" id="i-star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
          <path d="M16 2 L20 12 30 12 22 19 25 30 16 23 7 30 10 19 2 12 12 12 Z" />
        </svg>
      </button>
    </div>
  </section>
  <section class="card card-blue">
    <div class="product-image">
      <img src="https://i.ibb.co/0JKpmgd/blue.png" alt="OFF-white Blue Edition" draggable="false" />
    </div>
    <div class="product-info">
      <h2>Nike X OFF-white</h2>
      <p>Air Jordan 1 Retro High "Off-White - UNC" sneakers</p>
      <div class="price">$1599</div>
    </div>
    <div class="btn">
      <button class="buy-btn">Buy Now</button>
      <button class="fav">
        <svg class="svg" id="i-star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
          <path d="M16 2 L20 12 30 12 22 19 25 30 16 23 7 30 10 19 2 12 12 12 Z" />
        </svg>
      </button>
    </div>
  </section>
</main>
<!-- partial -->

</body>
</html>

CSS

/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

/*===== VARIABLES CSS =====*/
:root {
  --dark-color-lighten: #f2f5ff;
  --red-card: #a62121;
  --blue-card: #4bb7e6;
  --btn: #141414;
  --btn-hover: #3a3a3a;
  --text: #fbf7f7;
}

/*===== RESET =====*/
*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100vh;
  width: 100vw;
  background-color: var(--dark-color-lighten);
  font-family: "Montserrat", sans-serif;
}
button {
  font-family: "Montserrat", sans-serif;
  display: inline-block;
  border: none;
  outline: none;
  border-radius: 0.2rem;
  color: var(--text);
  cursor: pointer;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: 100%;
  user-select: none;
}

/*===== CARD =====*/
.container {
  height: 100%;
  width: 850px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.card {
  position: relative;
  padding: 1rem;
  width: 350px;
  height: 450px;
  box-shadow: -1px 15px 30px -12px rgb(32, 32, 32);
  border-radius: 0.9rem;
  background-color: var(--red-card);
  color: var(--text);
  cursor: pointer;
}

.card-blue {
  background: var(--blue-card);
}

.product-image {
  height: 230px;
  width: 100%;
  transform: translate(0, -1.5rem);
  transition: transform 500ms ease-in-out;
  filter: drop-shadow(5px 10px 15px rgba(8, 9, 13, 0.4));
}
.product-info {
  text-align: center;
}

.card:hover .product-image {
  transform: translate(-1.5rem, -7rem) rotate(-20deg);
}

.product-info h2 {
  font-size: 1.4rem;
  font-weight: 600;
}
.product-info p {
  margin: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
}
.price {
  font-size: 1.2rem;
  font-weight: 500;
}
.btn {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 0.8rem;
}
.buy-btn {
  background-color: var(--btn);
  padding: 0.6rem 3.5rem;
  font-weight: 600;
  font-size: 1rem;
  transition: 300ms ease;
}
.buy-btn:hover {
  background-color: var(--btn-hover);
}
.fav {
  box-sizing: border-box;
  background: #fff;
  padding: 0.5rem 0.5rem;
  border: 1px solid#000;
  display: grid;
  place-items: center;
}

.svg {
  height: 25px;
  width: 25px;
  fill: #fff;
  transition: all 500ms ease;
}

.fav:hover .svg {
  fill: #000;
}

@media screen and (max-width: 800px) {
  body {
    height: auto;
  }
  .container {
    padding: 2rem 0;
    width: 100%;
    flex-direction: column;
    gap: 3rem;
  }
}

This code creates a 3D product card with an image of a sneaker and an overlay that appears when you hover over the card. You can replace the image with your own sneaker image and customize the product details and styling to fit your needs.

Convert srt to text regex javascript

Madelyn Mathew — Sat, 07 Jan 2023 09:46:47 +0000

A popular file format for storing subtitles is called SubRip Text (SRT), and it's frequently used to provide closed captions for videos. You might need to transform the SRT data into plain text if you're using SRT files in a JavaScript project. In this post, we'll examine how to accomplish this using JavaScript regular expression (regex).

SubRip Subtitle, or srt for short, is a popular text file format for storing subtitles. This post will demonstrate how to use JavaScript regular expressions to convert srt to text.

Using regular expressions in JavaScript, you can convert srt to text in a number of different ways. Here, we'll outline two approaches you can use to accomplish this.

Here Is the method convert srt to text with javascript and regex.

How to convert srt to text with javascript and regex

JavaScript provides the function to convert an SRT (SubRip Text) subtitle file to text using regex:


function convertSrtToText(srt) {
  // Use a expressão regular para remover os números de linha e as marcas de tempo
  return srt.replace(/^\d+\n([\d:,]+ --> [\d:,]+\n)/gm, '');
}

Line numbers and timestamps are removed from the SRT file by this function using a regular expression. Without the line numbers and timestamps, it returns the text that was left in the SRT file.

Simply call the function, supplying the content of the SRT file as a parameter, like in the example below, to use it.

var srt = "1\n00:00:10,500 --> 00:00:13,000\nTexto da linha 1\n\n2\n00:00:13,500 --> 00:00:16,000\nTexto da linha 2\n\n3\n00:00:16,500 --> 00:00:19,000\nTexto da linha 3\n";
var text = convertSrtToText(srt);
console.log(text); // Exibe "Texto da linha 1\n\nTexto da linha 2\n\nTexto da linha 3\n"

Using the fs module

We require the fs module, which enables us to interact with file systems in various ways, in order to process the SRT text.

We require the Node.js environment and the command below to install the fs module.

npm install fs

We can use the regex techniques to convert srt to text now that we have the fs module.

Using replace () Method

You would first need to read the contents of the srt file using the fs module in Node.js in order to convert a srt file to text in JavaScript using regex. The text from the srt file would then need to be extracted using a regular expression. Here is an illustration of how it might be done:

const fs = require('fs');

// Read the contents of the srt file
const srtFile = fs.readFileSync('/path/to/file.srt', 'utf8');

// Use a regular expression to extract the text from the srt file
const text = srtFile.replace(/^\\d+\\n(\\d{2}:\\d{2}:\\d{2},\\d{3} --> \\d{2}:\\d{2}:\\d{2},\\d{3})\\n/gm, '');

console.log(text);

Output

1
00:00:51,916 --> 00:00:54,582
'London in the 1960s.

2
00:00:54,708 --> 00:00:57,124

'Everyone had a story about the Krays.
The timestamp and speaker information at the start of each line in the srt file are matched in this example using the regular expression /d+n(d2:d2:d2,d3 --> d2:d2:d2,d3)n/gm. Then, only the text itself is kept by using the replace() method to delete this data.

Using match () Method

Here is another method to convert a srt file to text in JavaScript is as follows:

const fs = require('fs');

// Read the contents of the srt file
const srtFile = fs.readFileSync('/path/to/file.srt', 'utf8');

// Split the srt file into an array of lines
const lines = srtFile.split('\\n');

// Use a for loop to iterate over the lines in the array
for (let i = 0; i < lines.length; i++) {
  // Skip the lines that start with a timestamp or speaker information
  if (lines[i].match(/^\\d+$/) || lines[i].match(/^\\d{2}:\\d{2}:\\d{2},\\d{3} --> \\d{2}:\\d{2}:\\d{2},\\d{3}$/)) {
    continue;
  }

  // Print the remaining lines, which should be the text from the srt file
  console.log(lines[i]);
}

Output

1
00:00:51,916 --> 00:00:54,582
'London in the 1960s.

2
00:00:54,708 --> 00:00:57,124

'Everyone had a story about the Krays.
In this technique, the srt file's contents are divided into an array of lines using the split() method. The lines in the array are then iterated over in a for loop, and a regular expression is used to determine whether or not each line begins with a date or speaker information. If so, the loop moves on to the following iteration. If not, the text from the srt file is displayed to the console along with the line.

Convert SRT using JS Modules

Other methods besides JavaScript exist to convert SRT files to text. You can think about the following choices:

srt-to-vtt module

SRT-to-VTT module usage To convert SRT files to text, use the npm package known as srt-to-vtt. You must instal it using the following command before using it:

npm install srt-to-vtt

Then use the following code:

const srtToVtt = require('srt-to-vtt');

srtToVtt.convertSrtToVtt('path/to/input.srt', 'path/to/output.vtt', (err) => {
  if (err) {
    console.error(err);
  } else {
    console.log('Conversão concluída com sucesso');
  }
});

srt-to-txt module

SRT-to-TXT module usage Another npm package that may be used to convert SRT files to text is the srt-to-txt module. You must instal it using the following command before using it:

npm install srt-to-txt

const srtToTxt = require('srt-to-txt');

srtToTxt('path/to/input.srt').then((text) => {
  console.log(text);
});

SubRip-Text library

Using the SubRip-Text library SRT files can be read and edited using the JavaScript library known as the SubRip-Text. You must instal it using the following command before using it:

npm install subrip-text

const SubRipText = require('subrip-text');

const srt = new SubRipText('path/to/input.srt');

console.log(srt.getPlainText());

Other ways to convert SRT to TXT

Other techniques exist for converting an SRT file to text (TXT). You can think about the following options:

Using an online converter: You may convert SRT files to text using a number of different online converters. The converter will handle the conversion for you after you upload the SRT file.

Use a text editor: Text editors with features for deleting line numbers and timestamps from SRT files include Notepad++ and Sublime Text. These settings can be used to remove these components and save the file as a plain text file.

Using a command line script: If you need to convert a lot of SRT files automatically while working with them, using a command line script similar to the ones in this post can be helpful.

Summary

For storing subtitles in a text file, the SRT format is frequently used. It is frequently employed to show closed subtitles for videos. Regular expressions can be used in JavaScript to transform SRT data into plain text.

You may accomplish this by reading the contents of the SRT file using the fs module in Node.js. The text from the SRT file can then be extracted using a regular expression. One technique is to take out the timestamp and speaker information at the start of each line using the replace() method. Another strategy is to output the remaining lines, which should contain the text from the SRT file, after using the match () method to ignore any lines that begin with a date or speaker name.

It's vital to keep in mind that because SRT files can have different formats, these methods might not always function. If you want to extract the text from the SRT file, you might need to change the regular expressions or try an other strategy.

👉 For More Details Visit Here : [BackLinks]

10 Best JavaScript Projects for Beginners [With Source Code]

Madelyn Mathew — Wed, 04 Jan 2023 06:47:14 +0000

One of the most widely used programming languages is JavaScript (JS), which is utilised in all web applications for a variety of purposes, including validation, generating dynamic information, interactive graphics, and mapping. JS offers the ability to create comprehensive, complex web apps alongside HTML and CSS.

Users can interact with the intriguing components of a web page using JS. But where do you begin if you're a novice coder with little JS experience?

The best way to learn is by doing, which is where simple JavaScript projects come in. We've compiled the best JavaScript projects for beginners as well as a few more challenging ones for when you've gotten the hang of it, so don't worry if you need help coming up with project ideas!

Are you ready to work on JavaScript projects? Let's get going.

Why JavaScript Projects?

The core of any web application is JS. A solid grasp of JS opens up a wide range of demanding and exciting employment opportunities, such as full-stackprogramming, mobile app development, dynamic web development, and UI/UX design. It's simple to have fun with JavaScript because of the language's limitless interaction.

Projects are the next step to enhancing your resume if you are familiar with the fundamentals of JavaScript. If you have no prior programming knowledge, you can read JS books or enrol in introductory JavaScript courses before coming back to these projects. Since the source code is available, you can understand the majority of JavaScript projects if you are familiar with HTML and CSS.

Before we get to the projects themselves, let's review some of JavaScript's key characteristics:

used to produce interactive web content on both the client and server sides.
enhances user experience significantly with dynamic functionality.
Object-oriented language that is lightweight.
Language that is open, cross-platform, and interpreted.
seamlessly incorporates HTML and Java.

Beginner JavaScript Projects at Their Best

Although JavaScript is very versatile, we don't want to overburden you. Fortunately, there are plenty of basic javascript projects available to get you started.

To make it simple for you to get started, we'll start out slowly with these JavaScript projects containing source code:

1. JavaScript Calculator

One of the simple JavaScript projects on our list is the calculator. Simple HTML and CSS will be used, and basic JavaScript functions will be used to generate all functional components. To display buttons, we'll keep utilising HTML, and CSS will enhance the presentation. Finally, we'll need to use JavaScript to make sure that buttons execute the proper actions.

Eval(), a universal JS function that resolves JS code, serves as the main function. The chosen number will be shown on the calculator screen via the display() method. Keep in mind that the software will only respond to mouse events. Here is the entire code, broken down into sections for HTML, CSS, and JS:

Source Code : Click On Me

2. Hangman Game

A popular game and one of our easy JS projects is hangman. It can be quickly developed using JavaScript, HTML, and CSS. Keep in mind that JS is used to define the core functionality. The purpose of HTML is for display, whereas CSS takes care of embellishing the contents.

The JS code has a lot of specified methods, so at first it could look hard, but after carefully reading it, you'll discover that it's really rather straightforward. Run the code to view how it is executed line by line.

Check the execution and code here.

Source Code : Click On Me

3. Tic-Tac-Toe game

It's simple to create your own Tic-Tac-Toe game with JavaScript. The complete code can be viewed here, and it walks you through each step of creating a 3x3 tic-tac-toe board. Then, for your own practise and expertise, you can subsequently expand to NxN. The project's HTML and CSS are both relatively straightforward. The author begins with pseudocode before delving into each function's particular explanation.

Source Code : Click On Me

4. Weather App

Another common JavaScript project is a weather app. In this project, whenever the location name is changed, the weather display updates without requiring a page refresh. Also pretty stylish is the UI.

Keep in mind that the majority of weather apps access weather data via an API. We'll employ the most well-known and widely used API, OpenWeatherMap.

Check out this YouTube video that goes into great detail about the functionality and code of the weather app. As usual, there are three files: main.js, main.css, and index.html. It is more convenient to maintain different files even though all the code can be contained in a single file (HTML).

Source Code : Click On Me

5. JavaScript Music Events

You will learn about event listeners that respond to keyboard events in this section. For instance, pressing the "S" key will cause a certain occurrence to occur. Each will have a unique code and course of action.

We will also learn how to add and play audio files in addition to event listeners. Because JavaScript is the main focus here, you'll see that we've added some very simple CSS. For the application to function properly, you will need to import your own sounds and backdrop images.

Source Code : Click On Me

6. JavaScript Form Validation

Many websites employ form validation as a handy feature for client-side user information validation, including card and address details. The user can enter a number, leave the field blank, or type only one letter in a mandatory input field, for instance, if the field's name is required. JS has the ability to verify this data.

The project that follows entails basic form validation. Of course, HTML components will also be required for the project. We merely included the bare minimum of HTML components, with no significant styling.

Here is the entire code for a straightforward form with fundamental validations:

Source Code : Click On Me

7. JavaScript Photo Details Display

Here, we'll put some pictures on a website. More information will show up as the viewer hovers over the photographs. You can utilise the photographs you already have or download new ones from anywhere.

Once more, we have combined JS with simple HTML and CSS. The majority of the labour is done by the latter. Through this project, you will gain knowledge of how mouse hover (over and out) events operate.

Try this W3Schools slideshow project to make it more challenging. The graphics will change when the user moves their mouse over them if you replace the onClick events with onmousehover and onmouseout events.

Source Code : Click On Me

8. Build an Interactive Landing Page

This project entails creating a dynamic landing page that displays an appropriate image and greeting depending on the time of day while storing your name and typed text in local storage. You may learn more about the JS components of this project by watching this YouTube video.

Source Code : Click On Me

9. Real-time Chat Application

Making chat applications is comparatively easy, and JavaScript may be used to build one from scratch. This project is a little frightening because it uses both React and Node.js. But it's a useful method to get your hands dirty and gain experience with these priceless equipment.

On GitHub, you can see the source code here.

Source Code : Click On Me

10. JavaScript Browser Code Editor

Although there are many JS code editors available, having the option to make your own is always wonderful. This project is about building an in-browser code editor using the JS language. It uses various practical JS techniques and even has syntax highlighting!

This project's source code may be found here.

Source Code : Click On Me

Create JavaScript projects right now!

Only 15 of the many cool JavaScript projects have been covered. However, these JavaScript example projects can add a tonne of value to your portfolio and cover nearly every essential JavaScript idea.

Do you want to know more about JavaScript? With the help of our HTML projects, broaden your understanding of how it interacts with HTML. And after you gain assurance?

👉 For More Details Visit Here : [BackLinks]

Python CheatSheet

Madelyn Mathew — Mon, 02 Jan 2023 12:42:01 +0000

Basics

Basic syntax from the python programming language

Showing Output To User

The print function is used to display or print output as follows

print("Content that you wanna print on screen")

we can display the content present in object using prit function as follows:-

var1 = "Madelyn"
print("Hi my name is: ",var1)

Taking Input From the User

The input function is used to take input as string or character from the user as follows:

var1 = input("Enter your name: ")
print("My name is: ", var1)

To take input in form of other datatypes we need to typecaste them as follows:-

To take input as an integer:-

var1=int(input("enter the integer value"))
print(var1)

To take input as an float:-

var1=float(input("enter the float value"))
print(var1)

range Function

range function returns a sequence of numbers, eg, numbers starting from 0 to n-1 for range(0, n)

range(int_start_value,int_stop_value,int_step_value)

Here the start value and step value are by default 1 if not mentioned by the programmer. but int_stop_value is the compulsory parameter in range function

example-

Display all even numbers between 1 to 100

for i in range(0,101,2):
       print(i)

Comments

Comments are used to make the code more understandable for programmers, and they are not executed by compiler or interpreter.

Single line comment

# This is a single line comment

Multi-line comment

'''This is a
multi-line
comment'''

Escape Sequence

An escape sequence is a sequence of characters; it doesn't represent itself (but is translated into another character) when used inside string literal or character. Some of the escape sequence characters are as follows:

Newline

Newline Character

print("\n")

Backslash

It adds a backslash

print("\\")

Single Quote

It adds a single quotation mark

print("\'")

Tab

It gives a tab space

print("\t")

Backspace

It adds a backspace

print("\b")

Octal value

It represents the value of an octal number

print("\ooo")

Hex value

It represents the value of a hex number

print("\xhh")

Carriage Return

Carriage return or \r will just work as you have shifted your cursor to the beginning of the string or line.

pint("\r")

Strings

Python string is a sequence of characters, and each character can be individually accessed using its index.

String

You can create Strings by enclosing text in both forms of quotes - single quotes or double quotes.

variable_name = "String Data"

example

str="Shruti"
print("string is ",str)

Indexing

The position of every character placed in the string starts from 0th position ans step by step it ends at length-1 position

Slicing

Slicing refers to obtaining a sub-string from the given string. The following code will include index 1, 2, 3, and 4 for the variable named var_name

Slicing of the string can be obtained by the following syntax-

string_var[int_start_value:int_stop_value:int_step_value]

var_name[1 : 5]

here start and step value are considered 0 and 1 respectively if not mentioned by the programmmer

isalnum() method

Returns True if all the characters in the string are alphanumeric, else False

string_variable.isalnum()

isalpha() method

Returns True if all the characters in the string are alphabets

string_variable.isalpha()

isdecimal() method

Returns True if all the characters in the string are decimals

string_variable.isdecimal()

isdigit() method

Returns True if all the characters in the string are digits

string_variable.isdigit()

islower() method

Returns True if all characters in the string are lower case

string_variable.islower()

isspace() method

Returns True if all characters in the string are whitespaces

string_variable.isspace()

isupper() method

Returns True if all characters in the string are upper case

string_variable.isupper()

lower() method

Converts a string into lower case equivalent

string_variable.lower()

upper() method

Converts a string into upper case equivalent

string_variable.upper()

strip() method

It removes leading and trailing spaces in the string

string_variable.strip()

List

A List in Python represents a list of comma-separated values of any data type between square brackets.

var_name = [element1, element2, ...]

These elements can be of different datatypes

Indexing

The position of every elements placed in the string starts from 0th position ans step by step it ends at length-1 position

List is ordered,indexed,mutable and most flexible and dynamic collection of elements in python.

Empty List

This method allows you to create an empty list

my_list = []

index method

Returns the index of the first element with the specified value

list.index(element)

append method

Adds an element at the end of the list

list.append(element)

extend method

Add the elements of a given list (or any iterable) to the end of the current list

list.extend(iterable)

insert method

Adds an element at the specified position

list.insert(position, element)

pop method

Removes the element at the specified position and returns it

list.pop(position)

remove method

The remove() method removes the first occurrence of a given item from the list

list.remove(element)

clear method

Removes all the elements from the list

list.clear()

count method

Returns the number of elements with the specified value

list.count(value)

reverse method

Reverses the order of the list

list.reverse()

sort method

Sorts the list

list.sort(reverse=True|False)

Tuples

Tuples are represented as comma-separated values of any data type within parentheses.

Tuple Creation

variable_name = (element1, element2, ...)

These elements can be of different datatypes

Indexing

The position of every elements placed in the string starts from 0th position ans step by step it ends at length-1 position

Tuples are ordered,indexing,immutable and most secured collection of elements

Lets talk about some of the tuple methods:

count method

It returns the number of times a specified value occurs in a tuple

tuple.count(value)

index method

It searches the tuple for a specified value and returns the position.

tuple.index(value)

Sets

A set is a collection of multiple values which is both unordered and unindexed. It is written in curly brackets.

Set Creation: Way 1

var_name = {element1, element2, ...}

Set Creation: Way 2

var_name = set([element1, element2, ...])

Set is unordered,immutable,non-indexed type of collection.Duplicate elements are not allowed in sets.

Set Methods

Lets talk about some of the methods of sets:

add() method

Adds an element to a set

set.add(element)

clear() method

Remove all elements from a set

set.clear()

discard() method

Removes the specified item from the set

set.discard(value)

intersection() method

Returns intersection of two or more sets

set.intersection(set1, set2 ... etc)

issubset() method

Checks if a set is a subset of another set

set.issubset(set)

pop() method

Removes an element from the set

set.pop()

remove() method

Removes the specified element from the set

set.remove(item)

union() method

Returns the union of two or more sets

set.union(set1, set2...)

Dictionaries

The dictionary is an unordered set of comma-separated key:value pairs, within {}, with the requirement that within a dictionary, no two keys can be the same.

Dictionary

<dictionary-name> = {<key>: value, <key>: value ...}

Dictionary is ordered and mutable collection of elements.Dictionary allows duplicate values but not duplicate keys.

Empty Dictionary

By putting two curly braces, you can create a blank dictionary

mydict={}

Adding Element to a dictionary

By this method, one can add new elements to the dictionary

<dictionary>[<key>] = <value>

Updating Element in a dictionary

If a specified key already exists, then its value will get updated

<dictionary>[<key>] = <value>

Deleting an element from a dictionary

del keyword is used to delete a specified key:value pair from the dictionary as follows:

del <dictionary>[<key>]

Dictionary Functions & Methods

Below are some of the methods of dictionaries

len() method

It returns the length of the dictionary, i.e., the count of elements (key: value pairs) in the dictionary

len(dictionary)

clear() method

Removes all the elements from the dictionary

dictionary.clear()

get() method

Returns the value of the specified key

dictionary.get(keyname)

items() method

Returns a list containing a tuple for each key-value pair

dictionary.items()

keys() method

Returns a list containing the dictionary's keys

dictionary.keys()

values() method

Returns a list of all the values in the dictionary

dictionary.values()

update() method

Updates the dictionary with the specified key-value pairs

dictionary.update(iterable)

Indentation

In Python, indentation means the code is written with some spaces or tabs into many different blocks of code to indent it so that the interpreter can easily execute the Python code.

Indentation is applied on conditional statements and loop control statements. Indent specifies the block of code that is to be executed depending on the conditions.

Conditional Statements

The if, elif and else statements are the conditional statements in Python, and these implement selection constructs (decision constructs).

if Statement

if(conditional expression):
    statements

if-else Statement

if(conditional expression):
    statements
else:
    statements

if-elif Statement

if (conditional expression):
    statements
elif (conditional expression):
    statements
else:
    statements

Nested if-else Statement

if (conditional expression):
    if (conditional expression):
        statements
    else:
        statements
else:
    statements
example-

a=15
b=20
c=12
if(a>b and a>c):
      print(a,"is greatest")
elif(b>c and b>a):
      print(b," is greatest")
else:
    print(c,"is greatest")

Loops in Python

A loop or iteration statement repeatedly executes a statement, known as the loop body, until the controlling expression is false (0).

For Loop

The for loop of Python is designed to process the items of any sequence, such as a list or a string, one by one.

for <variable> in <sequence>:
    statements_to_repeat

example-

for i in range(1,101,1):
           print(i)

While Loop

A while loop is a conditional loop that will repeat the instructions within itself as long as a conditional remains true.

while <logical-expression>:
    loop-body

example-

i=1
while(i<=100):
        print(i)
        i=i+1

Break Statement

The break statement enables a program to skip over a part of the code. A break statement terminates the very loop it lies within.

for <var> in <sequence>:
    statement1
    if <condition>:
        break
    statement2
statement_after_loop

example-

for i in range(1,101,1):
    print(i ,end=" ")
    if(i==50):
        break
    else:
        print("Mississippi")
print("Thank you")

Continue Statement

The continue statement skips the rest of the loop statements and causes the next iteration to occur.

for <var> in <sequence>:
    statement1
    if <condition> :
        continue
    statement2
    statement3
    statement4

example-

for i in [2,3,4,6,8,0]:
    if (i%2!=0):
        continue
    print(i

)

Functions

A function is a block of code that performs a specific task. You can pass parameters into a function. It helps us to make our code more organized and manageable.

Function Definition

def my_function():
          #statements

def keyword is used before defining the function.

Function Call

my_function()

Whenever we need that block of code in our program simply call that function name whenever neeeded. If parameters are passed during defing the function we have to pass the parameters while calling that function

example-

def add():       #function defination
        a=10
        b=20
       print(a+b)
add()            #function call

Return statement in Python function

The function return statement return the specified value or data item to the caller.

return [value/expression]

Arguments in python function

Arguments are the values passed inside the parenthesis of the function while defining as well as while calling.

def my_function(arg1,arg2,arg3....argn):
          #statements
my_function(arg1,arg2,arg3....argn)

example-

def add(a,b):
      return a+b
x=add(7,8)
print(x)

File Handling

File handling refers to reading or writing data from files. Python provides some functions that allow us to manipulate data in the files.

open() function

var_name = open("file name", " mode")
modes-

r - to read the content from file
w - to write the content into file
a - to append the existing content into file
r+: To read and write data into the file. The previous data in the file will be overridden.
w+: To write and read data. It will override existing data.
a+: To append and read data from the file. It won’t override existing data.

close() function

var_name.close()

read () function

The read functions contains different methods, read(),readline() and readlines()

read() #return one big string

It returns a list of lines

readlines() #returns a list

It returns one line at a time

readline #returns one line at a time

write function

This function writes a sequence of strings to the file.

write() #Used to write a fixed sequence of characters to a file

It is used to write a list of strings

writelines()

Exception Handling

An exception is an unusual condition that results in an interruption in the flow of a program.

try and except

A basic try-catch block in python. When the try block throws an error, the control goes to the except block.

try:
    [Statement body block]
    raise Exception()
except Exceptionname:
    [Error processing block]

else

The else block is executed if the try block have not raise any exception and code had been running successfully

try:
     #statements
except:
     #statements
else:
      #statements

finally

Finally block will be executed even if try block of code has been running successsfully or except block of code is been executed. finally block of code will be executed compulsory

Object Oriented Programming (OOPS)

It is a programming approach that primarily focuses on using objects and classes. The objects can be any real-world entities.

class

The syntax for writing a class in python

class class_name:
    pass #statements

Creating an object

Instantiating an object can be done as follows:

<object-name> = <class-name>(<arguments>)

self parameter

The self parameter is the first parameter of any function present in the class. It can be of different name but this parameter is must while defining any function into class as it is used to access other data members of the class

class with a constructor

Constructor is the special function of the class which is used to initialize the objects. The syntax for writing a class with the constructor in python

class Backlinks:

    # Default constructor
    def __init__(self):
        self.name = "Backlinks"

    # A method for printing data members
    def print_me(self):
        print(self.name)

Inheritance in python

By using inheritance, we can create a class which uses all the properties and behavior of another class. The new class is known as a derived class or child class, and the one whose properties are acquired is known as a base class or parent class.

It provides the re-usability of the code.

class Base_class:
       pass
class derived_class(Base_class):
        pass

Types of inheritance-

Single inheritance
Multiple inheritance
Multilevel inheritance
Hierarchical inheritance

filter function

The filter function allows you to process an iterable and extract those items that satisfy a given condition

filter(function, iterable)

issubclass function

Used to find whether a class is a subclass of a given class or not as follows

issubclass(obj, classinfo) # returns true if obj is a subclass of classinfo

Iterators and Generators

Here are some of the advanced topics of the Python programming language like iterators and generators

Iterator

Used to create an iterator over an iterable

iter_list = iter(['Madelyn', 'Aexl', 'Jack']) 
print(next(iter_list)) 
print(next(iter_list)) 
print(next(iter_list))

Generator

Used to generate values on the fly

# A simple generator function
def my_gen():
    n = 1
    print('This is printed first')
    # Generator function contains yield statements
    yield n
    n += 1
    print('This is printed second')
    yield n
    n += 1
    print('This is printed at last')
    yield n

Decorators

Decorators are used to modifying the behavior of a function or a class. They are usually called before the definition of a function you want to decorate.

property Decorator (getter)

@property
def name(self):
    return self.__name

setter Decorator

It is used to set the property 'name'

@name.setter
def name(self, value):
    self.__name=value

deleter Decorator

It is used to delete the property 'name'

@name.deleter #property-name.deleter decorator
def name(self, value):
    print('Deleting..')
    del self.__name

👉 For More Details Visit Here : BackLinks

JavaScript Cheatsheet

Madelyn Mathew — Thu, 29 Dec 2022 04:58:12 +0000

JavaScript Basics

Set of JavaScript basic syntax to add, execute and write basic programming paradigms in Javascript

On Page Script

Adding internal JavaScript to HTML

<script type="text/javascript"> //JS code goes here </script>

External JS File

Adding external JavaScript to HTML

<script src="filename.js"></script>

Functions

JavaScript Function syntax

function nameOfFunction() {
    // function body 
}

DOM Element

Changing content of a DOM Element

document.getElementById("elementID").innerHTML = "Hello World!";

Output

This will print the value of a in JavaScript console

console.log(a);

Conditional Statements

Conditional statements are used to perform operations based on some conditions.

If Statement

The block of code to be executed, when the condition specified is true.

if (condition) {
    // block of code to be executed if the condition is true
}

If-else Statement

If the condition for the if block is false, then the else block will be executed.

if (condition) {
    // block of code to be executed if the condition is true
} else {
    // block of code to be executed if the condition is false
}

Else-if Statement

A basic if-else ladder

if (condition1) {
    // block of code to be executed if condition1 is true
} else if (condition2) {
    // block of code to be executed if the condition1 is false and condition2 is true
} else {
    // block of code to be executed if the condition1 is false and condition2 is false
}

Switch Statement

Switch case statement in JavaScript

switch (expression) {
    case x:
        // code block
        break;
    case y:
        // code block
        break;
    default:
        // code block
}

Iterative Statements (Loops)

Iterative statement facilitates programmer to execute any block of code lines repeatedly and can be controlled as per conditions added by the programmer.

For Loop

For loop syntax in javascript

for (initialization; condition; incrementation;) {
    // code block to be executed
}

Example:

for (let i = 0; i < 5; i++) {
    text += "Iteration number: " + i + "<br>";
}

While Loop

Runs the code till the specified condition is true

while (condition) {
    // code block to be executed
}

Do While Loop

A do while loop is executed at least once despite the condition being true or false

do {
    // run this code in block
    i++;
} while (condition);

Strings

The string is a sequence of characters that is used for storing and managing text data.

charAt method

Returns the character from the specified index.

str.charAt(3)

concat method

Joins two or more strings together.

str1.concat(str2)

index of method

Returns the index of the first occurrence of the specified character from the string else -1 if not found.

str.indexOf('substr')

match method

Searches a string for a match against a regular expression.

str.match(/(chapter \d+(\.\d)*)/i;)

replace method

Searches a string for a match against a specified string or char and returns a new string by replacing the specified values.

str1.replace(str2)

search method

Searches a string against a specified value.

str.search('term')

split method

Splits a string into an array consisting of substrings.

str.split('\n')

substring method

Returns a substring of a string containing characters from the specified indices.

str.substring(0,5)

Arrays

The array is a collection of data items of the same type. In simple terms, it is a variable that contains multiple values.

variable

Containers for storing data.

var fruit = ["element1", "element2", "element3"];

concat method

Joins two or more arrays together.

concat()

indexOf method

Returns the index of the specified item from the array.

indexOf()

join method

Converts the array elements to a string.

join()

pop method

Deletes the last element of the array.

pop()

reverse method

This method reverses the order of the array elements.

reverse()

sort method

Sorts the array elements in a specified manner.

sort()

toString method

Converts the array elements to a string.

toString()

valueOf method

returns the relevant Number Object holding the value of the argument passed

valueOf()

Number Methods

JS math and number objects provide several constant and methods to perform mathematical operations.

toExponential method

Converts a number to its exponential form.

toExponential()

toPrecision method

Formats a number into a specified length.

toPrecision()

toString method

Converts an object to a string

toString()

valueOf method

Returns the primitive value of a number.

valueOf()

Maths Methods

ceil method

Rounds a number upwards to the nearest integer, and returns the result

ceil(x)

exp method

Returns the value of E^x.

exp(x)

log method

Returns the logarithmic value of x.

log(x)

pow method

Returns the value of x to the power y.

pow(x,y)

random method

Returns a random number between 0 and 1.

random()

sqrt method

Returns the square root of a number x

sqrt(x)

Dates

Date object is used to get the year, month and day. It has methods to get and set day, month, year, hour, minute, and seconds.

Pulling Date from the Date object
Returns the date from the date object

getDate()

Pulling Day from the Date object
Returns the day from the date object

getDay()

Pulling Hours from the Date object
Returns the hours from the date object

getHours()

Pulling Minutes from the Date object
Returns the minutes from the date object

getMinutes()

Pulling Seconds from the Date object
Returns the seconds from the date object

getSeconds()

Pulling Time from the Date object
Returns the time from the date object

getTime()

Mouse Events

Any change in the state of an object is referred to as an Event. With the help of JS, you can handle events, i.e., how any specific HTML tag will work when the user does something.

click

Fired when an element is clicked

element.addEventListener('click', () => {
    // Code to be executed when the event is fired
});

oncontextmenu

Fired when an element is right-clicked

element.addEventListener('contextmenu', () => {
    // Code to be executed when the event is fired
});

dblclick

Fired when an element is double-clicked

element.addEventListener('dblclick', () => {
    // Code to be executed when the event is fired
});

mouseenter

Fired when an element is entered by the mouse arrow

element.addEventListener('mouseenter', () => {
    // Code to be executed when the event is fired
});

mouseleave

Fired when an element is exited by the mouse arrow

element.addEventListener('mouseleave', () => {
    // Code to be executed when the event is fired
});

mousemove

Fired when the mouse is moved inside the element

element.addEventListener('mousemove', () => {
    // Code to be executed when the event is fired
});

Keyboard Events

keydown
Fired when the user is pressing a key on the keyboard

element.addEventListener('keydown', () => {
    // Code to be executed when the event is fired
});

keypress

Fired when the user presses the key on the keyboard

element.addEventListener('keypress', () => {
    // Code to be executed when the event is fired
});

keyup

Fired when the user releases a key on the keyboard

element.addEventListener('keyup', () => {
    // Code to be executed when the event is fired
});

Errors

Errors are thrown by the compiler or interpreter whenever they find any fault in the code, and it can be of any type like syntax error, run-time error, logical error, etc. JS provides some functions to handle the errors.

try and catch

Try the code block and execute catch when err is thrown

try {
    Block of code to try
    }
catch (err) {
    Block of code to handle errors
}

Window Methods

Methods that are available from the window object

alert method

Used to alert something on the screen

alert()

blur method

The blur() method removes focus from the current window.

blur()

setInterval

Keeps executing code at a certain interval

setInterval(() => {
    // Code to be executed
}, 1000);

setTimeout

Executes the code after a certain interval of time

setTimeout(() => {
    // Code to be executed
}, 1000);

close

The Window. close() method closes the current window

window.close()

confirm

The window.confirm() instructs the browser to display a dialog with an optional message, and to wait until the user either confirms or cancels

window.confirm('Are you sure?')

open

Opens a new window

window.open("https://www.codewithharry.com");

prompt

Prompts the user with a text and takes a value. Second parameter is the default value

var name = prompt("What is your name?", "Harry");

scrollBy

window.scrollBy(100, 0); // Scroll 100px to the right

scrollTo

Scrolls the document to the specified coordinates.

window.scrollTo(500, 0); // Scroll to horizontal position 500

clearInterval

Clears the setInterval. var is the value returned by setInterval call

clearInterval(var)

clearTimeout

Clears the setTimeout. var is the value returned by setTimeout call

clearTimeout(var)

stop

Stops the further resource loading

stop()

Query/Get Elements

The browser creates a DOM (Document Object Model) whenever a web page is loaded, and with the help of HTML DOM, one can access and modify all the elements of the HTML document.

querySelector

Selector to select first matching element

document.querySelector('css-selectors')

querySelectorAll

A selector to select all matching elements

document.querySelectorAll('css-selectors', ...)

getElementsByTagName

Select elements by tag name

document.getElementsByTagName('element-name')

getElementsByClassName

Select elements by class name

document.getElementsByClassName('class-name')

Get Element by Id

Select an element by its id

document.getElementById('id')

Creating Elements

Create new elements in the DOM

createElement

Create a new element

document.createElement('div')

createTextNode

Create a new text node

document.createTextNode('some text here')

👉 For More Details Visit Here : BackLinks

HTML Cheatsheet

Madelyn Mathew — Wed, 28 Dec 2022 04:45:51 +0000

Structure

This is the basic template or barebone structure of HTML.

Boilerplate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- Body -->
</body>
</html>

Headings

There are six headings available in HTML, H1 is the largest among all, and H6 is the smallest.

Tag

<h1>Heading 1</h1>

Tag

<h2>Heading 2</h2>

Tag

<h3>Heading 3</h3>

h4 Tag

<h4>Heading 4</h4>

h5 Tag

<h5>Heading 5</h5>

h6 Tag

<h6>Heading 6</h6>

Container

Container tags are the tags that contain some data such as text, image, etc. There are several container tags in HTML.

div tag

div tag or division tag is used to make blocks or divisions in the document.

<div> This is div block </div>

span tag

span is a container for inline content

<span> This is span block </span>

p tag

Paragraph

<p> This is a paragraph </p>

pre tag

pre tag represents pre-formatted text

<pre> Hello World </pre>

code tag

code tag is used to represent source codes

<code>
import python
</code>

Text Formatting

Text formatting tags are used to format text or data of HTML documents. You can do certain things like creating italic, bold, strong text to make your document look more attractive and understandable.

tag

<b>I'm bold text</b>

tag

<strong>I'm important text</strong>

tag

<i>I'm italic text</i>

tag

<em>Emphasized text</em>

tag

<sub>Subscript</sub>

^tag

<sup>Superscript</sup>

Lists

Lists can be either numerical, alphabetic, bullet, or other symbols. You can specify list type and list items in HTML for the clean document.

tag

Ordered list starts with

tag

<ol>
    <li>Data 1</li>
    <li>Data 2</li>
    <li>Data 3</li>
</ol>

tag

<ul>
    <li>Your Data</li>
    <li>Your Data</li>
</ul>

Media

Media is anything that is present in digital form such as image, video, audio, etc.

tag

It is used to embed sound content in the document.

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

tag

It is used to embed or import image in a webpage.

<img src="Source_of_image" alt="Alternate text">

tag

It is used to embed video in the webpage.

<video width="480" height="320" controls>
    <source src="demo_move.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Table

A table is a collection of rows and columns. It is used to represent data in tabular form.

Table Structure

<table>
    <caption>Demo Table</caption>
    <thead>
        <tr>
            <th>Column1</th>
            <th colspan="2">Column2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data1</td>
            <td>Data2</td>
            <td>Data2</td>
        </tr>
        <tr>
            <td>Data1</td>
            <td>Data2</td>
            <td>Data2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>&nbsp;</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tfoot>
</table>

Links

Links are clickable text that can redirect you to some other page.

tag

or anchor tag defines a hyperlink.

<a href="https://www.backlinkss.link/">Visit Backlinkss.link!</a>

Form

Sample Form

Form is used to collect user's input, generally user's data is sent to server for further processing.

<form action="/action.php" method="post">
    Name: <input name="name" type="text" /> <br />
    Age: <input max="90" min="1" name="age" step="1" type="number" value="18" /> <br />
    <select name="gender">
        <option selected="selected" value="male">Male</option>
        <option value="female">Female</option>
    </select><br />
    <input checked="checked" name="newsletter" type="radio" value="daily" /> Daily <input name="newsletter" type="radio"
        value="weekly" /> Weekly<br />
    <textarea cols="20" name="comments" rows="5">Comment</textarea><br />
    <label><input name="terms" type="checkbox" value="tandc" />Accept terms</label> <br />
    <input type="submit" value="Submit" />
</form>

Characters & Symbols

Some symbols are not directly present on the keyboard, but there are some ways to use them in HTML documents. We can display them either by entity name, decimal, or hexadecimal value.

&copy;

Less than (<)

&lt

Greater than (>)

&gt;

Ampersand (&)

&amp;

Dollar ($)

&dollar;

Random Text

Elon Musk
Elon Reeve Musk FRS is an entrepreneur and business magnate. He is the founder, CEO, and Chief Engineer at SpaceX; early stage investor, CEO, and Product Architect of Tesla, Inc.; founder of The Boring Company; and co-founder of Neuralink and OpenAI. A centibillionaire, Musk is one of the richest people in the world.

Semantic Elements

Semantic elements are those elements that are self describable, i.e., from their name itself, you can understand their meaning.

tag

It defines a section in the document

<section>This is a section</section>

tag

It represents self-contained content

<article> Enter your data here </article>

tag

It is used to place content in the sidebar

<aside> Your data </aside>

👉 For More Details Visit Here : BackLinks

CSS Cheat Sheet – A Basic Guide to CSS

Madelyn Mathew — Tue, 27 Dec 2022 04:21:29 +0000

CSS i.e. Cascading Style Sheets is a stylesheet language used to describe the presentation of a document written in a markup language such as HTML, XML, etc. CSS enhances the look and feel of the web-page by describing how elements should be rendered on screen or in other media.

CSS Basics: Cascading Style Sheet(CSS) is used to set the style in web pages that contain HTML elements, here we will see in how many ways we can add CSS for our HTML, there three different ways to do so one by one we will see those procedure.

CSS Cheat Sheet provides you with the most common style snippets CSS gradient, background, button, font family, order, radius, box, and text-shadow generators, color picker, and more tools to add more visual weight to your document. All these and other useful web design tools can be found on a single page.

Font-Family

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

Font-Style

font-style: italic;

Font-Variant

font-variant: small-caps;

Font Weight

font-weight: bold;

Font-Size

font-size: larger;

Font

font: style variant weight size family;

Text

Text properties allow one to manipulate alignment, spacing, decoration, indentation, etc., in the document.

Text-Align

text-align: justify;

Letter-Spacing

letter-spacing: .15em;

Text-Decoration

text-decoration: underline;

Word-Spacing

word-spacing: 0.25em;

Text-Transform

text-transform: uppercase;

Text-Indent

text-indent: 0.5cm;

Line-Height

line-height: normal;

Background

As the name suggests, these properties are related to background, i.e., you can change the color, image, position, size, etc., of the document.

Background-Image

background-image: url("Path");

Background-Position

background-position: right top;

Background-Size

background-size: cover;

Background-Repeat

background-repeat: no-repeat;

Background-Attachment

background-attachment: scroll;

Background-Color

background-color: fuchsia;

Background

background: color image repeat attachment position;

Border

Border properties are used to change the style, radius, color, etc., of buttons or other items of the document.

Border-Width

border-width: 5px;

Border-Style

border-style: solid;

Border-Color

border-color: aqua;

Border-Radius

border-radius: 15px;

Border

border: width style color;

Box Model

In laymen's terms, the CSS box model is a container that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. It is used to create the design and layout of web pages.

Float

float: none;

Clear

clear: both;

Display

display: block;

Height

height: fit-content;

Width

width: auto;

Margin

margin: top right bottom left;

Padding

padding: top right bottom left;

Overflow

overflow: hidden;

Visibility

visibility: visible;

Colors

With the help of the color property, one can give color to text, shape, or any other object.

Color

color: cornsilk;

Opacity

opacity: 4;

Template Layout

Specifies the visual look of the content inside a template

Box-Align

box-align: start;

Box-Direction

box-direction: normal;

Box-Flex

box-flex: normal;

Box-Flex-Group

box-flex-group: 2;

Box-Orient

box-orient: inline;

Box-Pack

box-pack: justify;

Box-Sizing

box-sizing: margin-box;

max-width

max-width: 800px;

min-width

min-width: 500px;

max-height

max-height: 100px;

min-height

min-height: 80px;

Table

Table properties are used to give style to the tables in the document. You can change many things like border spacing, table layout, caption, etc.

Border-Collapse

border-collapse: separate;

Empty-Cells

empty-cells: show;

Border-Spacing

border-spacing: 2px;

Table-Layout

table-layout: auto;

Caption-Side

caption-side: bottom;

Columns

These properties are used explicitly with columns of the tables, and they are used to give the table an incredible look.

Column-Count

column-count: 10;

Column-Gap

column-gap: 5px;

Column-rule-width

column-rule-width: medium;

Column-rule-style

column-rule-style: dotted ;

Column-rule-color

column-rule-color: black;

Column-width

column-width: 10px;

Column-span

column-span: all;

List & Markers

List and marker properties are used to customize lists in the document.

List-style-type

list-style-type: square;

List-style-position

list-style-position: 20px;

List-style-image

list-style-image: url(image.gif);

Marker-offset

marker-offset: auto;

Animations

CSS animations allow one to animate transitions or other media files on the web page.

Animation-name

animation-name: myanimation;

Animation-duration

animation-duration: 10s;

Animation-timing-function

animation-timing-function: ease;

Animation-delay

animation-delay: 5ms;

Animation-iteration-count

animation-iteration-count: 3;

Animation-direction

animation-direction: normal;

Animation-play-state

animation-play-state: running;

Animation-fill-mode

animation-fill-mode: both;

Transitions

Transitions let you define the transition between two states of an element.

Transition-property

transition-property: none;

Transition-duration

transition-duration: 2s;

Transition-timing-function

transition-timing-function: ease-in-out;

Transition-delay

transition-delay: 20ms;

CSS Flexbox

Flexbox is a layout of CSS that lets you format HTML easily. Flexbox makes it simple to align items vertically and horizontally using rows and columns. Items will "flex" to different sizes to fill the space. And overall, it makes the responsive design more manageable.

Parent Properties (flex container)

display

display: flex;

flex-direction

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow

flex-flow: column wrap;

justify-content

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;

align-items

align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;

align-content

align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
Child Properties (flex items)

order

order: 5; /* default is 0 */

flex-grow

flex-grow: 4; /* default 0 */

flex-shrink

flex-shrink: 3; /* default 1 */

flex-basis

flex-basis: | auto; /* default auto */

flex shorthand

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

align-self

align-self: auto | flex-start | flex-end | center | baseline | stretch;

CSS Grid

Grid layout is a 2-Dimensional grid system to CSS that creates complex responsive web design layouts more easily and consistently across browsers.

Parent Properties (Grid container)

display

display: grid | inline-grid;

grid-template-columns

grid-template-columns: 12px 12px 12px;

grid-template-rows

grid-template-rows: 8px auto 12px;

grid-template

grid-template: none | <grid-template-rows> / <grid-template-columns>;

column-gap

column-gap: <line-size>;

row-gap

row-gap: <line-size>;

grid-column-gap

grid-column-gap: <line-size>;

grid-row-gap

grid-row-gap: <line-size>;

gap shorthand

gap: <grid-row-gap> <grid-column-gap>;

grid-gap shorthand

grid-gap: <grid-row-gap> <grid-column-gap>;

justify-items

justify-items: start | end | center | stretch;

align-items

align-items: start | end | center | stretch;

place-items

place-items: center;

justify-content

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

align-content

align-content: start | end | center | stretch | space-around | space-between | space-evenly;

place-content

place-content: <align-content> / <justify-content>;

grid-auto-columns

grid-auto-columns: <track-size> ...;

grid-auto-rows

grid-auto-rows: <track-size> ...;

grid-auto-flow

grid-auto-flow: row | column | row dense | column dense;
Child Properties (Grid items)

grid-column-start

grid-column-start: <number> | <name> | span <number> | span <name> | auto;

grid-column-end

grid-column-end: <number> | <name> | span <number> | span <name> | auto;

grid-row-start

grid-row-start: <number> | <name> | span <number> | span <name> | auto;

grid-row-end

grid-row-end: <number> | <name> | span <number> | span <name> | auto;

grid-column shorthand

grid-column: <start-line> / <end-line> | <start-line> / span <value>;

grid-row shorthand

grid-row: <start-line> / <end-line> | <start-line> / span <value>;

grid-area

grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;

justify-self

justify-self: start | end | center | stretch;

align-self

align-self: start | end | center | stretch;

place-self

place-self: center;

Read More : [Get CSS Basic Details](https://www.backlinkss.link/2022/12/css-cheat-sheet.html)