Final Exam: Practical


For this exam, you will write the HTML and CSS to render this design as accurately as possible (click to enlarge). Execute the following design in Codepen: Specs: The white container is a centered, fluid box that is never narrower Read More

Scroll effects

Class Notes, Resources

Today we’ll cover some useful and simple jQuery functions for controlling scrolling – scrollTop() and offset()! Inspiration: Parallax scrolling Websites Boy Coy Apps Cyclemon Beatbox Academy InfoQuest Inspiration: Sticky Elements  Grovemade+ : Top navigation sticks after scrolling Nishiyama: Top Read More

jQuery demos – Codepen Collection


Here’s a collection of all the basic demos we’ve done together in class, plus some extras

CSS Grid Fun Day


Check out these resources: CanIUse CSS Grids? CSS Tricks: Complete guide to Grids CSS Grid Terminology Tuts+: CSS Grid guide with Examples Game: Grid Garden

Relative font sizing Demo with Ems


Check out this demo on Relative Font Sizing

Getting to know Sublime Text


 Get Sublime Text Get Melissa’s Color Schemes. Install them in  Sublime Text\Packages\User\Color Schemes (make this folder) In Sublime Text, hit Ctrl+Shift+P. type “Install Package Control“ Install some helpful packages (Hit Ctrl+Shift+P and type “install Package”

Dropbox + free space


Sign up for dropbox!  It’s a free and easy way to move your class files with you.

Pre-Launch Checklist


Before you launch your Neighborhood Camera Shop site, use this checklist to make sure you’ve covered all the details!

Recommended Link:

Why Wireframe?

Video: 13 ways designers screw up Client Presentations



IA and Wireframe examples


Information Architecture (IA, or Architecture for short) is a map outlining a “big picture” view of your website. The objective of the Architecture is to achieve content organization. Information Architecture has no reflection on the way individual pages will look. Read More

Magnific Popup


Check out the Magnific documentation Grab the starter Files!

CSS Escape Entity Cheat Sheet


Entity Cheat sheet is here! Useful for adding arrows and other symbol glyphs using :before and :after elements

Special Characters

HTML Entity Reference Chart

Layout Challenge


Download the zipped folder below, extract, and place in your name folder. You will add CSS to these HTML pages to make their layouts match these Wireframes. Complete as many as you can in class. The HTML has been written Read More