Final Exam: Practical

Resources

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 fillet.com.br InfoQuest Inspiration: Sticky Elements  Grovemade+ : Top navigation sticks after scrolling Nishiyama: Top Read More

jQuery demos – Codepen Collection

Resources

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

CSS Grid Fun Day

Resources

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

Resources

Check out this demo on Relative Font Sizing

Getting to know Sublime Text

Resources

 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

Resources

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

Pre-Launch Checklist

Resources

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

Resources

 

IA and Wireframe examples

Resources

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

Resources

Check out the Magnific documentation Grab the starter Files!

CSS Escape Entity Cheat Sheet

Resources

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

Resources

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