 Word doc for you to download › Link at the beginning of class › 10 Questions › Answers to be added inline  Post to Sakai when completed › No resubmits  Section-specific exam  Extra Space › 12:30 FB 007 › 2:00 FB 141

 Just what you have already been doing › Writing and correcting HTML and CSS  Objective: to see if you can do the tasks in a limited time on your own  Open computer and notes › You can use any tools at your disposal (except chat)

 When class begins have ready › Codepen › Komodo › Link to validators  How to proceed › Build your answer in one of the tools › Validate it › Copy and paste into test

 Three possible models › NEXT and PREV (when fixed order) › Navigation bar to the parts › Single page with links (hub & spokes)  When use?  Mix and match? Multiple ways?

 Link to the exact spot › Heading, not paragraph › Top of the page  Make it easy to get to the navigation (top)  TOO MUCH NAVIGATION IS AS BAD AS NONE!  NEVER DEPEND ON BROWSER BACK BUTTON

 Consistent placement  Top, bottom, both  Often at the left and right edges  Next class  Structurally keep them together  Text  Images

 IDENTICAL CONTENT ON ALL PAGES › May want to distinguish current page  Horizontal or Vertical  Horizontal best practice › separate section: nav › inline list › top (below title) or top and bottom  Vertical two styles › Table of contents › Side bar (next week)  Better for long lists  Takes width

 Should you distinguish?  Two different bars › Horizontal (site) and vertical (page) › Color, size, font differentiation

 Remove bullets from list li { list-style-type: none; }  Make the list horizontal li { display: inline; }  Position where you want it (left, right, center, top, bottom)

 Format the individual link boxes li { border: 1px solid black; padding: 10px; margin: 0px 1px 0px 1 px; }  Padding will space within box, margin between boxes › May want to make it negative  Size of box › Vertical: line-height › Horizontal: based on text or define width

 Focus on layout  Simple is best  Basic parts › Header › Nav(igation) – may be in header › Section or div for main body › Footer

 Recommendation › Keep nav bar code the same on all pages › Simple copy and paste  This page: › Can use href=“#” or disable link › But then have to remember to change it  Exception: › If you want to format this page differently

 Margins  Positions  Heights

 How wide should your elements be? › Consistency › Enough white space  People have spent time working on it › 978 model 978 model  Example Example