Schedule 2020 – Section 1 – DTC 355: Web Design & Development

Blackbird Project – 10%
Format and style Wallace Steven’s poem “Thirteen Ways of Looking at a Blackbird” in a one page HTML document with an external CSS stylesheet. Your pages must have at least the following :

one external link
one internal or anchor link
one image insert
one background image

The assignment will be graded based on the functional and proper uses and syntax of HTML mark-up and CSS styles. Though I am not grading on the quality of your design and layout, please put some effort into a pleasing look. Extra credit will be given if your design attempts to reflect an interpretation of the poem’s meaning!

HTML/CSS Zip

Week 5— Color, Imagery, Type, Layout

CodeAcademy:CSS Display and Positioning, Color, Typography

T February 11

Quiz #1: HTML

Blackbird Project List

Class Notes – week 5

CSS3 Generator

Layout & Positioning

TH February 13

WORKSHOP: Blackbird Project (optional class)

Week 6—Recipe Project: Visual Hierarchy

CodeAcademy: CSS Grid

Assignment: Choose a recipe and gather text/ images. Bring to class by Thursday

Reading (optional):

T February 18

Positioning: Class Notes – week 5

Class Notes – week 6 – Design Principles – Visual Hierarchy Primer

Recipe Hierarchy

Recipe – 15%

Design and build a single, responsive recipe page with images, a layout with distinct areas for content, a color scheme (from a color tool), and typography that considers the visual hierarchy of a recipe’s content blocks.

Your grade in this assignment will be based on your understanding of visual hierarchy (layout, color, typography) and the fundamentals of responsive design (html/css code, media queries).

———

WORKSHOP: Blackbird CSS questions

Mr. Potatohead – extra credit (5pts) – upload to server and send me the url

TH February 20

Due: Blackbird project

Blackbird Project List

CSS Grid Demo / Complete Guide to Grid

CSS Quiz Review:
Quiz Review

Responsive Design – Class Notes

Week 7—Recipe Project: Responsive Design

FreeCodeCamp: Responsive Design tutorial

Reading: Overview on W3Schools tutorial: CSS Responsive

T February 25

CSS Quiz Review:
Quiz Review

Class Notes – week 7

Eric Meyer’s Reset 2.0

Recipe starter page

TH February 27

Quiz #2: CSS LINK

Blackbird feedback –Validate!

Responsive Design tutorial

Eric Meyer’s Reset 2.0

Recipe HTML and CSS

Build Recipe HTML/CSS

*Mr. Potatohead – extra credit (5pts)

Week 8 —Recipe Project: Typography

Reading: Typography in 10 minutes (optional: explore the online book )

T March 3

CodeAcademy – HTML, CSS and Responsive tutorials complete!
I will check scores in class

Principles of Typography | Typography tutorial
Class Notes – week 8

TH March 5

Color slides

Adobe Kuler – color schemes
CSS Grid Layout

WORKSHOP: Recipe Projects

Week 9—Narrative Design

Assignment: Come to class on Thursday with a Narrative Project idea

T March 10

Narrative Project Notes

Narrative Project 15%

Build a responsive, 1-5 page website that follows a sequential path or linear progression. For example: a how-to sequence or instruction, a story, a comic, a brief biography, a narrative about a past event. You must include text, images and/or other media, like audio, video or gif animations. In class, we will discuss narrative sequencing, navigation, visual rhythm and hierarchy along with the basics of responsive design and scroll animations.

Your grade in this assignment will be based on your effort and thoughtful consideration of:

responsive design
typography
html and css syntax and formatting
sequential content (text and media)

Brainstorm ideas…

WORKSHOP: Recipe Projects

validate you project
make sure your stylesheet is mobile first, followed by media queries for larger sizes
do not copy all css for media queries, only css that you want to change
you need at least one media query, but you may have as many as you need
may attention to visual hierarchy at all levels
style links
have a footer with link(s) to your source(s)
format your html and css so that it is readable: tab in for nested elements, keep alignments

TH March 12

Due: Recipe project
View Recipe Project

Make an Image Grid

WORKSHOP: Narrative Projects

gather media and create site architecture – index cards
design for visual hierarchy – sketch plan
build structure and navigation/pagination of site (wireframe) – html, colored borders
add media and design elements – css, color and typography
add interactivity and effects – javascript/jquery
revise and edit: narrative, closure, time frames

Week 10— Spring Break

T March 17

No Class

TH March 19

No Class

Week 11— Navigation and Interaction

Assignment: Plan and sketch designs for Narrative Project

T March 24

Class Notes – week 10

WORKSHOP: Build HTML/CSS

TH March 26

Class Notes – week 10

Workshop: Build HTML/CSS template structure

Week 12— Multimedia and Effects

Assignment: Narrative Projects

T March 31

Class Notes – week 10

Narrative Project – in progress

WORKSHOP: Build HTML/CSS

gather media and create site architecture – index cards
design for visual hierarchy – sketch plan
build structure and navigation/pagination of site (wireframe) – html, colored borders
add media and design elements – css, color and typography
add interactivity and effects – javascript/jquery
revise and edit: narrative, closure, time frames

TH April 2

Narrative Project – in progress

WORKSHOP: Build HTML/CSS

Week 13—Workshop & Critique

T April 7

Narrative Project – in progress

WORKSHOP: Build HTML/CSS

TH April 9

DUE: nearly complete Narrative Project for critique (10% of final grade)

Narrative Project

Small-group critique
WORKSHOP

Week 14—Intro: Portfolio Project

Assignment: Research/Sketch Portfolio Projects

T April 14

DUE: Narrative Projects

Narrative Project
Project Workshop

Intro to Portfolio Project:

HTML5 Start with Reset

HTML5 Start with Grid

Process for Designing Portfolio:

Research site ideas (screen grabs, inspect element)
Storyboard/Sketch a multipage website (minimum 4 pages or sections)
Gather media and copy (images, screen grabs of projects, text)
Build HTML
CSS for responsive design and navigation (colored borders)
Add Content
Final CSS design

RESPONSIVE DESIGN PRINCIPLES:

mobile first! – default css is for mobile
flexible design (using % instead of px)
width: auto; is default and adjusts padding and margins
cascade principle -location and inheritance
(only change styles that need to change)
max-width and min-width (set limit with max or min width)
height values are tricky! use by pixels or set height on parent
responsive images (100% of container parent or img {width: 100%;})
breakpoints based on design not device
turning off iOS resize: