ART 354    >  Resources

General Resources Available for Our Class

Download the Main Site Root Folder
Needed for ALL PROJECTS.

 
 
 

W3 Schools an excellent resource for HTML, CSS, etc.

 

CSS Tricks an excellent resource for advanced CSS.

 

Firefox Addon Web-Developer

 

Download Normalize


Download Nav Files
 
 
 

Video Resources

Watch Video Lecture Watch Video About Tags and HTML
 
Watch Video Introduction Watch Video Using Google Fonts & CSS
 
 
 
 

 

Reading Materials

Article for Summary 1 - Plan the Perfect Site

 

Chapter One for Summary 2 - Stylin’ With CSS

 
 

Challenge Materials

Download Materials for - Challenge 1

Download Materials for - Challenge 2

Download Materials for - Challenge 3

Note: No materials needed for Challenge 4. Students will build page from scratch

 
 

Code Resources

⇨ Download Menu Icon Folder - Navigation HTML & CSS & PNG image

 
 

Interactive Images

Click here for sample page

 

Viewport Code

Click here for sample page. You can find the complete code in the <head> section of the HTML

 
 

⇨ Download Placed Images File - Placed Images Site Root Folder

To use the "Placed Images Site Root Folder do the following…


  1. Download the above folder
  2. Unzip folder
  3. Take elements from the Placed Images Site Root Folder (images from the "images" folder and place in your Main Site Root Folder etc.)
  4. Place the correct elements in your Main Site Root Folder
 
 

⇨ Download HTML page with Background As Image - Note: CSS code embedded in head

 
 

Copper Summit Materials (For Second Site)

Download Concept Sheet - CopperSummit Concept Sheet

 
 

Download Raw Text Files - CopperSummit Text

 
 

Download Oversized Photos - CopperSummit Photos

 
 

Download Logos / Colors - CopperSummit Brand Elements

 
 

Download Metadata - CopperSummit Metadata

NEWDownload Interactive Site Root Folder - CSS Transitions and other interactive elements

Brand NEWDownload Video Site Root Folder - Video code & file — and the overlapping blending mode

HTML for video site:

<div class="overlay">

<video muted="muted" autoplay="autoplay" loop="loop" > <source src="videos/IMG_7991.mp4" type="video/mp4"> </video>

CSS for video site:

* { margin: 0; padding: 0; } video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; z-index: 0; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #03a9f4; mix-blend-mode: overlay; z-index: 20; }

 
 

NEW - Project 2nd Site Checklist Download here

 
 

NEW - Project 2nd Site Step by Step Download here

 
 

NEW - Project 2nd Site Timeframe Download here

 
 

⇨ Interactive Carousel Site Root Folder Download Interactive Carousel

 
 

⇨ Enlarging Photos Site Root Folder Download Enlarging Photos Folder

 
 
 

NEW - Link to Interactive Images Page

 

NEW - Link to Complex Footer Page