• Ê
  • Â

5 Outline

Outline

  1. Review Padding, Margin, Background, Border, Width, Height
  2. divs and spans to create non-semantic elements
  3. The natural flow of a page
  4. Floats and Clear
  5. Code an 8×8 black and red checkboard
  6. Absolute, Relative and Fixed Positioning (z-index)
  7. View source and Inspector

Floats and Class example from class

layout

Positioning example

Positioning demo from class
Link here

Links


4 Day 3 / Lessons   b Add comment

Leave a Reply

í Review your classmates’ navigations

Comment on your own post from yesterday

– What was your thinking/approach in changing the existing menu? What were you hoping to do from a visual/interactive sense?
– What was something you wanted to do but couldn’t? Whether it was because of time or css knowledge?

Comment on the two posts below yours

– How does your classmate’s design improve or alter the original?
– What more does it need (or need to be removed) to be more effective? You can describe this in English and/or in CSS speak?

b Add comment    

Leave a Reply

í Assignment 3: Redesign a navigational menu

Using the examples below as inspiration, redesign the navigation for an existing website. Consider pseudo classes, anchor states and the box properties. Make use of the Web Inspector to see what other sites are doing. Place your results in a new post on this site in category “Navigational Menu” along with a screen capture and URL of the website you are replacing.

Example of centering

Inline-block centering

Links

b Add comment    

Leave a Reply

Outline

  1. a Pseudo Classes (:hover)
  2. Classes
  3. Display property: block, inline-block, inline, none
  4. Border instead of text-decoration
  5. Border-radius (browser prefixes)
  6. Text shadow
  7. Box-shadow

Example

css2

Links

4 Day 2 / Lessons   b Add comment

Leave a Reply

í Assignment 2: Add CSS to assignment 1

Create two different versions of your HTML from assingnment 1. Make an internal stylesheet and duplicate your HTML document two times. The emphasis on this exercise is to get you used to CSS syntax and to get you accustomed to looking up properties. You may have aesthetic ideas for the content, or you may apply properties and see how the page reacts. Either is fine. Create two very different solutions given the presentation CSS we have reviewed so far.

Please FTP your finished html files to a folder called “assignment2″ within your students directory and link to them from a post that you create on the class site. Be sure to assign the category “CSS basics” to your post so it will show up alongside your classmates.

b Add comment    

Leave a Reply

Outline

  1. Calling in CSS (internal)
  2. Syntax: declaration blocks, comma separated selectors
  3. Text properties (size, line-height,
  4. Colors
  5. Units
  6. Margin, Padding, Border

Example from class

Here it is
Box Model

Links

4 Day 2 / Lessons   b Add comment

Leave a Reply

Y Review HTML basics

  1. CSS was part of the HTML4 specification (1999) and authored by the w3c
  2. Structure, structure, structure
  3. Model example from yesterday
  4. New York Times without stylesheets
  5. Look at “Welcome to Locally Made” coding
  6. Look at a few other websites via the HTML
b Add comment    

Leave a Reply

í Assignment 1: Markup a plain text file
July 22, 2013

Due by end of class

Create a new html document with TextWrangler. Save it in a folder on your computer as assignment1.html

Write the HTML for our syllabus. Remember, HTML is a descriptive process, where you describe parts of a document to the best of your ability.

Please FTP your finished html file to the /students/yourname/assignment1 directory and link to it from a post that you create here on the class site. Be sure to assign the category “HTML basics” to your post so it will show up alongside your classmates.

b Add comment    

Leave a Reply

Outline

  1. Browsers read HTML. HTML is structure.
  2. Collection of well-formed tags.
  3. Required elements: html, head, title, body
  4. Elements, attributes, nesting
  5. Block elements: headers, paragraphs, lists
  6. Inline elements: anchor, strong, em, cite, abbr
  7. Images

In-class Demo

Example marked up last year in class

HTML Basics links

HTML5 links

4 Day 1 / Lessons    J    b Add comment

Leave a Reply

( Overview of class website

Login

Login using our firstname and the class password. Update your user profile with a nickname and a brief bio and url (if you choose).

Add a gravatar

Add a Gravatar with the same email address on this site and so we can recognize you on the website. You may use something other than a self-portrait if you like.
Create a login at http://en.gravatar.com/ and upload an image.

( Protected: Getting started
July 22, 2013

There is no excerpt because this is a protected post.

This content is password protected. To view it please enter your password below:

Below is the class syllabus in pdf form.

wd13_syllabus-1

4 Day 1   b Add comment

Leave a Reply