♻️

Site #1: Student Site

• Student Site Home Page
• Student Site ART 128

Site #2: Site Base

• Base Blank
• Base Content
• Base Layout
• Base Structure
• Base Toggle Nav
• Base Mulitipages (w/Subpages)
• Base Singlepage

Site #3: Custom Site

Landing page for Criminal Podcast Spin-off

Proposal Deck

Lo-fi Wireframe

Wireframe A: Stacked & Dense

wireframe B: Breezy & Flowy

Prototype

Prototype w/B-a (Black-static)

Prototype w/B-b (Blue&Yellow)

Prototype w/B-c (Black-diagonal)

Coded Site

Draft R1

Draft R2

FinalView Code

Tests & Exercises

• HTML markup exercise
• Test 01 - Understanding Div
• Test 02 - Block vs Inline-Block
• Test 03 - Box Sizing
• Test 04 - Common Use of Span
• Test 05 - Centering
• Test 06 - Absolute Positioning
• Test 07 - Structural Elements
• Test 08 - Inline vs Background Images
• Test 09 - Media Queries and Container
• Test 10 - Custom Grid System From Scratch
• Test 11 - Inline Blocks
• JavaScript Exercise 01 - Simple Toggle Class On Click
• JavaScript Exercise 02 - Toggle Class On Click On Multiple Buttons
• JavaScript Exercise 03 - Simple Show Hides Using Toggle Class
• JavaScript Exercise 04 - Simple Show Hides Using Data Attribute
• Anchor Link Test 01 - Using JS/Benjamin De Cock’s Smooth Scroll
• Anchor Link Test 02 - Using CSS
• Site Base Test: Sticky Header Issues (in-class fork)