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

Typography Error   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 use padding on text boxes with borders for text body, use CSS rules: “line-height:…

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 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, grid   CSS GRID Overview Basics Concepts of Grid Layout Grid by Example Complete Guide to Grid flexbox tutorial ————————————– Visual Hierarchy Primer: Difference: where the eye is drawn Repetition: where the eye sees pattern and context Grid…

Read More >>

week 5 – Color, Imagery, Type, Layout

index.html ????   student project example Blackbird projects list 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 Mac,   Cyberduck PC is also available. -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 (’18”), all in lowercase,…

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, p:first-of-type, p:first-of-type: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…

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%) 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…

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