Checklist for Final Portfolio

THIS SEMESTER'S ASSIGNMENTS

Assignment 1
Assignment 2

LAST SEMESTER'S ASSIGNMENTS

Assignment 1
Assignment 2

ARCHITECTS' WEBSITES

LANDSCAPE ARCHITECTS' WEBSITES

WIDGETS FOR MENUS, SLIDERS, SCROLLING and PROJECT PAGES

WIDGETS FOR MENUS

• Loading a multi-page website
• Menus

WIDGETS FOR SLIDERS (SLIDESHOWS)

• Cycle 2 slide shows with explanations
• Cycle 2 minimal slide shows (no explanations)
  
• Download zipped file of Cycle 2 minimal slide shows

WIDGETS FOR PARALLAX SCROLLING

• Parallax scrolling tutorial from 1stWebesigner.com


• What is parallax scrolling -- with tutorial video


• Full page parallax scrolling


• Simple parallax scrolling using parallax.js


• Simplest parallax scrolling
• Zipped folder of all files for simplest parallax scrolling


• Simple CCS-only parallax scrolling
• Zipped folder of all files for simple CCS-only parallax scrolling


• World Wide Web Consortium (W3C) example of simple JS and CSS parallax scrolling
• Zipped folder of all files for W3C example of JS and CSS simple parallax scrolling


• More complex CCS-only parallax scrolling
• Zipped folder of all files for more complex CCS-only parallax scrolling


• AcidJs CCS-only parallax scrolling
• Zipped folder of all files for AcidJs CCS-only parallax scrolling

WIDGETS FOR ANIMATED BUTTONS IN PROJECTS PAGES

Adapting the projects page widget used by Bohlin, Cywinski and Jackson

• Making image fade buttons -- Part 1
• Making image fade buttons -- Part 2

Adapting the projects page widget used by IDU Architects

• IDU Architects project page (and home page) -- original
• IDU Architects project page (and home page) -- prepared for re-use
• Re-use of IDU project page for Norman Foster's buildings
• Zipped folder of 500x500 images of Norman Foster's buildings
• Zipped folder of related CSS and JS files
• Zipped folder of all files needed for the Norman Foster version of the project page

Projects page widgets with scale-on-hover buttons with animated text overlays

• Animated buttons that scale images on hover and overlay text
• Zipped version of all files needed for animated buttons that scale images on hover and overlay text
• How to make a variety of project pages with animated buttons

BACKGROUND GRAPHICS

Full-screen background image

• Background image type 1 version 2
• Background image type 1 version 3
• Background image type 3 version 2
• Zipped folder with all background image files

Full-screen background slideshow

• Slideshow type 1 version 2
• Slideshow type 1 version 3
• Slideshow type 3 version 2
• Slideshow type 3 version 3
• Zipped folder with all slideshow files

Full-screen background video

• Full-screen background video type 1
• Full-screen background video type 2
• Zipped folder with all background video files
• More background videos
• Websites with free videos

WIDGETS FOR SCROLLSPIES

• Some ScrollSpies

LIGHTBOXES

Two different approaches to lightboxes

• CSS3 Lightbox
• Zipped folder of all files for CSS3 Lightbox


• jQuery Lightbox Gallery
• Zipped folder of all files for jQuery Lightbox Gallery

Some more lightboxes

FLEXSLIDER

• FlexSlider 2 slide shows
• FlexSlider 2 minimal slide shows (no explanations) LARGE
• Download zipped file of FlexSlider 2 minimal slide shows LARGE
• FlexSlider 2 minimal slide shows (no explanations) SMALL but adjustable in size
• Download zipped file of FlexSlider 2 minimal slide shows SMALL but adjustable in size

TEXT IN CSS

Google Web Fonts

• Google Fonts site -- 853 fonts you can use for free
• How to use Google Fonts -- from W3Schools.com
• Examples of one way to include Google Fonts:
  • Example 1
  • Example 2
  • Example 3
• Examples of another way to include Google Fonts:
  • Example 4
  • Example 5

The Box Model

• A Box with width specified
• A Box with background color specified
• A Box with padding widths specified
• A Box with a specified border
• A Box with margin widths specified
• W3Schools box model tutorial on YouTube.com

Centering text blocks

• Center text block 1
• Center text block 2
• Center text block 3

The text-align property

• Text-align 1
• Text-align 2
• Text-align 3

Box positioning

• CSS position property
• Text box positioning 1
• Text box positioning 2
• Text box positioning 3
• Text box positioning 4

Layout tutorials

• Introduction to CSS
• Introduction to CSS layout
• Learn CSS layout
• HTML Layouts -- from W3Schools.com
• HTML Responsive Web Design
• HTML block-level elements

Layout examples

• A Box in CSS
• Multiple Boxes in CSS
• Text Boxes in CSS - 1
• Text Boxes in CSS - 2
• Text Boxes in CSS - 3

• CSSmatic.com
  
• Colorzilla.com
  
• Virtuosoft.com
  

• Previous page button
• A simple home button
• A home button for a lightbox

FONT AWESOME ICONS

• All 675 Font Awesome icons
• Intro to Font Awesome icons -- from W3Schools.com
• Font Awesome Web Application Icons -- from W3Schools.com

SIDE MENUS

• Vertical sidebar icon menu with tooltips     zipped folder for this menu
• Sidebar hover icon menu     zipped folder for this menu
• jQuery accordion menu  CSS file for the jQuery accordion menu

PAGE TRANSITIONS

• layout-with-fancy-page-transitions-and-off-canvas-menu     zipped folder for this widget
• expanding-card-page-transition-effect     zipped folder for this widget
• thumbnail-to-fullscreen-page-transition     zipped folder for this widget
• transitions menu     zipped folder for this widget
• sampler of page transitions     zipped folder for this widget

COMBINING WIDGETS

• Combining menus with background graphics
• Combinations of menus and automatic scrolling
• Combining parallax scrolling and animated buttons     download files
• FIXING BROKEN COMBO:
  • TO FIX: Animated buttons are wrong when added to parallax scroll
  • FIXED: Animated buttons work correctly within parallax scroll

SOME PAST EXAMPLES OF STUDENT PORTFOLIOS FROM THIS COURSE