HTML CSS JS in Nut shell

CONTENTS
C
O
N
T
E
N
T
S
HTML Introduction & Examples
1
CSS Introduction & Examples
2
JS Introduction & Examples
3

01
H y p e r T e x t M a r k u p L a n g u a g e
HTML

01 02 03
W h a t I s H T M L ?
HTML is a language for
describing web pages.
HTML stands for Hyper
Text Markup Language
HTML is a markup
language
A markup language
is a set of markup
tags The tags
describe document
content
HTML documents
contain HTML tags and
plain text HTML
documents are also
called web pages

<tagname>content</tagname>
H T M L Ta g s

B a s i c H T M L p a g e s t r u c t u r e
<!DOCTYPE html>
It is declared as HTML version 5 indicator.
01
<HTML>
02 It is declared as base HTML tag, all page is
coded in it only.
<HEAD>
03 It is the first element defined in <HTML> tag,
we define links, title, script & meta tags in it.
<BODY>
04 It is defined after <HEAD>, it contains all the UI
elements like :- nav, img, h1, p, div, section etc.
<SCRIPT>
05 It is declared after end or as the last element
of BODY tag, it contains all the JS codes of
the page.

Attributes
HTML attribute provide additional
information about HTML elements.
like - id, class, width, height, src, href,
style, title, alt, name, value, etc
01
Formatting
HTML contains several elements for
defining text with a special meaning.
like - , , , ,
, , , ,
<del>, <ins>
02
Colors
HTML colors are specified with
predefined color names, or with
RGB, HEX, HSL, RGBA, or HSLA
values. Like for red :-
In hex - #ff0000
In rgb - rgb(255, 0, 0)
by name - red
by hsl - hsl(0, 100%, 50%)
by hsla - hsla(0, 100%, 50%, 1)
03 Table
HTML tables allow web developers
to arrange data into rows and
columns.
04
M a j o r U s e d K e y s
Important Keys

B a s i c H T M L Pa g e S t r u c t u r e ( e g )

02
C a s c a d i n g S t y l e S h e e t
CSS

01 02 03
W h a t I s C S S ?
CSS is a modern,
responsive, mobile first
CSS framework.
CSS provides
equality for all
browsers: Chrome.
Firefox. Edge. IE.
Safari. Opera.
CSS provides equality
for all devices: Desktop.
Laptop. Tablet. Mobile.

H o w t o u s e C S S ?
External CSS Internal CSS Inline CSS

C S S S y n t a x
The selector points to the HTML element
you want to style. like :- h1
Selector
Property is the style which you want to
change of the selected element, like:
color
Property
It denotes the value of the property to be
passed of the property. like :- { color:
red; } - here red is the value
Value

C S S B o x M o d a l
CSS box model is a container which
contains multiple properties including borders, margin,
padding and the content itself. It is used to create the
design and layout of web pages. It can be used as a toolkit
for customizing the layout of different elements.
For eg :-
Ist in center :- Element’s width & height
IInd from center :- Element’s padding
IIIrd from center :- Element’s border
IVth from center :- Element’s Margin
Blank outer space :- Element’s position
Box Modal

C S S S e l e c t o r s
CSS Selectors
Their is mainly 4 types of CSS
selectors which we are going to
study
ID Selector
Universal Selector
Element Selector Class Selector

B a s i c C S S Pa g e ( e g )

01 02 03
W h a t I s J S ?
JavaScript is a scripting
language that enables
you to create
dynamically updating
content, control
multimedia, animate
images, and pretty much
JavaScript can
calculate,
manipulate and
validate data.
JavaScript can update
and change both HTML
and CSS.

Scope
Scope is simply a box with
boundaries. There are two types
of it in JS: local and global.
01
IIFE
Immediately Invoked Function
Expression, it means that func. is
Immediately Invoked as created.
02
Async/await
Stop and wait until something is
resolved.
03
Closure
A closure is simply a function
inside another function.
04
J a v a S c r i p t B a s i c C o n c e p t s
Callback
A callback is a function that
executes after another function
has executed.
05
The Module Pattern
A module is a small unit of
independent, reusable code.
06

T h e H T M L D O M ( D o c u m e n t O b j e c t M o d e l )
When a web page is loaded, the browser creates a Document Object Model of the page.

J S D o m M a n i p u l a t i o n
Their is 4 Major ways

J Q u e r y
j Query is a lightweight, "write less, do
more", JavaScript library. The purpose of JQuery is to
make it much easier to use JavaScript on your website.
JQuery takes a lot of common tasks that require many
lines of JavaScript code to accomplish, and wraps them
into methods that you can call with a single line of code.
For eg :-
Finding HTML Element by ID - $(“#uniqueID”)
Finding HTML Element by Class - $(“#commonClass”)
Finding HTML Element by Tag Name - $(“h1”)
Finding HTML Element by Attr Name - $(“[data-attr=value]”)
JQuery

JavaScript
JavaScript uses JIT[Just in Time Compiler] which is
combination of interpreter and Compile and is
written in C. It’s a combination of ECMA script and
DOM (Document Object Model).
JavaScript is an independent language and can
exist on its own.
JQuery
While JQuery Uses the resources that are provided by
JavaScript to make things easier. It is a light-weight JavaScript
library. It has only the DOM.
JQuery is a JavaScript library.
J a v a S c r i p t v s J Q u e r y
Conclusion
All JQuery code is JavaScript, but JQuery doesn't include all the JavaScript
code. The point is that they are not two programming languages. JQuery is just
optimized to do the common scripting functions with fewer lines of code

A J A X
AJAX stands for Asynchronous
JavaScript And XML. In a nutshell, it is the use of the
XMLHttpRequest object to communicate with servers. It
can send and receive information in various formats,
including JSON, XML, HTML, and text files.
For eg :-
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
AJAX

HTML CSS JS in Nut shell

Recommended

More Related Content

What's hot (20)

Similar to HTML CSS JS in Nut shell (20)

Recently uploaded (20)

HTML CSS JS in Nut shell