Schedule – Fall 2019 – 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!

Week 5— Color, Imagery, Type, Layout

CodeAcademy:CSS Display and Positioning, Color, Typography

T September 17

Quiz #1: HTML

Quiz Link

Class Notes – week 5

Multi-Column Layout with Float

WORKSHOP: Blackbird CSS

TH September 19

Class Notes – week 5

CSS3 Generator

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

Week 6—Recipe Project: Visual Hierarchy

CodeAcademy: CSS Grid

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

Watch:

Reading (optional):

T September 24

I have Jury Duty!
Greg Philbrook will start the class by taking attendance and then immediately he will start the documentary Helvetica (it is 1h 20m so we will watch the remaining 10 minutes on Thursday). It is about typography, so it is relevant to what we will be covering in these next two weeks.
Class is not canceled. The Blackbird project will be due Thursday. Just make sure a folder called “blackbird” with an index,html is in your server directory. Don’t put the project inside another folder.

On Thursday, we will briefly go over the Blackbird projects, go over design principles and briefly introduce CSS Grid. We will start the recipe project next week.

Check the schedule for more on how things have changed. There is a slim chance I will not make Thursday, but I will email you about that.

TH September 26

DTC MAJORS: supersurvey

Due: Blackbird project

Blackbird Project List

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

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

CSS Grid Demo / Complete Guide to Grid

CSS Quiz Review:
Quiz Review

Week 7—Recipe Project: Responsive Design

CodeAcademy: No tutorial

Reading: Read this W3Schools tutorial instead: CSS Responsive (all chapters)

T October 1

CSS Grid Demo

Complete Guide to Grid

Class Notes – week 7

CSS Quiz Review:
Quiz Review

TH October 3

Quiz #2: CSS

Eric Meyer’s Reset 2.0

Recipe starter page

Build Recipe HTML/CSS

Mandatory Midterm Meeting:

Please set up a mid-term meeting with me. This is to check in about how you are doing so far with html and css. Below are my times to meet. You can either set up a 30 minute slot or just 5 minutes if you are feeling comfortable with the material so far.

You may also be receiving an email to set up a meeting if I am your mentor. If I am your mentor, we can set up one meeting and cover both the class requirement and discuss mentoring issues like registration and “superpowers”, etc..

My times:
Tuesday and Thursday: 12pm-1:00pm and 4:10pm-5:00pm (or by Skype on MWF)

Week 8 —Recipe Project: Typography

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

T October 8

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

Blackbird feedback –Validate!

Mr. Potatohead – extra credit (5pts)

Recipe HTML and CSS
Finish media queries
chrome web developer, browser width

Principles of Typography | Typography tutorial
Class Notes – week 8

TH October 10

Principles of Typography | Typography tutorial
Class Notes – week 8

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 October 15

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 October 17

Due: Recipe project
View Recipe Project

Make and 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— Navigation and Interaction

Assignment: Plan and sketch designs for Narrative Project

T October 22

Class Notes – week 10

WORKSHOP: Build HTML/CSS

TH October 24

Class Notes – week 10

Workshop: Build HTML/CSS template structure

Week 11— Multimedia and Effects

Assignment: Narrative Projects

T October 29

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 October 31

Narrative Project – in progress

WORKSHOP: Build HTML/CSS

Week 12—Workshop & Critique

T November 5

Narrative Project – in progress

WORKSHOP: Build HTML/CSS

TH November 7

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

Narrative Project

Small-group critique
WORKSHOP

Week 13—Intro: Portfolio Project

Assignment: Research/Sketch Portfolio Projects

T November 12

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: