Donlocað ’ VS Code cSousce ode Editeo)

Hele to code Edt Disli.

Bettes than nte pod boz va
OFoldeY
Word
Ait + 2

featu VS Code 4 opening tag atr Adomstielly closi tas ji

optton Cummard Pelatte

medi
ophion sctey Cut
’ Zom
Hon oebsite oorhs
Respone idcly 2.e
Request Esso 4.4
client) Responsa |Sesver
Const

Bsoosen
Cyle continady ku CBund)

SeSVes Sida ol he wbsite

Backend >. t is tha mahes Suse evigthins on the client Sjde
" 3+ Slo6es & u68umes data, ak.
" yau Can' Sa intSUct im
diset Contact oit
slw tmat doesn' Cor in

t CsS Dynamiç Rordy

Bsain
Shelton e Btton Colos mestty
(ex-Seasch
Beot
eao
to add vi
in hTmL /videoy
Zvideo dc " Video d. mptConttcls
tn
nav to coli a'oasde their odu
Code
o\net tople
index m
Sipt is

exteyion tab (Top -le)

VS od
fucti onaty t enhcce
use vs (ode
iCona intel
JS
3

Not Live Prvit) t wtal a

 )n
Lie revit 2 412 2 Line festim Top Rignt )

3
Nos inK wth HTML

",shect "hory
<lhead >

Cuusse").
java clylopmot
alet(" lcome to
Nos ink in HTmL fil jut
à
Note sesipt
"sip'jo"/rit
Llbody
Emaithg
Autolomte
Monhel

to ylo
)HTML not nod

Basic Stouctue
HTNL >
DoTYE
2
Scale|-t ">
UTF-8 "> oidt initia
ehead >
Z meta
charset =
tanttnt oidth ckvice
"vespo"
namg
2mea Dotut </4tle >
2 itle> Tag
4/head>
paise d tag
Zbody7 e. htm tuy
Llbody ex- meta

dese
Me Riak, meda, kez06d , deyeiptian

wi blan K"
Bd ’ main Contt shich Seen in ang atit
See voebsie in mobi mobhi phon me

Risht Cik on it cbsite puse

Teyminal chek

34 6 old vession
(ommncl Psompt iporj'g

\6.1.144
IRV4 Addxess : i42.
Ka vs Code Setting seasen

Seting Nehosk

Jet

Sushadins h Main deveieadinN

|n Seconcu

At +Shilet) seplide Line a

Ram

GRam

Aibt E Elemer enhante functinality <Jes (Metuse

not

leyl.
 Lbody>
his(ss
gaoupig glyudto tag footk heudes
&
a}s1 sak Line zbn
fAns lcaption detai Employ captin7 <
cyz Caption
ty Captiny ad Also
Tava Sam
Sqm Tabs
lengn Designatiön
Fas Name
Cel^ &
jta7 Zam< =2"> pan Cols td Z
"234" haigth 236" id 2tr
CoY colurn mumy ColSpan’
how
fáhete
s pan Cols &
zb"oo
Spun
wdin attsin
te moge 2 cjkullety
ita Java Zta
Z1td>rarammer <ta
ses ima Shou tfuot>
<bod
>
Not" altA-pg" åsc=" <irmg adat
2tedy> 2/tbe
foldes oqn
2ta
2 LAthea
sett )
tlSnippin lorm tue chadu
in teble mako ’Help
to Table
inHTML bles List mags,
&
Parsph
Tas Krh Boo
 Dyinition
Unordtad

Shutn

hTML
Dic, Squann
Cisce Pasble
Caupitl Romen no .
Ng1ld aloo possle dyut)
tut 16y Coscuny st Khet
bydyeua) Coutiy
Copitalath
SmyletteY
All websi w
SEOCuch Lod Londi t m i
Load at tot Sc

3(nportnt (ose wbita cue

cLS shift shald be minimun

(cntutue ayot Shep)

’ LCe
( Las gut Cottatuel faind Aer. Best co 2sr)
in Jgt
CAsst Inpt Dela) inpt Bhulestatpems
in TmL pug.
Lightheuk- Teil oht is impsovint pssible load
Qnazon
Rositra Tof ptto

Note
websk
meta deigion tog

Zmea name e deseian" Contint This is paca hich contun desiion

ogm - hele to submit impt rom client to Sesvt

Inguig Jotni, Cotac+ pego ,aoul fotms,fight - vailway tichet óTy
snput tay fotm 31g tT2 Tag 35T CK Aoate, name, Dhon no .

Code e Somjhn
e Sosm actisn "(ost CIform >
te backend
ehabel ot "namt" entts yous name <nabel > I/ to label ingpt tass

oe tpQusos autom
Entt otlacettdis
youheu
 Lrlin
widtn
tomes tnat Conttt ang ushing
sdeet don't
on ont
ncessay: usidth
as much taru
adup ohy &nento
Ckments &1ock Talire
mango
"fouit
"> "6uit
> id ngme select 2
>fruit
La "fouit" fos 2\6bel
tf "3" "cls Comment " id
Comment " name 2textCa
sucti'se jood not Il 2bo
how (omment joun "Comment"> foi Qabel 2
+m tne accept Os
(ondi
hjo
"'Sutsibe" ciba"id -*Bubs "checRbox"
mena <inptty
Nchekbox di> 2
emle o Male O
only bcoz sane gendes
"gndts" ngme= formae tyadio :A " <ingut
Qase fayda assign m
"gendor> nam mole"t"dioh
" id inyt
Zdiy
6
 25

div

Stan

TO &Ciesseserepe
10 ’ Atbtt, unisua idetiyes assigrud tocnsy ona HTmL
Samb h d t Clemert min Opu
Classes attbte, qit the sa me name to mt ple HTML met
Class
untquly id enti ctw
on i,

Yed-Tsh,t
cbody>
<div id "fiyst diy "
3 ciass ="Aed by yle
>First <jdiv>

TaAlS talp in linking ao wikipadia Serueh Codis ’ Ay Pase Ies, ’Rit clih

then los & Bto Pete io

ikrple seeh dlirery
tu tras Kk di'se te.

Au dior, Video,&media Elemt used in HTML

u vidt -cly
(ortlon ytdea oualgdviwe
Pittu in pittu
mdeÀ Akvibt los mte a vidko uie rayà a)

Cortos ag Postes

Audio audio Src " auttonan. m Contrs laudio >

Speilypat Ada adio
Redet
ma
Qutoplay atomadicd Rag
loop ’ Repeat to end

nendyut val
Downood entie udio
 mjSac "ims bvg "a," nt founc"
oe not Jound e'sn
Searh sag;´ramspe
Cof
height nloo "

Hxcmes Help to embed ed othen cb3ite

heiyt aolue>

kqtine
nTML5wsims).

Non Sematie Tag SenentiCtag

cheades7
2spen
<div Zmainy
2div
Zartele st} ontain pieePosAg
< div kasdez

autthot
fotes elo

als ha

cliContet Ii
2[heodes 7
Ch Wnat ase SomentiTs dh

Cotac+
 34 Jor >
Space &ampifosBe
&Coyi Jos

This is (a9

ina
o/r
This is ayteo Je

Capyight Co &nbsb &nbsb ; &nbse Code oitn hang

/f
CefysiyhtO
"So2r the VRL Lo
qatoS"
Qiotdtien text Satti

o/P ttatation
t o t , (avd tag nt ued ino WOdays
(ode
 25
Fonta & olo in CSs
font Aex autan

add
CsSCsca ding St* Shat
<Stye tay ’
"Lnlne css g Adding Addingy <style
css us ing 3tye to 47T ML

SletoY -Use& to select (mosty cdibte

ue)
oHTML Qnout &\ying
Jor
Co lor : L\u

emS
d , span f
S«lecto% (ea 2 uZ

backyodtoloy:los. Ideclcuti on
<

LAn kCsS to HTm

am clso boss
.)Lnlia Css notgotpcchse Cbeoz hoed
indivduEr lent Pecee neA
jeh1le - " Colos :Dyll; bac kaßoud cdes dudi halo < |hi>
Cpisad (oda Size T)
3)E xtes ned css be
(ommet in CSs
SelectoS indeta
Element selectorr used to slect element based o the tajngmg h2
Pisud 3g N Apely oe not vt Coloy: bl,;
3
I4SletoY: usd

Coler'y hit;
backgd : black;
Class to sales Jeven class
slecos

Chilt
seletos
 Fonts & slos in CSS
Code

9ed
div
baciy3ou nd Co los
Ihad >

I am
< Tam died>
zlbody>
</div
Chida lecto
<stle >

div 7R Note diect

bac ksoud. Colo bÑ oLon,

<lstle >

Ldiv > <p>

<p> T om a a insie diu </p>
Adi wuz

use descendaut slector

t

fadding o.

slecker
psaudo
in coloun
ohan visit chenge o r )
i c chu

tolori yilgw

a: Dink

ethtk
a:actiy
olor sed, Pott toury
bocaeto

a: hoveo S
 Fonts Cslor in CSS

(12

Miyin ntu& bosdes masgin 0

I4iek mo tr
faddng
Conte nt
Border
CSus onds tn Paddiny
Code itha

Ae innesmst
Cempanent q th box notel
Centint
elawt
bosde 2 tor,
di out t
Sizig : botdor
t ocAu heNtt
Actual hizt spare
Notmaryin is
naoxeldir
<div claus = " box> I
let
otal Heiy) Meight Top laddig t Bosto mfaddiny t Topsevdst T am anthe boLlaiv Cas possib
Bottom Gosdis t tof Maqin t Botom ayin but nct it.

Conent t Bosder t faddig

use tis it
meurs R3 onl contut haiyt htif Botkes t addi (amputed
inld Lokti

Masgin in collops Sang

thsn thne maxi nnin tmain

at be cpplied ora Once

Box A wnheisst
Box A

mutgin 25 px,
ble,
border : 2px solid
height Box B
boxsizing: bosder box ;

heignt : KSe 2op;

SziS : tacle black,

 2stgle fot boy font

Fent fumy'sego UI' , Tahe ,ene, Vogl a, Sus- deri,

italici
ttxt -&crox«dien ' undeslhing 'his
/ Wis is a pary«fh
Cofy hed teA
Seh (Text stk,
(oepins

fia fort siz

-font
32

->Line - hight:4

sfun

th2
Capitli; r tontinto tot Cae o/f alout fonts
FoNTs

decostin - cdo aqua

Fonts
clhe>
hz abot
45p ) Rignt y pastisnàe
’ text- inde nt

sed;
bosder 2px Slià o woY baeakseak
c;

tetoveolos ellipsis,

’ text - aisnCertor
font AI
 Color s

Colos

(oleygb(76,125,11)
gt(76, 25,s4)
(alos

Coles:ba(ss, 2,S.b.x15 ) (,o,0) black

a sQBeyt chettintmity
l hoxColey

h2n
ba kg Toad colbs put

S Sheti

L Ligntmeis

Coles : o hll235,oe'?. ,Sor );

to an HTAL elennt
Dbala
9Srcilicity dettsmint which css sdocios has stfergst muth
tht at
3/Osigin'- Osder in shich (SS oposs & unere it (omes whther

Setity Asut stlshect

then it

Nte ine Sty& seltos most

ni Specidi men id wwer ayut
4 Sstleiset

Awibte slecter
4 Jnpostut

(olos sed , Eeet sdeo

<Istyle Styly overoite
3

data-n >"'a"> Ss
seiiut <{hL Colox ved inparo:
<pus" helloy
< hiclass"Cyelo PA
alos :ble

Sed folb
 ()
ixoQ (px) 146 on inch
stles

seudo bos tor

22%*
Seroll bn 1YJTi

Vw unit (vitw Post wnà ) Ths is bos

7did

(Top,ld)

) t x Rit

Heignt k ig Vn unit
mbas Bo'/: haight vitport

’Em unit Tohtit heke tna Pont size n a tha us Ka (tny quna
(atai

’ 6e nit 9oot lenent hu 3ina siza uske it

ntm htmd Reat
font size =16 px;
2
.CoutahmE
font siz 2rm,
achulsi
/24pxi
mobile
taignt
vhfos monitor
widtn

yhfot mdoile
 Oine &Shadoa rc

min - heijt Bovhi

nt

inin
wocen t clà lock auaht to Co yd into inin
ikt displey -inlin;

ifindin earat
paddiy top S not deeept
bex
disply:inbn- blck;
Conv
a r it

fodolitg : 4Sfai by tr hl
not ilow
3 display:i i black;
2Isthe >
to we width
zbady
heele

<di cl -" box" >

heado
J am ls

2Ibo

visibilit : hidden C
Box llza
’

dsglay: fiex i -)

Justi cont nt i certer

(tnts
 Qutline Shado in CS
Shude Visu shadoo n y se

eolor insat,
bon Shadowi h-o set v- yst blur sp(ad& eekiees 92)
posiion . (Shad ow Ba
n-)yt &v- cet dateythine horizental
shado
Vus harqy the vala, 4h HsieK tne )
Spacl shoihK he shado siz. (Sheude o Si za
Expand os
Cleg Dyine shadow celox

box bosder 2¢x soid black;

(addig : 34px;
buy shadew 5A 15 5 8d,

Style div) b shad

< div clea" bo" Gest

fos

aline: 2¢x solid ogtunj

Diffsone be Bosda & ine
kosd
Outline
don't taeeup
Positin sface; thgei
dsun asond the
elemet, otside geg
bosu
wict Uni moidtn Varsying idt
Masi souded cosren usiM bord-aqdiws

Cobnn
falas Bosdes
offset
9Outtin ; offst
Not pussilue
Suthe space bly
notti th edgx
bot, olen

isRet
List
display:9i tn;
Hom

elemostg
list- st- positi n inside; Lostst
3
 bes

beoz 3431

Oveglo hando in (sS

box

heiya 4uh, 511e ui ortrt he zizo nt e16ol) Pr

(hlo
bosder : 2 soltd,
boy
’ whitt spate noutap

Lais)
text " ovltowi ellipsis,
ovesy\a i hidden se sSoll bus nahi
aye of overlow text
Jndividlly bhi Contrd no horizuthilos
ahi dikhge
Over low:n hiddern; issa psagkunaidy

ovesLow; hiddtn qutoj

fesitiar in CsS
top, botom, et, rint, z-irdu all tres an' b ont.

po sition alotin
ele met.s
Posiin botton 2s

(ositjon
afra neatt pusitron dhndg J Ki absolde o Posi tiod 22
Rihiotd

-bon3£
 )

Mose about position - dogld

atonatla whan
Nste ba lgut posi hon tan olso fived
toron ,GMes, ptssqrie
Ptopeus
: teuae (o);
Invest (o ),
em,

Vnables in CSS
also
tomtilby chan asible hald psopetits
Clabl vagiube
baclatost Nee css
-Colos :

d pad);
padding: varl--
disglay fex,

Cmeans adn
About Contyit

culori vax-- (olos)

(- - Sec » ),;'

Coles Dotanyr il Locl,

< div clas nav" &
Shostut
uli*3

’ var(- -Colos, ed )
2di class Coutain'

1 Ato use in borde -Seecelos );

basdes 20x Solid varl -

Yot vdu Ihey dej ap : o-3,

wdsite din
opauts hro--dsop),'
 Media
Style chan
ehang
(media sa

frint nesikem

in Caxyra

@media ony &soen and(mox- oi dth : 45 5%) {

b body'

Widtnheh
edia Ssun and ( oxietation, pottait)

Float & Cleod

Catds
Shostc botder: 2px solid
"Casds .Casd*3 dislay: fiao oc; ile ince Gataive a aulo dixhe to apna cotn
displa f1owiN
imng&

"Casd

Sroth 2|head>

< div class "cwtds"

"t,r

men t ZA) box

Sam Cleorsuse
<stle
"Casd thhA (3)

hes Jy to set ousllos in

Note
ing9 displey:(ls toc)
<leusa Net ust inuebsite ar undessdiny K g inp
id, lerbox or otvor uys
Mok about Seletors
- bo:is - chidE Cneung bon fisstchild no tub upe)

httliegber : fiest:lin
class nane

’.box :first -ettr £

fon,
<div cla oxes\ > (olos:

3117

Colos lo
coloy ble ae
3
Atbte sleckoy Ang attbto name

I data- Color = psimaty"Ji

backgrod coler i

-)atopins ls fossible q cdenet

P,a box, [ data colo6 primay"]
Psmy
Prrty T
’box :&nhild Ceven)
$ chilsà aa Aprbox bosei
Conte India is
fos odd ’ ode (omhy
Jso (tne , 2,s Donami San
mis
-box nh. Qast-chC1)£
ANtn
 e::bckion

’placehelden ki psopesty chang Ihasn

infut pluehaldes {
Colos: bhee,

<inpd yr "4tat" plac

eibody ehotdesTypjour nam
Flex

Meslsx4
O olign- item. lentesi | Centes et air
fier- start )4Mer Shet

align-Cotentsraty
tof

basdie leebesn ie lbee (Stuct -os,

E
CGLdTspacear )
Concepts in Jlex
- en in leabon
an't som 1)t to Rignt th Qu in
fex diseeh ten ke
Kidnar Ko h.
(le die.
d deat Let to
Right hote h , bd oe Cn 'qsgin
4sing some propotis chng diy
flex -d i ;Colo um;
iem Vai t to btom na

botam

Rus
 (soss at & to Main s.

Root Le moin axes Colugafiex

najn
ases

main anapr
42 cRott
just contt (entts mlam ma in axes

main axis & Koss axis7

>Main Sast

Mn
Csass

Main
Siz Ans

a
’Main end t

main S(22
Csoss
Stast
(soss

use S N Contt
vileo in mebils es aptof N

Note Trere is nt jstiy-iten in ler box &t's not used at all .

align
’flen-flos
gop- Piopest item
hoyizonto

ropodheS oaire ce iten siue?)

Nouspropti Ihems in Fley Jep: 30p
Rsopdies 3z
24em

Ro Colymy
 oupsty
"odes -1
otdes:1;
otdes 2,
o des 3

2 main >

oder,1" "> </Ai>

clas

by dejelt

.itenis meuns 2item ar

Do uble

34imm r l t
C3item cAK}T)

ex -shiink poupestsito shsink nocessarg

flex- item
Abili
{lex-hin2;

olign poupst
- s item
ParticSn Ka
;
ign- d3:lex end

aling s : yes