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

Introduction to Javascript

Class Notes

Documenting Visual Design

Class Notes

HTML & CSS Tables

Class Notes

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

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

CSS and Images

Class Notes

CSS Layout Techniques II: Position

Class Notes

CSS Layout Techniques 1: Floats

Class Notes

Today’s Demo: Fork this Codepen  

CSS Basics

Class Notes

Click the thumbnail for the slideshow

Semantic HTML

Class Notes

  Today’s Exercise Files: View on Google Docs Helpful Reference “Cheat Sheets”: