ADVANCED HTML/CSS - kata. ?· ADVANCED HTML/CSS SITE SKELETON Card 2 of 6 I'm Learning: HTML Produced…

Download ADVANCED HTML/CSS - kata. ?· ADVANCED HTML/CSS SITE SKELETON Card 2 of 6 I'm Learning: HTML Produced…

Post on 25-Jun-2018

212 views

Category:

Documents

0 download

TRANSCRIPT

  • 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:

    cssWhereyou'llputyourstylesheets.Veryusefultokeepthemorganisedifyouhaveseveralofthemforthingslikedifferentthemes,page-specificstyles,etc.

    imgWhereyou'llputanyimagesyouneedtoputonyourwebsite,likealogo,photos,orscreenshotsofyourprojects.

    3

    https://coderdojo.com/https://twitter.com/CoderDojohttp://dojo.soy/a-html-fin

  • ADVANCEDHTML/CSSSETTINGUPYOURSITE

    Card1of6I'mLearning:HTML

    ProducedbyCoderDojoFoundation//@CoderDojo

    Thencreateafewfilestoworkfrom:

    Intheadvanced_sitedirectory(therootdirectoryofyourwebsite)createemptyfilescalled:

    template.htmlThetemplatepagethatyou'llbecopyingintoallthenewpagesyoucreate.

    index.htmlThehomepageofyourwebsite.

    projects.htmlThepageyou'lllistallyourcodingprojectson.

    about.htmlApagewhereyou'llincludealittleinformationaboutyourself.

    Intheadvanced_site/cssdirectorycreateanemptyfilecalled:

    style.cssTheCSSfileyou'regoingtoputallyourstylesinto.

    CopyingtemplatesCopy-pastingtemplatecodeisnotthewayprofessionalweb

    developerswoulddoit,butyou'llneedtolearnJavaScriptorsome

    otherprogramminglanguagelikePythonorRubybeforeyoucanlearntheevencoolerwaytodowebpagetemplates.

    4

    You'vegotallthefilesinplacenow.Intherestofthecardsyou'llbefillingthemwiththecodethatmakesupyourwebsite!Puttingtogetheraskeletonlikethisisagoodwaytostartyourbigwebsiteprojects.Ithelpsyourememberallthepiecesyoumeanttoincludelater,whenyou'redeepintothecode.

    5

    https://coderdojo.com/https://twitter.com/CoderDojo

  • ADVANCEDHTML/CSSSITESKELETON

    Card2of6I'mLearning:HTML

    ProducedbyCoderDojoFoundation//@CoderDojo

    Onthiscard,you'regoingtosetupyourtemplatepage.First,open

    template.htmlandcreatetheoutlineofastandardhtmlfile:

    1

    Now,includeyourstylesheetintheheadsection,andaddaplacetoput

    thetitlesofyoupage.Markitwithacomment.

    2

    Next,createthethreedivtagsthatalmosteverywebpagehas.Givethem

    classestomatchtheirroles(e.g.class="header"):

    Firstaheaderdiv:Containsthemenuandwebsitetitle

    Thenacontentdiv:Wherethemaincontentofthepage(likeyourgalleryofprojects)goes.

    Finally,afooterdiv:Containslessimportantorobviouslinkstothingslikea"contactme"page.

    3

    https://coderdojo.com/https://twitter.com/CoderDojo

  • 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

    https://coderdojo.com/https://twitter.com/CoderDojohttp://dojo.soy/cssprops

  • ADVANCEDHTML/CSSBASICMENU

    Card3of6I'mLearning:HTML

    ProducedbyCoderDojoFoundation//@CoderDojo

    Thenextfewcardswillshowyouhowtomakeanawesomemenufor

    yourwebsitebyapplyingsomecleverstylingtohyperlinks.ThisisacoolerversionofthemenuyoumadewiththeBeginnerSushiCards.

    Startbyopeningtemplate.htmlandaddingalistoflinkstotheheaderdivtag,likethis:

    HomeAboutMeProjects

    NavTagsThenavtagtellsthebrowser(andtoolsusedbypeoplewhohave

    visualimpairments)thatthispieceofthepageisthenavigation,usedtogetaroundthewebsite.

    1

    Loadtemplate.htmlinyourbrowser.Itdoesn'tlooklikemuch,doesit?Youneedtomakethatlistlookcool!Youcandothis,ofcourse,by

    addingsomeclassesandsomeCSS.Addamenuclasstotheultaganda

    menu-buttonclasstoeachoftheatags.

    2

    https://coderdojo.com/https://twitter.com/CoderDojo

  • 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

    https://coderdojo.com/https://twitter.com/CoderDojohttp://localhost:9080/sushi/dojo.soy/a-html-flex

  • 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

    https://coderdojo.com/https://twitter.com/CoderDojo

  • 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

    https://coderdojo.com/https://twitter.com/CoderDojo

  • ADVANCEDHTML/CSSFANCYHEADINGS

    Card5of6I'mLearning:HTML

    ProducedbyCoderDojoFoundation//@CoderDojo

    Next,you'regoingtoupdateyourabout.htmlpagetoincludeapictureofyouronlineavatar(ifyoudon'thaveone,justgrabsomethingcooloffthewebpersonally,Iliketousekittenpictures).

    Makesurethepictureissquaresoyouturnitintoacircleusingjust

    HTMLandCSS!Saveitintoimgasprofile_picwiththecorrectextension(.jpg,.png,etc.dependingonitsformat).

    1

    Ontheabout.htmlpage,addthesebitsofHTMLtoyourcontentdiv:

    WhoamI?

    2

    Addthefollowingtostyle.csstosetupthebasicsofyourcoolnewheading.

    .picture-heading{height:150px;margin:10px0;position:relative;}

    Hereyou'resettingposition:relativesoyoucansettheimgandh2tags

    tohaveposition:absolute,whichletsyouplacethemoneontopoftheother,withtherightCSS!

    3

    https://coderdojo.com/https://twitter.com/CoderDojo

  • 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

    https://coderdojo.com/https://twitter.com/CoderDojo

  • 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!):

    ProjectName

    Projectdescription

    Athumbnailisthenamegiventothesmallimagethatisclickedontoshowthelargerimage.You'rejustgoingtouseonefornow,tounderstandhowthisworks,butyoucanuseawholebunchofthemlater,

    maybeinatable,toshowoffallyourprojects!

    2

    https://coderdojo.com/https://twitter.com/CoderDojo

  • 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

    https://coderdojo.com/https://twitter.com/CoderDojo