Fall 2020

Web Design 2

VC238

Course Calendar

COURSE WEEK ::

01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11

Calendar Notes:

  • Exercises are homework assignments that are due at a future class period, while Lab Exercises are assignments that should be worked on and completed during the current class period. Labs are activities we will complete in class.
  • Reading and online videos should be read/viewed before the next class after they are assigned.

Week 01 | Course Introduction / Information Architecture

Tuesday :: 09.29.2020

Welcome Course Introduction and Welcome
Review of Course Syllabus and Calendar
Online Demo Class Web Server Orientation & Setup
File Naming & Root Folder Structure Review
Exercise HTML Landing Page & Folder Organization
Challenge Top Ten List
Resources Class Notes: File Naming, Structure, & SFTP
Exercise: 01 HTML Landing Page & Folder Organization
Challenge: 01 Top Ten List

Thursday :: 10.01.2020

Zoom Lecture Writing Creative Briefs
Information Architecture & Site Maps
Online Lab Object Categorization
Project Intro to Creative Brief & Information Architecture Component of Surf City Beach Cruisers Website Project
Resources Class Notes: Creative Briefs & Information Architecture
Project: CB & IA for Surf City Beach Cruisers

Week 02 | HTML / Responsive Web Design

Tuesday :: 10.06.2020

Due HTML Landing Page & Folder Organization Exercise
Zoom Lecture Standards-based Web Design Revisited: Browser wars, DOCTYPEs and rendering engines.
Understanding & Using Online Validation Services & Web Inspectors
Video The Long Web (Jeremy Keith)
Reading Responsive Web Design Chapters 1 & 4
The State of Web Browsers —  2018 Edition (Ferdy Christant)
The State of Web Browsers —  2019 Edition (Ferdy Christant)
Resources Class Notes: DOCTYPE, Rendering Engines, & Web Inspectors (pdf)
Slides: Web Standards (pdf)

Thursday :: 10.08.2020

Due Top Ten List Challenge
Zoom Lecture Introduction to Responsive Web Design
Reading Responsive Web Design Chapters 2 & 3
Resources Class Notes: Responsive Web Design (pdf)
Slides: Responsive Web Design (pdf)

Week 03 | Responsive Web Design

Tuesday :: 10.13.2020

Online Advanced Formatting with CSS3 Properties
Challenge Keep Calm and Code On
Video The CSS3 Experience (Dan Cederholm)
Resources Class Notes: Cascading Style Sheets, Version 3.0 (pdf)
Challenge: 02 Keep Calm and Code On

Thursday :: 10.15.2020

Due Creative Brief & Information Architecture Component of Surf City Beach Cruisers Website Project
Zoom Lecture Media Queries: Adjusting layout for difference devices.
Project Introduction to Visual Design Template Component of Surf City Beach Cruisers Website Project
Video A Dao of Flexibility (Ethan Marcotte)
Reading Responsive Web Design Chapter 5
CodePen Responsive Web Design CodePen Collection
Resources Class Notes: Coding for Responsive Web Design (pdf)
Project: Visual Design Template Component

Week 04 | Responsive Web Design

Tuesday :: 10.20.2020

Zoom Lecture CSS Layout Techniques for Responsive Web Design
Exercise Designing with Media Queries
Video Rolling Up Our Responsive Sleeves (Ethan Marcotte)
Resources Exercise: 02 Designing with Media Queries

Thursday :: 10.22.2020

Due Designing with Media Queries Exercise
Online Lab Designing Navigation for Mobile
Lab Exercise Responsive Conversion & Navigation Styling
Resources Exercise: 03 Responsive Conversion & Navigation Styling

Week 05 | Exam / Critique

Tuesday :: 10.27.2020

Due Keep Calm and Code On Challenge
Online Exam Over all course class demonstrations, projects, labs, and homework assignments
Challenge Header & Menu Coding
Resources Challenge: Header & Menu Coding

Thursday :: 10.29.2020

Due Round One of Visual Design Component of Surf City Beach Cruisers Website Project
Online Critique Individual Critique of Surf City Beach Cruisers Website Design Component
Video Mobile First Responsive Web Design (Jason Grigsby)

Week 06 | TRansitions & Transformations

Tuesday :: 11.03.2020

Zoom Lecture CSS3 Transitions, Transformations, & Animations
CodePen CSS Animation Collection
Exercise Working with CSS Transition, Transforms, & Animations
Resources Class Notes: CSS3 Transitions, Transformations, & Animations (pdf)
Exercise: 04 Working with CSS Transition, Transforms, & Animations

Thursday :: 11.05.2020

Due Round Two of Visual Design Component of Surf City Beach Cruisers Website Project
Critique Group Critique of Design Component of Surf City Beach Cruisers Website Project

Week 07 | HTML Forms

Tuesday :: 11.10.2020

Due Header & Menu Coding Challenge
Zoom Lecture Introduction to HTML Forms: Syntax, function, & data submission.
Online Lab Structuring HTML Forms
Resources Class Notes: Introduction to HTML Forms (pdf)
Slides: HTML Forms (pdf)

Thursday :: 11.12.2020

Due Working with CSS Transition, Transforms, & Animations Exercise
Final Surf City Beach Cruisers Website Project Visual Designs
Lab In-Class Time to Complete Surf City Beach Cruisers Template Project

Week 08 | HTMl Forms / Advanced Selectors

Tuesday :: 11.17.2020

Zoom Lecture Layout Techniques for Form Elements
Lab Setting Up Form Submissions
Project Introduction to Website Production Component of Surf City Beach Cruisers Website Project
Exercise Creating & Styling HTML Forms
Challenge Email List Signup
Resources Exercise: 05 Creating & Styling HTML Forms
Challenge: Email List Signup
Project: Production Component of Surf City Beach Cruisers Website

Thursday :: 11.19.2020

Lecture Advanced CSS Selectors: Pseudo-classes & Pseudo-elements
Online Lab Creating Image Rollovers with CSS Sprites
Resources Class Notes: Pseudo-classes, Pseudo-elements & Advanced Selectors (pdf)

Week 09 | Web Components

Tuesday :: 11.24.2020

Due Creating & Styling HTML Forms Exercise
Zoom Lecture Introduction to Web Components, Layout Primitives, & BEM Naming
Links Every Layout
Intro to BEM Naming

Thursday :: 11.26.2020 | No Class — Thanksgiving Holiday

Week 10 | Surf City Beach Cruisers Project

Tuesday :: 12.01.2020

Due Email List Signup Challenge
Critique Individual Critiques of Work-in-progress for Surf City Beach Cruisers Website Project

Thursday :: 12.03.2020

Exam Over all course class demonstrations, projects, labs, and homework assignments.
Lab Open lab time to work on Surf City Beach Cruisers Website Project

Week 11 | Finals Week

Tuesday :: 12.08.2020 (12:00 – 1:50 PM)

Critique Presentation and Critique of Surf City Beach Cruisers Website Project