week 13 – Narrative Projects

Portfolio Project Checklist: Validate HTML and CSS All images are under 1000px wide Your main content layout is under 1000px wide You have proper padding, line-height (1.4-1.5), contrast (for reading) and line length (10-15 words) on text copy Your name is in the header on all pages Your navigation (and layout) does not change significantly on each page (exception is a splash page) You have followed a design strategy for visual hierarchy and used…

Read More >>

week 8 – Typography

To fix iOS viewport reset, place this meta tag in <head> <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″> ———————————- Principles of Typography sherlock-holmes-baseline grid chunk text (analyze the text) organize text for visual hierarchy, create difference and repetition organize for rhythm and tension (explore what baseline rhythm is) choose 1-2 fonts (make differences with weight, size, style, color) create difference in text areas (contrast, proportion, space) keep line length to 45-90 characters per line or 10-15 words…

Read More >>

week 7 – Responsive Design

Code Academy scores Quiz overview ——————————– Responsive Starter Template RESPONSIVE DESIGN PRINCIPLES: mobile first! flexible design (using % instead of px) percentages! (do the math) html flow cascade principle inheritance (only change styles that need to change) max-width and min-width (set limit with max or min width) height values are tricky responsive images (100% of container parent or img {width: 100%;}) modular design “breakpoints” based on design not device display: none…

Read More >>

week 6 – Visual Hierarchy

Meetings with me… Blackbird Projects Due Next Tuesday Please upload your folder called “blackbird” to the server and send me a url to your site when you are finished. Validate the html and css of your site: Validator.w3.org CSS Review: Quiz Review w3 schools: css_positioning tutorial background-size display: block, inline, none, inline-block, flex ————————————– Learn new CSS3 Flexbox! flexbox tutorial ——————————————- Visual Hierarchy Primer: Difference: where the eye is drawn…

Read More >>

week 5 – Color, Imagery, Type, Layout

FTP= “file transfer protocol” – uploading web files to the server using  FTP (file transfer protocol) -we will use a free Mac ftp client called Cyberduck, any one will do –Filezilla is also good, free and cross-platform Steps: Open ftp software “Open Connection” Enter the following info: servername: dtc-wsuv.org username: first initial + last name + the year (’17”), all in lowercase, no spaces or symbols (so, “Sam Jones” would be “sjones17”) password:…

Read More >>

week 4 – CSS

Cascading Style Sheets Inline/Embedded/External CSS selectors { property : value; }   example:  p { color:blue;} CSS Principles (what gets applied?) inheritance location (cascade) specificity !important ( color: red !important; ) Defining Selectors: name element: h1, p, name class or id: .stanza, #bio context: #bio img,  .stanza h3 pseudo-classes : p:first-letter link-styles : a:link, a:hover (add to blackbird) attribute or values CSS Properties  and Values: css reference In-line Styles: fonts link styles…

Read More >>

week 3 – HTML Flow

List of HTML tags Overview: html structure, tags, attributes, nesting, formatting Tables HTML Flow Organizing web files Semantic Elements Links Image insert Workshop: Finish Mark-up of Blackbird site ————————————————— Project #1: Blackbird Project (10%) – DUE Tuesday Oct 3rd 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…

Read More >>

week 2 – HTML Building Blocks

The first website, Tim Berners-Lee Hypertext Markup Language / HTML: text-editors, color coding, line numbers, soft wrap, search basic structure –  anatomy of a web page nesting, parents/children text-encoding – ASCII / Unicode intro to semantic elements – h1, p, div, em, span, small inline/block attributes – id, class absolute and relative urls basic formatting – classes and ids html syntax= <element attribute=”value”></element> self-closing elements= <element> World Wide Web Fundamentals:…

Read More >>