How to Learn Web Development Guide – Frontend Developer Handbook 2020 | 2021

 

Hey all, Welcome to Geeksforjobs

Ways to learn web development

Steps to learn web development

  1. Learn basic HTML

    HTML stands for hypertext markup language. It is the standard text formatting language used for creating and displaying pages on the Web. HTML is not a programming language.

  2. Learn basic CSS

    CSS stands for Cascading Style Sheets. Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML. 

  3. Learn javascript for making your website dynamic in nature

    Javascript is an object based language ,object based means it uses items called as objects . These objects are not class based means there is no, distinction made between class and instance.

  4. Learn database management systems

    Learn dbms and it’s connectivity to the websites.

HTML stands for hypertext markup language. It is the standard text formatting language used for creating and displaying pages on the Web. HTML is not a programming language.

A programming language is the one in which we have the right to take decisions. HTML constitutes of two terms:

Hypertext: Hypertext simply means “Text within Text.” Markup language: A markup language is a computer language that uses tags to define elements within a document. Markup files constitutes of standard words, rather than typical programming syntax.

Syntax:

<html>

<head>

<title > Web engineering tutorial </title>

</head>

<body>

….

<body>

</html>

Tag

HTML tag is just opening or closing entity.

For example:

<p> and </p> are called HTML tags

Element

HTML element encompasses opening tag, closing tag, content (optional for content-less tags)

Example:

<p> This is the content </p>
This complete thing is called a HTML element.

Attribute:

It is used for the enhancement of web page.

Example:

<body text=”red”> Here, text is an attribute. Attribute basically stands for additional properties which can be used for the enhancement of web page.

What does DOCTYPE means ?

The <!doctype> declaration must be the very first thing in your HTML document, before the <html> tag. When performing HTML validation testing on a web page–

<!doctype> declaration tells the HTML validator which version of HTML standard the web page coding is supposed to comply with. Not mentioning DOCTYPE will pose threat to browser compatibility and the use of older versions of HTML. The browser will not support the use
of certain new features and tags that come with latest versions of the markup languages. A DOCTYPE also controls whether the browsers uses standard or quirk mode to render the document.

Layout of HTML

Layout of html
  • Header – Defines a header for a document
  • Nav – Defines a container for navigation links
  • Section – Defines a section in a document
  • Article – Defines an independent self-contained article
  • Aside – Defines a sidebar
  • Footer – Defines a footer for a document

Accessibility in HTML

Accessibility for the web means making sure that our web pages and applications are available to everyone, including people with disabilities.

For example:

A blind person might be using a device that reads the webpage for him.

For that you need to provide proper captions and attributes. Alt attribute is used in images, to enable the device to describe images as well.

Key factors for achieving accessibility:

  • Good Design
  • Semantic HTML
  • HTML Support
  • HTML5 & ARIA

Logical and physical tags in HTML

Logical tags

These tags are designed to describe (to the browser) the enclosed text’s meaning.

Physical tags

Physical tag provides specific instructions on how to display the text they enclose.

Important Questions

  1. What is HTML ?
  2. Define doctype in html ?
  3. Explain accessibility in html ?
  4. What do you mean by physical and logical tags ?

The <html> element :

The html element starts an HTML document.It contains everything an HTML document should contain except the <!doctype> element.

Attribute :

It is used for the enhancement of web page.

Example:

<html lang=”eng”> Here, lang is an attribute. Attribute basically stands for additional properties which can be used for the enhancement of web page.

Attributes of the <html> element

  • class
  • dir
  • id
  • lang
  • version
  • xmlns

The <head> element :

The <head> element contains general information about the HTML document ,such as title ,meta tags and base address for URL.

Meta tags

Meta tags purpose is to include metadata (data about data) about your web page.

Metadata is passed as name/value pairs like this: Name=”Description” , Value =”My website” Various types of metatags attributes are :

  • <meta name=”Keywords” content =”html,css”
  • <meta name=”author” content=”geeksforjobs”>
  • <meta name=”viewport” content=”width=device-width” initial-scale=1.0″>
  • <meta http-equiv =”refresh” content=”5”>

Base tag

The HTML <base> tag is used to specify a base URL, for relative links.

For example

If you want to display images from this website http://www.starcharismatic.com/image multiple times on your webpage, then every time you have to write this lengthy path whereas we can reduce the task by using <base> tag.

<base> tag acts as a base URL or a directory of paths.

Attributes of head element :

  • class
  • dir
  • id
  • lang
  • profile
  • style
  • title

The <title> element

The title contains the title of the HTML document, which appears in the title bar of the web page. It appears on the title bar of web browser and is used by the search engine to refer the document.

Attributes of <title >

The <body> element

The body element contains the body of the html document. The complete content that appears on the web browser is feeded inside the body tag.

Attributes of body tag

  • alink
  • background
  • bgcolor
  • bgproperties
  • bottommargin
  • class
  • language
  • lang
  • leftmargin
  • rightmargin
  • scroll
  • style
  • vlink

Heading helps to emphasize important topics. In HTML there are 6 type of heading format available.

  • H1 – H1 is the largest heading
  • H2 – H2 is comparatively smaller than H1 tag
  • H3 – H3 is comparatively smaller than H2 tag
  • H4 – H4 is comparatively smaller than H3 tag
  • H5 – H5 is comparatively greater than H6 tag
  • H6 – H6 is the smallest heading

Example :

<html>

<head>

<title> Heading example </title>

<body>

<h1> Heading 1 </h1>

<h2> Heading 2 </h2>

<h3> Heading 3 </h3>

<h4> Heading 4 </h4>

<h5> Heading 5 </h5>

<h6> Heading 6 </h6>

</body>

</html>

html headings

Header attributes

  • Align : <h2 align =”center / left /right”> Example of aligning header </h2>
  • Style : <h2 style =”write css properties “> Example of style attribute </h2>

The <p> tag marks a block of text as paragraph. <p> marks the beginning of the paragraph and </p> marks the end of the paragraph. Only single spaces are considered between any two words.

Body tag

The body tag consist of all the content that is going to be displayed on the web browser screen. The body tag consists of various attributes.

  • Bgcolor : It is used to change the background color of the complete html document body.
  • Link : Link basically specifies the color of unvisited link
  • Alink : Alink specifies the color of active link
  • Vlink : Vlink specifies the color of visited link
  • Text : Text specifies the color of html document font.

Images can be embedded into the web page. To add images as a background for the whole html document the following syntax is used:

<body background =”nature.jpg”>

  • Both gif and jpeg file can be used as HTML backgrounds.
  • If image is smaller in size compare to the html document then it will repeat itself in the web page.

Images can be embedded between the blogs using <img> tag.

The <img> tag has following attributes :

  • src: hypertext reference contains the url of the image / the name of the image along with the image format.
  • height : The height of image.
  • width : The width of image.
  • alt : Alternative text is for blind people.It is an important aspect for increasing the accessibility of an html document.

Hyperlink

A hyperlink is a link between web pages. As soon as you click on a hyperlink it will redirect you to another web page or some section of the same page.

Anchor tag

Anchor tag <a> is used to create hyperlinks in a html document. Inside the <a> tag you give the reference to another web page.

Attributes of <a> tag

  • href : hypertext reference or href attribute consist of the url to which you want to redirect your web page.
  • title : It is like tooltip of your hyperlink
  • download :Directs the browser to download the linked resource rather than opening it.
  • target : It is the way in which you want the hyperlink to open –
  • hreflang : Specifies the language of the linked web page.
  • name : names the anchor so that it may be a target of another anchor
  • rel : defines the relationship of the object being linked to.
  • rev : defines the relationship of the current object to the object being linked to.

To make a clickable image link. First create an anchor tag <a> and give the reference link in href attribute. And inside the <a> tag create a <img > tag and give the image reference in the src attribute of <img> tag. When you click on the image the link which was mentioned in the <a> tag will be opened.

Example :

<a href=”https://geeksforjobs.com/hypertext-markup-language-html-web-development/” >

<img src=”geeksforjobs.jpd” alt=”Web engineering lecture 1″>

</a>

<table> tag

The HTML table allows you to arrange data in rows and columns. It consist of various attributes.

Example

<table>

<tr>

<td> NAME </td>

<td> AGE </td>

<td>CITY </td>

</tr>

<tr>

<td> Era</td>

<td> 20</td>

<td> Chandigarh</td>

</tr>

<tr>

<td> Tina</td>

<td> 40</td>

<td> Gwalior</td>

</tr>

<tr>

<td>Jay</td>

<td> 27</td>

<td> Kolkata</td>

</tr>

<tr>

<td>Tanish</td>

<td> 23</td>

<td> Bhopal</td>

</tr>

table
Output

Attributes of table tag

  • Cell Spacing
  • cell padding
  • align
  • border
  • colspan
  • rowspan

Cell spacing and cell padding

These are the attributes of <table> tag used for the enhancement of table. For the below table let’s understand cell spacing and cell padding.

table tag
  • Space between two cells is called as cell spacing.
  • Space between cells wall and content is called cell padding.

For scrolling of the text around the screen <marquee> tag is used. The text included between the tags is transformed into a scrolling text.

Example:

<marquee> geeksforjobs is the best website </marquee>

Attributes of marquee tag

  • height : Defines the height of marquee.
  • direction : up /down /left /right
  • loop : Specifies how many times to loop.

There are two types of list in HTML , ordered list and unordered list.

Ordered list

An ordered list starts with <ol> tag. Inside this <ol> tag each item starts with a <li> tag.

Example

<ol>

<li> mango </li>

<li> grapes </li>

<li> apple </li>

<li> banana </li>

</ol>

ordered list
Output : Ordered list

Attributes

  • reversed : Specifies that the list order should be in decreasing order
  • start : Specifies the starting value of the list ( eg : start =101)

Unordered list

An unordered list is a list marked with bullets. It starts with <ul> tag.

Example :

<ul>

<li> mango </li>

<li> grapes</li>

<li> apple </li>

<li> banana </li>

</ul>

unorderd list
output : unordered list

Attributes of unordered list

  • type : Specifies the kind of marker to use in the list. Value of type can be

How do you make it so that someone can mail you by just clicking on text

An email link uses the mailto: protocol and gives the user easy way to communicate with you. To create an email link add an anchor link with the mailto:protocol indicator and the email address.

Example

<a href = “mailto://[email protected]” > Ask your query </a>

When you are working on a HTML project with multiple developers in an organization. Then in order to let the other developers understand your code, one must use comments and should perform version controlling.

Whenever multiple developers are involved in a project it is necessary to use the right workflow for Git or any other version controlling system.

In HTML 5 graphics can be developed either by <svg> tag or by <canvas> tag.

SVG

  • SVG stands for Scalable Vector Graphics.
  • SVG is based on XML (Extensible markup language)
  • SVG has better scalability as compared to Canvas.
  • SVG is vector based.

Canvas

  • <canvas> element is used to draw graphics, via JavaScript.
  • The <canvas> element is a container for graphics.
  • Poor scalability
  • <canvas > is raster based.

We can create image maps on the website with different shapes pointing to different links to associate with that- We can create two types of maps:

  1. Server side maps
  2. Client side maps

Using google API we can include Google Maps on your website. It’s possible that the Google Maps API might not work for your map. In this case, you can add a Google Map iFrame instead.

In HTML we can create a new HTML element by using createElement() method and after the element is created, use the element.appendChild() or element.insertBefore() method to insert it to the document.

Before HTML5, application data had to be stored in cookies with each server request.

  • HTML 5 supports web storage.
  • Web storage a provides a way for your web applications to store data locally within the user’s browser.

Types of web storage

HTML web storage provides two objects for storing data on the client:

LocalStorage

Stores data with no expiration date.

SessionStorage

Stores data for one session (data is lost when the browser tab is closed).

When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.

A web worker allows you to perform all the activities on the web page by executing the scripts in background.

  • You need to use utf-8 (or utf-16 or utf32) encoding to display multiple languages.
  • If you want to have a user specific primary language, then you can use the Accept-Language header to auto-detect it.
  • Use the Content-Language header to show the browser which languages the document contains.
  • HTML and XML are both markup languages.
  • HTML and XHTML are both subsets only of SGML.

In server-sent event a web page automatically gets updates from a server. With server-sent events, the updates come automatically without any manual call. Examples: Facebook/Twitter updates, etc.

CSS stands for Cascading Style Sheets. Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML. It describes how HTML elements are to be displayed on screen, paper, or in other media. It can control the layout of multiple web pages all at once.

A Simple Example

body {
  background-color: blue;
}
h1 {
  color: red;
  text-align: center;
}
p {
  font-family: verdana;
  font-size: 50px;
}

Here the back-ground of the web-page is set as blue. The heading has color red and is aligned at the center. The paragraph has font verdana with font size 50px(pixels).

The visual representation of the given example

Methods to add CSS

There are three ways

  • External CSS
  • Internal CSS
  • Inline CSS

External CSS

External styles are defined within the <link> element, inside the <head> section of an HTML page:
example:
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>

An external style sheet can be written in any text editor, and must be saved with a .css extension.The external .css file should not contain any HTML tags.

The style.css file:

css stylesheet

Internal CSS

The internal style is defined inside the <style> element, inside the head section.
eample:
<head>
<title>Title</title>
<style>    
body {  background-color: blue;}
h1 {  color: red;  text-align: center;}
p {  font-family: verdana;  font-size: 50px;}     
</style>
</head>

internal css

Inline CSS

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
example:
<h1 style=”color: blanchedalmond;”>I am heading</h1>
<p style=”text-align: center;”>I am paragraph</p>

inline css

NOTE: Multiple ways of style sheet can be used in a single web-page.The execution of style shit will take place according to the highest priority.

  • Inline style (inside an HTML element)
  • External and internal style sheets (in the head section)
  • Browser default

So, an inline style has the highest priority, and will override external and internal styles and browser defaults.

Syntax of writing CSS

The CSS syntax consist of selector and declaration block:

selector class css

To specify where CSS rule to be applied is given by using selector. Whereas, the declarations within the block determines how the elements are formatted on a web-page.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

CSS : Selectors

CSS selectors define the elements to which a set of CSS rules apply. It is used to find or select the HTML elements which you want to style.

There are different types of selectors:

CSS element Selector

The element selector selects HTML elements based on the element name.

example:
p {
  text-align: center;
  color: red;
}
here “p” is the element selector.

CSS id Selector

Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document.

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

example:
#para {
  text-align: center;
  color: red;
}
here “#para” is the selector.

CSS class Selector

This selects the HTML element of specific class.

To select elements with a specific class, write a period (.) character, followed by the class name.

example:
.table {
  text-align: center;
  color: red;
}
here “.table” is the selector.

You can also specify a particular element or elements of a class from HTML.

example:
h1.table {
  text-align: center;
  color: red;
}
here “h1” element of class “table” is selected.

CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

example:
* {
  text-align: center;
  color: blue;
}

CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.

example:
p, h1, h2 {
text-align: center;
  color: red;
}
here “p”, “h1” and “h2” elements got selected and same styling is applied to all.

NOTE: These are the basic selectors, there are many other selectors which can be used. Follow up this link to know more.
To explain the code “comments” are used by adding /*comment*/, so that the code can be explained in the file.

CSS Color

Color Names

In CSS, a color can be specified by using a color name:
example: orange, red, blue

Background Color

You can set the background color for HTML elements:
example:
<h1 style=”background-color:Tomato;”>Hello!</h1>

Text Color

You can set the color of text:
example:
<p style=”color:DodgerBlue;”>Lorem ipsum…</p>

Border Color

You can set the color of borders:
example:
<h1 style=”border:2px solid DodgerBlue;”>Hello World</h1>

RGB-Color

rgb(red, greenblue)

Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

RGBA Value

rgba(red, greenblue, alpha)

It values are an extension of RGB color values with an alpha channel – which specifies the opacity for a color.

example:
rgba(255, 99, 71, 0.4)

HEX-Color

In CSS, a color can be specified using a hexadecimal value in the form:

#rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).

HSL-Color

In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form:

hsl(huesaturationlightness)

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white.

CSS-Fonts

The font CSS property is a shorthand for font-variant, font-style, font-stretch and many more . Alternatively, it sets an element’s font to a system font.

CSS Font Families

In CSS, there are two types of font family names:

  • generic family – a group of font families with a similar look (like “Serif” or “Monospace”)
  • font family – a specific font family (like “Times New Roman” or “Arial”)
Generic family Font family Description
Serif Times New Roman
Georgia
Serif fonts have small lines at the ends on some characters
Sans-serif Arial
Verdana
“Sans” means without – these fonts do not have the lines at the ends of characters
Monospace Courier New
Lucida Console
All monospace characters have the same width

example:
.sansserif {
  font-family: Arial, Helvetica, sans-serif;
}
NOTE:More than one font can be inserted/specified using commas.

Font Style

This property has three vales:

  • Normal
  • Italic
  • Oblique(leaning)

example:
p.italic {
  font-style: italic;
}

Font Weight

These are of two type:

example:
h1.thick {
  font-weight: bold;
}

Font Variant

It determines the caps of the letter. It gives normal, small-caps and big-caps value.
example:
p.small {
  font-variant: small-caps;
}

Font Size

It sets the size of the font used in the web-page.
We should use proper HTML tags for headings ( from <h1>-<h6>) and paragraphs (<p>).
Font – size can be absolute and relative.

Absolute size:

  • Sets the text to a specified size
  • Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
  • Absolute size is useful when the physical size of the output is known

Relative size:

  • Sets the size relative to surrounding elements
  • Allows a user to change the text size in browsers

example:

body {
  font-size: 100%;
}
here percentage is used

h1 {
  font-size: 2.5em;
}
here “em” is used and 1em is qual to the original size, whereas 2.5em = 2.5*original size.

p {
  font-size: 20px;
}
here “px” is used which is pixels.

Hypertext transfer protocol (HTTP)

This a standard which decides how content is sent over the network , also it specifies all the errors and status code of the web.

Framework:

Collection of pre-built code and other assets for fast development of a website or an application.

ECMA (European Computer Manufacturers Association) :

ECMA is entrusted with the task of standardizing javascript.

  • Object based language : object based means it uses items called as objects . These objects are not class based means there is no, distinction made between class and instance.
  • Client side programming language
  • Fast, As it does not put any load on the server.
  • Case-sensitive
  • Client-side data verification.

Other Applications of javascript:

  • Game development
  • Mobile app development

Variables in javascript

Variable rules:

  • Must begin with underscore ( _ ) or letter.
  • Blank spaces are not allowed in variable names.

How to declare variables :

  1. var myname=”geeksforjobs”;
  2. let ourname=”geeksforjobs.com”;
  3. const pi = 3.14

Uninitialized variables:

  • Initial value of uninitialized declared variable is undefined.
  • If you perform mathematical operation on undefined then result will be Nan.

Difference between var , let and const :

difference between var,let and const

Note: Write variable names in camelCase.

Datatypes in javascript

1] Primitive:

  • Number
  • String
  • Boolean
  • Symbol
  • Null
  • undefined

1) Number:

The basic integer values 1,2,100 etc.

2) String :

“Hello”,”Myname” etc.

3) Boolean :

True or False

4) Symbol:

There are 3 symbolic number values-

  1. Infinity: This is any number / zero
  2. Negative infinity: This is any number / negative zero
  3. NAN: NAN stands for not a number and denotes an unrepresentable value ie. negation of imaginary number.

5) Null :

It does not point to a valid object.

6) Undefined :

The value is not defined.

2] Composite types:

1) Object :

An object is a set of properties that can be accessed using the dot operator.

2) Array :

var myname – [“hello”, 3.14, True]

TypeCasting in javascript

Typecasting is the conversion of one datatype to another datatype and typecasting in javascript are of two types:

  1. Coercion or Implicit typecasting
  2. Conversion or explicit typecasting

Note:

typeof( ) operator is used to find out the type of an operator.

1] Implicit typecasting:

Performed by compiler itself.

2]Explicit typecasting:

  • ParseInt() : By default it returns Nan
  • ParseFloat( ) : By default it returns Nan.
  • Eval ( ) : evaluates js code.
  • String( ) /toString: To convert number to string.

Example:

Convert x=5 to string ?

var x=5;

x = x.toString( )

Loops in javascript

Different kind of loops in javascript are:

For loop :

for(i=0; i

{

}

For/In loop:

The for/in loop statement loops through the properties of an object.

var list = {fname:”Geeks”,lname:”God”,}

var string1=” “

var x;

for ( x in list)

{

text+= list[x]

}

For/Of loop :

It is same as for/in loop but is for arrays, strings, maps,etc.

var fruits = [“apple”, “grapes”]

var x;

for (x of fruits)

{

document.write(x);

}

While loop :

while(condition)

{

}

do- while loop :

do

{

}

while(condition);


Leave a Comment

Your email address will not be published. Required fields are marked *