Scribd
Upload
20 views19 pages

Frontend Notes

The document provides an extensive overview of front-end web development technologies, including HTML, CSS, and JavaScript. It covers fundamental concepts such as HTML structure, CSS styling techniques, and JavaScript programming principles, including variables, data types, and functions. Additionally, it introduces frameworks like Bootstrap and discusses responsive design practices.

Uploaded by

kevliyakev
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
20 views19 pages

Frontend Notes

The document provides an extensive overview of front-end web development technologies, including HTML, CSS, and JavaScript. It covers fundamental concepts such as HTML structure, CSS styling techniques, and JavaScript programming principles, including variables, data types, and functions. Additionally, it introduces frameworks like Bootstrap and discusses responsive design practices.

Uploaded by

kevliyakev
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 19

FrontEnd

--------------
HTML,HTML 5
CSS,CSS3
- Bootstrap Framework
JavaScript
-jQuery Framework

Angular

---------------------------------------

HTML - Hypertext markup language


- Used to design web pages
- file extension is .htm, .html
- Constructed with elements.

HTML can be divided into 2 parts


1. Header
- can contain reference files
- Document name
2. Body
- Content inside body part creates the web page.

Elements:
- elements can contain start and end tag.
- Element can create content in html page.
<html> </html>
<p> </p>
<span> </span>

Attribute:
- Attribute changes the behaviour of the element.
<p style="color:green" >My text document</p>

Table - used to display content in row column format.

Static Content Vs Dynamic Content


----------------------------------
Static content are fixed content. they are changed rarely. Ex)web sites . Used to
promote business
Dynamic contents keep changing time to time. Ex)Web Application.
Used to manage an organization

HTML 5 Introduction
-------------------

New Semantic Elements


header
nav
section
content
aside
footer

Inline vs Block Elements


-------------------------
Inline elements starts from next space available in the same line
Ex) span, img, a

block elements takes full line and push the next element to next line
ex) table, p ,div, all new semantic elements

DAY 2
CSS- Cascadding Stylesheet
--------------------------
Its Used to change appearance of the element.

Its divided in 3 types based on the usage.

1 .inline Stylesheet - the styles are created in the same element.


2. Embedded Stylesheet - collection of styles created on the page and used with in
the page.
3. External Stylesheet - collection of styles created and used for all the pages in
the application.

Syntax:
--------
Property_Name1: value1;
Property_Name2: value2;

Inline Stylesheet
-----------------
<div style=" " >

</div>

Embedded Stylesheet
-------------------

mupltiple styles are created and grouped as collection.

syntax:
----------
.class_name{ --- class selector
Property_Name1:value1;
Property_Name2:value2;
}

#id{ ---- # selector


Property_Name1:value1;
Property_Name2:value2;
}

class vs id
-------------
Class can be used in mupltiple elements in page.
created with .

Id is unique in a page. can be used more than once.


created with #.

External Stylesheet
------------------
.css file is created with selector which will be applied in the page elements.

add reference to .css file with following line


<link rel="stylesheet" href="mycss.css">

Day3:
-----

selectors - find the matching element and apply the mentioned styles to the
element.

- Simple element selector - Class, ID


- Combinatory element selector - can contain more than 1 element or class
selector
- Psuedo Class selector- styles applied to link :
- Psuedo element selector - applies to text elements, ::
- Attribute element selector - applies to Attribute mateched elements

BoxModel:
---------

Margin - Border -padding -Content

Shorthand Notation-
-------------------

border: 2px solid red;


padding: 5px 12px 14px 14px;

Width- MinWidth
---------------
Responsive WebDesign
----------------------

Our application should display the without beaking the content.

Developer Tools
-----------------
Explore - elements, Responsive view

DAY 4

Position :
---------
Placing element in webpage at mentioned location.

Postion:
static,
relative,
absoloute,
fixed,
sticky

Hiding an element
Display:none/block
Visiblity: hidden/Visible

Media Query
------------
decducts the screen size and apply new class styles

.mediaDiv{

background-color:blue;
}

@media screen and (properties){


css selector1
css selector2
.....
}

@media screen and (max-width:400px)


{
.mediaDiv{

background-color:red;
}
}

DAY 5

Display:
-------
flex is non dimensional

table
------
Display :grid is dimensional means ex: 2 X3

Background-image : url(file name);


Background-repeat:repeat;

Opacity: decides the transparency


opacity: 0.4;

(0.1 to 0.9)

background-color:rgba(255,0,255, 0.4);
Its giving background color and opacity. 2 in 1.
CSS Gradients: - generates mixed colors
--------------

Linear Gradients (goes down/up/left/right/diagonally)


background-image: linear-gradient(red, yellow);
Radial Gradients (defined by their center)
background-image: radial-gradient(red, yellow, green);
Conic Gradients (rotated around a center point)
background-image: conic-gradient(red, yellow, green);

text-shadow
text-shadow: 2px 2px red;
box-shadow
box-shadow: 10px 10px lightblue;

Display
-------
inline
block
none
flex
grid

DAY 6

HTML 5 Advanced tags


--------------------
header
nav
section
aside
footer

2D Transformation
-----------------
translate() - move an object to another position
rotate() -
scaleX() - make large size
scaleY()
scale()
skewX()
skewY()
skew()
matrix()

Style="text-transform:translate(20px,25px)";

3D Transformation
-----------------

rotateX(20deg);
rotateY(20deg);
rotateZ(20deg);
CSS Gradients: - generates mixed colors
--------------

Linear Gradients (goes down/up/left/right/diagonally)


background-image: linear-gradient(red, yellow);
Radial Gradients (defined by their center)
background-image: radial-gradient(red, yellow, green);
Conic Gradients (rotated around a center point)
background-image: conic-gradient(red, yellow, green);

text-shadow
text-shadow: 2px 2px red;
box-shadow
box-shadow: 10px 10px lightblue;

Bootstrap Framework
-------------------

DAY 7

BootStrap
---------
Layout building
container
container-fluid

rows -12 columns

Break Points-Screen Size

Breakpoint Class infix Dimensions


Extra small None <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px

DAY 8

What is JavaScript?

Scripting Language:
--------------------
JavaScript is a scripting language, meaning it's interpreted by a web browser line
by line, without needing to be compiled beforehand. This makes it quick and easy to
work with.
Client-Side:
------------
JavaScript primarily runs in the user's web browser (the "client-side"). This
allows it to manipulate web page content, respond to user actions (like clicks and
hovers), and update information without needing to constantly reload the page.
Dynamic:
---------
JavaScript enables you to create dynamic and interactive web experiences

Variables
-----------
All JavaScript variables must be identified with unique names.
unique names are called identifiers.
Names can contain letters, digits, underscores, and dollar signs.
Names must begin with a letter.
Names can also begin with _.
Names are case sensitive (y and Y are different variables).
Reserved words (like JavaScript keywords) cannot be used as names.

strings
---------
muthu
sathish
date
----
14-5-2025
boolean
--------
yes
no
number
-------
14500
25.35

implicit declarations.

Scope:
------
var
let
const

Scope in JavaScript determines the accessibility or visibility of variables. It


essentially defines where in your code you can use a particular variable. There are
three main types of scope in JavaScript:

Global Scope: Variables declared outside any function or block have global scope.
They can be accessed and modified from anywhere in your code, including within
functions and blocks.

Function Scope: Variables declared inside a function have function scope. They are
only accessible within that specific function and are not visible outside of it.
Each function creates its own scope.

Block Scope: Variables declared using let or const inside a block (e.g., within
curly braces {} in an if statement, for loop, or any other block) have block scope.
They are only accessible within that specific block.

-------------------------------------------------------------------------
// Global scope
var globalVar = "I'm global";

function myFunction() {
// Function scope
var functionVar = "I'm in the function";
let blockVar = "I'm in the block";

console.log(globalVar); // Accessible here


console.log(functionVar); // Accessible here
console.log(blockVar); // Accessible here

if (true) {
// Block scope
let anotherBlockVar = "I'm in another block";
console.log(globalVar); // Accessible here
console.log(functionVar); // Accessible here
console.log(blockVar); // Accessible here
console.log(anotherBlockVar); // Accessible here
}

console.log(anotherBlockVar); // Error: not accessible here


}

console.log(globalVar); // Accessible here


console.log(functionVar); // Error: not accessible here
console.log(blockVar); // Error: not accessible here
console.log(anotherBlockVar); // Error: not accessible here

myFunction();

-------------------------------------------------------------------

var vs let vs const

redeclaration - not - not

Feature var let


const
-----------------------------------------------------------------------------------
--------------
Scope - Function or Global Block Block
Hoisting - Hoisted, initialized to undefined Hoisted, not initialized
Hoisted, not initialized
Reassignment - Allowed Allowed
Not allowed

--------------------------------------------------------------------

Data Types
-----------
JavaScript has several data types, which can be broadly categorized into primitive
(or value) types and non-primitive (or reference) types.

Primitive Data Types:


--------------------

These data types are immutable, meaning their values cannot be changed directly.
When you reassign a primitive value, you're actually creating a new value in
memory.

Number: Represents numeric values, including integers and floating-point numbers.


String: Represents textual data. Strings are enclosed in single quotes (') or
double quotes (").
Boolean: Represents a logical value: true or false.
Undefined: Represents the absence of a value. A variable that has been declared
but not assigned a value is undefined.
Null: Represents the intentional absence of a value. It's used to explicitly
indicate that a variable has no value. null is an assignment value. You set a
variable to null.

Non-Primitive Data Types (Reference Types):


-------------------------------------------

These data types are mutable, meaning their values can be changed. When you work
with reference types, you're working with a reference (pointer) to the object in
memory, not the object itself.

Object: A collection of key-value pairs (properties). Objects are versatile and


can represent complex data structures. Arrays and functions are also special kinds
of objects in JavaScript.

JavaScript

let person = {
name: "Jane Doe",
age: 25,
city: "New York"
};

let car = new Object();


car.make = "Toyota";
car.model = "Camry";
Array: An ordered collection of values. Arrays can hold values of any data type.

JavaScript

let numbers = [1, 2, 3, 4, 5];


let mixedArray = [1, "hello", true, { name: "John" }];

Function:
A block of code designed to perform a specific task.
Functions are first-class citizens in JavaScript, meaning they can be treated like
any other data type (e.g., passed as arguments to other functions, returned from
functions, assigned to variables).

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

Operators
---------

JavaScript has a wide variety of operators that allow you to perform various
operations on values (operands). Here's a breakdown of the common operator
categories:

1. Arithmetic Operators:
------------------------------
These operators perform mathematical calculations.

+ (Addition): Adds two operands.


- (Subtraction): Subtracts the second operand from the first.
* (Multiplication): Multiplies two operands.
/ (Division): Divides the first operand by the second.
% (Remainder/Modulo): Returns the remainder of a division.
++ (Increment): Increases the operand by 1.
-- (Decrement): Decreases the operand by 1.

2. Assignment Operators:
------------------------
These operators assign values to variables.

= (Assignment): Assigns the value on the right to the variable on the left.
+= (Addition assignment): Adds the right operand to the left operand and assigns
the result to the left operand. (e.g., x += 5 is equivalent to x = x + 5)
-= (Subtraction assignment): Subtracts the right operand from the left operand and
assigns the result.
*= (Multiplication assignment): Multiplies the left operand by the right operand
and assigns the result.
/= (Division assignment): Divides the left operand by the right operand and assigns
the result.
%= (Remainder assignment): Calculates the remainder and assigns it to the left
operand.

3. Comparison Operators:
-------------------------
These operators compare two operands and return a boolean value (true or false).

== (Equal to): Checks if two operands are equal (loose equality). Type coercion may
occur.
=== (Strict equal to): Checks if two operands are equal and of the same type
(strict equality).
!= (Not equal to): Checks if two operands are not equal (loose inequality).
!== (Strict not equal to): Checks if two operands are not equal or not of the same
type (strict inequality).
> (Greater than): Checks if the left operand is greater than the right operand.
< (Less than): Checks if the left operand is less than the right operand.
>= (Greater than or equal to): Checks if the left operand is greater than or equal
to the right operand.
<= (Less than or equal to): Checks if the left operand is less than or equal to the
right operand.
4. Logical Operators:
----------------------
These operators perform logical operations on boolean values.

&& (Logical AND): Returns true if both operands are true, otherwise returns false.
|| (Logical OR): Returns true if at least one operand is true, otherwise returns
false.
! (Logical NOT): Returns the opposite boolean value of the operand.

6. String Operators:
----------------------

+ (Concatenation): Used to combine strings.

7. Conditional (Ternary) Operator:


-----------------------------------
A shorthand for if...else statements.

condition ? expressionIfTrue : expressionIfFalse;

8. Type Operators:
------------------
typeof: Returns the data type of an operand (e.g., typeof 10 returns "number").
instanceof: Checks if an object is an instance of a particular class or constructor
function.

Operator Precedence:
--------------------
Operators have a specific order of precedence, which determines the order in which
they are evaluated in an expression. Parentheses () can be used to override the
default precedence.

Statements:
-----------
A program is essentially a sequence of statements. Every statement in JavaScript
is terminated by a semicolon (;). Although the semicolon is optional

Conditional Statements:

if -else

if statement:
if (condition) {
// Code to execute if the condition is true
}

else if statement:

if (condition1) {
// ...
} else if (condition2) {
// ...
} else {
// ...
}
if (condition1) {
// ...
} else if (condition2) {
// ...
} else {
// ...
}

swith:

switch statement: Used to select one block of code to execute from multiple blocks
based on a value.
switch (expression) {
case value1:
// ...
break;
case value2:
// ...
break;
default:
// ...
}

Loop Statements:

These statements allow you to repeat a block of code multiple times.

for loop:

for (initialization; condition; increment) {


// Code to be executed repeatedly
}

while loop:
while (condition) {
// Code to be executed repeatedly
}

do...while loop:
do {
// Code to be executed repeatedly (at least once)
} while (condition);

Jump Statements:

These statements control the flow of execution within loops and other structures.

break statement: Exits a loop or switch statement.


continue statement: Skips the rest of the current iteration of a loop and proceeds
to the next iteration.
return statement: Exits a function and optionally returns a value.
throw statement: Throws an exception.

Functions:
-----------

a function is a block of organized, reusable code that performs a specific task.


Functions are fundamental building blocks in JavaScript and are essential for
creating modular, maintainable, and efficient code.

A function is defined using the function keyword, followed by a function name, a


set of parentheses (), and a block of code enclosed in curly braces {}

function functionName(parameter1, parameter2, ...) {


// Function body (code to be executed)
// ...
return value; // Optional return statement
}

functionName:
The name of the function. It should be descriptive and follow naming conventions.

parameter1, parameter2, ...:


Optional parameters (inputs) that the function can receive. These are variables
that are used within the function's body.
{}:
The curly braces enclose the function body, which contains the code that the
function executes.
return value;:
An optional statement that specifies the value the function returns. If a return
statement is not present, the function implicitly returns undefined.

implicit declarations.

Scope:
------
var
let
const

Scope in JavaScript determines the accessibility or visibility of variables. It


essentially defines where in your code you can use a particular variable. There are
three main types of scope in JavaScript:

Global Scope: Variables declared outside any function or block have global scope.
They can be accessed and modified from anywhere in your code, including within
functions and blocks.

Function Scope: Variables declared inside a function have function scope. They are
only accessible within that specific function and are not visible outside of it.
Each function creates its own scope.
Block Scope: Variables declared using let or const inside a block (e.g., within
curly braces {} in an if statement, for loop, or any other block) have block scope.
They are only accessible within that specific block.

-------------------------------------------------------------------------
// Global scope
var globalVar = "I'm global";

function myFunction() {
// Function scope
var functionVar = "I'm in the function";
let blockVar = "I'm in the block";

console.log(globalVar); // Accessible here


console.log(functionVar); // Accessible here
console.log(blockVar); // Accessible here

if (true) {
// Block scope
let anotherBlockVar = "I'm in another block";
console.log(globalVar); // Accessible here
console.log(functionVar); // Accessible here
console.log(blockVar); // Accessible here
console.log(anotherBlockVar); // Accessible here
}

console.log(anotherBlockVar); // Error: not accessible here


}

console.log(globalVar); // Accessible here


console.log(functionVar); // Error: not accessible here
console.log(blockVar); // Error: not accessible here
console.log(anotherBlockVar); // Error: not accessible here

myFunction();
-----------------------------------------------------------------------------------
--------------
DAY 9

class
------
class is a blueprint for creating objects with shared properties and methods.

constructor
-----------
Its a special method which is called automatically when an object is created.

program:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}

greet() {
console.log(`Hello, my name is ${this.name}`);
}
}
Creating an Object
-------------------

const person1 = new Person('Muthu', 30);


person1.greet(); // Output: Hello, my name is Muthu

Inheritance
------------

class Student extends Person {


constructor(name, age, grade) {
super(name, age); // calls the parent constructor
this.grade = grade;
}

study() {
console.log(`${this.name} is studying.`);
}
}

Prototype
---------
Prototype is the mechanism by which JavaScript objects inherit features from one
another.

function Person(name) {
this.name = name;
}

Person.prototype.greet = function () {
console.log(`Hello, I'm ${this.name}`);
};

const alice = new Person("Muthu");


alice.greet(); // Output: Hello, I'm Muthu

get and set are special methods that define how to access or update the value of an
object’s property.

class Person {
constructor(name) {
this._name = name;
}

get name() {
return this._name;
}

set name(value) {
this._name = value.toUpperCase();
}
}

const p = new Person('Muthu');


console.log(p.name); // Muthu
p.name = 'raj';
console.log(p.name); // Raj

Getter (get): Called when you read a property (obj.name).

Setter (set): Called when you assign a value (obj.name = "Raj").

Call back function:


------------------
A callback is a function passed as an argument to another function

function sample(num1, name,test)


{

function test()
{

Asynchrnous:
------------
setInterval
setTimeout(() => {
console.log("This runs after 2 seconds");
}, 2000);

Arrow function
--------------
()=>{}

inline function

function add(a,b)
{
return (a+b);

console.log(a+b)
}

()=>{ }

var x= (a,b)=> { a+b};

function show()
{
console.log("hello");
}
()=>{ console.log("hello")}

Promise Pattern
---------------
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}

let myPromise = new Promise(function(myResolve, myReject) {


let x = 0;

// The producing code (this may take some time)

if (x == 0) {
myResolve("OK");
} else {
myReject("Error");
}
});

myPromise.then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);

JSON vs XML
------------
to store data.
no enviroment dependent.
common medium

var muthuObj=new Person('Muthu',35);

JS Object
---------
{'name':'muthu,age:35};

XML Format:
----------
<Person>
<name>muthu</name>
<age>25</age>
</Person>

JSON Format
-----------
{name:'Muthu',
age:35}

JSON.stringify- convert js Object to JSon string.


JSON.parse - convert JSon string to JS Object.
// Storing data:
const myObj = {name: "John", age: 31, city: "New York"};
const myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

// Retrieving data:
let text = localStorage.getItem("testJSON");
let obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;

The HTML DOM (Document Object Model) is a programming interface that represents
the structure of an HTML document as a tree of objects.
It allows programming languages like JavaScript to access, modify, and interact
with the content and structure of a web page.

getElementById
getElementByClassName
getElementsByTagName

-----------------------------------------_-------------------------------
DAY 10

Promise Pattern
---------------
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}

let myPromise = new Promise(function(myResolve, myReject) {


let x = 0;

// The producing code (this may take some time)

if (x == 0) {
myResolve("OK");
} else {
myReject("Error");
}
});

myPromise.then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);

The HTML DOM (Document Object Model) is a programming interface that represents
the structure of an HTML document as a tree of objects.
It allows programming languages like JavaScript to access, modify, and interact
with the content and structure of a web page.

getElementById
getElementByClassName
getElementsByTagName
innerHTML
innerText

You might also like