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

Makeup Homework or extra credit due by July 26

Assignments

If you missed any homework or wish to re-submit for the possibility of earning more points, the deadline is Thursday, July 26  by 10pm. Email me your completed work as a .zip file to re-submit.   Extra credit is awarded Read More

Sorting and filtering with MixItUp

Class Notes

Some resources for today: JQuery basic demo of filtering items Slightly more slick demo using jQuery filter() Mixitup plugin for more smooth implementation Mixitup Codepen MixItUp Starter Pen (fork this!)

jQuery Plugins

Class Notes

Simple JQuery Plugins for slideshows: ResponsiveSlides.js: incredibly easy to implement and customize. Only includes fade effect Grab these files for today’s demo  

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

Introduction to Javascript

Class Notes

Documenting Visual Design

Class Notes

HTML & CSS Tables

Class Notes

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

Displaying and Styling Forms

Class Notes

Codepen Inspiration: Beautiful Forms Collection Tonight’s Notes:  

Flexbox Fun-day

Class Notes

Flexbox Resources: Flexbox Froggy – a “game” to practice Flexbox properties Flexbox Defense – another game to practice! CSS Tricks: Complete guide to Flexbox What the Flexbox? Free Video Series from Wes Bos CanIUse Flexbox? SliceJack: Intro to Flexbox Codepens to Read More

Relative font sizing Demo with Ems

Resources

Check out this demo on Relative Font Sizing

Introduction to CSS3 Media Queries

Class Notes

Related Reading: Chapter 12, “Style Sheets for Mobile to Desktop,” Page 309 Check out the mockup for today’s demo

Website Workflow Notes

Class Notes

I highly recommend checking out the “Dear Design Student” series on Medium