ADVANCEDHTML/CSSSETTINGUPYOURSITE
Card1of6I'mLearning:HTML
ProducedbyCoderDojoFoundation//@CoderDojo
Ifyou'vefinishedtheBeginnerandIntermediateHTML&CSSSushi
Cards,thenyoualreadyknowalotabouthowtowriteinthosetwolanguages.Thesecardsaregoingtoshowyouhowtouseallthosepiecestoputtogetheraprofessionallookingwebsite,liketheoneyoucanseeatdojo.soy/a-html-fin.
1
Overthenextfewcardsyou'llseehowto:LayouttheskeletonofawebsiteSetupasimplepagetemplateBuildananimatedmenuforyoursiteCreateanawesomelookingheaderCreateagalleryofyourcodingprojects
2
Tostartwith,you'llneedtheskeletonofyourwebsite.Createanew
directorycalledadvanced_sitetoputyourwebsitein.
Setupacoupleofotherdirectoriesinsidethatone:
css—Whereyou'llputyourstylesheets.Veryusefultokeepthemorganisedifyouhaveseveralofthemforthingslikedifferentthemes,page-specificstyles,etc.
img—Whereyou'llputanyimagesyouneedtoputonyourwebsite,likealogo,photos,orscreenshotsofyourprojects.
3
ADVANCEDHTML/CSSSETTINGUPYOURSITE
Card1of6I'mLearning:HTML
ProducedbyCoderDojoFoundation//@CoderDojo
Thencreateafewfilestoworkfrom:
Intheadvanced_sitedirectory(therootdirectoryofyourwebsite)createemptyfilescalled:
template.html—Thetemplatepagethatyou'llbecopyingintoallthenewpagesyoucreate.
index.html—Thehomepageofyourwebsite.
projects.html—Thepageyou'lllistallyourcodingprojectson.
about.html—Apagewhereyou'llincludealittleinformationaboutyourself.
Intheadvanced_site/cssdirectorycreateanemptyfilecalled:
style.css—TheCSSfileyou'regoingtoputallyourstylesinto.
CopyingtemplatesCopy-pastingtemplatecodeisnotthewayprofessionalweb
developerswoulddoit,butyou'llneedtolearnJavaScriptorsome
otherprogramminglanguagelikePythonorRubybeforeyoucanlearntheevencoolerwaytodowebpagetemplates.
4
You'vegotallthefilesinplacenow.Intherestofthecardsyou'llbefillingthemwiththecodethatmakesupyourwebsite!Puttingtogetheraskeletonlikethisisagoodwaytostartyourbigwebsiteprojects.Ithelpsyourememberallthepiecesyoumeanttoincludelater,whenyou'redeepintothecode.
5
ADVANCEDHTML/CSSSITESKELETON
Card2of6I'mLearning:HTML
ProducedbyCoderDojoFoundation//@CoderDojo
Onthiscard,you'regoingtosetupyourtemplatepage.First,open
template.htmlandcreatetheoutlineofastandardhtmlfile:
<!DOCTYPEhtml><html><head></head>
<body></body></html>
1
Now,includeyourstylesheetintheheadsection,andaddaplacetoput
thetitlesofyoupage.Markitwithacomment.
<head><title><!--Pagetitlegoeshere--></title><linkrel="stylesheet"type="text/css"href="css/style.css"/></head>
2
Next,createthethreedivtagsthatalmosteverywebpagehas.Givethem
classestomatchtheirroles(e.g.class="header"):
Firstaheaderdiv:Containsthemenuandwebsitetitle
Thenacontentdiv:Wherethemaincontentofthepage(likeyourgalleryofprojects)goes.
Finally,afooterdiv:Containslessimportantorobviouslinkstothingslikea"contactme"page.
3
ADVANCEDHTML/CSSSITESKELETON
Card2of6I'mLearning:HTML
ProducedbyCoderDojoFoundation//@CoderDojo
Youshouldcomeupwiththebasicstylestouseacrossyourwebsite:
Fonts,textsizes,spacing,colours,etc.andputtheminyourstyle.cssfile.
YoualreadyknowenoughCSSfromtheBeginnerandIntermediatecardstowriteyourownstyles,butherearesomethatyoucanplayaround
with.NoticethatItrytomakeheadingsandbodytextnoticeablydifferent.
*{box-sizing:border-box;}
body{font-family:"TimesNewRoman",serif;margin:10px000;padding:010%;}
h1,h2,h3,h4,h5,h6{background-color:#49B749;color:#ffffff;font-family:Helvetica,Arial,sans-serif;padding:0010px10px;width:100%;}
CSSPropertiesInthiscodeI'veusedanumberofCSSpropertiesyou'veseenbefore.However,therearedozensofthem.You'lllearnthemasyouneedthem.Youcanlookthemuponawebsitelikedojo.soy/cssprops
4
ADVANCEDHTML/CSSBASICMENU
Card3of6I'mLearning:HTML
ProducedbyCoderDojoFoundation//@CoderDojo
Thenextfewcardswillshowyouhowtomakeanawesomemenufor
yourwebsitebyapplyingsomecleverstylingtohyperlinks.ThisisacoolerversionofthemenuyoumadewiththeBeginnerSushiCards.
Startbyopeningtemplate.htmlandaddingalistoflinkstotheheaderdivtag,likethis:
<divclass="header"><nav><ul><li><ahref="index.html">Home</a></li><li><ahref="about.html">AboutMe</a></li><li><ahref="projects.html">Projects</a></li></ul></nav></div>
NavTagsThenavtagtellsthebrowser(andtoolsusedbypeoplewhohave
visualimpairments)thatthispieceofthepageisthenavigation,usedtogetaroundthewebsite.
1
Loadtemplate.htmlinyourbrowser.Itdoesn'tlooklikemuch,doesit?Youneedtomakethatlistlookcool!Youcandothis,ofcourse,by
addingsomeclassesandsomeCSS.Addamenuclasstotheultaganda
menu-buttonclasstoeachoftheatags.
2
ADVANCEDHTML/CSSBASICMENU
Card3of6I'mLearning:HTML
ProducedbyCoderDojoFoundation//@CoderDojo
Now,you'regoingtoupdatetheCSSinstyle.cssbitbybit,soyoucanwatchyourchanges.
First,makethelistarrangeitselflikeamenu:
.menu{margin:5pxauto10pxauto;list-style:none;text-align:center;display:flex;justify-content:space-around;}
.menu>li{display:inline-block;}
FlexThedisplay:flexin.menuisprettypowerful.Thedetailsofusing
flextolayoutpageswouldtakeawholeSushiSeriesonitsown,butyoucanlearnmoreatdojo.soy/a-html-flex.
3
You'vegotamenuthatconnectsyourpagesandit'sintherightplace,youcanmakeitcooler!You'vealreadygottheclassesinplace,sonow
youjustneedtoaddsomemoreCSS.You'llfinditonthenextcard!
4
ADVANCEDHTML/CSSAWESOMEMENU
Card4of6I'mLearning:HTML
ProducedbyCoderDojoFoundation//@CoderDojo
Openstyle.cssandaddthefollowing(orchangeitaround,youknowwhatyou'redoingbynow!):
.menu-button{background-color:#0093D5;border:1pxsolid#CCCCCC;border-radius:5px;color:#ffffff;display:inline-block;font-family:"HelveticaNeue",Helvetica,Arial,sans-serif;margin:5px;padding:5px10px;text-align:center;text-decoration:none;}
FontChoiceNoticethatthesamefontsareusedhereasfortheheadingsontherestofthesite.Thishelpsthenavigationstandout.
1
You'regoingtoputinatransition.First,tell.menu-buttonhowtohandle
it,soaddthislinetothe.menu-buttonclassinyourstyle.css:
transition:all0.2sease-out;
Thistellsittotake0.2secondsandtoslowdownneartheend.
2
ADVANCEDHTML/CSSAWESOMEMENU
Card4of6I'mLearning:HTML
ProducedbyCoderDojoFoundation//@CoderDojo
Nowyoujustneedtousethe:hoverselectortochangewhatthebuttonlookslikewhenauserputstheirmousecursoroverit,likethis:
.menu-button:hover{box-shadow:02px2pxrgba(0,0,0,0.2);transform:translateY(-2px);}
ThisgivesthebuttonashadowandmovesitontheY-axis(up/down)by2pixels.
Playwithit!Trychangingthehoverbehaviour.Playwithsize,colourandtime!
3
Nowyou'vegotamenu!Addatitle(h1)andlogo(img),ifyoulike,toyour
header,abovethemenu.Thenadd"Madeby[yournamehere]"tothe
footer.Thetemplate'sdone!Timetobuildsomepageswithit!
4
Savetemplate.htmlandthencopyitscontents.Pastethatinto
index.html,about.htmlandprojects.htmlandsaveallofthem.5
Gotoindex.htmlandaddafewparagraphswelcomingpeopletoyoursite.Maybetellthemwheretheycanlearntobuildoneoftheirown!Nowyou'vegotawebsite!
6
ADVANCEDHTML/CSSFANCYHEADINGS
Card5of6I'mLearning:HTML
ProducedbyCoderDojoFoundation//@CoderDojo
Next,you'regoingtoupdateyourabout.htmlpagetoincludeapictureofyouronlineavatar(ifyoudon'thaveone,justgrabsomethingcoolofftheweb—personally,Iliketousekittenpictures).
Makesurethepictureissquaresoyouturnitintoacircleusingjust
HTMLandCSS!Saveitintoimgasprofile_picwiththecorrectextension(.jpg,.png,etc.dependingonitsformat).
1
Ontheabout.htmlpage,addthesebitsofHTMLtoyourcontentdiv:
<divclass="picture-heading"><h2>WhoamI?</h2><imgsrc="img/profile_pic.[extension]"/></div>
2
Addthefollowingtostyle.csstosetupthebasicsofyourcoolnewheading.
.picture-heading{height:150px;margin:10px0;position:relative;}
Hereyou'resettingposition:relativesoyoucansettheimgandh2tags
tohaveposition:absolute,whichletsyouplacethemoneontopoftheother,withtherightCSS!
3
ADVANCEDHTML/CSSFANCYHEADINGS
Card5of6I'mLearning:HTML
ProducedbyCoderDojoFoundation//@CoderDojo
Next,setthepropertiesontheimageinsidethepicture-heading.Youuse
.picture-headingimg(imgtagsinsidesomethingwiththepicture-headingclass)astheidentifierforthis:
.picture-headingimg{height:150px;border-radius:50%;z-index:40;position:absolute;left:20px;border:2pxsolid#ddd;}
Thereareafewinterestingbitsthistime:
Settingtheborder-radiusto50%makesthepictureround
Thez-indexcontrolswhatappearsoverit.Higheronesgoontop.
Settingthepositiontoabsoluteandthenusingtheleftproperty,to
moveitin20pixelsfromtheleftofthe.picture-heading.
4
Finally,youneedtosetthepropertiesontheheadingitself.
.picture-headingh2{position:absolute;line-height:100px;height:100px;padding:000190px;width:100%;}
5
ADVANCEDHTML/CSSLIGHTBOX
Card6of6I'mLearning:HTML
ProducedbyCoderDojoFoundation//@CoderDojo
Yourwebsiteisreallycomingtogether!It'sstartingtolooklikesomethingaprocoderwouldbuild!Onelasttrickthatyou'llhaveseenonloadsof
websites.It'scalledalightbox:youclickonanimage,orbutton,oranythingreally,andthescreendimsandsomethingelse(oftenabiggerversionofthatimage)appears.
1
You'regoingtobuildthisonyourprojectspage,soyoucancopyitfor
howevermanyprojectsyouhave.Openprojects.htmlandinthecontent
divaddthefollowing(feelfreetouseotherimagesifyouwant!):
<ahref="#box1"><imgsrc="http://placehold.it/150x150text=thumb1"class="thumbnail"></a>
<ahref="#_"class="lightbox"id="box1"><h3>ProjectName</h3><imgsrc="http://placehold.it/400x300?text=box1"><p>Projectdescription</p></a>
Athumbnailisthenamegiventothesmallimagethatisclickedontoshowthelargerimage.You'rejustgoingtouseonefornow,tounderstandhowthisworks,butyoucanuseawholebunchofthemlater,
maybeinatable,toshowoffallyourprojects!
2
ADVANCEDHTML/CSSLIGHTBOX
Card6of6I'mLearning:HTML
ProducedbyCoderDojoFoundation//@CoderDojo
NowfortheCSS.Thereareafewcleverbitsinhere,thatI'llexplain
afterwards.Asusual,thisallgoesinstyle.css:
.lightbox{background:rgba(0,0,0,0.8);color:#fff;height:100%;left:0;position:fixed;text-align:center;text-decoration:none;top:0;visibility:hidden;width:100%;z-index:999;}
.lightbox:target{outline:none;visibility:visible;}
Thelightboxishiddenmostofthetime,byvisibility:hidden
Ithasposition:fixed,whichmeansitwillstayinplaceevenifyouscrollthepage.Withitswidthandheight,ittakesoverthewholepage.
Turnoffthetext-decorationtoavoidunderliningeverythinginside
theatag.
Thelightbox:targetclassonlyapplieswhenthelightboxwasthe
targetofthelasthyperlinkclicked.Soclickinganywherewillswitch
thevisibilitybacktohiddenandhidethelightbox!
3