What is an Array?

An array is defined as the collection of different items either of same or different data types stored at contiguous memory locations.

Why an array?

I am no no judge myself to pass a verdict as to why was array introduced but why not? I mean take a scenario for instance. You are advised to create a telephone recode for 10 persons. Each recode will contain a name, telephone number, address, Pin-Code.

Now if you go on the usual route of declaring variables for each and every thing, you'll end up with more than 50 variables to be accounted for.

let phone1=10; 
let name1="Sandra";
let phone_number1=8076XXXXXX;
let pinCode=560029
.
.
.

However, for an array it's all simple. Declare an array, store all this inside an array and create 10 of them. That's almost half the job solved already.

let directory1=[10,"Sandra",8076XXXXXXX,560029];

See, everything has a reason.

Also if you want to manipulate an array, you are free to do that as well. You can edit an entry, cut out a portion, whatever comes on top of your mind. If you're coming from a programming background, you're already aware of how tough these operations are and the lines of codes that you need to write in. In other languages such as C, C++ for instance, writing a single sorting code, i.e., to sort the elements inside an array you have to write down the entire following code.

int a =[160,80,10,20,40,90];

for (int i=0;i<6;++i) {
  if (a[i] > a[i+1])
    {  int j=a[i];
        a[i]=a[i+1];
        a[i+1]=j;
    }
}

This will sort the array.

a=[10,20,40,80,90,160]

But you see the amount of code that you had to write. It's not to undermine other languages. However in languages like JavaScript, all you need to type is...

let a =[160,80,10,20,40,90];
a.sort();

a=[10,20,40,80,90,160]

And that's all it takes. Two lines of code.

Let's dive into other such cool functionalities provided in JavaScript.

Length of Array

Definition: It allows you to print length of an array

Syntax

array_name.length

let arr=[1,2,3,4,5,6];
console.log(arr.length);

//Output : 
6

Slicing an Array

Definition: It allows you to slice an existing array into another array.

Changes the original array: NO

It takes in two parameters:

• Starting index - Index or address from where the array is to be sliced.
• End index - [Index-1] or [address-1] till where the array is to be sliced.

Syntax

array_name.slice(startindex,endindex);

let arr=[1,2,3,4,5,6];
console.log(arr.slice(1,3));

//Output : [2,3]

Splicing an Array

Definition: It allows you to modify the existing array

Changes the original array: YES

It takes in two parameters:

• Index - Position from where to start the modification in the array.
• How may to delete - The entered number is the number of elements deleted starting from the index.
• Item 1, item 2 - optional Indicates the value to be appended by the user.

Syntax

array_name.splice(index,how many to delete, item 1, item 2);

let arr=[1,2,3,4,5,6];
let arr1=[1,2,3,4,5,6];
arr.splice(1,0,10,20);
arr1.splice(1,1,10,20);
console.log(arr);
console.log(arr1);

//Output : 
[
  1, 10, 20, 2,
  3,  4,  5, 6 
]
[
  1, 10, 20, 3,
  4,  5,  6
]

Copy within an array

Definition: It allows you to create a copy within an array

Changes the original array: YES

It takes in Three parameters:

• Index - Position at which the copied section will be replaced.
• starting index - Index from where the copy will start.
• ending index - index till where the copy is to be done.

Syntax

array_name.copyWithin(index,starting index for copy, ending index till copy);

let arr=[1,2,3,4,5,6];
arr.copyWithin(1,3,5);
console.log(arr);

//Output : 
[ 1, 4, 5, 4, 5, 6 ]

Remove elements from the beginning

Definition: It allows you to remove elements one by one from the beginning of the array.

Changes the original array: YES

Syntax

array_name.shift();

let arr=[1,2,3,4,5,6];
arr.shift();
console.log(arr);

//Output : 
[ 2,3,4,5,6 ]

Remove elements from the last

Definition: It allows you to remove elements one by one from the end of the array.

Changes the original array: YES

Syntax

array_name.pop();

let arr=[1,2,3,4,5,6];
arr.pop();
console.log(arr);

//Output : 
[ 1,2,3,4,5 ]

Add elements at the beginning

Definition: It allows you to add elements one by one from the beginning.

Changes the original array: YES

Syntax

array_name.unshift(element);

let arr=[1,2,3,4,5,6];
arr.unshift(10);
console.log(arr);

//Output : 
[ 10,1,2,3,4,5,6 ]

Add elements at the end

Definition: It allows you to add elements one by one at the end

Changes the original array: YES

Syntax

array_name.push(element);

let arr=[1,2,3,4,5,6];
arr.push(10);
console.log(arr);

//Output : 
[ 1,2,3,4,5,6,10 ]

Reverse the elements

Definition: It allows you to reverse the elements order

Changes the original array: YES

Syntax

array_name.reverse();

let arr=[1,2,3,4,5,6];
arr.reverse();
console.log(arr);

//Output : 
[ 6,5,4,3,2,1 ]

Array as String

Definition: It allows you to print entire array as string.

Changes the original array: NO

Syntax

array_name.toString();

let arr=[1,2,3,4,5,6];
console.log(arr.toString());

//Output : 
1,2,3,4,5,6

Imagine four elements present in a webpage. These elements are in a vertical top to bottom design in an HTML structure. As a CSS designer, everyone has trouble aligning them in a horizontal position let's say in a Navigation Bar.

Any page in a web browser has two axes: The main axis and a cross axis. For elements placed on the main axis, you want to shift it into a cross axis. Difficult right?

Enter, FLEX-BOX the new display method, that allows you to do quick work of it.

Flex is applied on the parent container to align the child elements in the direction you want.

For example: Look at the following snippet of code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="obj1"><img src="https://learnyst-user-assets.s3.ap-south-1.amazonaws.com/school-assets/schools/2410/schoolLogo/1657573685244Custom%20Size%20%E2%80%93%201.png" alt="logo1" height="10%" width="10%"></div>
        <div class="obj2"><img src="https://learnyst-user-assets.s3.ap-south-1.amazonaws.com/school-assets/schools/2410/schoolLogo/1657573685244Custom%20Size%20%E2%80%93%201.png" alt="logo1" height="10%" width="10%"></div>
        <div class="obj3"><img src="https://learnyst-user-assets.s3.ap-south-1.amazonaws.com/school-assets/schools/2410/schoolLogo/1657573685244Custom%20Size%20%E2%80%93%201.png" alt="logo1" height="10%" width="10%"></div>
    </div>
</body>
</html>

which gives out the following output...

image.png

To align these items on the main axis, all you need to do is apply flex.

   <style>
        .parent{
            background-color: purple;
            display: flex;
        }
    </style>

Fairly easy. Flexallows you to change the directions of elements easily inside an HTML structure.

Certain facts about FLEX

Flex allows you to change the orientations of elements:

1. Flex-direction: Row;

It's a default direction but anyhow if you want you can change what you want.

2. Flex-direction: Row-reverse;

Allows you to reverse the positions of elements in a row but in reverse order.

3. Flex-direction: Column;

Allows you to place the elements in a column direction.

4. Flex-direction: Column-reverse;

Allows you to reverse the positions of elements in a column but in reverse order.

Explore more about flex to design websites in an interesting way. Keep learning.

Quite easy to guess from the name itself, positions are used a lot in CSS to describe how elements are placed in a document. It's one of the most used properties in web design. They define how elements behave with the top, left, bottom, and right property. In CSS, there are five positioning properties namely: static, relative, fixed, absolute, and sticky. These properties behave in special ways.

Let's get started...

STATIC POSITIONING

The static property is the default position value for every element. It can be used to define the position of an element and also to override or hide elements from their normal flow of DOM.

###CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<link rel="stylesheet" href="./style.css">
  </head>
<body>

          <h2>STATIC POSITION</h2>
          <div class="static">Position: static;</div>
</body>
</html>

body {
    height: 500px;
}
.static {
    position: static;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    background-color: rgb(104, 233, 238);
    height: 300px;
    width: 300px;

    text-align: center;
}

OUTPUT

RELATIVE POSITIONING

For relative positioned elements, they retain their order in the document. This means they are bounded by the space they occupy in the document. Relative positioning can be used in combination with fixed and absolute positions.

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<link rel="stylesheet" href="./style.css">
  </head>
<body>
        <div class="back">
          <h2>STATIC Relative</h2>
          <div class="static">Position: Relative</div>
        </div>
</body>
</html>

.back {
    height: 500px;
    width: 500px;
    background-color: black;
    position: static;
    color: azure;
}
.static {
    position: relative;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    background-color: rgb(104, 233, 238);
    height: 300px;
    width: 300px;
    text-align: center;
}

OUTPUT

ABSOLUTE POSITIONING

The absolute positioning lets you specify exactly where you want an element positioned.

The difference between this and the relative position is that:

• the boundary for absolute elements is different.
• absolute elements are removed from the flow of the document.

###Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<link rel="stylesheet" href="./style.css">
  </head>
<body>
        <div class="back">
          <h2>ABSOLUTE</h2>
          <div class="static">Position: ABSOLUTE</div>
        </div>
</body>
</html>

.back {
    height: 500px;
    width: 500px;
    background-color: black;
    color: azure;
}
.static {
    position: absolute;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    background-color: rgb(104, 233, 238);
    height: 300px;
    width: 300px;
    top: 0px;
    left: 0px;

    text-align: center;
}

OUTPUT

FIXED POSITIONING

Fixed positioned elements are similar to absolute elements. They are removed from the flow of the document but contrary to the latter, they do not respect relative parents as boundaries.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<link rel="stylesheet" href="./style.css">
  </head>
<body>
        <div class="back">
          <h2>FIXED</h2>
          <div class="static">Position: FIXED</div>
        </div>
        <div class="back1">hello</div>
</body>
</html>

.back {
    height: 500px;
    width: 500px;
    background-color: black;
    color: azure;
}
.static {
    position: fixed;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    background-color: rgb(104, 233, 238);
    height: 300px;
    width: 300px;
    top: 0px;
    left: 0px;

    text-align: center;
}

.back1{
    position: relative;
    height: 2000px;
    width: 2000px;
    background-color: green;
}

STICKY POSITIONING

The sticky is a new CSS position property that lets you make an element stay in the same place on the page even when the page is scrolled.

#Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<link rel="stylesheet" href="./style.css">
  </head>
<body>
        <div class="back">
          <h2>STICKY</h2>
          <div class="static">Position: Sticky</div>
        </div>
        <div class="back1">hello</div>
</body>
</html>

.back {
    height: 500px;
    width: 500px;
    background-color: black;
    color: azure;
}
.static {
    position: Sticky;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    background-color: rgb(104, 233, 238);
    height: 300px;
    width: 300px;
    top: 0px;
    left: 0px;

    text-align: center;
}

.back1{
    position: relative;
    height: 2000px;
    width: 2000px;
    background-color: green;
}

OUTPUT

• Version control system which allow you to track changes you make to your project files over time.
• By using git you can make a copy of your files, make changes to that copy, and then merge these changes to the original copy.

Why it's needed?

• It maintains a history of all changes made to the code.

• The changes are stored in a special database called “repository”, also known as “repo”.

Here's a quick cheat sheet to easily guide you through the process.

Time to create a Repository

Create a new local repository

$ git init

Wanna Make Local Changes

Add all current changes to the next commit

$ git add

Changes the last commit done

$ git commit

Changed files in your working directory

$ git status

Check the history too..

Shows all commits, starting with newest

$ git log

Easy to branch as well

Lists all existing branches

$ git branch -av

Will Switch Head branch

$ git checkout < branch >

Time to go online & publish

Shows information about a remote

$ git remote show< remote >

Download changes and directly merge/integrate into HEAD

$ git pull < remote > < branch >

Publish local changes on a remote

$ git push < remote> < branch >

Abort a rebase

$ git rebase --abort

Merge < branch > into your current HEAD

$ git merge < branch >

Rebase your current HEAD onto < branch>

$ git rebase < branch >

Publish your tags

$ git push --tags

Made some error (UNDO)

Preserve uncommitted local changes

$ git reset --keep < commit >

Discard all local changes in your working directory

$ git reset < commit >

Infact, try spotting the usage within this article itself.

What Is Markdown?

If you want to format your text such as "bold, italics, numbered lists, bullet points, headings," and so on to text, you’re “formatting” it. Markdown helps as a syntax—or, set of rules—that lets you format text on web pages. Although people use other methods such as HTML, XML, etc. Things often get quite complex while using those languages especially with the long list of tags that at times even be forgotten. It’s not very “user-friendly” for people who don’t have a lot of experience reading it.

Let's begin with different comparatively easier syntaxes of markup languages.

Heading

1. Comes in 6 different styles.
2. Increase the '#' hashes to decrease the header size.

SYNTAX

# heading 1
## heading 2
### heading 3
#### heading 4
##### heading 5
###### heading 6

OUTPUT

Text Formatting (Bold / Italics / Strikethrough)

1. Depends on the application and necessity of styling.

SYNTAX

**Bold**

__Bold__

*Italic*

~~999~~

OUTPUT

List down some Items (Ordered / Unordered List)

1. Gives you the ability to create list depending on your choice.

SYNTAX

1. One
2. Two
    1. lorem
    2. ipsum
    3. doros

1. One
1. Two
    1. lorem
    1. ipsum
    1. doros

- One
- Two
    -  lorem
    -  ipsum
    -  doros

OUTPUT

You are already watching the output.

Link to the external world (Links & Image Links)

1. When providing image links make sure to use of smaller images preferably in PNG format.
2. Use an additional ! symbol to denote that link is an image link.
3. Square braces [ ] denote Link text or Image text (when image unavailable).
4. Inverted commas have meta text or hover text.

SYNTAX

[Home] (https://coder666.hashnode.dev/ "CSS") 
![Mascot](https://learncodeonline.in/mascot.png)

OUTPUT

Code Snippets

1. It is used to display a code editor type formatted code.
2. It supports most known languages.
3. Make sure to specify language in lowercase with no-space in beginning to color-format per specific to the coded language format.

SYNTAX

##OUTPUT

Pen down para's (Blockquote / Line divider / Paragraph)

1. Blockquotes are majorly used to show output or quotes using > symbol used.
2. Line divider is used to show line formatted separation in document. Use triple asterisk (*)** to denote line divide.
3. No specific syntax for paragraph.

SYNTAX

#OUTPUT

So, go ahead implement them to write easy documentations in no time.

Pseudo selectors are the tools that let you design or format certain elements in a webpage based upon the conditions listed in selector criteria. Take the instance of a website such as Media Distribution ESPN. A fairly looking website at the very first glance and very well designed. However, notice when you hover over their sports category section. Notice the change in the animation and the shift in the background image of the individual compartment changing based on the respective sports they target.

All this is the work of pseudo selectors.

Selectors are one of the pertinent elements of a CSS sheet. It helps you to target a section and implement style changes targeting that particular section. For example; in the code snippet given

It can be easily understood that it is a button tag. In order to design it, we select the button tag using its respective class name.

But what if you want to make it highlight or change the background colour when it's hovered over? In comes PSEUDO SELECTOR. Pseudo as the meaning suggests something that is not genuine or real. Pseudo selectors or pseudo-classes are in fact elements that uphold that value. They are special criteria assigned to selectors and only come in whenever the pseudo conditions are applicable.

Syntax: selector:pseudo selector { /styling elements/}

Thus for the given case, to make it turn dark red when hovered over, we use the following pseudo selector.

Which makes it turn from this:

-> to this:

Here is the list of certain pseudo selectors followed by their condition requirements. (Considered for tag, with class name btn1)

1. ".btn:hover" { /styling elements/ } - Allows to style when the button is hovered over
2. ".btn:active" { /styling elements/ } - Allows you to style the button when active (clicked)
3. ".btn:visited" { /styling elements/ } - Allows you to style the button for times when it has

                                                                                        been clicked on at least once
   

Refer to the SANDBOX link for the snippet code reference.