Scribd
Upload
231 views

HTML CSS CCBP Notes

Uploaded by

Ramesh K
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
231 views

HTML CSS CCBP Notes

Uploaded by

Ramesh K
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 87
ard W) Gnterace bln gle ule Opecting Syston Terodik t= conrecttn a) boo Churcet- m hire cide ®r we ato netomik that Connects pr ablic tote M@nternst “ny Client? Seve: : Gad eet = = om FRONTEND.- By HyperText Ma» Markup hanguage Ccortent we tee if costen » thn) Ham HeypevText —> Text Containing hinks Cttyper hs ker) ee Oe! harguage = —> -f Communicating wih Systern. Hoahleght ® 1 Rendenng.— Parsing —> Understanding 4 Seporctingou arsimg* Kencleny im in Renclenng th hep G08, the broaoser will Cracks d dnp ay fonts C58. stylrg Foon ‘Shops Seaipt: change tre Cortterty GQ Website ty vetoed tarry Corks Bae ge ce emery ie Anchod App Development: peas Cloudfiont 7 Route S3 Boot 28) React No tne React Is Fiutley . = Breaking door, trrto Swidit jt * Pick cne sman fort * Coite the code + fest (Pur Output « + HR, ge the mt port Ord rqPeat Same. Q2RRRRPLRALLDDPDDDDD AD A—teten nn nm Scanned with CamScanner HTML Element Element K Dhiwductin to C99). Cascndhrg StyteS heott fins Cate cre is — ‘3 <|bocky? VA cas file com be created 1S a \st atherey Of Rutedcts Pt looks key Syp'- Berccton Ruleset: Property: Value! ; Property 2: Yotuers 4 Bieta —Name : first deeide A suitable came Br Select® Ex:- h-certer —» Prejoned ocabiiala Canter Foanonat center C95 Rutaset To Center Haran, Hom zontalCerter “Syn —y Cerebinirg #riNt 4.Cas # Class AtMbude + Scanned with CamScanner Attabute ee Stag atiibute~ value "> Content teYY Or ew / Cl, Syptae FAME op omy conan End taq atmibute heh te on pour DP wherever ups cours to gp

ct Storied <|bton> Scanned with (amScanner 3) Text Alia? We sre css text-align property speciyes the hewaantes elenn HTML clarrent 4g eu a eh center f 4ext—align ! Center ; j 4! Roctype here!» ~bodyy dw Class ="h_ center> Sompe poe

plan Your tp wohmere, eaart to go< [p> | tbuttony Get Started <|buttan> <|dw> 4 ; a gp? ewerigih niiclagate nae ae a Ald ia _aldw? ~ Adter aching HTL £ ccs Scanned with CamScanner Css— BackgroundColor: . cond { | backywund — Coté) rhtghthies, ; i J is Cheat Sheet [thtscrlection tO Css [part ad Css Text Poperteg I Color: Specipy Cola text —3 Ces Backquind Paperhos Specities the backqrurd Coté g Hintet &- — zbady> Ldw class="cax!'> 4h1 class -"nain-haadirg'> Toms Cth! Zp ctass = "paragraph" >plon your Mp theern tp want py aldv> | tenet. decBation! orcerlines Ne ee ee ee Notei- 1) To Use font forbes, (jou need -b tmp2¥ then Syleshect recat) ant ~ family) spibere shanichy be ony SFEtting Pershate in Yeatuey of Fort Foamy 4 ae Scanned with CamScanner Cnt Size) 9) ypu must ad Px aPter the Number in tre Yoke qy -fint S122. Prepay, 5 shourdn'y be any space Un number ancl py. 3) Froutdny be any Quoratory Aroud te Value q fpnk~ S20 Gfonk Style) + aheurdin4s be spelling rvslake Wn Yotuer oy font-style * chouidn': he ary quotataw. Cot eight) > No spelling mnisrakes 3 No quotationg vequied _s Numerical values rust be Frorn (000 900 Ard reuttiplke g lop Cendxaatin) ) NO pening nvsiaker. D No groans 3) Freue text-cecacde ard linethcugh ove hyphenated! ae CSS Bar Model: Sexy clement in 0 HIML cai tate bar 3) Box pwopesher- Foch rectarqutar box hor AHH prperhes. » Height of cat Gee + bord = padding - Margin 3} + Boiler \ t . padding { Height (ae Towa jonny | Gersioviedl | D VAddiry Bacrgous Image cay ar bockqrud ~\rnoge: ust C"IMace ore"); [Feent-coml> Gag nae a cheke vachy SN OW eee ew wee vou aur ee] Scanned with CamScanner wh> if sovh= 50%. a Vhs an ced Stace t-Same like Vh (prev my): - ) Pockgreuind trrage “Fy Crepe) howrontal [vertices Sauling van Button. => Pektirg height’ axl V3e pe aa (cores some = Pde backgwend ad& to ths Button [Gu stared [> Pee cta => SESS eet ise) | Grongfe—> carlo picker) C7 prc a cd& using herrcade) , Then seed cre hexco ae CH25b ICC ;) = BIG CoB 4p_button tert) teertthf nf CAB: whites => Hew t0_ get tourded Bina -foy_bution:- ao aa [Pn tole ~wotange Bérder :- Por rocket becler setated properties + border tadhug > [Bet storied] Pacer radig ART mes Seca rane taney border style :doityg 3 u—»« ‘boeder- style (Gesete) toc stoclice, 95 pes pSrler ~ cold) borcley~coter: 7 geg—— * Boaclor_coidtii- (Get started) —> bordler-contth :Opx: Coomecs borclad ; > hence Cothh: 2p; How tt _get Rourcle! CAine§ fox Card:- Tour) cre plan your trip Tour's™ peneerey @et tered Get started: Scanned with CamScanner border —tep-lett -sadiug 5px {perder —top - wight- yodicn: 5px, bosder- bottom lett tadiug ‘APE boxer bottom aghtvadlius: Dbpr, UUUU oe road {ic tap-lqt- Tedus:o5pr at least oe dy “ee co © Borde, soe Boe pare eet ee. Spacing Ghsice the Card: “usisr pion yan tips | —> 0 spoce Freie raved Ile BX Lpeocred Pas 7 axe Get Spacing Grund elernerts Content By~ usin acting css Rox mode! pacting property. Cte dregram in cx ae cfs packing) le After apply packirg +0 card: — Scanned with CamScanner - Ontoduckn to Css Box Model | part 2 cas Gox Properties ») Border width Coaicltn ¢- bor yy + button { agate ope; det att four sides) 3) Border Radius Cxbundney tomers) yp «button { border-radtus : 0px, _ j 3) Border COl0¥ ¢ coir 4 border or al tur sites) ex button { ad Donel -cotor:or0r9e, ¥ < EL ¢ 4) Borcbr Sty cstyle q burder art fawn sic) én ei asus doe ee ae m Jy 5) Packing cspace around cont) Scanned with CamScanner codth:)38pr; beadlor-coidtio: Opx; bender radius: lop. 3 heght : 2Gpx; ‘ adth: 1sypx; Dorlex. cotalth Ops Fadler actus: ops 3 sbutton—green ‘ hhoen quand Colo, AhRecGit! “Scanned with CamScanner Prxidirg Mmuttipie Names to the Class Attibute Yolue Abutton ciass."[batton button greed’ [button -qsean{ Get started hackground- col: FF 8CcBBE » pity) luton 3 J * chemton class [Bunn buttn-crange)> -., / » button — orange { | vist Now pos bactgpoxind- Cold tt £39 31€; is 3 dlbutony = | erm '3)hirat 1s Boot Strap2 | Bookshop t5 a koneoron G Predopined! Geusable Code Shipper coritten (ny HTML,css ond Savasoupt @x.- Buttars, conch etc. hiby Bootstap? + Cdeatec! by Tewitier. } + Cumently used by “ooitter, Linteed IN, spotrty , Coley. . + Be than 2orwiien Coops purtt UsiTA Bootstop 1) achp. | 3)How to use Bootstayo? 0 use CedleSnippaty protded by Boot stop, 622 Mesd to act Q prae F Arve wrmin tre head element ie can them Pevtsticpcpny Bexistiap Class Nome Ge Frode Yrou, poeceyney class narray_cabich can Ke PA Cb Athihae tet to add styling cur cobsites pa eae sete eye 9 SPN ttle byete eayoures alet Cardo alent hed geno, » Bookshop pods dife type catch donit_hove_O background cole 3) By dejautt . Bootsap Clanname btn has No backgrurd cold « — Text color - [fare | — “Tourtsr “Tourism Te Teer) a, Your Tap [PLAN your a Leen your tap —» Bockgaurd Clou:- Pootstap powda tony pedir Olergg Nmap. Smee oy ther ave > Card + by-danger * Cowusel * cert + cand- booly. - * alert - 2xceo * alert - link 4S0Ipt C=" https: Code, jquey- Com] Jee — 35 _ astiipt sic ee «Jecdetive- net [npm- -- > asc S1C= “hips: /) Slackpath: beotihap: > alheod 7 chy cteuns'bg- Waning ext carters chy clan "text -pamany® >To tha - Zp cle» _Nfoyt—IeecciCase”’> PLAN YOUR TRIR <|P7 bastion cas bin bin prinoe/'> Get storkect Flink vele'Styfeohect” hrep - hips: n'Stackpat.bootshap. > | Scanned with CamScanner Tourism Plen cour tip el |_ [et ser — ] ¢ > Button 1) Bootshap class nome btn 1S used -to Style “Ke HIM button clo ¢ bee Of bentery- crag then be Ourtlire Tap WaAAALAARARAAAAALASAS SAS ID D9 Thtreducton to BootStap- Rut 2 lihat we ore Qding to achieve 6, Bockgaurd Gntairer Botton @ the badkqrourd — > container stucture tro 4 C ( A fosput ts a pattern by which we Stucke sre Sypireriay * fw put ' cE te website: Fone" anc Qeeange te _clercerts 6c:- Youtube Layout Miettocls fo Clsiqn a Layout Wreenly, there Gre 100 methadts that help to claign the layout q tte contenge + fierbor CStable) id. ; eee 4 fost qexangtur rot stable. fiexbox:- TF i a layout meinod thot help, to arrange the HTML etarends § eg Chéiaoniaty) A Colurong (verbally) - Propertier of fiexbor’- flexbox Container Prec? Tusthy orem Align Hers Plign Sh yerep Onder Anan Content many mae: Scanned with CamScanner flextox Container Bape jlesbor Containe 4A the Cemtaines ce.) Fl the HTML elements that are inside ftenbor Cortares Cve cote ene Flex. Mrrecion:- Speciptes the cheactoy 1 Which the yer items shaud be anand witrin Gn heire.| Garten) Weynes the alignrrent q Flex itm along the per drei. + ek For fie direction 1) 1004 Movng Cord! tp bottom Steps: 1) Deyring bookqrund Contain ag fier Container . 2) SpeCHY the hecho In which be rove the Card: Ye the awd to the. Bottom gh Cnainey . Fiexbox class nomes Gootstrap Provide, reusable Clasrromet dt he! to Cb Logout using flahor. © oes kb Scanned with CamScanner SILLA PD DP PDP) DP MDMA a am Steph Naw cae are applying At the three Stops. fe Class rome 40] @x:- . wt Sr. jrabes contalrer dw ctass ="bg-contaner [hsstify- content — end} ' U To roe Lanse end 2d criss = “tou S10 ~ Card" Her Zhi class = "main heading" > Touwsre 4)hi7 &P Class ="paragraph"y Plan your tip: 4|pz button Class<"button> Get started ey fovcunte Places Section: a ee rongin éx- Stabe Website “Tourism — layout be J Fal ah forcurite Places = Wd a] iG? Brealing econ inte Srna Porta Scanned with CamScanner Heading a Favourite plan \ Jb [FRamahe! = | ent ee sf | o|| “| deren i i 2) Bi a | — i {ey | Betien Tent | Lo Beguund «| | Mm ; | ) Petting bookgound Qntainer'- + fovounte places - by. Conairery’ : [ | Vn bowirgourd trvoge: unt") 4 hergrt :jeovh', / foospond-czcicover; 1) Pad a fovourte places Seaton rg’ fowounte-praaes— heading { Addn Chass = "Revouve- places .by-canie!> Cola tohite} < -font-sire: 28 pu, 2h clos .“f. place headra"s— ple or ee Age Rani form Bobet: fevour'te place

  • (ee Sag ote; ” Bs a) cord Cmbiven jojMobol p— ° fe. De CL) J aeons “fawounrte place Cord-Coniainer ( toengound color vohite: cn veoh: Rpr; 1) Adding faxcunte poce card “Fert Conaune geen sforcunt- place. card-heaclig { Coit, trofoe 46), fini familys’ Roboto fink — Weights Bo 4 fori - sr: 23pr+ Scanned with CamScanner DD D> bh dP Db Dh 8b ee mh ee ee ee SEA ae " W) Add Card descupttan: » fronts Foe cond clescuptonf , font —fornily: Robote! ' font -si2e > 13px:, ' COLA: ++ Ecéb70', W) Add Padding +o be Card’, : -floe cond-Caranesf ' “Taj Mora bocksrourd.cold “uke: ' gy tee bow baer radius: ape, 3 r Wi) Poa Grrage to the Card: ' Hoc 4p ack Fnage In HTML eternent | THU Ymage Cirrage ottate diplay cheyal ar) i + Ces Radeqaund aot Chaceqecsd Frey: Be wh Iruc eens oc rok . i Void Clements :- the HTHL elements that ony hole O Start ta | Lond be ret Contain Content 8d bag ae ited Void Elements. | Ataq /> | stot Fag Narnal ¥e Void Ptements | Normal Elernent- Vold Clement < +097 Content : King oc=“hetpsilt--- />] 4 Idiv7 yin) Padding height 2 wrdth to the image: ichng mureple attributes fo te HTML Elavent provickrg rrureple atitep athibutes Value” attitute2 “Valuer “Sg roptbied a Noaiasy Gee NSEe attibate — Otpibute athbute — attnbute Start tog Kieng Sc <"THace ont’ (Clare -”fovounte_place- cord -imge'l) > 5 HTML «favour te- place - Card mages yorctth : Sopx; a height : loopr ; WeAtigning elements side by ade. Cord Text Conjoiner— lept aligred Sroge— right algned- ge? Fiesbox ctas ravi hare te 4 sep. Hoke Cbd Contain of * ERCHY the dae s Scanned with CamScanner NORE Text foe Per Conicney | OMMAY. BAA Dr DR MR hh Br. Lay class = "Ravoum te- place-card-Coniainer [dtflex flor wo) "> MN vechen adwy Zhi ctass-"favounte ~ pla ae- card - headings Toy’Mahal Wp there cows Jurt are ae aldiv? / J 28mg Sic-aunae ve" claus -"fovcune- place - card-imagey 4ldw7 Fovoun'te Plocer Ta} Maha! Tae A olp 9Hbw to add muttile Cardi inside Bockgound- Container ? Zdw class= “fovoum te - Places —bay-Comenner ¢hi class = "favour te~ Places headhing” > favaunte places fry rete!) sly _

    ob «div? ging Suc-"fImnce ved” crass ="fowcurste- place cawd- innage"/> ald peo tp get Spacing betioonyeete we discussed Ssed Qhout ose a Pmperbesjeoe ceceiraodt Car er: conte change cheyal "ved kis t Boe, Pactra: lepr; a Rermai ning Pome CON be Coady Wea) Otte Scanned with CamScanner aS Fr. Bk =A pprach tp cevelep a hayout:- Cian page) fern sclateh Cetebrate | Acting Bootshap to the webpage Adding 4 ines lending BoskSap) Fern 3,|CHecs to Use boctshopchest Feet) wm the haod sect + Backgtand Gmage: Backgund pxpertior Boxeproper ties ° octepourd - innage . hetght vb 8 px) + Borqrard-2° * coldth + bocsqreund- color: Sa Padeting a elie lt . beder J f # Scanned with CamScanner 7 Heading:- Celebrate diwali coh i qyour frends © HTML Saeupt Sie" "> 4 Copy tins foro 45cm Sc=" "> Hote we bootstrap 3-/ KSowpt Sic=* "7 Al head> beder-rodus: padding :19Px; Maxgqin | pry «dicaali- card -Srnage4 heaght Tepe width | F0pry font farmilys Rob « dia card -romef Fort fornily* Robots} Font Sire > (px: ‘Bold HHeiGe3c; j Bacating decor into Rocog i ja L a Aligning card tang In the 6000: Box Prov. Beotshopfierkor Cla rare “ + After + Pler-vocd + Plee—colurn « Justy- coniee-stort q Sahty-conlert- Conier 1 dusty. content —ere Scanned with CamScanner dw ctass-"diaral ~top-sericn'> -4hy ctoss“clantytop- Secten “heodlng''> ' Celehnate Dicoal wn your fronds. ; sth Si | Rs 369 4\p> Se E> Pavte | 4 5 4 4 ‘ 4 Shee \ ; Hicoats hawmp ther ‘ “BP cia diwale eas mele a & K A didiv? 6 =*bin bin prmonj"> vieco mahe <|burteny 6 Ct adhuit button > aeniey gp te Baal betton-secrien in C6 ond Gc! tort -align cents) Scanned with (amScanner ee eee ee Oa aa Batstiap Button Clo Nomes —» Now acd a button Pies 2 bin btn -parnoy 2 btn btn- Secondary . bin bin- Kuces Spin bin-darger a btn bin Waning . btn btn - info: [Mote on Bootstiap Versions:- versions!- Keep tack a Oly Seopaorernants In Q prece gq sh. hg arao = eh — ae | Vee 4S v — v Pray 12,2020 frugé 2010 bec 42 Concepts cont change cnly class Nome 2 Syniase epost Gare time. woe use V45-2 Hho fo use Bootstap 4:52 D 60 > breser ten enter | Getbeotstrap. arn ctocs] 445) 5) © Th becsser gptbeotshap com epi Pate ecg cat +p) © On OP gH Cine Yo ca, coe fBetsiop v5.0 ¥] VAS K CSteck) Code-snl PpCAs C sete PRGA Gop Codon aa, HIML elenent supp ets) Scanned with CamScanner Werarled Via Section, Basar plotot Shia chestorn) hihi hi didi AA AR RR ERR RNR AR RR ee Carousel C géthootslrop, fone cbCuntatahon S ce i ite) s ‘Br yoo) for comet Scanned with CamScanner Hoc toad Corousels ard Youtube videos’. Te ebueu i) Oper brecate, ard tcarch getbootstap-conCunt) on top Ciich documentation) Components nem —> hoth Ondiaatas a a) es head. Seeties 8 in Our Code rv \ ada | change cur sequired Imoqps embed —> fa Creating Youtube Videos. Coopy the Cock £ paste in Spur Code). 1) CcBP_OD KIT Coimior to Bootstrap Creuscbe cocts anppets) ) | > Fxg CCBP UT KH 40 web page. Asap type - text |[jovascupt” cae=" hitpe']l dL gh8 frolzexmh: cloutlhort .ret | echp- Static - extsite/ ' 48} cebp-ui-kit. js'y | 4 \body7 nett beyta/ Sectten above 7 Piri Ubltby:- Reusable) cade sryipér “to cleplayiA hide Sten Conkaunes bol cp they achary: “Tha Seonon a (Got Seat 120) Te seth 20 f > e Coins eercn aL ner i Sacto «x (ms rob be Copual'S') BV Section AB X( ho Spates ) Scanned with CamScanner PwuarawwD> >. 5. 5» £ ik eee FPrr eter eenPOUURETeretsURTaESTEOMUEeTSt Tete tists itso Steps tv Dnteqrate first two factory. ) Change ia's of Sectiar Contamerg Opproprately. 2) Add HTML Cade > Hormeseonm Are Comesperdhing Css styles 3) Add HTML Cocke g favourite Places Seana ard Conerpmdlirg ces syle 4 Od crenck QttltHe the Beton In tho Horne beotron ) chong tng. its a idl = [Backend £div id - Bectin Herre) | ce | p 5 |

  • SN ETESOSD | > cha foes, — éIdiv> | es div \d-[Secnany> | | : x she 4 l 4k | oar So | 2 Ach ide" acctinHorne's [2c class ~ es ; Cines a Plex “Plex Coury ‘spy ce Content-. =) Aldivy ‘lay 3 “dw ne eae ae Za ic 2" eon VajMahal QateiletViees' gidwr Scanned with CamScanner 3) Achy id-"Sateckon favourite Racee”s al class="“fayourste~ places - by-Comtainot > PS na Abution, clos button” bel = display ( ‘secnarfovcunttefacel’)> | Gc started F : 4lbetrooy aldiv? ZA he cecnorfawouit Places >.< ldv> Adiy id ="sccxan Toy Maha Dejoitedd Vitec"... lew > <1dy Hea "© gp back ty Horne scan -Fom favourite Places 1) Rc button in Kavounte Paces Becton ) < batten class = "bin btn-chak's binok Abutiord| PAA onctck Atitede to buten button class= te fan-daak encnice="clspay C SecnciHMeon! x a J Scanned with CamScanner MPDMDP POP PP PPD AMMAAAAAA AAA AAA MA MM DD Prspay Oetailed Vie Sector S ) Adkd detarled View Sect an Ip SectinCortoiner - » Pcl Conespanting styles io Cas file 3) PAA amciicr attitude fo Tay Mahal carcl in farourte places sectsan. “Detatlacl Vrew | [ ASK | Tw ou: Taj Mahe! meer] : \ acy Class = “fevounte—ptece — cord - Container | yacono Oe wa d-rlec’ enctick display C Sacna> lajMatalf ota Veees) p dw Website DPntegroha — Reo Adkling reuttple 4 $ Wclexelliy Lst~ Style Comusels Cae ebpe Scanned with CamScanner > Grolter lermpte Detailed Viecs (Somme ike “Taj chal) Raeeleen Tape gece apne PY Tey raatal $ Lovts> Jed Water Vauler “ww 4dw id Forme! EroreptTichicating] Ctors ="Camuuel Stice! data—rid -"“carousel'y ald Roce @itt change ict as Cspeci fying Unique id) «dw id -YoidarTerrpeCancuel) claxs-'Corwsa st co" dedaride e'exr0Wel"s, Zol Caw ="carowel-indkcctors’> ali data. targe = h gpidan femple Cenc" | AN dbte-seaqet- “2 qpida‘TernpleCowuse)” 1 $0 chao target - “pslemeee bhai" “ F go KasTemple Caro tire! | | he} 2 "| goles ample Corcenell HTML Lists: uy List! Way to grup slated piece J PAmano, SO hat they are CASY 10 Yad and unrcerstorey. Onordbered litt Ordered | gy wy daere « (Lrst Hem bo Ute bens © Ut tem 2 Ust Hem | + lt steam 3 Use deen Scanned with CamScanner -—- 42uly Gl zu Crass cerca “Viens - ayo- LM List Herm L[ti> Shir ATottiarwdcta Bagh dis bie i. bere 4) bey, ANT Rothinde fort <\yi> | sundexitaty Tor titeel OL | Pot-tde tiptoe djuly 4hiy Horike wetlard (us | 3 i spur Unddered ist Cus) Ordered Ust Cor) Llebsite- Behind the Scenes: (1m ecbp atte publish wh PRR EEE EN EseR seo Se | | list -Sty\e type: Square | Ust-shyle_type: upperalpha A list-style type: dise © | tst-style type: lecer-alpha list —shyle-type: Mone tist-style- type: leaer- woman i; BP Address: fee lapse AWS > ee Dnteinet:- Tniermet is a ae obal_neboak q bittins q computes 2 levees « Hoe4o Sdemhyy each Clence connected to Gnteinct!? OP Aodrees ap Prchess:- A Unique actress GD +o each dence to tre Anternet jroe hoips 45 eaniOFer Domain: - Te Fea fo a eg deen ww) Amaren (9 Danan, Sub corain Tare a Scanned with CamScanner a “Nore | Nurnkoy | Name OP Pdiceg John 8540622589 | pntony | euesei23us jive facebeck cr $9 15H A be | J WH. qegle-dan | 191 1216-2 | Domain Nome Systen CONS- phonebook g Anteret - 2M Lrarstates cernain mame to DP addresses 0 brocssers CON load internet vesourCceg - > Amazon Rarte 53;- highy availabe g Scalable Cloud DNS webseryic Behind +he scenes Website Prnyarkami+ cClp tech eS \ 13. 29.43.65 5 Rate aL 53 Client sewer Storage 13-249.43.69 : ont, — oe Oo Cor om —<$<— Ee wns Simate Stage Sener C83):. >» When 6e Click ay Publish button, the Wodsite ge Updoted 19 the StBage, Qutematicaiy - > Bveryae hos theiv rb tent e Tee fF ek ae ee Recop Hime Elements + Heading= ht » Peeogrtticed + Button — button + Container — div . Grrage — img ° Sic athibute Pttaibutes * Class — Combining HiMt & ese pd identiy us enol = hat ern Text Ropatier * Color Ctert cain’) » fomt-si2e@ cis px + font-family © Pobe « fort — waght ( wid . tert - aliqn Bootstiap (oyouts) Ficebox Clare Names + d-fles * Pler-w00o + Flesc-column + justiyy—content Start « Sustipy-cantemt— center 2 yushyy-Content - end Cwhrpy ~ Content ~ bes: 1D) e HTML Usts © Unosdered List — UL © Ordered ist — OL © st Ttem — Li Background Ropertex + backqpound - Cold) + backyourd—iwnage ( f + background - srae css Bose Poparties + eight (! « bender -rodius Feit ebacer-tap-epveki + rrangin (of) che tep-gN-rod + Padi (Ke) oben hetton top . beder 0 bactes bottom ited 3 badarode [—) © bada-cocth [=] Reusabiiity, Components & Uttittes Bootstrap: ceaereemne © Buttons = c utility - + Crouse! (\ Display | Scanned with CamScanner IML Hyper Links:- | Rut ? at set atibute: MTree 4 | HTML Aecka Elemed 4 c [ toarget n HTMt has Llarant HTML elernants bee ii tho “ as Hyperlinks Sed S Jang tm } : HIME vid Elemass ° br Drroge as Hyperlinks hhh < Hypetinks . Used! to Rawigate to Other Webweccuce O40 A. Specie eterna Ss Congo’ wrth the HTMC docurrent » 5 Aso coted Links” Hees to add) Hyperlink in HTML? Wikipedia Sa . Ancha Element Stat taq ede © 5a. bre} = "https: Lecunings entheqomeclet com] "> [ecepa.c CcBP 0 élar — Hee fe Make o wtink cpa iw reco teh? Target Ati bite: Specizer share 40 Open linked Web vesource Opering Link Ip a Neco ~fab sa, bey" heaps: tearing aneqornctt. cay flange =" honk ecpp 4-0 EQ Aeb OF Op en “Jor _ V/A EIEPPS PD DP DP AAiaiAiaHiwawAAwAa ke ke Scanned with CamScanner locunnent* — USING Hperirks fo Nowigale vitin tome HTML oe wr ee we te ew ww * Nowigate Within the same HIML document: | @) Provide the id gy the Seaton Where you Kant | “to Link +o tho hee atti bute. Acoart i fr td or Re Io FF Seaieita"} cecnien cla J ee ress Lets ada a Unk to Navigate -forn People Sectcn +e Bo Sexton (tame ie. HTML ess 0 | ] -peptes | Podding: 20p3 ; tert —align : Canter; Docegourd com At freee? > 4ldiv> «diy Class. “aczarcs">
  • | pt <2 | zis a 4 cheagrgt “font Sne:24 pay see i iinenerrap I 1) Priding id 40 he bio cacnan. 2) AANA hyperlink im the Pople section 2 providing br OFC OS heey Attitbutevalue . ~ 3») | 4d ClO ss=profile'> | Aldw> (adv Close-" awards, ia | " | activ aiass - “bro " bio sechen p Alb? — Scanned with CamScanner a « Adw class="papite’> Bee Soceacn > Bio z Adiy clas bio” id -" bioseeni > <\div? How +o ure HTML ® page asa link? Ka Prep =" Hepa: 1 fain: Terhegoredet Poe > Fmoage Uri" |b —> feo most Convrenty Used HTML Void Flerents =e :
    Select - 1 put Siihen Cuptend) AV yg, atick (y ‘ard Fe eyo eens. After geting ost add in Scanned with CamScanner r > fe Developing Static wWebsHeg ay Your Computer Mstatl Vrouat Stuctio Code Rie > openteider > Static website > Select-foider Siarcwebsite >gightchck oer | v | | ni blue; Vv ’bocky7 a ny "y tt tours: “4 anck | Pca: fesdey> Need file Tourism hz V Htouniom. css) Al book? —— J} tht Save au for Raving Right chick an toursm -htm! Y Cod Due Nao Copy Path Cshpt+Att +c) 4 Cpen breaser and Copy path hank Ltement +- for Combng HTML £¢s5 Code. Kunk vet ee es ewe ees | OS Scanned with CamScanner Dirediictin + to R sive [Wleb Design ; | | Muttiple Colurrr layouts ye Column, RUD 1§ on Opprach to make hood pagar pe brxf (er Crpetorce 7 QW clnces Croble,Tablet, skip.) Responsive Inleb Detign:. Hoa to burt Respontive Heb Design? Baststap Grid fystem. Grid System: Colcction Reusable cade Srippet to create Résporsie layoum Derae | DencesizeCta/ctt) |ctaurm five Responsweliers: To make websier yep, Bootshap Cateqow? dencer int 5 Responsive Trev . Exnasman | 2536 px Sra ences! 72536 ps leu-on. medium | > £dhy class ="coi-12"> @irp Your Content inerce tho grid!
    Alay > sldv7 key Take away + Responsive Keb @es'qQn + Pootshap Grid system Bei erect “Tews © Contamer ° Fou —* — @ Column * 12 Column Ejeter. mobile eae ‘abier pee =] each t = af = 4d class Containes"y eit Zh Coy = ee for large ct "G5) Cor Ig-8)>- ~ Stchv? ioe) Zachos = eol-11 © Col-tg 4". ~.
    Mobile first Approosh:— Beotateap Foilacot Hrs pobsle fiat Key Takeaway: - ' > Rerign larpur 4a irpbier. | > PAloptel by corer Not larger Column W) Png when phen = place rrBehan 1 aie nh hayour at lfferent bey | Classnarne In combincaan levic as | Be SIMAle WD/$he eeha ca) rep Scanned with CamScanner f 4 ( 4 ‘ « « ‘ « « « S 4 § 1S 5 S S \ © Boek stuap, Gil Bryson — rast. Bootsvap “Sad 086 (Box teoistgg , stern Fromple propertias utiiter im — aa —— \—— aay —- 7 Bootstrap color Margin langin palette Vawiarrs Background’ Color bets buida bootstiap color palette Bootstap coat cate SS a Bootstiap Resprene Brestpoints [Bo Srran 2 Srna Dertces) [Masur oe | [ps0 large coices] Boeistap Baeqeaurcl coor uslity Class Name ine wn el re es - Gra) ao Pelecsnng (Woo) Oe a ) | large Bevices wp Extra arg Seno Ho th Lead ba- dork Fue} yer | se) b Scanned with CamScanner Ee. ee a = : 1 fo _patette head 4b1 Class -‘cote.-palete-haadieg’> ea a | fant S120: oupx; BeotStrap Cole) Ratete | text-align: conte; Alhi7 ofont Height : bold, Adiv ctose . "Container" > | Adv Class = "3000" > 6 oiste de cas aa ass ~ 1651-1" | aia * | 3 | Adi ctass "bq pinay Cota fot 7 | | ; ¢ *cola -narnef ot, | AP Clase "a1&-neme’y Parnayy

    | cold: name, P| | Rt -Sr20: HP x, 4 Zidw7 | | ee L_ 3 eae aly? Flihy thee a spnce cn te lat A Right Aidat2n boetop, gacing o = ght Sides gq “te bares by Clefaurt- => Hod +o have Spacing after cach Beotshop Grd Column 9 8y using Margin Margin Vawants! TO get fpoce a> farticular wwe “margin-top + magn =p SP . + Margin - aight + Margin bot + Margin- loft > Acting trargn Bottom - " - “lass Veer Class - Col-19 © spacng ; “Guta sppaing f ) margin. ; Bootstiop Utiitia By Spacing j Se Maran —— enengincien | ye aa, | > talYe 09" Of Oy Margin aght | mr Mmargn—bettom | mb —* lest mist Mon an—ley Scanned with CamScanner a a Margin vatuas. sxe | value Spacer ts a variable any by Ohjours ° 0:95 ¥ Spacer H has value gq 16 piel, P ° ! 9 0:5 % Spacer er mb-3 = [#K Iepx “6px 3 | 41 Spacer 4 DI mM-5 =3 4 I6px-Hepx 1.0% Spacer | 3 Spacer Nooo @e can chide pov (otuen Spoor y - ee and -her) ack (mb- 3) Bi geting 2 7 aE dw ctass ='ot—-12] |co1 -md-, -dg - Hopes 2 div Adwctiow = “Wot-19 }|Col-md-6 --4Idivy 4dw class = "Got -13 | {Col md 6 ~- v for abile devi cat 4Idiv> Aldi Key Tate aay -|:— kev Taleo cnany - 2:- * Detelepy louyast p + Boothap uttlihes 5 Refporenve Graaken, © Bockqourel Golors + C88 Ebr popertior * Say 2 Magn Yovarte: i Scanned with CamScanner = Bost Ertrap Nav-tar: Bootstrop ure | css Bor \. corps | flr | “Pept > ¥ Nav ba Bleck-leve! Margin, vie) Elements auprey Nav 7 : bor PS Harbinger Ieon = cH oO navbar 1 cur website Gboottap. com Rocumnentatian (tq) dong Newbaw CSaondoan ) é Veupu can cot be Nasbat, Home; Abcutine f 1st bowed apprcach) Copy the Cade Joh aie i | ‘ f Mn large, doviess « Paste in broly beck = Aching lego ard stybrg par Class ="Nowbos Mavben-erpard-md Noybar—light —by-whife" > 4q cass -"Mavkar- brand! hep 231" 7| Navbay mS =" Grrage Ut claw "enka reghy a) Lago fing in teplace tons aldiv7 Pr Bc Bliqnina Fekbor Aovber-rav —— puvbay coligyué th: dopa; ee ORGY ar ; PY heat hs Ss i \) Pedtirg ; Spr « axbrt iad high Fovhar-nav coniare she xght q Novbor-cotopso rain v GI fe Homie _ About a Tetkmoniol Fe ie navbar Cle *. nav ii magn i ia Arbowmne — Prayees Tertirnicu 3 [ E* ] bupdive§ — (occupies Fur egies ina * Block level= ~ Ahne eel (2) img, button, Ard® Cas much aidth ay neceticuy) pan we cont align Bleck level elements using “his prcperty margin: we can cwigr Bote tere drments h8iaoniaty using margn Prperty = Pporl from \atues (pre eb) Halse Accepts Quito feyco8d ad Value. maagn—aght auto » m-auto ¢ mt_auto «mr -auto Chong O77 background Cola to norte oe el a ONseyfTakeoways _ Bmx ee i Hf Be © Adding links rare Properter + king lap © Margo Repay vtue o Adding New items ty m TaNgin: autos Q'9 ~lep+ sucka; e Changing, Navbay * margin —right: aut: backqound coi6, ” oo Otlares + Margin Quit , OY: at UE Cantheamner to => JCB Beloctty soma. nhenitance:- Type Selectors 9D Setectors Class Selectors Shhevtance wa Tl sila CSS Selectors | Most fundamental Concepts gd css Selectors Gre Used 40 Select the HTML elements which we want to Style. > Different types o Selectors: ba © Sirnpte Setectors © Claas Selector 0 PD setector Vets feam Ware 3 now 4 leter in, rest © Type Ctag mame) Serectd) © Unwersal Selects) : © Attibte Getect3) © Pseuclo- class * Compound! selectors 2 Complex Selectoys ofc. Clase Setectd\!-)) Soiccts ay He HTML elena! “thor hare QW Clasp rom G) QS the Class attibule Value. sclasromé f YCcorsrsts g ot C+ Moltocord by ais rom. Pepertyl vate; a a Soe cy epee pa eered Cot pare oy Setectt ) Se1eds on HIMe Genent basa (at) td attibite value, xi ee i) ccreists g hash CAE) plied ty ia atideame } te dlement.. — oy dk Pere vole Note: There Should be only ane Hr perky 2: vale; 7 5 gemtiome gen dey (3 “Type Ctag name) Selecta: Selectt ai the +AU a —— Shermans Wi tHe Coe erent pele tagname { “hes 4109) rome Chy, P, diyere’, SY: Vatu: Preity » Yotuer, a a Scanned with CamScanner nnannnnnnnnn ADNNANDAAANRA SE AMA A Mm aM n — fundamentals of ca. GN 06S, the Stiytes that are appled tp HTML etermorsts cleperd cp sibree ~fundarnental Concepts: + @nhewttance ant at 3 ae . pectficity Con + Cascade. Y Ohherttance:- Sarre ge Cas properly Valuer ss 1 te Parent elements axe Beceved C Inhented ) buy thor chitd eternertr. Pavert | Cente] | oa i [sd onsen: crtn and “hy About Sroka | Ca a | *Courky-Contarner { P Feputaticn oy ratio. b> Ly 4 Cas: Hue ; ctert — alan: center, Sect ee. biden cord SF - | Avot Gndi Fopulotion g Sean peer G z CSS Pepe Ce “20 styper » Ohare ‘Color 26 States in Tid. 4G Prperticn Be on cps ~ Add, i Poding Styler Using 7; Ahir Heading!) cts ny ba Ctag Name) getecsa , IT Any Heocling 2 ¢thy> ae alhi7 Hesckng 5 “thi Sanned ‘with CamScanner SD Vidting styler using class Salect® nn & et © < by Headings a, a _ | heading { hi? Heading «thi Cols! biue ; hy closs-"headirg"yHeadng 3 thi) Bnt_loeight bow; ; 4hy Claas =" heacling"> Heading +4thi7 | Ms 4) sy . J . ‘ ah, class. "heading’> Headiegs 4Ihry J - hig oP Heading! \ ‘ iat pronty to cheading Coe Heading? [ees ematon ard wen wrradri Heacieg3 jessie Shyer Wie bok S982 Heading # fig vd UR toro ty NRG Headings | oe tn hy wrt be appliad for Heading 3,4 45 CAs we speetred chy Claw = heddi* >’ , at benno be tte sce priority’) cl 8 Type: Setecty 3 > vilding Styles using TD Satecto. ‘ Be Specific (unique) s Ahr Hering) 4Uh7 Ali Cunique < Lh Heading 2 ee steheadng® { é 4hy ass =" heading’? Heaotra 2 phi? Cola: qrea; 5 ghy cbsss « heading’ Heacin 4 «thi? tere wpe, 4h caass-"haneing [fd =Theoolg > Heng 4h > fos spo Howe, Shine shes, an 5 ; | gp! Weeding! ; 7 > Pppied directo HTML | Head ege. id : erent. \ Heading 3. | pple ny 8 oye Headings | HTML clement thegour ‘ Tray use tho Style ontibure (Peseing’5| toe i orth C98 preporty yates ceyned i colin ) ‘ el edge eee aA Ne Peeve, | ' ‘ Arm bute Atmbute Vatue name A 1 Style aitbute Consisk a, Te & mae oss e J fake » Scanned with CamScanner - ah Heading élhiy of hy Heading 2 4lhi> | Heading! } , hy ciass.“headkrg’> Head ng 3 Heading? | , ahi class= "haading">Headng 4 Llh> Heackeg3 Pchyckesthantrg ichendirg> | Headngs | B she backyen iB: Ore; aL ; oh pee pecr fic t Styles appred using inline Styles cai 5 a mere Sersce> overste ory afer Soyer Spend TGrinesyiee| |g, } ang. Selectors Ap Sees) 1 > how Hibest Speoperty- Clase Setect) | “Type Setactd) | | Locoose (sing dhline Styles me Deerg Shire Styles 1S Tot Yecommended because . Inline style ave not _Seusable + JOmHO LITE 1C38_ Separately INoreaees cade seadablity. CSS CaSCade:- ¢1ay spsciy chesron specipy chet fund) browuer ) WWhan tuo ulescs apply that have equal Speci ficrty the Me tot Comet la8t 97 the CSS wnt be ured. bs Pr Lh9 About Fndia gi? GiopBtorce . Caomple: wagon { 5. a > calB green; Ah claus = ‘Stylet > 4 Arnot nde int TNE vatye-I'f Cold: Green; Aout Ardio, 4 A\hy hf oe ; ts Overniding | fnpatant Pape 7 en en

    Scanned with CamScanner BOS et oe = Suilding 7 oe ere | Build your oan | Designing | ae | td Syston | Respansie wabsrte | hayouts iy [eee v v Reataurant Website Navbar Secton = Contarner Fluid (PRE NTEGS Banner sechan ty Nawborr Section: <— [FI -food Munch Copy Code 2 patte IN Your Code frm Bonner Gptbootthops 5 0 And wn Code Charge raybor x id=nov Tern 4 ee 40 Clas -ray-link aciye [custom norte Uhy choose sr ¢simirar Courant) < [pany Steps to Change Nay items * Remove @isabled Nav Hon * COP4- Paste Naw Hom tp add recs Mav iton * Change +h Now Link Gem Poines > bets style Nov tink Texcts croc dork ese 7) coms 3 ei | ote nav Cots stb 323 fu: font —Rarvily: “Robots Scanned with Cam Scanner 6 feat Forney chongs cherytanie: “Custom=nay= tink { font —famity: “Robote’. Honing Apeapicrky Maks y rot Chong) Contaner _________— eres Dobvenyl fay ota css FF 22 3.PU bs oes Dom i{ Remove previwcustern-Tov- ink ond 2¢p!ac© woh movinter — Acting bogo | Smage nd styling Ht Ez, TM ‘Show class-harbar CS Te 1d Newey Light 4a. clas= ‘havbow brand” Inep "tty oS Sim sic ~'Pminer upe Class =-food-mach-toy 4la> <| how nn om 6 Q Ea Heo +0 align Navhar Pom -fo the FELIS) hye on epiinew Reheygney Pap; v oo Whycheoeus? Expléumow Relian?pespat fora.r04 Margin: « ry_outy C25 * ml- auto — ) » Mr-autoC —) HTML 4rar Clatt—rarboy nowbar- &pard—sp Favbarligh bg -tohrte'y ae Class = ‘Collapse Povtor- Cotapse ’ > id. =Pavka NovAtt Hav typ’ > 4h ous ro [as Charging Background cold (use beetshop Clay, rammes) ross Newbar Peaba- Siparet- p <7, rasan bght [le -atvig'> v 2|nov> after Charge ib DD A DL Dh 2 ££ hh be AA A A A A A Scanned with (amScanner > Hoa +o get héusortal space Cound TAYDar CNN ee ahyeheoret) Frpitermare fedmurts leek v -—-— — Ido knen RT rejrut foc BH wohyehoosorvs? Pf foc Munch cond f luge esc (ooleisrte Container :- cBaothop Gud Sten) povidles dajaurt loyt 1 igh _Apacirgx wig fiom smatiey E HIM Clencs -for better user exponerce: ie | 123456 26900, conteiner Hid Contevney Le Scanned with CamScanner Spacing cnoundl Mavbar Eternr i ir YY zhay cies Thovbar rovbor- eypand-lg roskar-ligh b-wh fe!" Ad cious - *foonainel|"> Aldi? <|nav7 gh Banner Section Bann et Secay Boctgrourd Con airet Bannu sect Cordert — Padding Bockqurcl Container = hoa oo oa Aan aa ain yet Zi? ‘barner-sectin -by-cosairer{ in trenton cok) =a hexght = toovh; 3
    Bai on s ohgound— Side : Covers < Ibody 7 — bets add Banner Content inside background) Cortina - + Fdoirg banner Saray Contery Contarner Adv class ='banner- seckn =bg-crdetines"s > Banner Coptet Container
    Aldivy | ty Lets add Ce at Botton G each dad ddw crows =r" Adiy Close -'wo-card P-3. [tb-3]>-.-
    ylgtdiv> ldiv> XM Lets add aM SorHy Choose 3? carck in Mactun 2 Abse Revicer a esq Aber Mie ages Ad ctoee "cot 1g "elas Ad Clase *Col-ta Cold -4}" >. < loyys Adi clay = "cotta Colma} PAI divy ey Pie tp, Shyle a Porticutay in Element Open é gov nye hyalent) | Be O¢ te | seers ies eat Gieege Thive Container woh & rrwly sed Ar Slag est 6 HTML Plernent SSpon7 5O/, OFF <|span? Scanned with CamScanner ee Class. Won ecud—clescupticn'> » oftes f feed Oops # Of fers up to Colee s## 323£4L; i 7 font - Deight: 600 5 espn arbres Sox oe cepa gee nd Eaclursire prone Code’ op an online ficdordou. ot <|p> Key Tokecuayp:- . Developing Louyouts © Why Choose v3? Bookthap Spacing utrlr tes ° Padding * Generic Containere © Span Element * = Budirg, yaw aan Respmavehlebtesqy ~ Expiaye Menu Sechen Bootstop | Beotshap ok Sxplor crows Sraingccadh) — eons ‘Sechoy D Lr dd AVA Aad ald sf) A) Ad AV AY AD AV AV AY AY AD LAY © ‘Shackoos: Lots burid Expi&e Menu Seckay TAD Menu a aoe | ic. ere Vetales aval [Seen \ A a S a Vey stata || Ache Sen tomp Weary ace ) \ Wear atta» < < \f ‘ —— if hence Is wet, feos Won, | & ~ Scanned with CamScanner —» Ext Smon 2 Gray Deuces Crobie fist Pippoach ) Breaker wich to FN | Explore Menu 1 ‘Nan veq Starters Yieod att bets add Expide_tmenu Section st coos egerw Seay ents oto Aldw background - Colt : whites, 3 th Acting Container Roca 4 Coturnn, 4diy clase. expiée trans -Sacton’>
    div Class <"woos!"> 4div class ="co\- 12'> <\div7 Kid Atdiwy aldiey Ny) Adeta Seka Beaching a “menu -Searay- heading ¢ Ady cl0%5~ "Co\-12"> irk formily : "Robots 3 -font—waght > #00} “Rept Grae: 28)9%; cad 1183156; Scanned with CamScanner Lets ada pane em Cord Lee ae Ay OT Opa: Zdw ctasa~ “col- 1a" > | | adw7 Aldi? a Acting Gnage ad Ctase!o\—12"9-_ 4Idiv> + prenu—item- irrage $
    Bader radivs: 6p7 > Ad? 4 6 oT x co ert fereg Src Image UAL ee) Atdev7 | Epiemers 7 ie Od! AY AN IN AD I De ae ee ee ote a = Hop + Fit Irnage 1 the card? U DifFeent done wictins - *7PaNu Hom Images becker. Yeiduus:le pas ence toxin: sa0pe Doncs-oicth: saps Devescorh inope Cee “Units + Percentage :-We cee tte Soe obit ooay Se ei Beratie {> He Pacnt Blercent Loin Prcavtage ma 7 Scanned with CamScanner AAA Ad dA dA AAA PD foe. 2d classe'my.Consainer "> po best — bader-styleisord; ° Bor | 4/Py 3 Err a : ke bide -widt > 3px 5 Bp chad en bast Box ® Ip Vedder cola: blue, 3 Idiv> : + boooe £ backgound- Cold): lightbiue+ -font- Side: 2Opx font Weight. Fo9 + + Specrying width, Paddirg : 20p1; 3 4dw Class =MY-Gmtainer > ith an -PA Ap ss "bor hiodiin-p>]"> Box | <|p> 5p to no os s1ordth -In- percent £ aldv7 ie wick = 50 7.}; | oidth .25% Width 507, ) on Pe dug: uta Vunti charge Ede ei Bow 2 en Biisieas porcine Oveus/| W-25 || widts s 25% Ez ae J Width + 007. = = w-45 rl ¥—-100, 3 Adjusting -tre Wclh Gq “ho nage Adw cose =" 13" 3. giv mex ns parent err Adio a teakomant Aig aac Hmece vet’ " te Cla — menu —1tm-image od /> Aldine 4 / 3 Bootstrap ‘Toons Vv Icons. Qetbootshap. com CScr1 doun ) v moc —ight-shot (>) (click) HaML Copy HTML Ccapy code) ae " 7 } | AQ Class - Prenu-Hem-lint > / { yy | J Sor Atibutes | few Ql P feqteectimtera |< wertel “ [2 | ees | > | - | - Hickzevessd |] [Rete en] —s [Reig ep 4151q> Ala The HIML aq clement 15 HTML INE @emant. Note: an Onli We OQ, a INUSE ft to add Icons tp ou website. Scanned with CamScanner DPPPAPPRANMARANR AAD De + Hoc 40 get Shadow cxund menu item Card ? i. K Wt 4div class - Col-12 > Bootshop Utilities [aw Class "Shadow >| Silo ere | 41mg gre | Shodoc - 3rn 1 | my \ Shadow f } [Atay ra] shod -19 - — 5 Aldivy + het add BorderRadius to Card vmnenu-lem-caid Adw Clase ~"Shadbeo | boder- 4dw class -“Comauner'» Ady ctass vec! 7 «oe db Crass ="Col-I2"> =m x idiv7 Adw class "col 12" 7 am . - < Idiv” 4d ctass -"'col-y2"> i 2dly ctass~'shadoa) menu-iten-aard p-3 |mb- 3} > Ald? kldiv7 4d dasS='Col-I2 > : rmb-3] 7 Zdw class -'shodoc menu -iter-Carcl P-3 Aldiv? " <1dv7 ; aS fen Qdlange Menu item Cardt In edhe Device Creriem chnces OF 3 cock ris sorty Gigicd Gees, mae <1div>
    mm
    4 Idi —> Het amange cords in Karged Extakarge seme sods 39% iurielbalpy anges 4dv class = "zoco! > Adiy closs = "col 12" yeaa Ady 0108s. "Qy_1 Cor-rnd-¢ eot-1g- J" yee Icliv'> Adv class c12 col-md-g Gog 4) tdty> 4 \divy fon @ Cards apply fame Key Takeassoys: ° percep layout © Gupte Wen Secton « Bootshap Zora 2 CIS Units 0 porcetog DMP PPL DD DD DM dr an 2, 2. o Beotstop Obl ance Scanned with CamScanner SOUS E UFO F UFO E Er ET Ww ETE www wT TT ST ee eS | i Buuicing your own Respasive Website Seroinng 3 Seaere [Suns hang Custorres Seth) Daineat COREE” oe ee, ene Baeeprg | ‘Roothhap Boosbap hoyouts flex Utilities Aispay Ctlites ) Gn Exbabman & Stray Wenass Medium Labo Detveny 2 Payrnert Bet fom te pant PD a: \eokX > Ons Dig VISA. (taste cad) eypar 1 Hireedy ¢ode quer In Code play ¢ qro-rd/ chet shast A Detery® payment aud Thaslrgcurkonas Healy fae aecren fo Mobile Appr Scanned with CamScanner > Heatthy food sectin in adtiurn & Absve enact: Ady class. "containers Kdby class -"wnd" > oe rrage 4dw clas s-"Col-1a [come -5) "> lee? poe fr heodig paragraph Adw Class~ dot [ecr-rret 4ldiv7 Aldiv> 4 Idevy — Ratwary 2 Payment gecko in mediums above denicar. Ady class ="Canaier"y or Adw class="oc">) div ctass ="Cot-19 looi-md-5)"> Aldi? Adw class= "col-1a, |Cat-md Delivery 4 Puyrrant- | 26/ olt ayy Ald but heve erg m Sidiv> £ldiv> Lut be in wiolrs & fel cone desran, 80 how to achieve any 4 How to achiere his ? Bootstiap fiex Util tes Qacler class names :- Used to Chorge tre vrsucl Bicker Jy which Items Appear insrde Fler Cordaner fx- ¢ omle-! * Order -2 © Order -3 we can Ure OAY Number iN varge Op 12 tr- Adw clox= “Toy-njainer cz fie" 3 ainq S102" toyrrolet, png’ Clow. “irq Sve| On Aimg Se= * 41mg Sec = a Aldiv7 Scanned with CamScanner sw VV we yew vvuvuvvvu UU Yr Hr HY YY YH HY ~~ Debvery + poyrnent B) ON 09 goy hame- fee ote order—! © cadere md -2 * order—tq-3 ae + vAwangng items bared ay Gilder. Fox rao ae aaa claus ="dontaine!"> hare diy Cloas ="yoru" > Adi class= "Aoi-12. Col-tdl-5 eens "as Ald? Zdiv Cas ="Ool-12 Col-tnd ms Thome Aldv7 £idiv? & “Thanking Customen Becin Erha Sra £ Srraut Devices eialstet Nis eo et fen a gee Pole Ve haw Suprco op jt Scanned with (amScanner Vilabody Code prided! 1 code ploy ~ How Can we achieve “this? Con We aghae Using Beatstop Order Clas names Not Postible with Order Clo» Nomex @l-ted - 7 automa to ue tae hove sexpine cay fn spur 5 Ht possible in anortey voayy Bootstiop prsplay Utiliter. Yee con hice 4 Shoo TiAl elena wapans Sine with MiSplay —Lebrfiles Nee ech, airean Display onlitier Hiding HTML Elemants * we can hide HTML elements using d-* -nme clas names. erchore % Bepresart beakpains (arrait, red, (9, x) ure bicle oe, fm 9 derene CallHtuen © ex: a ol irom) © d-sm-nane ( iroutt oboe on © d-md-nane Crwhiun aboe ¢ hots Consicler thiz worthy an example: y foe a Ap clast~"'bor -neng "> Bose 2 <{py Ka beep =" © "clas ~ “bor oie pene! WIKIPEDIA ” en ae dos "Cl_rnd_nae | d- \q- -yehine!" > WIKIPEDIA Pol Coluimnd crate 73% Aldiv7 ee clue Bren > maget
    “img sre="Uee! cm “honky: Gtomse Sechon-ing >] tb apps, e a AY extra sro devices. (ed lmg add ches! rredium t diane deuces & x0 Svall LDDANDAAAAAAHAAANAAAHN HOH dtd? ieee a 2 ee ‘ 3 Ss Dig Droge add WAP srrauld extasmayer Art Second ings ¥9dxo ae 4 tr setond ing behugeo ame eA Heco to achieve “this ? Ss ; Th S Tronleyen Thewkyou. ay ro Ss Festa iy") ?\ Pedlintap S IC | S } \ a © Scanned with CamScanner

    You might also like