JavaScript Posts

HTML Post Image

CSS Post

## What is a variable?

A variable, in terms of a programming language can be considered a reserved space booked by a developer within the memory of the system in which a particular program is run. These are like containers where we can put values upfront, like at the time of declaration, or we can just let the computer know of their existence and fill those containers or reserved spaces with some value at a later point of time.

> Talk is cheap, show me the code &mdash; Linus Torvalds

We can think of variables as small containers for various items that we use, on daily basis, in our kitchen, like a container for sugar or salt etc. We usually buy a 1kg or 2kg pack of sugar or salt from the market but we store a certain quantity of sugar or salt in a small jar that is easily accessible for day to day use. This similar concept applies to variables in programming languages.

In a programming language, we can store a particular value in variable, like a number or a string or a boolean, or an array or a function or an object. Basically, we can store all forms data structures within a variable in a programming language. The use-case of storing values in a variable could more imagined with the example where you want to write an article and that article is about someone, *suppose Mr. X*. Suppose that article uses the word *Mr. X* in 100 different places in that article. Hence, instead of writing the word *Mr. X* in 100 different places, we can simply write it once in a variable, say *personName* and use that *personName* variable 100 different places in the article. That is the most use of variables in a programming language and particularly in JavaScript.

## How to use variables in JavaScript?

In JavaScript, we can declare variables in three different ways which are listed below:

- by using the **let** keyword;
- by using the using the **const** keyword; or
- by using the **var** keyword.

Each of the above-mentioned will perform a similar task of storing a value in a variable but the behavior will be different when it comes to re-assigning a value or accessing that variable.

Before going into any further details about variables, let's have a look at examples below to see how we can define an use variables in JavaScript with all of the above keywords:

**&rarr;  using the "let" keyword**

```javascript
let firstName = 'John Doe';
let age = 28;

console.log(firstName, age); // John Doe 28
```

**&rarr;  using the "const" keyword**

```javascript
const firstName = 'John Doe';
const age = 28;

console.log(firstName, age); // John Doe 28
```

**&rarr;  using the "var" keyword**

```javascript
var firstName = 'John Doe';
var age = 28;

console.log(firstName, age); // John Doe 28
```

As you can notice from all of the above examples that pattern of declaring a variable in JavaScript is very similar. The only change in each of the above example is the use different keyword. And that is all about basic usage of variables in JavaScript.

The **var** keyword has been quite old in the language. It has been the primary method of declaring variables in the language until 2015 when ES6 came out and introduced two new methods for declaring variables in JavaScript programs i.e. **let** and **const**. In the current times, it is recommended to use only **let** and **const** keywords in a program to declare variables as these are the improved versions of **var**.

With that said, we can now tackle the basic characteristics of each of these three kinds of variable. Further details about each of them will covered in a later article and a link to that article will included in this article.

## The "let" keyword

Variables which are declared with **let** keyword can be reassigned a different value at a later of time in a program. Suppose that we have assigned a value to *10* to a particular variable declared with **let** keyword and at a later point in code, we want to change the value of that variable from 10 to 12. That is completely possible with variables declared with **let** keyword. This can be checked from the below example:

```javascript
let papersPassed = 5;
console.log(papersPassed);

// Now the person took the exam and got passed in 2 more papers. Now 7 papers are passed.

papersPassed = papersPassed + 2;
console.log(papersPassed);
```

As can be seen from above example, we can change the value *papersPassed* variable at a later point in our code. However, the other important thing to notice is that when reassigning a value to *papersPassed* variable later in the code, we did not use the **let** keyword. This is because **let** keyword is required to be used when first declaring a variable. When assigning a new value to the same value, we do no use **let** keyword again. If **let** keyword is used again for the same variable, JavaScript will think that we are creating a new variable and since the name of this new variable clashes with an already declared variable, JavaScript will throw an error and will not further execute the program.

Since, variables declared with **let** keyword can be assigned a new value, it is possible that we only declare them initially and then later assign a value. To explain this further, let's have a look at the below example:

```javascript
// A student enrolled in college. The number of papers passed would be zero as no exams are yet taken.

let papersPassed; // value will be undefined

// First year exams. Three papers passed. We should not use plus sign here as it then result NaN.

papersPassed = 3; // value will be 3

// Second year exams. Two papers passed.

papersPassed = papersPassed + 2; // value will be 5
```

## The "const" keyword

Variables which are declared with **const** keyword can't be reassigned a different value at a later of time in a program. Suppose that we have assigned a value to *10* to a particular variable declared with **const** keyword and at a later point in code, we want to change the value of that variable from 10 to 12. **That is not possible** with variables declared with **const** keyword. Therefore, **const** keyword is used, usually, for variables which are not supposed to change like birth year or value of PI. This can be illustrated from the below example:

```javascript
const birthYear = 1990;
console.log(birthYear);

// It is not possible that a person's birth year will be changed unless it was documented incorrectly. In order to correct that we can use the following code.

const updatedBirthYear = 1991;
console.log(updatedBirthYear);
```

As can be seen from above example, we have not changed the value *birthYear* variable at a later point in our code but rather used a new variable to rectify the documentation of birth year. Had we reassigned the value of the *birthYear*, JavaScript would have thrown an error and program will not be further executed. **This is the rule for these variable types that a new value can't be assigned to them**. Since, we can't reassign a new value to variables declared with **const** keyword, we can't declare a variable with **const** keyword without providing a value. It would also result in an error.

## The "var" keyword

Variables which are declared with **var** keyword can be reassigned a different value at a later of time in a program. Suppose that we have assigned a value to *10* to a particular variable declared with **var** keyword and at a later point in code, we want to change the value of that variable from 10 to 12. That is completely possible with variables declared with **var** keyword. This can be illustrated from the below example:

```javascript
var birthYear = 1990;
console.log(birthYear);

// Changing the value of the birthYear variable directly

birthYear = 1991;
console.log(birthYear);
```

As can be seen from above we can reassign the value of a variable declared with **var** keyword, similar to variables declared with **let** keyword. Moreover, we can also just initialise these variables without any value and change the value later in the code similar to variables with **let** keyword. In many ways variables declared with **var** keyword have somewhat similar functionality as variables declared with **let** keyword. However, there are some very critical differences between the two, the important one of which is the scoping of the two kinds of variable. This scoping will be discussed in detail in a later article which will be linked to this article.

With that, now you know three different ways in which you can create variables in you JavaScript program. It is highly recommended that always create variables with **let** and / or **const** keywords unless the situation demands the use of **var** keyword which is absolutely rare.

## Naming conventions for variables

There are three very popular naming conventions when it comes to naming variables. These are as follows:

- **Pascal case** - In this convention all words forming a name of a variable starts with uppercase first character like **FirstName** or **LastName** or **Age**.
- **Snake case** - In this convention all words forming a name of a variable starts with lowercase and are separated by an underscore like **first_name** or **last_name** or **age**.
- **Camel case** - In this convention all words forming a name of a variable starts with uppercase first character except for the first character of the first word which would be lower case like **firstName** or **lastName** or **age**.

**In JavaScript, it is common and usual practice to always use camel case variable naming convention.**

## Rules for naming variables

There are few very important rules when it comes to naming variables which are listed below.

- A variable name **must not** start with a number like 2 or 1 or 3 etc.
- A variable name **can only** contain *$* (dollar sign) or an *_* (underscore) as special characters. **All other special characters are not allowed.**
- A variable **must not** be a reserved keyword in JavaScript like *let*, *const* *function* etc.
- Variable names **should be** descriptive enough to give reader an idea of the value or data type the variable holds.

## Conclusion

The key take away from this article are as follows:

- We can use variables in our program which will help us in reusing the same values at different points in our code.
- There are three keywords with which we can declare variables in JavaScript and these are **var**, **let** and **const**.
- The value assigned to variables declared with **let** and **var** keywords can be changed later in the code.
- Variables declared with **let** and **var** keywords can be initialised with no value.
- Variables declared with **const** keywords can not be initialised with no value and the value of these variables can not be changed later in the code. 
- Never start a variable with a number.
- Never use special characters in variable names except for *$* or *_*.
- Never name variables which are reserved keywords in JavaScript.
- It is recommended to use **camel case** convention for naming variables.

Random Quote Generator

## What is a variable?

A variable, in terms of a programming language can be considered a reserved space booked by a developer within the memory of the system in which a particular program is run. These are like containers where we can put values upfront, like at the time of declaration, or we can just let the computer know of their existence and fill those containers or reserved spaces with some value at a later point of time.

We can think of variables as small containers for various items that we use, on daily basis, in our kitchen, like a container for sugar or salt etc. We usually buy a 1kg or 2kg pack of sugar or salt from the market but we store a certain quantity of sugar or salt in a small jar that is easily accessible for day to day use. This similar concept applies to variables in programming languages.

In a programming language, we can store a particular value in variable, like a number or a string or a boolean, or an array or a function or an object. Basically, we can store all forms data structures within a variable in a programming language. The use-case of storing values in a variable could more imagined with the example where you want to write an article and that article is about someone, *suppose Mr. X*. Suppose that article uses the word *Mr. X* in 100 different places in that article. Hence, instead of writing the word *Mr. X* in 100 different places, we can simply write it once in a variable, say *personName* and use that *personName* variable 100 different places in the article. That is the most use of variables in a programming language and particularly in JavaScript.

## How to use variables in JavaScript?

In JavaScript, we can declare variables in three different ways which are listed below:

- by using the **let** keyword;
- by using the using the **const** keyword; or
- by using the **var** keyword.

Each of the above-mentioned will perform a similar task of storing a value in a variable but the behavior will be different when it comes to re-assigning a value or accessing that variable.

Before going into any further details about variables, let's have a look at examples below to see how we can define an use variables in JavaScript with all of the above keywords:

**&rarr;  using the "let" keyword**

```javascript
let firstName = 'John Doe';
let age = 28;

console.log(firstName, age); // John Doe 28
```

**&rarr;  using the "const" keyword**

```javascript
const firstName = 'John Doe';
const age = 28;

console.log(firstName, age); // John Doe 28
```

**&rarr;  using the "var" keyword**

```javascript
var firstName = 'John Doe';
var age = 28;

console.log(firstName, age); // John Doe 28
```

As you can notice from all of the above examples that pattern of declaring a variable in JavaScript is very similar. The only change in each of the above example is the use different keyword. And that is all about basic usage of variables in JavaScript.

The **var** keyword has been quite old in the language. It has been the primary method of declaring variables in the language until 2015 when ES6 came out and introduced two new methods for declaring variables in JavaScript programs i.e. **let** and **const**. In the current times, it is recommended to use only **let** and **const** keywords in a program to declare variables as these are the improved versions of **var**.

With that said, we can now tackle the basic characteristics of each of these three kinds of variable. Further details about each of them will covered in a later article and a link to that article will included in this article.

## The "let" keyword

Variables which are declared with **let** keyword can be reassigned a different value at a later of time in a program. Suppose that we have assigned a value to *10* to a particular variable declared with **let** keyword and at a later point in code, we want to change the value of that variable from 10 to 12. That is completely possible with variables declared with **let** keyword. This can be checked from the below example:

```javascript
let papersPassed = 5;
console.log(papersPassed);

// Now the person took the exam and got passed in 2 more papers. Now 7 papers are passed.

papersPassed = papersPassed + 2;
console.log(papersPassed);
```

As can be seen from above example, we can change the value *papersPassed* variable at a later point in our code. However, the other important thing to notice is that when reassigning a value to *papersPassed* variable later in the code, we did not use the **let** keyword. This is because **let** keyword is required to be used when first declaring a variable. When assigning a new value to the same value, we do no use **let** keyword again. If **let** keyword is used again for the same variable, JavaScript will think that we are creating a new variable and since the name of this new variable clashes with an already declared variable, JavaScript will throw an error and will not further execute the program.

Since, variables declared with **let** keyword can be assigned a new value, it is possible that we only declare them initially and then later assign a value. To explain this further, let's have a look at the below example:

```javascript
// A student enrolled in college. The number of papers passed would be zero as no exams are yet taken.

let papersPassed; // value will be undefined

// First year exams. Three papers passed. We should not use plus sign here as it then result NaN.

papersPassed = 3; // value will be 3

// Second year exams. Two papers passed.

papersPassed = papersPassed + 2; // value will be 5
```

## The "const" keyword

Variables which are declared with **const** keyword can't be reassigned a different value at a later of time in a program. Suppose that we have assigned a value to *10* to a particular variable declared with **const** keyword and at a later point in code, we want to change the value of that variable from 10 to 12. **That is not possible** with variables declared with **const** keyword. Therefore, **const** keyword is used, usually, for variables which are not supposed to change like birth year or value of PI. This can be illustrated from the below example:

```javascript
const birthYear = 1990;
console.log(birthYear);

// It is not possible that a person's birth year will be changed unless it was documented incorrectly. In order to correct that we can use the following code.

const updatedBirthYear = 1991;
console.log(updatedBirthYear);
```

As can be seen from above example, we have not changed the value *birthYear* variable at a later point in our code but rather used a new variable to rectify the documentation of birth year. Had we reassigned the value of the *birthYear*, JavaScript would have thrown an error and program will not be further executed. **This is the rule for these variable types that a new value can't be assigned to them**. Since, we can't reassign a new value to variables declared with **const** keyword, we can't declare a variable with **const** keyword without providing a value. It would also result in an error.

## The "var" keyword

Variables which are declared with **var** keyword can be reassigned a different value at a later of time in a program. Suppose that we have assigned a value to *10* to a particular variable declared with **var** keyword and at a later point in code, we want to change the value of that variable from 10 to 12. That is completely possible with variables declared with **var** keyword. This can be illustrated from the below example:

```javascript
var birthYear = 1990;
console.log(birthYear);

// Changing the value of the birthYear variable directly

birthYear = 1991;
console.log(birthYear);
```

As can be seen from above we can reassign the value of a variable declared with **var** keyword, similar to variables declared with **let** keyword. Moreover, we can also just initialise these variables without any value and change the value later in the code similar to variables with **let** keyword. In many ways variables declared with **var** keyword have somewhat similar functionality as variables declared with **let** keyword. However, there are some very critical differences between the two, the important one of which is the scoping of the two kinds of variable. This scoping will be discussed in detail in a later article which will be linked to this article.

With that, now you know three different ways in which you can create variables in you JavaScript program. It is highly recommended that always create variables with **let** and / or **const** keywords unless the situation demands the use of **var** keyword which is absolutely rare.

## Naming conventions for variables

There are three very popular naming conventions when it comes to naming variables. These are as follows:

- **Pascal case** - In this convention all words forming a name of a variable starts with uppercase first character like **FirstName** or **LastName** or **Age**.
- **Snake case** - In this convention all words forming a name of a variable starts with lowercase and are separated by an underscore like **first_name** or **last_name** or **age**.
- **Camel case** - In this convention all words forming a name of a variable starts with uppercase first character except for the first character of the first word which would be lower case like **firstName** or **lastName** or **age**.

**In JavaScript, it is common and usual practice to always use camel case variable naming convention.**

## Rules for naming variables

There are few very important rules when it comes to naming variables which are listed below.

- A variable name **must not** start with a number like 2 or 1 or 3 etc.
- A variable name **can only** contain *$* (dollar sign) or an *_* (underscore) as special characters. **All other special characters are not allowed.**
- A variable **must not** be a reserved keyword in JavaScript like *let*, *const* *function* etc.
- Variable names **should be** descriptive enough to give reader an idea of the value or data type the variable holds.

## Conclusion

The key take away from this article are as follows:

- We can use variables in our program which will help us in reusing the same values at different points in our code.
- There are three keywords with which we can declare variables in JavaScript and these are **var**, **let** and **const**.
- The value assigned to variables declared with **let** and **var** keywords can be changed later in the code.
- Variables declared with **let** and **var** keywords can be initialised with no value.
- Variables declared with **const** keywords can not be initialised with no value and the value of these variables can not be changed later in the code. 
- Never start a variable with a number.
- Never use special characters in variable names except for *$* or *_*.
- Never name variables which are reserved keywords in JavaScript.
- It is recommended to use **camel case** convention for naming variables.

Analysis of variable declarations in JavaScript

It is very important to have comments in the code as these are suppose to give a brief but specific information to the reader of the code about what the code is supposed to do. CSS offers both multi-line and single-line comments.

A comment in code is simply the information that is ignored by the browsers while executing the code. In CSS, one can write some styles and then comment them out so those styles could be ignored by browsers.

With that said, let's have a look at some of the common forms of comments in CSS.

## Single-line comments

Below is the example of a single-line comment which just gives a brief information about what the below code is supposed to do.

```css
/* To change colour to red */
p {
  color: red;
}
```

## Multi-line comments

Below is the example of a multi-line comment which just gives a brief information about what the below code is supposed to do.

```css
/* 
  To change colour to red
  To change background green
*/
p {
  color: red;
  background-color: green;
}
```

## Ignoring Styles

Below is the example of a comment which is just written, may be, for the purpose of testing during development but was intended to get ignored while final code runs.

```css
p {
  color: red;
  background-color: green;
  /* font-size: 20px; */
}
```

## Comments in front of styles

Below is the example of a comment which is just written to explain the us of a particular style.

```css
p {
  color: red;
  background-color: green; /* To change background colour to green */
}
```

## Conclusion

The key take away from this article are as follows:

- Comments are used improve code readability
- Comments should be concise and to the point
- CSS offers both multi-line and single-line comments.

CSS Comments

Variables in JavaScript (let, const, var)

It is very important to have comments in the code as these are suppose to give a brief but specific information to the reader of the code about what the code is supposed to do. JavaScript offers both multi-line and single-line comments.

A comment in code is simply the information that is ignored by the browsers while executing the code. In JavaScript, one can write some code and then comment them out so that piece of code could be ignored by browsers.

With that said, let's have a look at some of the common forms of comments in JavaScript.

## Single-line comments

Below is the example of a single-line comment which just gives a brief information about what the below code is supposed to do.

```javascript
// print name to console
console.log('John Doe');
```

## Multi-line comments

Below is the example of a multi-line comment which just gives a brief information about what the below code is supposed to do.

```js
/* 
  print name to console
  print age to console
*/
console.log('Joh Doe');
console.log(28);
```

## Ignoring statements

Below is the example of a comment which is just written, may be, for the purpose of testing during development but was intended to get ignored while final code runs.

```js
console.log('Joh Doe');
// console.log(28);
```

## Comments in front of statements

Below is the example of a comment which is just written to explain the us of a particular statement.

```js
console.log('Joh Doe'); // Print name to console
```

## Conclusion

The key take away from this article are as follows:

- Comments are used improve code readability
- Comments should be concise and to the point
- JavaScript offers both multi-line and single-line comments.

Comments in JavaScript

In order to get started with with JavaScript, create a folder wherever you want on your system and name it whatever you want. For the sake of simplicity, I will create a folder on the desktop by the name of _html-script_. Inside that I will create a new HTML file by the name of _index.html_ and another file by the name of _script.js_.

Then, I will open the _index.html_ file and write the following markup in that file.

```html
!DOCTYPE html>
<html>
  <head>
    <title>My Site</title>
  </head>
  <body>
    <h1>JavaScript</h1>
    <p>Learning JavaScript</p>
    <script src="./script.js"></script>
  </body>
</html>
```

As can be seen from the above markup, I have already linked my script file with the markup. Now, I will open the _script.js_ and write the below code in that file:

```js
const fullName = 'John Doe';
const age = 28;

console.log(fullName);
console.log(age);
```

After that I will open my _index.html_ file in the browser and will then go to the browser console. There I should see two lines printed with following text:

1. John Doe
2. 28

That's it! Now you have written your first very basic JavaScript program that runs in the browser. Now it's time to get to know what each line of as written in _script.js_ file does.

## The first two lines of script

The first line of the _script.js_ starts with a word **const**. That is a keyword in JavaScript which means we are going to create a variable (we are going to reserve some memory which will store some value). After that a white space is left and that is necessary to avoid any syntax errors. Since, we have used **const** keyword while creating a variable, we will not be able change its value later in our code. There are two more forms of variable declaration keywords which will be discussed in a variables' specific article.

After that, we have written a word **fullName** which is the name we have assigned to the variable that is created with the help of **const** keyword. There is not typo error in the word **fullName**. It was intentional. The reason is that we can't leave a white-space in a variable name. Moreover, since the character "f" is small while character "N" is capitalised only because of a variable declaration convention which is called **camel-case**.

In **camel-case** convention, we use the small letter for the first word in a variable name and if there are more than one word in a variable name, all subsequent words' first character is capitalised.

After that, there is an equal sign which simply means that the value of this variable would be what is after the equal sign.

Please note that the value after the equal sign in wrapped around with single-quotes and that is because it is a string i.e. sequence of characters which then form words and sentences. Therefore, it is is mandatory for us to use single or double-quotes around the string. One can use either single-quotes or double-quotes to wrap the strings as long as the both the opening and closing are of same type.

After that we have marked the end of the line or statement with a semi-colon. It is optional but recommended to use them as it specifies that statement ends here.

The second line of the code in _script.js_ file has same rules as the first line but in that line, we have not used quotations for the value and that is only because the value is a number, and we do not use quotes around the value.

### The last two lines script

The last two lines in the script file are very simple. These are just the built-in functions of JavaScript which will print any thing that is provided in between parenthesis. In this case, we have stored values in variables and then passed those variables in the function in between parenthesis. Hence, when page gets loaded, **fullName** and **age** variables are printed in the browser's console.

A Simple JS Program

JavaScript (JS) is a programming language which was first appeared in 1996 and was developed for the purpose of implementing interactivity on the front-end. Over 97% of websites use it JS for client-side interactivity, often incorporating third-party libraries. Alongside HTML and CSS, JavaScript is one of the core technologies for the front-end development.

## What can be done with JavaScript?

One can done multiple variety of tasks of with JS ranging from basic front-end interactivity to development of desktop applications. Below are some of the major areas where JS can be used:

1. Back-end of a website (using Node.js or Deno)
2. Smartphone applications (using react-native)
3. Desktop applications (using electron.js)
4. Single Page Applications (using React, Angular, Vue)
5. And much much more!

## How JS can be used on websites?

One can use JS in the front-end of a website to add interactivity on the client-side like appearance of a pop-up when certain button is clicked or changing theme of the website with the help of a certain theme switch button. Moreover, JS can be used to send http requests to certain APIs to load data on the page with the help of fetch API.

In order to use JS on the front-end, one has two option which are listed below:

1. Internal JavaScript
2. External JavaScript

It is always recommended to use external script file as this would ensure the separation of concerns. However, inline scripts can be used where the script consists of few lines of code.

### Internal JavaScript

One can use JS in the same html file using the below code which simply create an alert with the text "Hello, world!" when html file is run:

```html
<!DOCTYPE html>
<html>
  <head>
    <script>
      alert('Hello, world!');
    </script>
  </head>
  <body>
    <h1>Heading</h1>
    <p>Paragraph</p>
  </body>
</html>
```

As can be seen from, the JS needs to written inside of **script** tag. That script tag can be used anywhere on the page. It can be included in the **head** tag or **body** tag. It is a common practice to include **script** tag in the **body** tag and particularly, at the end of the **body** tag such as below code snippet:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>My Site</title>
  </head>
  <body>
    <h1>Heading</h1>
    <p>Paragraph</p>

    <script>
      alert('Hello, world!');
    </script>
  </body>
</html>
```

The decision where to include script tag also depends on the need for the script. If it is necessary to get all data from some API before the html is rendered, then it is best to include that script in **head** tag.

### External JavaScript

Using external files is considered the best practice as it increase code reusability, readability and separation of logic from markup. In order to use external script, one needs to create a file with **.js** extension and then let the markup know of the existence of that script.

Suppose, you have created a folder **my-site** on the desktop and inside that folder an html file is created by the name of _index.html_ with below code:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>My Site</title>
  </head>
  <body>
    <h1>Heading</h1>
    <p>Paragraph</p>
  </body>
</html>
```

After that, a new file is created in the same directory with name of _script.js_ which has the following code:

```js
alert('Hello, world!');
```

Now it's time to link script with markup as shown in the below code:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>My Site</title>
  </head>
  <body>
    <h1>Heading</h1>
    <p>Paragraph</p>
    <script src="./script.js"></script>
  </body>
</html>
```

Now when _index.html_ is run in the browser, you should see an alert window in the browser saying "Hello, world!".

## Conclusion

- JavaScript is scripting language that was first released in 1996.
- Earlier it was only intended only for client-side interactivity but to day it can be used in smartphone applications, back-end and for the purpose developing desktop applications.
- It is best practice to always use external script file and then link that script to markup.
- The file extension of JavaScript files is **.js**.

What is JavaScript?

CSS selectors are used to find or select the HTML elements one want to style. These can be divided in to five broad categories as follows:

- **Simple selectors** (select elements based on element's name, id, class)
- **Combinator selectors** (select elements based on a specific relationship between them)
- **Pseudo-class selectors** (select elements based on a certain state)
- **Pseudo-elements selectors** (select and style a part of an element)
- **Attribute selectors** (select elements based on an attribute or attribute value)

In this article, the prime focus will be on the simple selectors.

## The element selector

In order turn the colour of all paragraphs appearing on a web page to red, one could select all **p** elements with following code:

```css
p {
  color: red;
}
```

## The class selector

In order turn the colour of all html elements to which a class of **red**, for example, is given in the markup, one could select all elements with the class of **red** and change their colour with following code:

```css
.red {
  color: red;
}
```

## The id selector

In order turn the colour of an html element to which an id of **red**, for example, is given in the markup, one could select that element with the id of **red** and change its colour with following code:

```css
#red {
  color: red;
}
```

## The universal selector

There may be situations when one needs to apply particular styles to all elements in a web page. That is usually the case when one wants to remove margin and padding property from all items as all elements have margin and padding property by default which are set by the browsers. In order to remove that margin and padding, one can use the universal selector in CSS with below code:

```css
* {
  margin: 0;
  padding: 0;
}
```

## The grouping selectors

There may be situations when one wants to apply exact styles to more than one elements or classes on a page. In that case, one can group them together separated by a comma and apply the styles all at one. Have a look at below example:

```css
h1,
h2,
h3,
p {
  color: red;
}
```

## Conclusion

The key take away from this article are as follows:

- There are different kinds of selectors in CSS like elements, classes, etc.
- One can group multiple elements together separated by a comma to apply same styles to all these elements.
- One can use universal selector to apply particular styles to all items on a page.


Selectors in CSS

First and foremost, it is important to take a note to the point that **CSS is stylesheet language** and **it is not considered a proper programming language**. This is because it was not designed for programming purpose back in the day. CSS was developed and released with the sole of premise of separating the content from its related styles so that code maintenance could become easier and development time and developer experience could be increased.

The word cascading comes the word cascade, the literal meaning of which is to flow down. In CSS context, this means that styles written are CSS are read from top to bottom and in the case of conflicting styles, the styles written at the bottom are considered the final styles. However, this is not the end of the story. There are some other considerations which are also taken into account while determining the final styles which will be discussed in a another article.

## How to install CSS?

CSS is something that comes packed with browsers by default and **it does not need to get separately installed** on the system. The thing one needs to get installed is the web browser which is the environment in which HTML gets rendered and styles relating to that HTML are also applied using default CSS values of the browser. Whatever operating system one is using, the operating system also comes with some default browser like edge for Windows, safari for Mac etc.

## How one can write CSS?

There are three ways one can write CSS, which are listed below:

1. **Inline CSS** (written under html tag as an attribute to that tag.)
2. **Internal CSS** (written in the same html file under style tag where styles for that particular page defined.)
3. **External CSS** (written in a seperate file which is then linked to respective html files where one wants to use those style.)

It is always recommended to write external CSS as it ensures better separation of concerns and avoids repeating the same styles multiple times in different html files of a single project or in different elements in an html page. However, it is considered fine to use internal CSS where styles are minimal like 20 to 40 style. In no way, inline CSS is considered a good practice.

### How to write basic CSS?

The basic syntax of writing CSS can be explained in the below list:

1. **selector** (which could be any html tag one wants to style)
2. **declaration block** (this is where styles are to be defined)
   1. **property** (the property one wants to style)
   2. **value** (the value which one wants to set for a selected property)

In terms of code, suppose one wants to change the colour of a paragraph element to red. It can be done with below code following above steps:

```css
p {
  color: red;
}
```

#### Inline CSS

It is never recommended to use inline CSS in an html document. However, for the sake of illustration, below is the example of inline css which simply turns the color of the element, in which CSS is used, to red.

```html
<p style="color:red;">This is a red paragraph.</p>
```

#### Internal CSS

Below is the example that shows how to use CSS within the same html file.

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: red;
        margin-left: 20px;
      }
    </style>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
```

#### External CSS

This is the recommended method of writing CSS. In this method, one has to create a seperate CSS file and link that file to any html file wherever one wants to use those style.

Suppose one has created a folder on the desktop by the name _styling-html_ and within that folder, a new file is created by the name of _index.html_ with the following code:

##### index.html (without styles)

```html
<!DOCTYPE html>
<html>
  <head>
    <title>My Site</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
```

After that a new file is created within the same directory by the name of _styles.css_ with the following code:

##### styles.css

```css
h1 {
  color: purple;
}

p {
  color: green;
}
```

The style file as mentioned above, has been created but it does not have any impact on _index.html_ file simply because _index.html_ have no clue that certain custom styles also exist. In order let _index.html_ know of styles, one needs to link _styles.css_ file to _index.html_ with the below line (provided same directory structure was followed). The below code needs to be entered in **head** element of the **index.html**.

```html
<link rel="stylesheet" type="text/css" href="./styles.css" />
```

After entering the above line of code, the final look of _index.html_ should be as follows:

```html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./styles.css" />
    <title>My Site</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
```

And after this if this file i.e. _index.html_ is run in the browser, it should display the heading with purple colour and paragraph with with green colour.

## Conclusion

The points to remember mentioned in this post are as follows:

- CSS stands for Cascading Style Sheets.
- It is a stylesheets language that is used beautify the content on a web page.
- CSS files need to be saved with **.css** extension at the end of a file name.
- There are three methods of writing styles for html and the recommended method is to use external CSS file.
- The basic syntax of writing CSS is **selector &rarr; declaration block &rarr; property &rarr; value**.

What is CSS?

The **&lt;img&gt;** element in HTML let us put images on a page. It is a self closing tag meaning that it does not require a corresponding self closing tag. This is mainly because of the fact that this element is not related to typography and since it is just an extension of typography, content is not needed in this element.

The **&lt;img&gt;** element in HTML is very simple to use. Lets have a look at below example:

```html
<img src="some-image.jpg" alt="An Image">
```

As can be seen from above, the image element takes two at least two attributes to function properly. The **src** attribute and and an **alt** attribute. The **alt** attribute is optional though but it has such a high importance in real world scenario that it will not be wrong to say that it is a mandatory attribute.

The **alt** (short for alternate text) attribute in an **image element** performs two functions. One is that the text inside this attribute is displayed on the screen when the image could not be loaded and the other and most important use-case is that it useful for users who are visually impaired and use some text-to-speech softwares. It is also an important factor in improving the overall website's SEO.

The **src** (short for source) attribute is absolute mandatory. It tells browsers from where and which image should be displayed in a particular **image element**. It can be a relative path from the file system from where the image should be fetched as illustrated in the above example or it can be a url which is illustrated in below example.

```html
<img
  src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-begin-6753651837108462.5-s.png" alt="Google Image">
```

The **image element** also comes with some attributes other than **src** and **alt** attributes. However, it is recommended to always style images through CSS. Two other important could be **width** and **height** attributes which determine the width and height of an image in terms of pixels. Let's have a look at below example.

```html
<img
  src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-begin-6753651837108462.5-s.png"
  alt="Google Image"
  width="100"
  height="100"
>
```

**It is highly recommended to always style images with CSS.**

Images in HTML

There are two types of lists offered by HTML which we can use in or documents. These are ordered lists and unordered lists. Let's have a look at both of these list types in this article.

## Ordered Lists

**Ordered Lists** in HTML are lists in which list items are identified through some numbers or chronological identifiers. However, it is less often that these kinds of lists are used in HTML documents. Let's have a look at the example of how can we create ordered lists in HTML.

```html
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
</ol>
```

That is the syntax for **ordered lists** in HTML. We start the opening tag, the name of which is **ol** and inside that **ol** element, we need to put our list items using **li** tags.

We can still move further and nest another list inside another. We can have as many nesting as the content demands. Let's have a look the below example for nested list.

```html
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <ol>
    <li>List item 3</li>
    <li>List item 4</li>
  </ol>
</ol>
```

The ordered lists, while these can be completely styled as we want with CSS, comes some attributes which add to their functionality. These properties are listed below:

- **reversed** - This property will set the numbering the list in the descending order. This will not actually change the order each of the list item in descending order but only their numbering is changed.
- **start** - This property will let us define the starting point of the numbering of our list. Let's have a look at the below example which will start from 10.

```html
<ol start="10">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
```

- **type** - This property will let us decide the type of identifier we want to use in numbering our list items. Let's have a look at below examples:

```html


<ol type="1">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>



<ol type="a">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>



<ol type="A">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>



<ol type="i">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>



<ol type="I">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
```

## Unordered Lists

**Unordered Lists** in HTML are lists in which list items are identified through some identifiers but these do not depict chronological format of the item. These are commonly used in various websites for various purposes such as for listing blog posts or for creating navigation or for just presenting data in the form of a list.

```html
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
</ul>
```

That is the syntax for **unordered lists** in HTML. We start the opening tag, the name of which is **ul** and inside that **ul** element, we need to put our list items using **li** tags.

We can still move further and nest another list inside another. We can have as many nesting as the content demands. Let's have a look the below example for nested list.

```html
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <ul>
    <li>List item 3</li>
    <li>List item 4</li>
  </ul>
</ul>
```

Though there are some attributes provided by HTML, it is always recommended to use CSS for styling these.

## Conclusion

The key take away from this article are as follows:

- There are two kinds lists that can be used in HTML i.e. **ordered lists** and **unordered lists**.
- In order to create a list, each list item should be nested inside the respective list tags.
- Styling of all forms of lists should be done using CSS.

Lists in HTML

## Basic use of anchor tag.

Have a look at the below syntax which describes the use of anchor tag in its most basic form

```html
<a href="http://www.google.com">Go to Google</a>
```

As can be seen from above code snippet, in order to use hyper-links on a page, we have to use anchor element. The anchor element is just denoted by character **a**. Within the the opening tag of the anchor element, we have to pass an attribute i.e. **href** the value of which would be the relative or exact path to the page to which we want our user to go once the link is clicked.

Usually, relative paths are used when the page where wants to navigate to is located on same sub-domain. In other cases, use of exact path is necessary.

## Attributes of the anchor tag

There are quite a few attributes that we can use in an anchor element each of which will behave in a different manner. We will be discussing some of the very common on most used attributes that we can use this element.

### "href" attribute

The **href** attribute lets a user directs to a page, once the link is clicked, which is assigned to this attribute. In the below example, when user clicks the link, the browser will take user to Google's homepage.

```html
<a href="http://www.google.com">Go to Google</a>
```

It is not necessary that **href** attribute will always link to other pages. Sometimes, we may want to direct a user to a mail box so he / she can send an email, like the below example:

```html
<a href="mailto:name@email.com">Go to Google</a>
```

### "target" attribute

The **target** attribute in an anchor element is also a very commonly used attribute. This attribute can accept one of the four pre-defined values. Each value will result in a different behavior. The **target** attribute is not a substitute for **href** attribute but rather is an extension to **href** attribute. The **target** attribute lets browsers know of the context in which a the link should be opened. Like, on the same page on which link is located or in a new tab or in a new window etc.

With that set, lets have a look at each of the value that can be used for this attribute.

- **\_self** - This the default value of this property. It means that even without the use of **target** attribute, the behavior will be as per specifications of this value. **This value will open the linked document on the same page on which link is located**. The effect of this would be that current page will be replaced by the new page and the link in the browser will also be changed.
- **\_blank** - This value will open the linked page in new tab, usually. However, users can configure browsers to open in the new window. This value is particularly useful when you do not want the user to move away from your site. This way the link will be opened in a new tab and your page will also be present on the users' browser.
- **\_parent** - If someone is running more than one instance of the same browsers in which you website is opened, this will let the user to open the link in the parent instance of that browser meaning that if your site is opened in the third instance which is extracted from the second instance, the link will be opened in the second instance. If that is not the case, then it will behave like **\_self**.
- **\_top** - This will open the link in the top-most instance. If no such instance exists, it will like **\_self**.

With that said, let's have look at syntax for each of the above-mentioned values.

#### \_self

```html
<a href="http://www.google.com" target="_self">Google</a>
```

#### \_blank

```html
<a href="http://www.google.com" target="_blank">Google</a>
```

#### \_parent

```html
<a href="http://www.google.com" target="_parent">Google</a>
```

#### \_top

```html
<a href="http://www.google.com" target="_top">Google</a>
```

Apart from the above there are some other attributes which can be used in anchor element but these are less commonly used and some of them even require a decent understanding of back-end. Hence, for the sake of completeness, these are mentioned below with their brief use-case:

- **hreflang** - it hints the human language of the linked page.
- **download** - it prompts the user the user save the link.
- **rel** - the relationship of the linked page.
- **type** - hints at the linked URL's format with MIME type.

## States in anchor element

There are four states in an anchor tag which are described below:

- **hovered** - It is the state when cursor is over over the hyper-link. As a result you will be able to see the location where the hyper-link points to at the bottom left of the web page.
- **visited** - It is state with which a user can point out whether he / she has already visited the particular link. The default colour of the link is _blue_ and in this state, it turn to _purple_.
- **active** - This is the state when a user clicks the link but has not yet released the mouse button. In this state, the colour of the link will be changed to _red_. However, it will be a temporary state meaning as soon as the button is released, the red colour will go away.
- **link** - This is the default state of the link when it was never clicked before. Its colour will be _blue_ in this state.

We can style the styling of all of the above link states through the use of CSS.

## Conclusion

The key take away from this article are as follows:

- Links are used to link to different pages on the same website or different pages of a different website.
- The location to which the link should be pointed at is defined in **href** attribute.
- We can change the location where the link should open in the browser through the use of **target** attribute.
- Links have four states _link_, _visited_, _hovered_, and _active_, each of which can be targeted separately in CSS and styled as such.
- Links are useful for implementing navigation in a website.

Anchor Tag in HTML

Whenever one wants to write regular content on a page, the best element available in HTML is the **p tag**. This element is a block level element.

## The "p" element

Before explaining anything about this element, have a look at the below example.

```html
<p>This is paragraph written under p tag og HTML.</p>
```

The **p** element signifies the regular text on the web page. it is a block level element which means that this element takes up whole line width from left most to the right most of the screen no matter the content ends in the middle of the line. This means that any new element that one would write subsequent to this element will appear on the new line. Similarly, this element, itself, also always starts with a new line unless, it is styled otherwise.

The syntax as can be seen from above quite simple. One just has to write an opening tag i.e. **&lt;p&gt;**, write some content and then close the tag with a closing tag i.e. **&lt;/p&gt;**.

### Whitespace in "p" tag

When writing content inside a **p** element, the browser, by default removes any leading spaces from the start and end of the tag. It can best seen from the example below:

```html
<p>            This is a paragraph with leading spaces.           </p>
```

The output of the above line will not result in spaces from the start and end of the content but rather it will start from the left most of the element.

Further, if one puts more than one space between two characters / words, the browser will also remove all of the additional spaces except for one space. The below code will simply have one space between each character no matter how many spaces are entered in the code.

```html
<p>This     is    a             paragraph        with       leading    spaces.</p>
```

### Line-breaks in "p" tag

When writing content inside a **p** element, the browser, by default removes any line-breaks and replace them with a single space between the characters where line breaks were entered. It can best seen from the example below:

```html
<p>This
  is
  a
  paragraph
  with
  line
  breaks.</p>
```

The output of the above line will not result in line-breaks after each word where line-breaks were entered but rather, entire text will be shown on a single line with one space between characters where line breaks were entered.

To make browsers accept above line breaks, a different tag is used i.e. **pre** which will explained in some later article.

## Conclusion

The points to remember mentioned in this post are as follows:

- Whenever, one wants to display some regular content on a web page, use the **p** tag.
- The paragraph element is a block-level element meaning it takes the entire row space on a page.
- Whitespace and line-breaks are not taken into account by browsers. Rather, only one space between the two characters is accepted and displayed.
- Leading spaces at the beginning or at the end of content in the p tag are not completely removed by browsers.

Typography in HTML (Paragraphs)

## Headings in HTML
There are six levels of headings in HTML ranging from level 1 heading to level 6 heading. A particular page should ideally have only one level one heading which would specify the page title. Below are few basic examples:

```html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```

Typography in HTML (Headings)

Before starting, let's have a look at the below the example which is a valid HTML document. If one saves this document, using a text editor with _.html_ file extension and open the same in the browser, the it would show heading with the text of "This is the heading" and a paragraph with the text of "This is the paragraph". Moreover, the tab content will also show the text of "My Site".

```html
<!DOCTYPE html>
<html>
  <head>
    <title>My Site</title>
  </head>
  <body>
    <h1>This is the heading</h1>
    <p>This is the paragraph.</p>
  </body>
</html>
```

## Breaking the example into simple pieces

In order to understand the examples presented above, let's look at the example line by line.

### "!DOCTYPE" html

The **!DOCTYPE html** declaration simple specifies and tells the browser that this document is written using HTML 5. HTML, since its first release in 1993, has some other versions as well but the HTML 5 version is the latest version and is the market standard at the current point of time.

If one wants to write HTML in some other version, which is definitely not recommended, one can use that version specific declaration at the top of the document.

### "html" tag

The **html** tag or element is master element of a web page. It is the root of a web page and all elements have to be nested inside this html element.

### "head" tag

The **head** tag or element contains all the meta-information about the web page. This meta-information is the information about the page that does not need to displayed in the browser. However, information or elements inside this tag are certain other purposes, like for SEO, linking to other external files such as stylesheets etc.

#### "title" tag

The **title** tag / element specifies the title of a web page which appears in the browser's tab.

### "body" tag

The **body** tag or element contains all the information which one wants to show to the readers of the web page. These may include text content and images. In short, this tag helps show human readable content on a web page.

#### "h1" tag

The **h1** tag or element specifies a certain piece of text that is written inside this tag, as level 1 heading text and displays that as such. There are six levels of headings in HTML starting from _h1_ until _h6_.

#### "p" tag

The **p** tag or element specifies the regular text on a web page. This element identifies a piece of text written inside this tag as paragraph element.

## Conclusion

The points to remember mentioned in this post are as follows:

- The "&lt;!DOCTYPE html&gt;" declaration defines that this document is an HTML5 document.
- The "&lt;html&gt;" element is the root element of an HTML page and both "head" and "body" elements are to come inside this element.
- The "&lt;head&gt;" element contains meta information about the HTML page which is not visible to readers of a web page.
- The "&lt;title&gt;" element specifies a title for the HTML page which is shown in the browser's tab.
- The "&lt;body&gt;" element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images etc.
- The "&lt;h1&gt;" element defines a level 1 heading. There are six levels of headings available in HTML.
- The "&lt;p&gt;" element defines a paragraph which means it is a regular text.

A Simple HTML Document

First and foremost, it is important to take a note to the point that **HTML is a markup language** and **it is not considered a proper programming language**. This is because it was not designed for programming purpose back in the day. HTML was developed and released with the sole of premise of communicating over the internet in some form of standard document theme.

Suppose, one wants to share a document on a particular website which is hosted somewhere on the globe and that person writes that document in Microsoft Word but the user who will reads the document uses a browser which can properly render a web page which is written in notepad. In this case, that particular page is likely to not get rendered properly on the user's system. To counter this very problem, the advent of HTML and the whole concept of standardisation of web document came into place.

## How to install HTML?

HTML is something that comes packed with browsers by default and **it does not need to get separately installed** on the system. The thing one needs to get installed is the web browser which is the environment in which HTML gets rendered. Whatever operating system one is using, the operating system also comes with some default browser like edge for Windows, safari for Mac etc.

## How one can write HTML?

It is very easy to write HTML documents on your computer. The most simplistic way is to just open the notepad on your system and write some HTML inside that document. Once done with writing the HTML, save that particular file with **.html** extension. By default, your operating system will open that file in the default browser.

That was quite simple. However, how one can know how and write in that particular document?

### How to write basic HTML pages?

In order to write very basic HTML documents, one must understand the concept of a **markup**. **Markup** is a very old technique usually associated with content writing and publication in which editors, while reviewing the content, specify, through the use of some symbols or explicit text, what content should be presented in what form in a particular document. This way, the document will have some visual hierarchy in the readers' minds.

To further elaborate the above statement, the **markup** is a technique in which it is specified in the document how to present parts of text that will look distinguished and logical in readers' minds. Like, what should be the main heading of the page, what should be the regular text, what should be secondary headings, what should be the regular bold or italic text and etc, etc. When this concept is taken into the computer environment, this markup is called **markup language**.

### How can we set markup in HTML documents?

In order to define markup in an HTML document, all we have to do is to wrap whatever content you have inside the pre-defined tags. Consider them as identifiers where we tell computer / browsers about what piece of content is a heading, what is a paragraph and etc. When a piece on content is wrapped around with certain particular tag, in HTML that portion is known as an **HTML element** like a heading element or a paragraph element etc.

It can be established from the above that in order to markup documents in computer, one has to utilise the power of markup language i.e. HTML _(if the purpose is mainly to write pages for web browsers)_. In order to use HTML, one needs to write content in inside some pre-defined tags which will ultimately result in a particular HTML element ("element"). Let's have a look at below examples of using tags which will result in an element.

#### In order to write some heading on a page,

```html
<h1>This is a heading element which is wrapped around heading tags</h1>
```

#### In order to write some paragraphs on a page,

```html
<p>This is a paragraph element which is wrapped around paragraph tags</p>
```

As can be seen from the above examples, in every element, there is an opening tag and a closing tag. The difference between the two simply **"/" - forward slash** just before the name of the closing tag. Further, each element's tag **starts with a less that sign or opening angle bracket** and **closes with a greater that sign or closing angle bracket** and inside the those brackets, is the particular name of the tag, except that in the case of closing tag that name is followed by the forward slash.

However, contrary to above, one might want to show some non-typography data on a particular document like images. In that case, the element usually does consist of an opening and a closing tag but rather a self-closing tag. Have a look at the below example:

```html
<img src="http://www.someurl.com" alt="Alternative Text" />
```

## Conclusion

The points to remember mentioned in this post are as follows:

- HTML stands for Hyper-Text Markup Language.
- It is the standard markup language understandable by browsers to render human-readable content on web pages.
- HTML documents need to be saved with **.html** extension at the end of a file name.
- HTML document consists of various HTML elements.
- Each HTML element consists of an opening and a closing tag and the content is written in between those tags.
- HTML tags that are not related to typography are usually self-closing tags.

Posts