GENERAL RESOURCES

Download the Main Site Root Folder — needed for all projects.

 

W3 Schools — our required online reference for HTML, CSS, and more.

CSS-Tricks — an excellent resource for advanced CSS.

Firefox add-on: Web Developer

 

Download Normalize

Download Nav Files — navigation HTML, CSS & PNG icons

 

VIDEO RESOURCES

About Tags & Compound Rules

 

Using Google Fonts & CSS

 
 

CHALLENGE MATERIALS

Each challenge revisits the basics as an in-class refresher, usually a week or two after the material was first taught.

Download materials for — Challenge 1 (Sandwich & Site Root Folder)

Download materials for — Challenge 2 (HTML Errors)

Download materials for — Challenge 3 (CSS Errors)

Challenge 4 — no materials needed; students build the page from scratch.

 

CODE RESOURCES

⇨ Menu Icon Folder — navigation HTML, CSS & PNG image

 

⇨ Placed Images Site Root Folder

To use the Placed Images Site Root Folder:

  1. Download the folder above.
  2. Unzip it.
  3. Take the elements you need (images from the images folder, etc.).
  4. Place them into your own Main Site Root Folder.
 
 

COPPER SUMMIT MATERIALS (Second Site)

Copper Summit Concept Sheet

Copper Summit Text — raw text files

Copper Summit Photos — oversized photos

Copper Summit Brand Elements — logos & colors

Copper Summit Metadata

 

Second Site Checklist

Second Site Step-by-Step

Second Site Timeframe

 
 

GOING FURTHER (Beyond the Six Weeks)

These are optional, more advanced techniques — interactivity, video, and image effects. They go beyond the six hand-coding weeks and are a good place to explore once AI becomes part of your workflow.

 

⇨ Interactive Site Root Folder — CSS transitions & other interactive elements

⇨ Interactive Carousel Site Root Folder

⇨ Enlarging Photos Site Root Folder

⇨ Placed Images Site Root Folder — see Code Resources above

⇨ Background as Image — CSS embedded in the head

 

Video Background & Blend Mode — Download Video Site Root Folder

HTML:

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

CSS:

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;
}

 

Interactive Images — sample page

Viewport Code — sample page (complete code is in the <head>)