Abrar Zahin

Learning git

2019-05-19T03:58:00+00:00

Version control is very important and usefull tool for developers. In this post, I will talk about important git commands that are used most of the time.

1) git config

Use –> To set your user name and email in the main configuration file.

Command : type in git config –global user.name “username” and git config –global user.email youremail@example.com

2) git init

Use –> To initialise a git repository for a new or existing project.

Command : git init in the root of your project directory.

3) git clone

Use –> To copy a git repository from remote source, also sets the remote to original source so that you can pull again.

Command : git clone <:clone git="" url:="">

4) git status

Use –> To check the status of files you’ve changed in your working directory, i.e, what all has changed since your last commit.

Command : git status in your working directory. lists out all the files that have been changed.

5) git add

Use –> adds changes to stage/index in your working directory.

Command : git add .

6) git commit

Use –> commits your changes and sets it to new commit object for your remote.

Command : git commit -m”sweet little commit message”

7) git push/git pull

Use –> Push or Pull your changes to remote. If you have added and committed your changes and you want to push them. Or if your remote has updated and you want those latest changes.

Command : git pull <:remote:> <:branch:> and git push <:remote:> <:branch:>

8) git branch

Use –> Lists out all the branches.

Command : git branch or git branch -a to list all the remote branches as well.

9) git checkout

Use –> Switch to different branches.

Command : git checkout <:branch:> or **_git checkout -b <:branch:> if you want to create and switch to a new branch.

10) git stash

Use –> Save changes that you don’t want to commit immediately.

Command : git stash in your working directory. git stash apply if you want to bring your saved changes back.

11) git merge

Use –> Merge two branches you were working on.

Command : Switch to branch you want to merge everything in. git merge <:branch_you_want_to_merge:>

12) git reset

Use –> You know when you commit changes that are not complete, this sets your index to the latest commit that you want to work on with.

Command : git reset <:mode:> <:COMMIT:>

13) git remote

Use–> To check what remote/source you have or add a new remote.

Command : git remote to check and list. And git remote add <:remote_url:>

These are the most essential git commands.

Learning JavaScript

2019-01-17T00:30:00+00:00

JavaScript is a very powerful language. It can be used within any browser in the world. On top of that, it can be used to write server-side code using node.js.

Intro

When using JavaScript inside the browser, we can change how the page looks like and how it behaves. In this tutorial, we will only focus on learning the language itself, and therefore we will only use one function to print out our results called “console.log”.

 console.log("Goodbye, World!");

Variables

Like almost every dynamic language, JavaScript is a “duck-typed” language, and therefore every variable is defined using the var keyword, and can contain all types of variables.

We can define several types of variables to use in our code:

 var myNumber = 3;                   // a number
var myString = "Hello, World!"      // a string
var myBoolean = true;               // a boolean

A few notes: In JavaScript, the Number type can be both a floating point number and an integer. Boolean variables can only be equal to either true or false. There are two more advanced types in JavaScript. An array, and an object. We will get to them in more advanced tutorials.

 var myArray = [];                    // an array
var myObject = {};                  // an object

On top of that, there are two special types called undefined and null. When a variable is used without first defining a value for it, it is equal to undefined. For example:

 var newVariable;
console.log(newVariable); //prints undefined

However, the null value is a different type of value, and is used when a variable should be marked as empty. undefined can be used for this purpose, but it should not be used.

 var emptyVariable = null;
console.log(emptyVariable);

will print out null. # Arrays JavaScript can hold an array of variables in an Array object. In JavaScript, an array also functions as a list, a stack or a queue. To define an array, either use the brackets notation or the Array object notation:

 var myArray = [1, 2, 3];
var theSameArray = new Array(1, 2, 3);

Addressing We can use the brackets [] operator to address a specific cell in our array. Addressing uses zero-based indices, so for example, in myArray the 2nd member can be addressed with index 1. One of the benefits of using an array datastructure is that you have constant time look-up, if you already know the index of the element you are trying to access.

 console.log(myArray[1]);      // prints out 2

Arrays in JavaScript are sparse, meaning that we can also assign variables to random locations even though previous cells were undefined. For example:

 var myArray = []
myArray[3] = "hello"
console.log(myArray);

Array Elements Because JavaScript Arrays are just special kinds of objects, you can have elements of different types stored together in the same array. The example below is an array with a string, a number, and an empty object.

 var myArray = ["string", 10, {}]

# Manipulating Arrays

Pushing and popping Arrays can also function as a stack. The push and pop methods insert and remove variables from the end of an array. For example, let’s create an empty array and push a few variables.

 var myStack = [];
myStack.push(1);
myStack.push(2);
myStack.push(3);
console.log(myStack);.

This will print out:

 1,2,3

After pushing variables to the array, we can then pop variables off from the end.

 console.log(myStack.pop());
console.log(myStack);

This will print out the variable we popped from the array, and what’s left of the array:

 3           // the result from myStack.pop()
 1,2         // what myStack contains now

Queues using shifting and unshifting The shift and unshift methods are similar to push and pop, only they work from the beginning of the array. We can use the push and shift methods consecutively to utilize an array as a queue. For example:

 var myQueue = [];
myQueue.push(1);
myQueue.push(2);
myQueue.push(3);

console.log(myQueue.shift());
console.log(myQueue.shift());
console.log(myQueue.shift());.

Splicing Splicing arrays in JavaScript removes a certain part from an array to create a new array, made up from the part we took out. For example, if we wanted to remove the five numbers from the following array beginning from the 3rd index, we would do the following:

 var myArray = [0,1,2,3,4,5,6,7,8,9];
var splice = myArray.splice(3,7);

console.log(splice);        // will print out 3,4,5,6,7
console.log(myArray);       // will print out 0,1,2,8,9

After splicing the array, it will only contain the part before and after the splicing. The splice is equal to all the variables between 3 and 7 (inclusive), and the remainder of the array, which contains all variables between 0 and 2 (inclusive), and 8 to 9 (inclusive).

Operators

The addition operator The + (addition) operator is used for both addition and concatenation of strings. For example, adding two variables is easy:

 var a = 1;
var b = 2;
var c = a + b;     // c is now equal to 3

The addition operator is used for concatenating strings to strings, strings to numbers, and numbers to strings:

 var name = "John";
console.log("Hello " + name + "!");
console.log("The meaning of life is " + 42);
console.log(42 + " is the meaning of life");

JavaScript behaves differently when you are trying to combine two operands of different types. The default primitive value is a string, so when you try to add a number to a string, JavaScript will transform the number to a string before the concatenation.

 console.log(1 + "1");   // outputs "11"

Mathematical operators To subtract, multiply and divide two numbers, use the minus (-), asterisk (*) and slash (/) signs.

 console.log(3 - 5);     // outputs -2
console.log(3 * 5);     // outputs 15
console.log(3 / 5);     // outputs 0.6

Advanced mathematical operators JavaScript supports the modulus operator (%) which calculates the remainder of a division operation.

 console.log(5 % 3);     // outputs 2

JavaScript also supports combined assignment and operation operators. So, instead of typing myNumber = myNumber / 2, you can type myNumber /= 2. Here is a list of all these operators:

/=
*=
-=
+=
%=
JavaScript also has a Math module which contains more advanced functions:

Math.abs calculates the absolute value of a number
Math.exp calculates e to the power of a number
Math.pow(x,y) calculates the result of x to the power of y
Math.floor removes the fraction part from a number
Math.random() will give a random number x where 0<=x<1
And many more mathematical functions.

Conditions

The if statement The if statement allows us to check if an expression is equal to true or false, and execute different code according to the result. For example, if we want ask the user whether his name is “John”, we can use the confirm function. An example of an attribute is:

 if (confirm("Are you John Smith?"))
{
    console.log("Hello John, how are you?");
} else {
    console.log("Then what is your name?");
}

It is also possible to omit the else keyword if we only want to execute a block of code only if a certain expression is true.

To evaluate whether two variables are equal, the == operator is used. There is also another equality operator in JavaScript, ===, which does a strict comparison. This means that it will be true only if the two things you are comparing are the same type as well as same content. An example of an attribute is:

 console.log("1" == 1); // true
console.log("1" === 1); // false

For example: An example of an attribute is:

 var myNumber = 42;
if (myNumber == 42)
{
    console.log("The number is correct.");
}

Inequality operators can also be used to evaluate expressions. For example:

An example of an attribute is:

 var foo = 1;
var bar = 2;

if (foo < bar)
{
    console.log("foo is smaller than bar.");
}

Two or more expressions can be evaluated together using logical operators to check if two expressions evaluate to true together, or at least one of them. To check if two expressions both evaluate to true, use the AND operator &&. To check if at least one of the expressions evaluate to true, use the OR operator

An example of an attribute is:

var foo = 1;
var bar = 2;
var moo = 3;

if (foo < bar && moo > bar)
{
    console.log("foo is smaller than bar AND moo is larger than bar.");
}

if (foo < bar || moo > bar)
{
    console.log("foo is smaller than bar OR moo is larger than bar.");
}

The NOT operator ! can also be used likewise:

An example of an attribute is:

 var notTrue = false;
if (!notTrue)
{
    console.log("not not true is true!");
}

The switch statement The switch statement is similar to the switch statement from the C programming language, but also supports strings. The switch statement is used to select between more than two different options, and to run the same code for more than one option. For example: An example of an attribute is:

 var rank = "Commander";
switch(rank)
{
    case "Private":
    case "Sergeant":
        console.log("You are not authorized.");
        break;
    case "Commander":
        console.log("Hello commander! what can I do for you today?");
        break;
    case "Captain":
        console.log("Hello captain! I will do anything you wish.");
        break;
    default:
        console.log("I don't know what your rank is.");
        break;
}

In this example, “Private” an “Sergeant” both trigger the first sentence, “Commander” triggers the second sentence and “Captain” triggers the third. If an unknown rank was evaulated, the default keyword defines the action for this case (optional). We must use the break statement between every code block to avoid the switch from executing the next code block.

Loops

The for statement– JavaScript has two methods for running the same code several times. It is mainly used for iterating over arrays or objects. Let’s see an example:

 var i;
for (i = 0; i < 3; i = i + 1)
{
    console.log(i);
}

This will print out the following: 0 1 2

The for statement in JavaScript has the same syntax as in Java and C. It has three parts:

Initialization - Initializes the iterator variable i. In this example, we initialize i to 0. Condition - As long as the condition is met, the loop continues to execute. In this example, we check that i is less than 3. Increment - A directive which increments the iterator. In our case, we increment it by 1 on every loop. We can also write a shorter notation for the statement by inserting the variable definition inside the for loop and incrementing using the ++ operator.

 for (var i = 0; i < 3; i++)
{
    console.log(i);
}

To iterate over an array and print out all of its members, we usually use the for statement. Here’s an example:

 var myArray = ["A", "B", "C"];
for (var i = 0; i < myArray.length; i++)
{
    console.log("The member of myArray in index " + i + " is " + myArray[i]);
}

This prints out the contents of the array:

 The member of myArray in index 0 is A
The member of myArray in index 1 is B
The member of myArray in index 2 is C

Notice that we used the length property of an array, which returns the number of members in the array, so we know when to stop iterating.

The while statement The while statement is a more simple version of the for statement which checks if an expression evaluates to true and runs as long as it says true.

For example:

 var i = 99;
while (i > 0)
{
    console.log(i + " bottles of beer on the wall");
    i -= 1;
}

break and continue statements The break statement allows to stop the execution of a loop. For example, we can create a loop that loops forever using while(true) and use the break statement to break inside the loop instead by checking that a certain condition was met.

 var i = 99;
while (true)
{
    console.log(i + " bottles of beer on the wall");
    i -= 1;
    if (i == 0)
    {
        break;
    }
}

The continue statement skips the rest of the loop and jumps back to the beginning of the loop. For example, if we would want to print only odd numbers using a for statement, we can do the following:

 for (var i = 0; i < 100; i++)
{
    // check that the number is even
    if (i % 2 == 0)
    {
         continue;
    }
    // if we got here, then i is odd.
    console.log(i + " is an odd number.");
}

# Objects

JavaScript is a functional language, and for object oriented programming it uses both objects and functions, but objects are usually used as a data structure, similar to a dictionary in Python or a map in Java. In this tutorial, we will learn how to use objects as a data structure. The advanced tutorials explain more about object oriented JavaScript.

To initialize an object, use curly braces:

 var emptyObject = {};
var personObject = {
    firstName : "John",
    lastName : "Smith"
}

Member addressing Members of objects can be addressed using the brackets operator [], very much like arrays, but just like many other object oriented languages, the period . operator can also be used. They are very similar, except for the fact that brackets return a member by using a string, in contrast to the period operator, which requires the member to be a simple word (the word should not contain spaces, start with a letter or use illegal characters).

For example, we can continue to fill the person object with more details:

 var personObject = {
    firstName : "John",
    lastName : "Smith"
}
personObject.age = 23;
personObject["salary"] = 14000;

Iteration Iterating over members of a dictionary is not a trivial task, since iterating over objects can also yield members who don’t actually belong to an object. Therefore, we must use the hasOwnProperty method to check that the member in fact belongs to the object.

 for (var member in personObject)
{
    if (personObject.hasOwnProperty(member))
    {
        console.log("the member " + member + " of personObject is " + personObject[member])
    }
}

This will eventually print out

 the member firstName of personObject is John
the member lastName of personObject is Smith
the member age of personObject is 23
the member salary of personObject is 14000

# Functions

Functions are code blocks that can have arguments, and function have their own scope. In JavaScript, functions are a very important feature of the program, and especially the fact that they can access local variables of a parent function (this is called a closure).

There are two ways to define functions in JavaScript - named functions and anonymous functions.

To define a named function, we use the function statement as follows:

 function greet(name)
{
    return "Hello " + name + "!";
}

console.log(greet("Eric"));

In this function, the name argument to the greet function is used inside the function to construct a new string and return it using the return statement.

To define an anonymous function, we can alternatively use the following syntax:

 var greet = function(name)
{
    return "Hello " + name + "!";
}

console.log(greet("Zahin"));

Pop-up Boxes

There are three types of pop-up boxes in javascript: confirm, alert, and prompt. To use any of them, type

 confirm("Hi!");
prompt("Bye!");
alert("Hello");

Confirm boxes will return “true” if ok is selected, and return “false” if cancel is selected. Alert boxes will not return anything. Prompt boxes will return whatever is in the text box. Note: prompt boxes also have an optional second parameter, which is the text that will already be in the text box.

Callbacks

Callbacks in JavaScript are functions that are passed as arguments to other functions. This is a very important feature of asynchronous programming, and it enables the function that receives the callback to call our code when it finishes a long task, while allowing us to continue the execution of the code.

For example:

 var callback = function() {
    console.log("Done!");
}

setTimeout(callback, 5000);

This code waits 5 seconds and prints out “Done!” when the 5 seconds are up. Note that this code will not work in the interpreter because it is not designed for handling callbacks.

It is also possible to define callbacks as anonymous functions, like so:

 setTimeout(function() {
    console.log("Done!");
}, 5000);

Learning CSS

2018-12-26T23:33:00+00:00

CSS

CSS is a complex language that packs quite a bit of power.It allows us to add layout and design to our pages, and it allows us to share those styles from element to element and page to page. Before we can unlock all of its features, though, there are a few aspects of the language we must fully understand.

First, it’s crucial to know exactly how styles are rendered. Specifically, we’ll need to know how different types of selectors work and how the order of those selectors can affect how our styles are rendered. We’ll also want to understand a few common property values that continually appear within CSS, particularly those that deal with color and length.

Let’s look under the hood of CSS to see exactly what is going on. We’ll begin breaking down exactly how styles are rendered by looking at what is known as the cascade and studying a few examples of the cascade in action. Within CSS, all styles cascade from the top of a style sheet to the bottom, allowing different styles to be added or overwritten as the style sheet progresses.

For example, say we select all paragraph elements at the top of our style sheet and set their background color to orange and their font size to 24 pixels. Then towards the bottom of our style sheet, we select all paragraph elements again and set their background color to green, as seen here.

p {
  background: orange;
  font-size: 24px;
}
p {
  background: green;
}

Because the paragraph selector that sets the background color to green comes after the paragraph selector that sets the background color to orange, it will take precedence in the cascade. All of the paragraphs will appear with a green background. The font size will remain 24 pixels because the second paragraph selector didn’t identify a new font size.

Cascading Properties

The cascade also works with properties inside individual selectors. Again, for example, say we select all the paragraph elements and set their background color to orange. Then directly below the orange background property and value declaration, we add another property and value declaration setting the background color to green, as seen here.

p {
  background: orange;
  background: green;
}

Because the green background color declaration comes after the orange background color declaration, it will overrule the orange background, and, as before, our paragraphs will appear with a green background.

All styles will cascade from the top of our style sheet to the bottom of our style sheet. There are, however, times where the cascade doesn’t play so nicely. Those times occur when different types of selectors are used and the specificity of those selectors breaks the cascade. Let’s take a look.

Calculating Specificity

Every selector in CSS has a specificity weight. A selector’s specificity weight, along with its placement in the cascade, identifies how its styles will be rendered. The higher the specificity weight of a selector, the more superiority the selector is given when a styling conflict occurs. For example, if a paragraph element is selected using a type selector in one place and an ID selector in another, the ID selector will take precedence over the type selector regardless of where the ID selector appears in the cascade.

##HTML

<p id="food">...</p>

CSS

 food {
    
  background: green;
}
p {
  background: orange;
}

Here we have a paragraph element with an id attribute value of food. Within our CSS, that paragraph is being selected by two different kinds of selectors: one type selector and one ID selector. Although the type selector comes after the ID selector in the cascade, the ID selector takes precedence over the type selector because it has a higher specificity weight; consequently the paragraph will appear with a green background.

Combining Selectors

So far we’ve looked at how to use different types of selectors individually, but we also need to know how to use these selectors together. By combining selectors we can be more specific about which element or group of elements we’d like to select.

For example, say we want to select all paragraph elements that reside within an element with a class attribute value of hotdog and set their background color to brown. However, if one of those paragraphs happens to have the class attribute value of mustard, we want to set its background color to yellow. Our HTML and CSS may look like the following: #HTML

<div class="hotdog">
  <p>...</p>
  <p>...</p>
  <p class="mustard">...</p>
</div>

CSS

.hotdog p {
  background: brown;
}
.hotdog p.mustard {
  background: yellow;
}

When selectors are combined they should be read from right to left. The selector farthest to the right, directly before the opening curly bracket, is known as the key selector. The key selector identifies exactly which element the styles will be applied to. Any selector to the left of the key selector will serve as a prequalifier.

Specificity Within Combined Selectors

When selectors are combined, so are the specificity weights of the individual selectors. These combined specificity weights can be calculated by counting each different type of selector within a combined selector.

Looking at our combined selectors from before, the first selector, .hotdog p, had both a class selector and a type selector. Knowing that the point value of a class selector is 0-1-0 and the point value of a type selector is 0-0-1, the total combined point value would be 0-1-1, found by adding up each kind of selector.

The second selector, .hotdog p.mustard, had two class selectors and one type selector. Combined, the selector has a specificity point value of 0-2-1. The 0 in the first column is for zero ID selectors, the 2 in the second column is for two class selectors, and the 1 in the last column is for one type selector.

Comparing the two selectors, the second selector, with its two classes, has a noticeably higher specificity weight and point value. As such it will take precedence within the cascade. If we were to flip the order of these selectors within our style sheet, placing the higher-weighted selector above the lower-weighted selector as shown here, the appearance of their styles would not be affected due to each selector’s specificity weight.

.hotdog p.mustard {
  background: yellow;
}
.hotdog p {
  background: brown;
}

Layering Styles with Multiple Classes

One way to keep the specificity weights of our selectors low is to be as modular as possible, sharing similar styles from element to element. And one way to be as modular as possible is to layer on different styles by using multiple classes.

Elements within HTML can have more than one class attribute value so long as each value is space separated. With that, we can place certain styles on all elements of one sort while placing other styles only on specific elements of that sort.

We can tie styles we want to continually reuse to one class and layer on additional styles from another class.

Let’s take a look at buttons, for example. Say we want all of our buttons to have a font size of 16 pixels, but we want the background color of our buttons to vary depending on where the buttons are used. We can create a few classes and layer them on an element as necessary to apply the desired styles.

HTML

<a class="btn btn-danger">...</a>
<a class="btn btn-success">...</a>

CSS

.btn {
  font-size: 16px;
}
.btn-danger {
  background: red;
}
.btn-success {
  background: green;
}

Here you can see two anchor elements, both with multiple class attribute values. The first class, btn, is used to apply a font size of 16 pixels to each of the elements. Then, the first anchor element uses an additional class of btn-danger to apply a red background color while the second anchor element uses an additional class of btn-success to apply a green background color. Our styles here are clean and modular.

CSS Property Values

We’ve used a handful of common CSS property values already, such as the keyword color values of red and green. You may not have thought too much about them; that’s okay. We’re going to take time now to go over some previously used property values as well as to explore some of the more common property values that we’ll soon be using.

Specifically, we’ll look at property values that relate to colors and length measurements.

Colors

All color values within CSS are defined on an sRGB (or standard red, green, and blue) color space. Colors within this space are formed by mixing red, green, and blue color channels together, mirroring the way that televisions and monitors generate all the different colors they display. By mixing different levels of red, green, and blue, we can create millions of colors—and find nearly any color we’d like.

Currently there are four primary ways to represent sRGB colors within CSS: keywords, hexadecimal notation, and RGB and HSL values.

.task {
  background: maroon;
}
.count {
  background: yellow;
}

Hexadecimal Colors

Hexadecimal color values consist of a pound, or hash, #, followed by a three- or six- character figure. The figures use the numbers 0 through 9 and the letters a through f, upper or lower case. These values map to the red, green, and blue color channels.

In six-character notation, the first two characters represent the red channel, the third and fourth characters represent the green channel, and the last two characters represent the blue channel. In three-character notation, the first character represents the red channel, the second character represents the green channel, and the last character represents the blue channel.

.task {
  background: #800000;
}
.count {
  background: #ff0;
}

Hexadecimal color values have been around for a while, and they have become fairly popular because they offer a large number of color options. They are, however, a little difficult to work with, especially if you’re not too familiar with them. Fortunately Adobe has created Adobe Kuler, a free application that provides a color wheel to help us find any color we want and its corresponding hexadecimal value.

RGB & RGBa Colors

RGB color values are stated using the rgb() function, which stands for red, green, and blue. The function accepts three comma-separated values, each of which is an integer from 0 to 255. A value of 0 would be pure black; a value of 255 would be pure white.

As we might expect, the first value within the rgb() function represents the red channel, the second value represents the green channel, and the third value represents the blue channel.

.task {
  background: rgb(128, 0, 0);
}
.count {
  background: rgb(255, 255, 0);
}

RGB color values may also include an alpha, or transparency, channel by using the rgba() function. The rgba() function requires a fourth value, which must be a number between 0 and 1, including decimals. A value of 0 creates a fully transparent color, meaning it would be invisible, and a value of 1 creates a fully opaque color. Any decimal value in between 0 and 1 would create a semi-transparent color.

HSL & HSLa Colors

HSL color values are stated using the hsl() function, which stands for hue, saturation, and lightness. Within the parentheses, the function accepts three comma-separated values, much like rgb().

The first value, the hue, is a unitless number from 0 to 360. The numbers 0 through 360 represent the color wheel, and the value identifies the degree of a color on the color wheel.

The second and third values, the saturation and lightness, are percentage values from 0 to 100%. The saturation value identifies how saturated with color the hue is, with 0 being grayscale and 100% being fully saturated. The lightness identifies how dark or light the hue value is, with 0 being completely black and 100% being completely white.

.task {
  background: hsl(0, 100%, 25%);
}
.count {
  background: hsl(60, 100%, 50%);
}

HSL color values, like RGBa, may also include an alpha, or transparency, channel with the use of the hsla() function. The behavior of the alpha channel is just like that of the rgba() function. A fourth value between 0 and 1, including decimals, must be added to the function to identify the degree of opacity.

Lengths

Length values within CSS are similar to colors in that there are a handful of different types of values for length, all of which serve distinct purposes. Length values come in two different forms, absolute and relative, each of which uses different units of measurement.

Absolute Lengths

Absolute length values are the simplest length values, as they are fixed to a physical measurement, such as inches, centimeters, or millimeters. The most popular absolute unit of measurement is known as the pixel and is represented by the px unit notation.

Pixels

The pixel is equal to 1/96th of an inch; thus there are 96 pixels in an inch. The exact measurement of a pixel, however, may vary slightly between high-density and low-density viewing devices.

Pixels have been around for quite some time and are commonly used with a handful of different properties. The code here is using pixels to set the font size of all paragraphs to 14 pixels.

p {
  font-size: 14px;
}

Relative Lengths

In addition to absolute length values, there are also relative length values. Relative length values are a little more complicated, as they are not fixed units of measurement; they rely on the length of another measurement.

Percentages, represented by the % unit notation, are one of the most popular relative values. Percentage lengths are defined in relation to the length of another object. For example, to set the width of an element to 50%, we have to know the width of its parent element, the element it is nested within, and then identify 50% of the parent element’s width.

.col {
  width: 50%;
}

Em

The em unit is also a very popular relative value. The em unit is represented by the em unit notation, and its length is calculated based on an element’s font size.

A single em unit is equivalent to an element’s font size. So, for example, if an element has a font size of 14 pixels and a width set to 5em, the width would equal 70 pixels (14 pixels multiplied by 5).

.banner {
  font-size: 14px;
  width: 5em;
}

When a font size is not explicitly stated for an element, the em unit will be relative to the font size of the closest parent element with a stated font size.

Learning HTML

2018-12-23T04:48:00+00:00

HTML is the language in which most websites are written. HTML is used to create pages and make them functional. The code used to make them visually appealing is known as CSS and we shall focus on this in a later tutorial. For now, we will focus on teaching you how to build rather than design.

Now lets talk little bit about the history of html. HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989. It stands for Hyper Text Markup Language. Hypertext means that the document contains links that allow the reader to jump to other places in the document or to another document altogether. The latest version is known as HTML5.

A Markup Language is a way that computers speak to each other to control how text is processed and presented. To do this HTML uses two things: tags and attributes.

Tags and attributes

Tags and attributes are the basis of HTML.

-Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets. An example of a tag is: <h1>.

Most tags must be opened <h1> and closed </h1> in order to function

-Attributes contain additional pieces of information. Attributes take the form of an opening tag and additional info is placed inside.

An example of an attribute is:

 <img src="mydog.jpg" alt="A photo of my dog.">.

In this instance, the image source (src) and the alt text (alt) are attributes of the tag.

The way to remember– The vast majority of tags must be opened () and closed () with the element information such as a title or text resting between the tags. When using multiple tags, the tags must be closed in the order in which they were opened. For example:

<strong><em>This is really important!</em></strong>
HTML Editors
Now that we’ve gotten the basic theory out of the way. It’s time to learn how to build our first website.

First off, we must ensure that we have the right tools. Most important, we need an HTML editor. 
There are many choices on the market such as the extremely popular Notepad++.

However,  we will use the Bluefish Editor as it is free and also offers cross-platform support for Windows, Mac, and Linux users.

If you don't want to install any software, but want to preview code instantly — 
you can use an online HTML editor such as this simple html5 editor.

Do not use Microsoft Word or any other word processor when writing HTML code,
 only an HTML editor or at the very least, your machine’s built-in notepad, is suitable for the task.

Secondly, ensure that you’ve installed a number of different browsers such as Chrome 
and Firefox in order to preview your upcoming creation.

Creating Your First HTML Webpage
First off, you need to open your HTML editor, where you will find a clean white page 
on which to write your code. From there you need to layout your page with the following tags.
 These tags should be placed underneath each other at the top of every HTML page that you create.

<!DOCTYPE html>
This tag specifies the language you will write on the page. In this case, the language is HTML 5.
<html>
This tag signals that from here on we are going to write in HTML code.
<head>
This is where all the meta data for the page goes — stuff mostly meant for search engines and other computer programs.
<body>
This is where the content of the page goes.
Inside the <head> tag there is one tag that is always included: <title>, but there are others that are just as important:

<title>
This is where we insert the page name as it will appear at the top of the browser window or tab.
<meta>
This is where information about the document is stored: character encoding, name (page context), description.
Let's try out a basic <head> section:

`<head>`
`<title>My First Webpage</title>`
`<meta charset="UTF-8">`
`<meta name="description" content="This field contains information about your page. It is usually around two sentences long.">`.
`<meta name="author" content="Conor Sheils">
`</header>`
Adding Content
Next, we will make <body> tag.

The HTML <body> is where we add the content which is designed for viewing by human eyes.
 This includes text, images, tables, forms and everything else that we see on the internet each day.

How to Add HTML Headings To Your Web Page
In HTML, headings are written in the following elements:

# * <h1>
<h2>
<h3>
<h4>
<h5>
<h6>
As you might have guessed <h1> and <h2> should be used for the most important while the
 remaining tags should be used for sub-headings and less important text. Search engine bots
  use this order when deciphering which information is most important on a page.

Let’s try it out. On a new line in the HTML editor, type:

<h1>Welcome to My Page</h1>
 
and hit save. We will save this file as “index.html” in a new folder called “my webpage.”

The Moment of Truth: Click the newly saved file and your first ever web page should open in your 
default browser. It may not be pretty it’s yours… all yours. [Evil laugh]

Well let’s now get carried away, we’ve still got loads of great features that we can add your page.

How To Add Text In HTML
Adding text to our HTML page is simple using an element opened with the tag <p> which creates
 a new paragraph. We place all of our regular text inside the element <p>.

When we write text in HTML, we also have a number of other elements we can use to control 
the text or make it appear in a certain way.

They are as follows:

<b>
Bold text
<strong>
Important text (normally displayed as bold text)
<i>
Italic text
<em>
Emphasized text (normally displayed as italic text)
<mark>
Marked text (normally displayed with a yellow background)
<small>
Small text

<strike>

Striked out text
<del>
Deleted text (normally displayed as striked out)
<u>
Underlined text
<ins>
Inserted text (normally displayed as underlined text)
<sub>
Subscript text
<sup>
Superscript text
These tags must be opened and closed around the text in question.

Let’s try it out. On a new line in the HTML editor, type the following HTML code:

<p>Welcome to <em>my</em> brand new website. This site will be my <strong>new<strong> home on the web.</p>
 
Don’t forget to hit save and then refresh the page in your browser to see the results.

How To Add Links In HTML
As you may have noticed, the internet is made up of lots of links. Almost everything 
you click on while surfing the web is a link takes you to another page within the website
 you are visiting or to an external site.

Links are included in an attribute opened by the <a> tag. This element is the first that 
we’ve met which uses an attribute and so it looks different to previously mentioned tags.

The <a> (or anchor) opening tag is written in the format:

<a href="https://blogging.com/how-to-start-a-blog/">Your Link Text Here </a>
 
The first part of the attribute points to the page that will open once the link is clicked. 
Meanwhile, the second part of the attribute contains the text which will be displayed to a
 visitor in order to entice them to click on that link.

If you are building your own website then you will most likely host all of your pages on 
professional web hosting. In this case, internal links on your website 
will <a href="mylinkedpage.html">Link Title Here </a>.

Let’s try it out. Make a duplicate of the code from your current index.html page. 
Copy / paste it into a new window in your HTML editor. Save this new page as “page2.html”
 and ensure that it is saved in the same folder as your index.html page.

On page2.html add the following code:

<a href="http://www.google.com">Google</a>
 
This will create a link to Google on page 2.

Hit save and return to your index.html page.

On a new line on index.html add the following code:

<a href="/page2.html">Page2</a>
 
Hit save and preview index.html in your browser.

If everything is correct then you will see a link which will take you to your second page. 
On the second page, there will be a link that will take you to google.com

How To Add Images In HTML To Your Website
In today’s modern digital world, images are everything. The <img> tag has everything you 
need to display images on your site. Much like the <a> anchor element, <img> also contains 
an attribute. The attribute features information for your computer regarding the source, 
height, width and alt text of the image.

You can also define borders and other styles around the image using the class attribute. 
However, we shall cover this in a later tutorial.

The file types generally used for image files online are: .jpg, .png, and (less and less) .gif.

Alt text is important to ensure that your site is ranked correctly on search sites and also 
for visually impaired visitors to your site.

The <img> tag normally is written as follows:

<img src="yourimage.jpg" alt="Describe the image" height="X" width="X">
 
Let’s try it out. Save an image (.jpg, .png, .gif format) of your choice in the same folder
 where you’ve saved index.html and page2.html. Call this image “testpic.jpg.”

On a new line In your HTML editor enter the following code:

<img src="testpic.jpg" alt="This is a test image" height="42" width="42">
 
Hit save and preview the index.html page in your browser.

How To Make an HTML List
In web design, there are 3 different types of lists which you may wish to add to your site.

Ordered List
The first is <ol>: This is an ordered list of contents. For example:

An item
Another item
Another goes here
Inside the <ol> tag we list each item on the list inside <li> </li> tags.

For example:

<ol>
<li>An item </li>
<li>Another item </li>
<li>Another goes here </li>
</ol>
 
Unordered List
The second type of list that you may wish to include is a <ul> unordered list. This is 
better known as a bullet point list and contains no numbers.

An example of this is:

<ul>
<li>This is </li>
<li>An Unordered </li>
<li>List </li>
</ul>
Definition List
Finally, you may wish to include a definition list <dl> on your page. An example of a <dl> list is as follows:

HTML
Hypertext markup language is a programming language used to create web pages, and is rendered by a web browser.
The code used for the above is as follows:

<dl>
<dt>Item</dt>
<dd>The definition goes here</dd>
</dl>
Let’s try it out. Open index.html and on a new line, enter the following HTML:

<p>This website will have the following benefits for my business:</p>
<ul>
<li>Increased traffic </li>
<li>Global Reach</li>
<li>Promotional Opportunities</li>
</ul>
 
Now hit save and check out the results in your browser. If everything worked out 
then it will display a bullet-pointed table displaying the information above.

How To Add Tables In HTML
Another way to keep your website looking neat and orderly is through the use of a table.
 This is definitely the most complicated part of this tutorial, however,
  studying it will certainly pay off in the long-run.

Important: Do not use a table to layout your website. Search engines hate it and it is
 generally a bad idea. Just…don't. See our CSS tutorial, instead.

With this in mind, tables can still be a useful way to present content on your page.

When drawing a table we must open an element with the <table> opening tag. Inside this
 tag we structure the table using the table rows, <tr>, and cells, <td>.

An example of a HTML table is as follows:

<table>
<tr>
<td>Row 1 - Column 1</td>
<td>Row 1 - Colunm 2 </td>
<td>Row 1 - Column 3 </td>
</tr>
<tr>
<td>Row 2 - Column 1</td>
<td>Row 2 - Column 2</td>
<td>Row 2 - Column 3</td>
</tr>
</table>
 
This will produce a 2-row table with 3 cells in each row.

Tables can get quite complicated, so be sure to check out our special HTML tables tutorial.
 However, watch out for these tags so that you can recognise them and use them as your skills develop:

<thead>
Table head — top of the table
<tbody>
Table body — table content
<tfoot>
Table foot — bottom of the table
<colgroup>
Column group — easy way to organize columns
<th>
Table header — data cell but for the header
Tables, borders, spacing are usually styled using CSS but we will cover this in a later tutorial.

Let’s try it out: Go to a new line on the index.html page within your text editor. Enter the following HTML code:

<table>
<tr>
<td>Row 1 - Column 1</td>
<td>Row 1 - Column 2 </td>
</tr>
<tr>
<td>Row 2 - Column 1</td>
<td>Row 2 - Column 2</td>
</tr>
</table>
 
Hit save and preview it in your browser.


How To Close an HTML Document
You’ve reached the end of our absolute beginners HTML tutorial.

The final step we need to complete is to close the <body> and <html> tags at the end 
of each page using the following HTML code:

</body>
</html>
 
In this guide, you’ve learned how to create basic HTML web pages. You’ve also learned to 
add headings, text, images, links, lists and basic tables to these pages.

You can now use this knowledge to create your own web pages containing these features and 
link them together. We suggest that you further enhance your skills by experimenting with 
the code you’ve learned using different variables. You may also wish to learn about intermediate 
HTML elements or how to make your pages beautiful using CSS.

The power to create your own website is now in your hands.

Troubleshooting
In case things didn’t work out as intended, simply check your HTML code against the examples below:

Index.html troubleshooting code

<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
<meta charset="UTF-8">
<meta name="description" content="This is my first website. It includes lots of information about my life.">
</head>
<body>
<h1>Welcome to my webpage</h1>
<p>Welcome to <em>my</em> brand new website.</p>
<p>This site will be my <strong>new</strong> home on the web.</p>
<a href="/page2.html">Page2</a>
<img src="testpic.jpg" alt="This is a test image" height="42" width="42">
<p>This website will have the following benefits for my business:</p>
<ul>
<li>Increased traffic </li>
<li>Global Reach</li>
<li>Promotional Opportunities</li>
</ul>
<table>
<tr>
<td>Row 1 - Column 1</td>
<td>Row 1 - Column 2 </td>
</tr>
<tr>
<td>Row 2 - Column 1</td>
<td>Row 2 - Column 2</td>
</tr>
</table>
</body>
</html>
 
page2.html troubleshooting code

<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
<meta charset="UTF-8">
<meta name="description" content="This is my first website. It includes lots of information about my life.">
</head>
<body>
<h1>Welcome to my webpage</h1>
<p>Welcome to <em>my</em> brand new website.</p>
<p>This site will be my <strong>new<strong> home on the web.</p>
<a href="http://www.google.com">Google</a>
</body></html>

Further Reading Thanks for working through this simple crash course to HTML. Keep learning!

Most Popular HTML Tags HTML, which stands for “HyperText Markup Language,” is the coding language for authoring web documents. “Tags” are simply codes that tell a web browser how to display a page. Below are some of the most common tags — used by nearly every website you encounter.

Headings Headings are a way to make text stand out by breaking up the page. Paragraph Paragraphs determine line spacing. Italics Create italics text just like in a word processor. Bold Bold text emphasizes key words. Anchor The anchor tag is most commonly used to create links in combination with the Href attribute. Unordered List Unnumbered lists of bullet points use the Unordered List tag. List Item Each line on a list is enclosed by a List Item tag. Blockquote Blockquote tags are used to enclose quotations from people. This tag helps to differentiate the quote from the text around it. Horizontal Rule A horizontal rule is a straight line commonly used for dividing areas of a webpage. Image Learn the image tag to find out how to code pictures into your page. Division The Division tag defines specific layout styles within CSS. Most Popular HTML Attributes What’s the difference between a tag and an attribute? Simply put, attributes are a way to customize HTML tags. While a tag is a command in HTML, attributes describe the specifics of how the tag will be customized.

Alt The Alt attribute for the Img tag indicates replacement text for images that might not load. Href The Href attribute specifies the web address called for by an Anchor (or “a”)tag. Src The Src attribute specifies the file location of an image. Style Style attributes describe layout information specified by Cascading Style Sheets (CSS).