📄 Table of Contents

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ ✦ ✦ ✦ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬

◉ Introduction

→ CSS specifies the LAYOUT of the web pages.

→ JS specifies the BEHAVIOUR of web pages.

◉ <!DOCTYPE html>

<!DOCTYPE html>

anchor attributes

<a target=”_blank|_self|_parent|_top|framename”>

_blank => Opens the linked document in a new window or tab

_self= > Opens the linked document in the same frame as it was clicked (this is default)

_parent=> Opens the linked document in the parent frame

_top=> Opens the linked document in the full body of the window

attribute=”_blank” in html hyperlink => tells the browser to open a new window (or tab, if that’s the user’s preference) when that link is clicked.

<meta> elements

Model Box Structure


◉ Why HTML 5 over HTML 4.01

◉ Block vs Inline



Positioning ( f A R S I ) in HTML

To start with, create a parent container with 4 boxes side by side.

position: static


<div class=”parent”>
<div class=”box” id=”one”>One</div>
<div class=”box” id=”two”>Two</div>
<div class=”box” id=”three”>Three</div>
<div class=”box” id=”four”>Four</div>


.parent {
border: 2px black dotted;
display: inline-block;
.box {
display: inline-block;
background: red;
width: 100px;
height: 100px;
#two {
background: green;

Live code: JsBin

By default, position is set to static. It positions based on the layout in the flow.

What happens when we want to move the GreenBox but do not want to affect the layout around it?

position: relative

This is where position: relative comes in. Move the green box relative to its current position to 20px from the left and top without changing the layout around it. Thus, leaving a gap for the green box where it would have been had it not been position.

#two {
top: 20px;
left: 20px;
background: green;
position: relative;

Live code: JsBin

Position: absolute is the opposite.

position: absolute

By applying position: absolute to the GreenBox, it will not leave any gap where it would have been. The position of the GreenBox is based on its parent position (the dotted border). Thus, moving 20px to the left and bottom from the top-left origin of the dotted border.

#two {
top: 20px;
left: 20px;
background: green;
position: absolute;

Live code: JsBin

In a nutshell …

always place your absolute positioned elements inside position:relative container so that ur absolute positioned element is relative to that relative positioned element else your element will fly.

HTML5 for the mobile web — forms and input types

The full list of input types which are particularly useful for mobile users is:

color date datetime datetime-locale mail month number range search tel time url week

Input type tel vs Input type number

The tel input type is very similar to the number input type. The main difference is in the numeric keypad that is displayed on some browsers.

For number a simple numeric keypad is shown, but for tel the user is presented with a virtual telephone keypad, complete with alphanumeric keys.

◉ Pseudo-classes

A pseudo-class is used to define a special state of an element.

Pseudo-class names are not case-sensitive.

Pseudo-classes can be combined with CSS classes:

◉ Pseudo-elements

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

◉ HTML data-* Attributes

Use the data-* attribute to embed custom data:

<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>

The data-* attributes consist of two parts:

  1. The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix “data-”
  2. The attribute value can be any string

Note: Custom attributes prefixed with “data-” will be completely ignored by the user agent.

◉ HTML Attributes


Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store