advanced html/css - kata.coderdojo.comkata.coderdojo.com/images/5/5f/advanced_html_css_sushi.pdf ·...

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

https://coderdojo.com/

https://twitter.com/CoderDojo

http://dojo.soy/a-html-fin

ADVANCEDHTML/CSSSETTINGUPYOURSITE



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



Onthiscard,you'regoingtosetupyourtemplatepage.First,open

template.htmlandcreatetheoutlineofastandardhtmlfile:

<!DOCTYPEhtml><html><head></head>

<body></body></html>

1

Now,includeyourstylesheetintheheadsection,andaddaplacetoput

thetitlesofyoupage.Markitwithacomment.

<head><title></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



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



http://dojo.soy/cssprops

ADVANCEDHTML/CSSBASICMENU



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



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



http://localhost:9080/sushi/dojo.soy/a-html-flex

ADVANCEDHTML/CSSAWESOMEMENU



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



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



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



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



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



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



advanced html/css - kata.coderdojo.comkata.coderdojo.com/images/5/5f/advanced_html_css_sushi.pdf ·...

Documents