Web Design 2

Agendas, due dates and grades will be posted on Blackboard

Handouts:

• Week 1 — HTML Review PDF
• Week 2 — Div Layouts & Box Model
• Portage Trail Outfitters Project Brief
• Week 3 — Donains, Hosting and Mobile-First discussion
• Week 4— Fluid Grids, Media Queries
  • Media Queries explained: https://helpx.adobe.com/dreamweaver/how-to/media-queries.html
• Week 5a — UL Navigation Review
Week 5b — cPanel & FTP in Dreamweaver
• Week 7 - Widgets
• Week 9 SEO & Google Analytics
  • Getting Started with Analytics - How to
  • Google Analytics Wed Site
• Week 11 - Image Slider and Responsive Nav
  • Nivo Slider site
• Week 11 - Responsive Nav
• Week 12 - Data Tables
• Week 13 - Forms

Final Project

• Final Project Brief PDF

Project: Canoe Outfitter

• Portage Trail Project Brief
• Site Contents (docx)
• Packing List (pdf)

Drop Down Menus

• Horizontal Drop Down Menu Demo
• Vertical Pop Out Menu Demo

Extras

Responsive Design Patterns http://bradfrost.github.io/this-is-responsive/patterns.html

Border Box — Forcing box sizing to act normal http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Beautiful Web Fonts: http://hellohappy.org/beautiful-web-type/

Icon Fonts: http://fortawesome.github.io/Font-Awesome/

Test your page speed: http://www.webpagetest.org

Responsive site device simulator: http://responsive.pixeltuner.de

Shadow Box: shadowbox-js.com

Nivo Slider: https://github.com/gilbitron/Nivo-Slider

Favicon generator: http://realfavicongenerator.net

User interface best practices: http://www.goodui.org

Crazy CSS3 patterns: http://lea.verou.me/css3patterns/

CSS gradient generator: http://www.colorzilla.com/gradient-editor/

CSS transparent colors: http://www.cssportal.com/css3-rgba-generator/

CSS box shadow generator: http://www.cssportal.com/css3-box-shadow-generator/

CSS round corners: http://www.cssportal.com/css3-rounded-corner/

Entity lookup: http://entity-lookup.leftlogic.com