Summary of Contents
Page 1
https://freepdf-books.com
Page 2
IntroductionToHTML&CSS:LearnToCodeWebsitesLikeAProByDannyAjiniOfClimbNewHeightsLLC.actionURI(http://www.climbnewheights.com/):ClimbNewHeights.comhttp://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 3
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 4
TableOfContents 7,Chapter1:StartHere 11,Chapter2:UnderstandingHTML 14,Chapter3:UnderstandingCSS 16,Chapter4:WhereToWriteYourCode 20,Chapter5:Browsers 28,Chapter6:HTMLStructure 32,Chapter7:CSSStructure 37,Chapter8:CommonHTMLElements&TheirRules 42,Chapter9:CommonCSSStylesAndTheirRules 48,Chapte...
Page 5
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 6
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 7
Chapter1:StartHere!Iknowwhatyou’rethinking,“Oh,anintroduction…SKIP!”However,I’dadviseyounottoskipthisintroductionbecauseI’mnotgoingtobabbleonaboutmyqualificationsorsomeheartfeltstoryabouthowmyHTML/CSSbookcuredadyingmanofhisailments.Rather,Ijustwishtogivethisbookalittlebitofcontext.Asw...
Page 8
BriefIntroToWebsiteDesignHistoryDisclaimer:Thisbriefhistoryisonlybasedonmyownobservations.Sincethisisn’tessentialtothebookIwon’twasteanytimelookingupdates,gatheringreferencesorfactchecking.You’llsimplyhavetotakethisatfacevalue.Theadventoftheinternetbroughtaboutveryuglywebsites.Originallyweb...
Page 9
WhatIHopeToAccomplishWithThisE-bookItismyhopethatsomeonewhoisunfamiliarwithHTML/CSScanpickupthise-bookanduseittogetasolidunderstandingofcodingawebsitewithHTML&CSS.IwanttocoverallthebasesofHTML/CSSwithoutgoingoverboard.PleasenotethatthissubjectisveryvastandIwillbecoveringafewofthethingsthatare...
Page 10
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 11
Chapter2:UnderstandingHTMLSotheysaythatthedifferencebetweenamasterandanoviceisthatthemasterknowsthetricksofthetrade.It’sthetiny,subtlethingsthatthemasterknowsthatgiveshimtheedgeoverthenovice.Youmaynotknowthis,butanyonewhohaseverusedacomputer(evenonewithoutinternet)hasprobablyusedandmanipulatedH...
Page 12
youcouldcreateinMicrosoftWord.AndmuchlikeMicrosoftwordelements,eachHTMLelementcomespresetwithstyles.Forexampleifyouweretotakeawordandlinkittoawebsite,itbecomesblueandunderlined.Ifyouweretobegintyping,thewordswouldbeginintheupperleftportionofthedocumentusingaTimesNewRomanfontandutilizinga12pointfo...
Page 13
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 14
Chapter3:UnderstandingCSSSoasImentionedaboveCSSstandsforCascadingStyleSheets.It’swhatyouwillbeusingasabeginningwebsitedesigner/developertogiveyourwebsitessomeflavor.It’sthetoolthatyouwillusetotransformapagewhichresemblestheugliestofWorddocumentsintoabeautifulandinteractiveworkofart!AsImention...
Page 15
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 16
Chapter4:WheretoWriteYourCodeBeforewegoanyfurtheronourjourneywehavetodiscusswhatyouwillbeusingtocodethewebsitesthatyoudesign.IpersonallyuseDreamweavertodoallofmycoding.It’snotwhatIpersonallyrecommend.ImostlyuseitbecauseitcamewithAdobeCreativeSuite,somethingthatIpersonallyusebecauseit’srequire...
Page 17
FreeCodeEditorsAlthoughmemorizingcodewillmakeyouanexceptionalwebsitedeveloperthepurposeofthisbookisn’ttodeteryoufromgettingyourfeetwetwithHTML/CSS.ThereforeI’llgiveyouafewoptionsthatyoucanuseifyoudon’thavetheoptiontouseapaidprogram.Ofcoursebythetimeyoureadthise-booktheremaybemoreoptionssodo...
Page 18
WhatIsTheDealWithCodeEditors???Ifyou’recompletelynewtocode.Thenyoumaybeaskingyourself,“howisthecodeeditorthatIuseimportantinanyway?”Basically,thecodeeditorthatyouusecanmakeyourlifeeasier.AndyouyourselfcanmakeyourownlifeeasierbypayingattentiontothetipsthatI’llgiveyouinthechapterabout“sem...
Page 19
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 20
Chapter5:BrowsersIknowyou’reeagertostartlearningaboutwebsitebuildinghowever,thetopicofbrowsersisoneofthemostimportantpiecestothepuzzle.Aninternetbrowserissimplytheportalthatyouchoosetohelpyouviewtheabominationwhichhascometobeknownastheinternet.Andjustastheprogramyouchoosetowriteyourcodecanhelpy...
Page 21
WhyDoBrowsersMatter?Ifyouaregoingtobecodingwebsitesit’simportanttohavemultiplebrowserstotestyourwebsitesin.Noteverybrowserdisplaysthesamefontinthesamewayandsomebrowsershaveslightlydifferentprotocolsfordisplayingcertainobjects.JustasImentionedbeforeabouthowMicrosoftWordhascertainstylesthattheyap...
Page 22
WhatBrowsersToDownloadThebrowsersthatIpersonallyrecommendtodownloadare:InternetExplorerFirefoxChromeIfyouareaWindowsuserandareconcernedaboutnothavingSafari,don’tbe.GoogleChromeisusinganopensourcewebbrowsingsystemcalled“WebKit”whichiswhatSafariuses.KeepthatwordWebKitinthebackofyourheadbecaus...
Page 23
AdvantagesToCertainInternetBrowsersIpersonallycrackopenGoogleChromewheneverIamgoingtobeginaheavysessionofcoding.Figure5.1–Irightclickedonthebrokenimageandgotoinspectelementtoseewhat’swrong.ThisisbecauseGoogleChromehasmoreintuitiveanduserfriendlycodediagnosticcapability.Intheimageaboveyou’ll...
Page 24
OnceIclick“InspectElement”thenthisextremelyhelpful“DeveloperTools”windowpopsup.Thered“x”withthenumberinthecorner,letsmeknowwhenfileswhichthedocumentsaysaresupposedtoaccompanythisfilearemissing.Icanseethattheimageswhicharen’tshowinguparearesultofabrokenpath.AfewthingsthatIwanttoquick...
Page 25
Inallhonesty,whenItriedtoinitializethe3Dviewonmyowncomputerawindowpoppeduplettingmeknowthat3DviewhasfailedandtocheckthetroubleshootingpageonFirefox’swebsite.Isuspectit’sbecauseofmygraphiccard.However,hereisapictureofwhattheFirefox3Dviewlookslike.Figure5.3–The3DviewoptioninFirefoxissupercool...
Page 26
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 27
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 28
Chapter6:HTMLStructureBeforeyoubegintogetacquaintedwithHTMLyouneedtoknowabitaboutthestructureofHTMLelements.http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 29
BeginningAndEndingHTMLTagsAnyelementthatcanbewrappedaroundsomethinghasabeginningtagandanendingtag.Thebeginningtagwillbeencapsulatedwithusing“lessthan”and“greaterthan”symbols(<>)theendingtagwillbeencapsulatedwiththesamesymbolswiththeadditionofaforwardslash(</>).Examples:<bod...
Page 30
SelfContainedHTMLTagsElementsthatareselfcontainedendthemselvesusingaforwardslashlocatedrightbeforetheending“>”symbol.Belowisa“break”tag.Thebreaktagisusedtocauseasentencetogotothenextline,orfreeupsomespaceinyourdocument.ThebreaktagcanbeusedjustliketheenterkeydoeswhentypinginaMicrosoftWo...
Page 31
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 32
Chapter7:CSSStructureCSScanbealittlebitmorecomplicatedbecausetherearemanyCSSdeclarationsthatyoucanmakeandeachdeclarationhasit’sownsetofrules.However,thereisafewthingsthatneverchangewhenitcomestoCSSsoI’llsharethemwithyounowsothatyoucanhaveabetterunderstandingbeforewestartjumpingheadfirstintoth...
Page 33
TargetingAnHTMLElementInordertobegintowriteaCSSdeclarationaboutanyelement,youmustfirsttelltheCSSdocumentwhichelementtotarget.BroadExampleIfyouwantedtotargeteveryinstanceofaparticularHTMLelementyouwouldbeginyourCSSdeclarationwiththenameofthatelement.Examples:body(TargetsthebodyoftheHTMLdocumentand...
Page 34
GivinganHTMLelementanIDisalmostidenticaltogivinganHTMLelementaclass.Except,insteadoftyping“class=‘classname’”yousimplytype“id=‘idname’”.TargetingtheelementwithCSSisalmostidenticalaswell.Except,insteadofputtingaperiodbeforetheidnameyouuseahashmark(#).NestedCSSTargetingTotargeteleme...
Page 35
separatingeachindividualHTMLelementwithacomma.I’malsotargetingtwodifferenttypesofinputs(type=”text”aswellastype=”date”)usingbrackets.Andyoumaynotfullygraspthisyet.However,I’mtargetingEVERYinputwiththetypeequalto“text”EXCEPToneswheretheclassis“s”.AndI’mdoingthisusing“:not(e...
Page 36
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 37
Chapter8:CommonHTMLElements&TheirRulesDivsAdivisessentiallyanHTMLelementwhichisusedtoholdotherobjects.Ibelievethatdivisshortfordivision.Divsareimportantforlayingoutwebsites.Sincetheworddivisnotverydescriptive,HTML5hasspawnednewkindsofdivswithdifferentnames.Thesenew“div-like”elementsarecal...
Page 38
Quicknote:yourcodewillstillbevalidifyouleavethealtattributeblank.However,thisisn’tthebestpractice.Essentiallyitisthealtattributeitselfthatmakestheimagevalidandnotthetextinside.Paragraphs,Spans&BlockquotesAparagraphisexactlythat…aparagraph.Iwillnotethatsomepeopleuseunorthodoxpracticessucha...
Page 39
<li>ListItem2GoesHere</li><li>ListItem3GoesHere</li><li>ListItem4GoesHere</li></ol>OLmeansorderedlistwhileLImeanslistitem.LinksLinksmaketheinternetgoaround.Linksareinline-elements.Tousealinkusethefollowingformat.<ahref=”path”>Text,image,orwhatev...
Page 40
essentiallygivesthetextareaawidthandheighthoweveryoucanlatermanipulatethesedimensionswithCSSifyouwish.http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 41
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 42
Chapter9:CommonCSSStylesAndTheirRulesIwillgointoafewdifferentCSStechniquesingreaterdetaillaterinthebooksofornowI’lljustlistacoupleoftheimportantCSSdeclarationsandtheirrules.ColorThecolorattributealwaysdenotesthecolorofthetext.Tousethecolorattributesimplyusethefollowingformat.Blackisdefaultwheni...
Page 43
BordersTheremaycomeatimewhenyouwanttogivesomethingaborder.Youcanspecifyall4bordersatonceoryoucanspecifyoneborderatatime.(Theremaybealternativewaystospecifytheborderhowever,we’lljustusethebasicsfornow.)border:1pxsolid#ffffff;Tospecifyaborder,beginwiththeborderwidthinpixels,followedbythestyle(opt...
Page 44
Youroptionshereincludeblock,inline,inline-block,aswellasnone.“Display:none;”isforwhenyoudon’twanttodisplayanobjectatall.OverflowTheremightcomeatimewhenyouhaveadivwhichyouhavespecifiedawidthorheightfor,andyouhaveplacedanobjectinsideofthedivwhichextendspasttheboundariesofitscontainingelement....
Page 45
ThingsToRememberTherearehonestlytoomanyCSSdeclarationstomentionhere.You’llhavetolearnmoreasyougoalong.SomeothergreatCSSdeclarationsincludeborder-radiuswhichgivesyouroundedcornersaswellassomeoftheCSS3transitionsandanimationswhicharealittlemoreadvanced.Somethingstorememberare:Youcan’thavemoreth...
Page 46
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 47
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 48
Chapter10:GettingStartedOk,nowthatwe’vegottenafewofthelesserboringfactsoutofthewaywecanbegintogetourhandsdirtyabit.Anyonecanreadabookaboutcodingawebsitehowever,it’snotuntilyou’vetakenthatknowledgeandbegantoapplyitthatyourjourneyactuallybegins.http://cncmanual.com/ |||||||||||||||||||||||...
Page 49
TheMockupIbegineachwebsitethatIbuildwithamockup.AmockupisessentiallyaPhotoshopdocumentofwhatthehomepageofyourwebsiteisgoingtolooklike.Figure10.1–BelowisamockupIcreatedforafriend’swebsite.AsyoucanseeinFigure10.1thisisanexampleofamockup.It’sawebsitedesignthatIwasmessingaroundwithforafriendwho...
Page 50
SettingUpYourWebsiteFolderI’mgoingtobehonesthere.Whenitcomestobuildingawebsite,theskyisthelimit.Youdon’thavetoformatthefolderthatholdsyourwebsiteEXACTLYasIsay.Youdon’thavetoformatyourcodethewaythatyouseeinmyexamples.However,ifyoukeepyourHTMLdocumentscleanandeasytounderstand.Ifyoukeepyourfol...
Page 51
SettingUpYourHTML&CSSDocumentsOnceyou’rereadytobegin,openupyourcodeeditorofyourchoiceandcreatetwodocuments.Thefirstonewillbenamedindex.htmlandthesecondonewillbenamedstyle.css.WhenitcomestoHTML,the“index”usuallydenotesthe“homepage”andwhenyouuploadHTMLtoaservertheserverwillservetheind...
Page 52
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 53
<!DOCTYPEhtml><htmllang=“en”><head><metacharset=“utf-8”><title>HereIsWhereYouPutTheTitleOfYourWebsite</title><!—[ifltIE9]><scriptsrc=“http://html5shiv.googlecode.com/svn/trunk/html5.js”></script><![endif]—></head>&l...;
Page 54
<metacharset=“utf-8”><title>HereIsWhereYouPutTheTitleOfYourWebsite</title><linkhref=“css/style.css”rel=“stylesheet”type=“text/css”/><!—[ifltIE9]><scriptsrc=“http://html5shiv.googlecode.com/svn/trunk/html5.js”></script><![endif]—...
Page 55
BackgroundsIwasn’tsureinitiallyhowtostructurethise-book.However,I’verealizedthatthebestwaytogoaboutteachingmyknowledgeofHTML/CSSwastogothroughsomeofthemostusefulpropertiesanddroptinymorselsofwisdomalongtheway.IknowImentionedthatyoushouldstarteachwebsiteoffwithamockup.However,inthiscasesinceyo...
Page 56
TiledBackgroundsOneofthemostpopularbackgroundoptionsisyourstandardtiledbackground.OneofmyfavoritewebsitesforgettingcoolbackgroundsformyprojectsisactionURI(http://www.subtletextures.com/):www.subtletepatterns.com,gothereanddownloadabackgroundofyourchoiceandsaveitinyourimagesfolder.Ichoosetheveryfi...
Page 57
Ofcourseyoushouldchange“images”tothetitleofyourimagesfolderifyouchosetonameyourfolderdifferently,aswellaschangethenameofyouractualimagefiletomatchthefileyouhavechosen.Aboveistheresultofmytiledbackground.AsImentionedbeforewithHTMLelementsallhavingdefaultstylesappliedtothem,CSSstyleshavedefault...
Page 58
<scriptsrc=“http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>BecausetheJavascriptfileaboveisnotrelativetoyourwebsiteandislocatedonit’sownurl,youwillneedtodeclarethepathbeginningwiththeurl.Simplyput,thepathwillneedtobedenotedbeginningwith“http://www.example.com/the-...
Page 59
GradientFun!Ok,asImentionedabove,backgroundimagesaretiledunlessyouspecifyotherwise.Figure10.3–Belowaretwogradientexamples.Ontheleftisagradienttiledonthey-axisandontherightisagradienttiledonthex-axis.Youcanmakealineargradientinoneoftwoways.Iusedonlyasimpleblacktowhitegradienttoillustratemypoint....
Page 60
Idecidedtouseblackandblueformine.Saveyourimageinyourimagesfolderandbesuretorememberthenameandtheextension.Gotoyourstylesheetandtype:body{background-image:url(../images/gradient.png);background-repeat:repeat-x;}Obviouslyreplace“gradient.png”withyourfilenameandextension.Thisistheresult…Figure...
Page 61
Wedeclaredabackgroundimageandtoldittotileonthex-axis.Itdid,howeverthedefaultforthebackgroundisstillwhiteandthereforethereiswhiteshowingbelowwheretheimagewastiled.Inordertofixthiswe’llhavetoalsospecifyabackgroundcoloralongwiththebackgroundimagesothegradientwilllookfluid.Let’suseourPhotoshopeye...
Page 62
Andourgradientisnowfixed!Usingtheabovelogicwecancreatealefttorightgradientbyfollowingthesamesteps.Exceptinthiscaseweuseanimagethatis1pixeltalland“X”pixelswide.Andinsteadofsaying“background-repeat:repeat-x;”wechangeitto“background-repeat:repeat-y”.Notonlydowehavecontroloverhowthebackgr...
Page 63
body{background-image:url(../images/gradientexample.png);background-repeat:repeat-y;background-color:#00aeef;background-position:right;}Ifyou’reworriedaboutmemorizingeachCSSdeclaration,don’t.EachofthesethingscanbeGoogledatalaterdateifyouforget.Themostimportantthingisthatyouunderstandtheunderl...
Page 64
RadialGradients&Image-lessGradientsThefollowinggradientoptionshaveonlybeenavailablerecently.HTML5andCSS3havebroughtalongmany,extremelycoolfeaturesthatwereonceonlyavailableusingJavascriptorextremelyimage-heavysolutions.However,nowwehavetheabilitytocreateradialgradientsandimage-lessgradientsusi...
Page 65
Non-repeatingBackgroundImagesAboveI’vementionedafewtechniquesforcreatingbackgroundeffects.However,theremaycomeatimewhenyouwantanelementtohavejustonepictureasit’sbackground.Youmaywantthepicturetobefeaturedinthebottomrightcorner.Oryoumaywantaheadingtohaveabackgroundimagejusttotheleftofthetext.I...
Page 66
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 67
Chapter11:PreparingImagesForTheInternetSohopefullyifyou’rereadingthisbookyouhavealittlebitofknowledgeofgraphicdesign.Andhopefullyyouhavesometypeofimageeditingsoftware.I’llbeusingPhotoshoptoshowyouhowtoprepareimagesfortheinternet.Thisisextremelyhandytoknowandisnormallysomethingthatyouwouldlear...
Page 68
72DPIIfyou’reagraphicdesignerorcomefromaprintbackgroundthanyoumaybefamiliarwithimageresolution.Typically,whenworkingwithimagesthatarebeingpreparedforprintthestandardresolutionis300dpi.However,whenitcomestotheinternetmostimagesare72dpi.Insomerareinstancesyoumayencounterpictureswithresolutionswhi...
Page 69
MostCommonImageExtensionsThemostcommonimageextensionsthatyouwilldealwithwhenitcomestocreating(pixelbased)imagesforthewebare.jpg,.gifand.png.Ofcourseyoualsohave.svg’swhichare“ScalableVectorGraphics”howeverwewon’tbedealingwiththoseforthetimebeing.Eachoftheseextensionshavetheiradvantagesandd...
Page 70
Itookthissameimageabove(itis1920x1080pixelsthisisverylargeforinternetpictures)andusingthe“SaveForWebAndDevices”menuinPhotoshopfiguredouthowlongthissameimagewouldtaketoloadusingthemostcommonfileextensions.Figure11.2–Belowyoucanseeapreviewoftheloadtimeonthepuppypictureusingvariousimageextensi...
Page 71
Asyoucansee,whentryingtosavetheaboveimageasa.jpgat100%imagequalitytheimagewilltakemorethantwicetheamountoftimeitwouldhavetakenthe.gifand.pngtoload.Nottomentionthefactthatthe.gifandthe.pngwillhavetransparency.Alsonottomentionthefactthatififyoudidtrytosavetheaboveimageasa.jpgandyoutriedtolowerthequ...
Page 72
ofacoloredbackground.WhenIlookedcloserInoticedthatthereweretinypixelsaroundtheedgeofthetransparentimagewhichweren’tquiteright.Inordertoillustratetheproblem,I’llcreateawebpagewitharedbackground,savetheimageaboveasa.pngaswellasa.gifandplacetheimageonthepagetoshowyoutheissueIwashaving.Figure11.5...
Page 73
canseetheimagenowdoesn’thavethosepeskypixelsthereanymore!Butwhatcausedthis?Inallhonesty,thiswasaproblemwhicheffectedmeforawhilewhenIfirststartedwebdesign.AndevenwhenIaskedmyteacheratthetimeheseemedtobeofnohelp.WhatI’vefoundisthatthiseffectiscausedbecauseofwhatisknownas“anti-aliased”pixels...
Page 74
TinyPNGisgreatforwhenyouhavea.jpgqualityimagethatyoustillwanttohavesuperiortransparency.Thecarintheabovewebsiteisfullytransparent,includingtheshadowthecariscastingaswellasthelightrayscomingfrombehindthecar.Savingatransparentimagelikethiswillcausetheimagetotakealongtimetoload.However,withimagecomp...
Page 75
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 76
Chapter12:ManipulatingPlacementOfHTMLObjectsKnowinghowtoplaceobjectswhereyouwantthemisextremelyimportantwhenitcomestodesigningawebsitethewayyouwantittolook.Inordertodothishowever,youmustfirstknowalittlebitabouthowHTMLobjectsbehave.HTMLobjectsareeitherconsideredtobe“inline”or“block”levelel...
Page 77
Inlinevs.BlockLevelElementsInordertoillustratethedifferencebetweenaninlineelementandablocklevelelementI’llbecreatingdifferentHTMLelementsonablankpageandtheninspectingthemusingGoogleChrome’selementinspectoption.Figure12.1–Iclicked“inspectelement”ontheHeading1tagatthetopofthepagetoshowyou...
Page 78
Theverylastlineofthedocumentincludes3“span”tags.Aspanisatypebasedelementwhichholdslesssignificance/importancethanaparagraphwhichcouldbeconsideredthespan’solderbrother.AsyoucanseeasIinspectedthespanelement,theelementitselftakesuponlyasmuchspaceasitneedsto.Thisisthesamewithallinlineelements.T...
Page 79
Inline-blockElementsInline-blockelementsareinlineelementsthathaveawidthandaheight,ratherthanonlytakingupasmuchspaceasnecessary.Thisissomethingthatisencounteredrarelybutisstillgreattoknowandanothertoolinyourarsenal.http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| ...
Page 80
“Floating”ElementsBeforewegettoodeepintothisI’llshowyoubasicallyhowpeoplenormallysetupwebsites.IwilldosobytakingamockupwhichI’vealreadydoneandusingayellowoutlinstoshowthedifferentdividingboxeswhichIusedtocreatethelayout.Inmodernwebsitedevelopmentpeopleusewhatisknownasa“div”toseparatea...
Page 81
AsyoucanseetheimageontherightistheexactsamecodewiththeCSSremoved.SothistellsusisthatwithCSSweareabletolayoutobjectsthewaywewantthem.Ifyouwanttwoblocklevelelementstositsidebysidethentheyneedto:1. Eachelementneedstohaveaspecifiedwidth.Blocklevelelementsusuallytakeupasmuchroomastheycanhorizontallyso...
Page 82
“Clearing”ElementsFloatsandclearsgohandinhand.Let’ssaythatyouhavetwofloatingobjectsinsideofacontainerobject.UsingCSSyouhavespecifiedaredbackgroundforthecontainerelementandthetwofloatingobjectsdon’thaveanykindofbackground.Thecontainerobjectiswrappedaroundbothobjectssowhatwillthebackgroundo...
Page 83
Asyoucanseethecontainerisnotwrappingaroundthetwodiv’swhichareinsideofit.ThereasonforthisisbecausetheHTMLdocumentdoesn’treallyseefloatingobjectsasiftheywerethere.It’salittlehardtoexplainsolet’sputablocklevelelementafterourtwofloatingdivsandseewhathappens.Figure12.4–It’sbeginningtolooka...
Page 84
Theclearpropertyhasafewdifferentoptions.Youcaneitherclearobjectstotheleft,totheright,orboth.Now,letmegivethatH1tagaclassofclear.AndthenIcanuseCSStospecifythatanyelementwithaclassofclearshouldclear“both”.AboveistheHTMLaswellastheCSSthat’sinvolved.Andbelowistheresult.Asyoucansee,floatsandclea...
Page 85
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 86
Chapter13:MarginsAndPaddingMarginsandpaddingarebothextremelypowerfultools.Bothofwhichdoalmostthesamethingwithafewminordifferences.http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 87
MarginsAmarginworkstobasicallyserveasabarrier,pushingobjectsawayfromotherobjects.Ifyousetamarginof10pixelstoanobjectthatmeansthatnootherHTMLelementcangetwithin10pixelsofthatelement.Whilemarginsdon’taddtotheactualsizeoftheelement,theydosortofaddsizetothecoverageoftheelement.Forexample,ifyouweret...
Page 88
PaddingPaddingisalmostidenticaltomargins,exceptpaddingworksinsidetheelement.Ifyouweretospecifya10pixelpaddingtoanelement,theelementwouldgrow10pixelsoneachside.Also,noelementwouldbeabletogetwithin10pixelsoftheedgeoftheelement.Intheaboveexampleyoucanseethatthetextinsideeachdivactuallytouchestheedge...
Page 89
Youcangoalittlefurtherandsimplifyit.Youcangoevenfurthertosimplifyit.Andofcourseyouhavethefurthestsimplification.NegativeMarginsTheremaycomeatimewhenyouwanttopositionanobjectandyoufindnobetteralternative.Thisiswhenyoucanusenegativemargins.BeforeIevenmentionhoworwhyyouwouldwanttousethemI’llsaytha...
Page 90
I’veusedanegativemargininthepastwhendealingwithcodethatI’musinginmywebsitethatIhaven’twritten.AndforsomereasonIcan’tgetaparticularobjecttobewhereIwantittobeusingconventionalmeans.That’swhenI’llbegintostartmessingwithanegativemargininordertopushanobjecttogowhereIwantittogo.CenteringObj...
Page 91
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 92
Chapter14:OtherTypesOfPositioningTechniquesInallhonesty,Itrytousefloatstolayoutmostofmywebsites.However,therearesomeexceptionsthatpopupfromtimetotime.http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 93
RelativePositioningThistypeofpositioningisrelativetotheobject’soriginalposition.Basicallyafteryou’velaidoutsomeobjectsonthepage.Youmayfindthataparticularobjectisnotexactlywhereitneedstobe.Usingrelativepositioning,yousimplyspecifythatthepositionofthatelementis“position:relative;”andthenyou...
Page 94
AbsolutePositioningAbsolutepositioningisabsolute,howeveritisbasedonanyparentelements.Forinstanceifyouwanttopositionanobject“absolutely”andthatobjectwasinsideofadiv.Thepositionyouspecifywillberelativetothatdiv.IftheobjectisnotwrappedinotherelementsitwillberelativetotheHTMLpageitself.Absolutely...
Page 95
FixedPositioningFixedpositioningisrelativetothebrowserwindowitself.Inotherwordswhenyouopenyourwebbrowser,dependingonyourscreensize,ifthebrowserisminimizedorfullscreen,etc.Asyouscrollafixedpositionelementwon’tmove.I’veusedthisinthepastfortimeswhenIwantedthebackgroundofthepagetobeafixedimageand...
Page 96
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 97
Chapter15:Fonts,Fonts,Fonts!Alright,soifyouhaveabackgroundingraphicdesignyouwouldknowthataseriffontisonewithtinypointythingsatthetipsoftheletter.Seriffontsaregreatforprintbecausetheserifsseemtoblendthewordstogetherandaresaidtomakeiteasierforthereader.However,ontheinternet,whereeverythingismadeupo...
Page 98
HowDeclaringFontsWorksSo,keepinmindthatTimesNewRoman(orequivalent)isthedefaultfontunlessspecifiedotherwise.ThismeansthatunlessyouwanttouseTimesNewRomanyou’lldefinitelyneedtospecifywhichfontyou’dliketouse.Fontsgetspecifiedbyfamily.TospecifywhichfontsyouwanttouseyoustartoffwiththeCSSdeclaration...
Page 99
OtherFontMethodsObviously,noteveryonewillwanttouse“normal”fontsfortheirwebdesignprojects.Somepeoplewillwanttousespecialfontsbecauseitfitsinwiththeirdesign,orcompanybranding,etc.Thereareafewotheroptionsforcreatingwebsitesusingspecialfonts.OfwhichI’llbecoveringtheonethatIusemostoften.GoogleFo...
Page 100
Asyoucanseeaboveonceyou’vechosenthefont,youcanchoosethefontweightsyouwishtouse.ThenGoogleupdatesthePageLoadTooltoletyouknowhowmuchthefontswilleffectpageloadtime.Onceyou’redone,scrolldowntosee…I’mprettysureI’vementionedthisbutdifferentbrowsersrendertheEXACTsamefontDIFFERENTLY.Thisisimpor...
Page 101
Aboveyou’llseeOpenSans,renderedinGoogleChrome,FirefoxaswellasInternetExplorer.Asyoucanseeeachfontappearsslightlydifferent.EachlineoftextisadifferentlengtheventhougheachlinecontainstheEXACTsamecharacters.Andthefunniestthing…GoogleChromeisn’tthebestatdisplayingit’sownfont.InternetExplorer,t...
Page 102
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 103
Chapter16:SemanticCodeSemanticcodeisbasicallytheactofmakingsurethatthecodethatyouwriteiseasilyunderstandabletoanyonewhowantstoworkwithit.Inthepast(somepeopleincludingmyselfstillusethistoday),peoplewouldlayouttheirwebsitesusingdivsandgivethedivsclassesaccordingtotheirfunction.Thedivswouldbenamedhe...
Page 104
WritingSemanticCodeWhencodingwebsites,Irecommendthatyoualwayskeeptheconceptofsemanticcodeinthebackofyourmind.Youneverknowwhenawebsitethatyouhaveworkedoninthepastmayneedtobeworkedonbysomeoneelse.Inordertomakesurethatyourwebsitesareeasilyunderstandablemakesureto:Uselogicalnameswhengivingclassesandi...
Page 105
TheCSScommentsarehighlightedintheabovepicture.IthinkCSScommentsaregreatwhenyouhaveaspecificsectionofyourwebsitethatalargechunkofCSSstylescorrespondto.YoucanplaceaCSScommentatthebeginningandendofthechunkofcodetoletothersknowwhatthestylesweremeantfor.http://cncmanual.com/ |||||||||||||||||||||||...
Page 106
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 107
Chapter17:UsingColorInmostcaseswhenyouneedtospecifyacolor,youwillbeusingahexadecimalsystem.Youcanseetheformatforspecifyingthesecolorsbelow.Hexadecimalcolors,arebasedoffof6numbers/lettersasthenamesuggests.Thecharactersusedinhexadecimalcolorsrangefroma-zand0-9.Smallernumbersindicatedarkercolorswhil...
Page 108
HexadecimalColorUsageOneofthemostcommonusesofthishexadecimalcolorcodeiswhenyouarespecifyingafontcolor.YoucandothisbyusingtheCSSdeclaration(color:#000000;)where#000000isthecolorofyourchoice.Otherusesforspecifyingcolorcancomeinhandywhenspecifyingbackgroundcolor(background-color:#000000).Aswellaswhe...
Page 109
RGBColorCodeSometimes,youwillneedtospecifycolorusingaRGBcolorsystem.Theseinstancesoccurmuchlessfrequentlythanthehexadecimalsystem.InstanceswhereyouwouldusethishappenmostlywithnewCSS3declarationssuchaswhenspecifyingopacity,youneedtousetheRGBacodefollowedbytheopacityusingadecimalsystem.Orwhenspecif...
Page 110
Opacity:RGBAColorCodeWithHTML5andCSS3wenowhaveoptionsfordeclaringopacity.RGBAisessentiallythesamedeclarationasRBGhoweverthereisonemoreobjectthatgetsdeclaredandthat’stheopacity.Theopacitylevelgoesfrom0.0–0.1.0.0being0percentand1.0being100percent.Theformatlookslikethis.http://cncmanual.com/ ...
Page 111
SpecifyingColorByNameRecently,youhavebeenabletospecifycolorsbyname.However,thisisfairlynewtoCSS3andIhaven’tgottenusedtousingit,norhaveIusedit.Correction,Iuseitonlywhenspecifyingacoloras“transparent”(AKAno-color).Checkitoutandgetcomfortablewithitifyouwish!AsImentionedearlier,there’smoretha...
Page 112
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 113
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 114
Chapter18:CSSSpritesThemoreimagesyouuseaswellasthesizeoftheimagesmakesforaslowloadingwebsite.Inordertocombatthisphenomena,somepeopleutilizeaconceptknownasCSSsprites.ACSSspriteiswhenyouhavemultipleimagesinoneimage.Soratherthanloadingabunchoftinyimagesthebrowserhastoload1slightlylargerimagewhichres...
Page 115
UsingCSSSpritesTouseaCSSspriteyouneedtospecifyhowtallandwidetheimagewillbethenyoumustspecifythebackgroundimageplusthecoordinates(fromtheleftaswellastopoftheimage).a.social{height:65px;width:65px;display:block;float:left;margin:05px10px0;}Asyoucanseeabove,IgavethelinkswhichwillbemysocialmediaCSSsp...
Page 116
}AboveisthehoverstatefortheblackFacebookiconaswellasthewhiteFacebookicon.Imadethegraphicsothatbothwhiteandblacksocialmediaiconswouldhavearedhoverstate,whichiswhybothoftheseusethesamebackgroundimageandCSSspritecoordinates.Asyoucanseeabove,theredhoverstateis0pixelsfromtheleftand130pixelsfromthetop....
Page 117
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 118
Chapter19:ElementStatesInteractiveelementssuchaslinksandinputs(searchbars,textboxes,etc)havewhatareknownasdifferent“states”.Becauseofthis,youareabletostylethe“state”ofeachelementusingCSS.BeforeIconfuseyouanyfurtherthestatesI’mreferringtoare:ActiveHoverFocusVisitedFigure19.1–Whenyouwri...
Page 119
ActiveActivereferstoanactivelink.http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 120
HoverHoverreferstoalinkorobjectthatisbeinghoveredoverwiththecursor.http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 121
FocusFocusreferstoaninputelementwhichiscurrentlyactive.Forexamplewhenyou’refillingoutaformandyouhitthetabbutton.Thenextformfieldtogettheblinkingcursorinitisthefieldthathas“focus”.http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://...
Page 122
VisitedVisitedreferstoalinkthatyoupreviouslyvisited.StylingElementStatesInordertostyletheseelementstatesyousimplyneedtotargettheHTMLelementusingeitheraclass,idorothertechniquefollowedbyacolonandtheelementstate.AnexampleofthiswouldbefromtheCSSspritechapterwhereIspecifiedtheportionoftheimagetodispl...
Page 123
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 124
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 125
Chapter20:HandyThingsToConsiderThereareafewCSSstyleswhichmakeitintoeverystylesheetthatIwriteforanumberofreasons.We’llgooverthosenow.http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 126
HandyInternetExplorerStyleWhenyouwrapanimagewithalink,FirefoxandGoogleChromedon’thaveanissuewiththis.However,forsomereason,olderversionsofInternetExplorerabsolutelyLOVEtoplaceanuglyblueborderaroundallimageswrappedinlinks.Figure20.1–OlderversionsofInternetExplorerusedtoplaceanuglyblueborderaro...
Page 127
GlobalResetsSoasImentionedearlier,eachHTMLelementhasadefaultstyleattachedtoit.Differentbrowsershaveabitofleewaywhendecidinghoweachelementshouldbedisplayed.ForthisreasonmanypeoplelinktoaCSSstylesheetknownasa“reset”.Thisstylesheetbasicallystyleseachelementinawaywhichisuniformacrossallmodernbrow...
Page 128
DefaultLinkHoverStylesWhenyoubegintogetfancywithyourlinkstyling.Don’tforgettostylethe“hover”state.Oftentimesyou’llfinishmakingalinklooklikeasupercoolbuttonandthenyou’llgototestitoutandsay…”ohcrap,whenIhoveroverthisbuttonthetextturnsblueandget’sanunderline”.Tocombatthismakesureyo...
Page 129
DefaultFontBydefault,thefontwillbeTimesNewRoman(orMacequivalent).Togetaroundthisyoucanspecifythedefaultfontofyourchoiceatthetopofyourstylesheetbytargetingthe“body”withthefont-familyofyourchoice.body{font-family:Arial,Helvetica,Sans-serif;}http://cncmanual.com/ |||||||||||||||||||||||||||||...
Page 130
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 131
Chapter21:Flash,Javascript&CSSAnimationsInthepast,theonlywaytoutilizesimpleandevensomecomplexanimationswastouseeitherFlashorJavascript.However,withtheadventofCSS3,nowanimationscanbedoneusingCSSalone!ThisisgreatnewsbecauseAppleproductshateflashandsomebrowsers(especiallyInternetExplorer)tendtob...
Page 132
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 133
Chapter22:Validation&TroubleshootingTherecomesatimeineverywebdesignerslifewhentheyhaveabsolutelynoideawhytheircodeisn’tworking.LuckilyIhaveafewdifferentsolutionsforyou.http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com http://freepdf-boo...
Page 134
DeveloperToolsOneofthefirstthingsthatIdowhenfacedwithproblemistousedevelopertoolsinthebrowserthatI’mviewingthewebsitein.Prettymucheverymodernbrowserisequippedwithdevelopertoolstohelpyoufigureoutyourcode.GoogleChromehappenstobemyfavoritebecauseyouareabletoedittheHTMLandCSSdirectlyinthedevelopert...
Page 135
W3CValidatorThesecondwaytodiagnoseyourHTML/CSSistovalidateit.W3CstandsforWorldWideWebConsortiumandallHTMLhasstandards.Whenyouarehavingaparticularlydifficulttimewithyourcodeithelpstovalidatethecodeandseeifitthrowsanyerrors.Sometimesyourcodeisn’tbehavingproperlybecauseitisinvalid.Simplygotoaction...
Page 136
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 137
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 138
Chapter23:MinifiedHTML/CSSUpuntilthispoint,I’vegivenyouatonofinformationonwritingcodeaswellastheabilitytoinspectotherpeoplescodeusingwebbrowserdevelopertools.Ifeltthatitmaybenecessarytoincludealittletid-bitonminifiedHTML/CSS.AsImentionedearlier,theformattingofyourHTML/CSSismostlyforyouandotherd...
Page 139
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 140
Chapter24:GridSystemsIwantedtobrieflytouchongridsystemsbecausewhenIfirststartedoutIusedtolovethisgridsystemknownasthe960gridsystem.Myveryfirstwebsiteswereall1,000pixelswideandIusedtohavetousemybestjudgmenttocomeupwithwidthsforitemsinmylayouts.ForexampleifIwasdoingatwocolumnlayout,Iwouldprobablyus...
Page 141
WhyGridSystems?ThereasonwhyI’mmentioninggridsystemsisfor2reasons:1. Gridsystemsmakeiteasierforthewebsitedesignerforanumberofreasons.TheynormallycomewithaPhotoshopdocumentbasedonthedimensionsofthegridsothatyoucanlayoutwebsiteswitheaseandnothavetoworryasmuchaboutthedimensionsbecausethey’realrea...
Page 142
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 143
Chapter25:ResponsiveWebDesignOnceyouhaveasolidgraspongeneralwebsitedesign,responsivewebsitedesignwillbeeasyforyoutopickup.Irecommendmessingaroundwithjustpageswhichdon’trespondtothewidthofthebrowserwindowbeforeyoutrytoincorporateanyresponsivewebdesigntechniquesinyourarsenalhowever.But,Iwantyouto...
Page 144
TheViewportOnedifferencebetweenstaticandresponsivewebsitedesignisthefactthatwithresponsivedesignyouneedtodesignatethatthewidthofthescreenshouldbethewidthofthewebsite.Youdothisbyaddingadeclarationtotheheadofthedocument.Alsointhisdeclarationyoucanspecifyiftheusercanzoominaswellashowmuchtheycanzoom....
Page 145
SpecifyingWidthsInstaticwebsitedesign,whenwecreatea2columnlayout,wethinkofhowwidewewantourcolumnstobeinpixelsandcreatethem.However,whenitcomestoresponsivedesign,staticwidthsdon’tcutit.Whenyouwantthewidthsofobjectstochangewiththewidthofthebrowserwindowit’simperativetodesignatewidthsinpercentag...
Page 146
ResponsiveImagesThewidthofyourimagesisalsoimportantbecauseasthescreengetssmalleryourimagesobviouslycan’tbefullresolutionorelseyourenduserwillhavetoscrollontheirphonetoseetheentirepicture.Toalleviatethisyouneedtospecifyawidthormaximumwidthof100%orless.Theheightcanbeautoregulatingbysimplyspecifyi...
Page 147
ResponsiveTypeObviouslywhenyourscreeniswideallHeading1elementscanbelarge,howeverwhenyouviewthesamewebsiteonasmallerscreenthatheadingwillmostlikelytakeuptheentirescreen.Sincethisisn’tthemostaestheticwaytobuildawebsite,somepeopleliketospecifytheirfontsizesinem’sratherthanpixels.Iforonedon’tli...
Page 148
ResponsiveNavigationObviouslywhenyourscreenreachesapointbelow1,000pixelsyoucan’thaveawidenavigationbaranymore.Atsomepointthewidthofthebrowserwillbetoonarrowtosupportyournavigationbar.However,don’tfearbecausethereareavarietyofresponsivenavigationsolutionstochoosefrom.AllyouhavetodoisGoogleit!h...
Page 149
BreakPoints&MediaQueriesThesenexttwotopicsgohandinhand.Iwillalsomentionthatifyou’regoingtobedoingresponsivewebdesignyouNEEDtodownloadaresolutionplugin.Thatis,apluginthattellsyouthewidthofthebrowserwindowatanygiventime.Thereasonforthisiswhenyou’redealingwitharesponsivewebsite,asyoumaketheb...
Page 150
willbegintotakeeffectandtheCSSstylesthatpertaintowiderscreensfallback.IfyouencounteraparticularlydifficultCSSstylethatdoesn’ttakeeffectandyou’vetriedeverythinganddoneyour“developertools”research,thanyoucanadd“!important”justbeforethesemi-colonoftheCSSstyledeclaration.“!important”g...
Page 151
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 152
Chapter26:TheFaviconTheicingonthecaketoyourwebsiteisthefavicon.Thatisthelittle16x16pixelimagethatisassociatedwithyourwebsiteandgetssavedwiththetitleofyourwebsitewhensomeoneaddsyoursitetotheirfavorites.Tocreateafavicon,simplycreatea16x16pixeldocumentinPhotoshoportheimageeditingsoftwareofyourchoice...
Page 153
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 154
http://cncmanual.com/ |||||||||||||||||||||||||||||||||||||||||||||||||||||| www.freepdf-books.com https://freepdf-books.com
Page 155
Conclusion&NextStepsIhopeyou’veenjoyedmye-book.IsincerelyhopethatI’vegivenyouasolidfoundationofknowledgetobuildupon.Goingforward,therearesomeamazingresourcesonlineforlearningaboutHTML,CSSaswellasJavascript.Oneofmyfavoritewebsites,whereIlearnedamajorityofmycodingknowledgewasawebsitecallact...