JavaScript Posts

HTML Post Image

## 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

Variables in JavaScript (let, const, var)

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

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)

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

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

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 I learned while coding this blog!

Resources

Top Picks for today!

Analysis of variable declarations in JavaScript

Variables in JavaScript (let, const, var)

Images in HTML

Typography in HTML (Paragraphs)

Typography in HTML (Headings)

Topics

Front-end

HTML

CSS

Sass

Javascript

React

Angular

Node

Python

Android

Back-end

Latest posts

Random Quote Generator

Analysis of variable declarations in JavaScript

CSS Comments

Variables in JavaScript (let, const, var)

Comments in JavaScript

A Simple JS Program

What is JavaScript?

Selectors in CSS

What is CSS?