Schedule 2020 – Section 2 – 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

M February 10

Quiz #1: HTML

Blackbird Project List

Developer tools: Inspect Element/Web Developer/Validation

Class Notes – week 5

CSS Quiz Review

WORKSHOP: Blackbird CSS

colored borders around block level elements
body { margin: 0;}
html and css formatting
no page content outside <body>

Bring a Recipe to class next (two) weeks.

Week 6—Recipe Project: Visual Hierarchy

CodeAcademy: CSS Grid

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

Reading:

M February 17

President’s Day -No Class

Week 7—Recipe Project: Responsive Design

FreeCodeCamp: Responsive Design tutorial

Reading: Overview on W3Schools tutorial: CSS Responsive

M February 24

Quiz #2: CSS LINK

Due: Blackbird project
Blackbird Project List

Make sure you Validate!

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

————–

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).

Recipe Hierarchy

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

CSS Grid Demo / Complete Guide to Grid

Responsive Design – Class Notes

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:
Monday: 3:00-5:30pm
Tuesday and Thursday: 3:00pm-4:30pm

Week 8 —Recipe Project: Typography

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

M March 2

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

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

Adobe Kuler – color schemes
CSS Grid Layout

WORKSHOP: Recipe Projects

validate your 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

Week 9—Narrative Design

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

M March 9

Color slides
Adobe Kuler – color schemes

Due: Recipe project
View Recipe Project

———

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: 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

Skrollr

Week 10— Spring Break

M March 16

No Class

Week 11— Navigation and Interaction

Assignment: Plan and sketch designs for Narrative Project

M March 23

Class Notes – week 10

WORKSHOP: Build HTML/CSS

Week 12— Multimedia and Effects

Assignment: Narrative Projects

M March 30

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

Week 13—Workshop & Critique

M April 6

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

Narrative Project

Small-group critique
WORKSHOP

Intro to Portfolio Project:

Week 14—Intro: Portfolio Project

Assignment: Research/Sketch Portfolio Projects

M April 13

DUE: Narrative Projects

Narrative Project
Project Workshop

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: