02 @Ane

ela
kir
an

Ma
rkupMa
gic

Moder
nHTML
Pr
acti
ces
Uses e
ma nt i
cHT MLt oi mpr oveS EOa nd
accessi
bil
it y
.
<header>-Int
roducessit
eo rse cti
onheader.
<nav>-F
aci
li
tat
e ssi
tenavi
gationlinks.
<main>-Centr
alcontentofapa ge .
<ar
ti
c l
e> -
Independent,s
e l
f
-c ontai
nedco nt
ent.
<se
c ti
on>- Grouprel
atedco ntent.
<as
ide>-Relat
edbutno n-essenti
a lco
nte
nt .
<af
ooter>- Cl
oseswit
hc ontact/i
nfoli
nks
.
03 @Ane
ela
kir
an

St
yleSa
viour
s

CSSfor
Res
ponsivenes
s
Ma s
terFlexboxa ndGr i
ds yste mst oc reatere
spo
nsi
ve
la
youtsthatwo r
ko na nyde v i
c e .
.
Fl
exboxL ayout-Streaml i
nesali
gnme ntandspaci
ng.
Gri
dL ayout-Enabl escompl
e xgri
ds t
ructur
es.
MediaQue ri
es-Adaptsl ayouttodifferentdevi
ces
.
Fl
exCont ai
ne r-Containerforflexi
bleit
e ms.
Gri
dL i
ne s-Definesrowsandcolumns .
Fl
exItems-Chi l
drenofflexcontai
ner.
Gri
dAr eas-Namedsectionsofgri
d
04 @Ane
ela
kir
an

J
ava
Scr
iptJ
oys

Ja
vaScr
ipt
Ess
enti
als
Lev e
rageES6 +f e ature slikea r
ro wf unc ti
o ns,pr
omis
es,
anda sync/
a waitf orc lea ne rc odea ndbe tterper
for
mance
ArrowFunc ti
ons -Si
mplifiesfuncti
onsyntax.
Promises-Managesasynchronousoperations.
Async /
Await-Easi erasynchronouscodereadabi
l
it
y.
Templ at
eLitera l
s-Enhancesstri ngi
nt er
pol
ati
on.
De st
ructur
ing-Si mplifie
se xt
racti
ngvalues.
Modul es-Encouragescodeencapsulat
ion.
Spread/RestOpe r
a tors-Handl ese l
ementsfle
xibl
y
05 @Ane
ela
kir
an

Gi
tGoi
ng

Versi
onCont
rol
wit
hGi t
UseGi tf orve rsi
o nc o nt r
o l
.Ke yc omma nds
:gi
tco
mmit,gi
t
push, gitme rge .
gi tinit-Init
ia l
ise sane wGi tre
pos
it
ory
.
gi
tinit-I nit
ia
li
sesane wGitrepos
it
o r
y.
gi
tc lone -Copiesareposi
torytoyourl
o ca
lma chi
ne.
gi
ta dd-Stageschangesf orthenextcommi t.
gi
tc ommi t-Savesyourchangesl
o cal
l
y .
gi
tpus h-Sendsl oc
alcommi t
stothere moterepo.
gi
tpul l-Updatesyourlocalr
epofromre mote.
gi
tme rge-Combi nesbranchestogether.
06 @Ane
ela
kir
an

gi
tbra
nch-Managesmulti
pl
eli
nesofdeve
lopme
nt.
gi
tcheckout
-Switchesbranc
hesorre
stor
esfil
es.
gi
tmerge-Combinesbranchest
oget
her.
07 @Ane
ela
kir
an

Fr
ame
wor
kFi
nes
se

Fr
ameworksa
nd
Li
bra
ries
Boostpro duc t
ivitywi thf r
a me wo r
ksl i
keRe actforUl
devel
o pme nt,a ndt o olsl i
keBo o tstr
a pfors t
yli
ng.
React-Bui l
dsdynamicuserinter
faces.
Bootstrap-Streamli
nesr e
spo nsi
ves t
yl
ing.
.
Angular-Managesscala
blewe bappl
icat
ions
.
Vue.j
s-Si
mpli
fiesUldevelopme ntprocess
.
j
Que r
y-EasesHTMLdocumentmani pul
ati
on.
Sass-EnhancesCSSwi t
hmo ref eat
ures.
Express.
js-Facil
it
atesbacke ndwe bappli
cat
ionr
out
ing
08 @Ane
ela
kir
an

API
Adv
ent
ure
s

API
sa ndRESTf
ul
Ser
vices
Connecty
ourappl
i
cat
ionst
ot hewebwi
thREST
fuls
erv
ices
andunder
sta
ndthebas
icsofAPIsf
ors
eaml
essi
nte
grat
ion.
APIs-Enablesint
era
cti
onbe tweens oftware.
REST-Si mpli
fieswebservi
cesarchi
te cture.
JSON-Standardfo
rmatforAPIdataex change.
Endpoi
nt s-SpecificAPI methodsforda taret
ri
eva
l.
HTTPMe thods-Definesacti ont ype sfo
rAPIre
quest
s.
Stat
usCode s-Indi
catestheresulto fAPIr
equest
s.
OAuth-SecuresAPIaccesswithauthent i
cati
on.
09 @Ane
ela
kir
an

Te
sta
ndTr
iumph

Test
ingand
Debuggi
ng
I
mpl
ementre
gulartes
ti
ngwi
thJes
torMochatocat
chbugs
e
arl
yandensur
ey o
urcodei
sre
adyforpr
oduc
tio
n.
Jest-Si mpli
fiestestswit
hz eroconfigurati
on.
Moc ha-Fl exi
bletesti
ngwithr i
chreport
ing.
Chai-Extendsasserti
onsfortestexpre
ssivenes
s.
Sel
enium-Automatesbrowseracti onsfortest
ing.
Debugge rTool s-I dent
ifiescodeissuesinreal
-ti
me.
Uni
tTe sting-Testsi ndiv
idualcompone ntsf
orrel
iabi
l
it
y.
I
ntegrationTe s ting-Ensuresmodul eswor
kt o
ge t
hers
eam-
l
ess
ly
1
0 @Ane
ela
kir
an

To
olTi
me

DevToolsa
nd
Extens
ions
Ut
il
i
sebro
wserDev
Tool
sande
x t
ensi
onsl
i
keReact
De
velo
perTo
olst
oenhanc
eyourco
dingeffici
enc
y.
Br
ows erDev Tools-I nspect
sa ndde bugsHT ML/CS S
/JS.
ReactDe velope rTool s-Vi s
uali
sesRe actcompo nenthi
erar
chi
ReduxDe v
Tool s-Tracksandedi tsRe duxstat
e.
Li
ght house-Audi t
sperf
o r
ma nce,
ac c
e ssi
bi
li
ty,a
ndmo re.
Webhi nt-Provi
deshi
ntsfo
rwe bsi
teo pt
imizat
ion.
ChromeEx tens i
onsAPI -Enhancesbrowserf unct
ional
it
y.
Fi
refoxDe ve l
ope rEdi tion-Browsertai l
oredfordevel
opers
.
1
2 @Aneel
aki
ran

T
hat
’
sit
!
+ Fol
low me!
Li
ket
his
!
Shar
eit
!

A
nee
laK
ira
n
F
ull
Sta
ckD
eve
lop
er