Please go to this site to get further updates.

body {
font-size:62.5%; /* gives us a base of 10px */
}

h1 {
font-size:2em; /* 20px */
}

h2 {
font-size:1.8em; /* 18px */
}

p {
font-size:1.2em; /* 12px */
}

p abbr {
font-size:2em; /* 24px since abbr is a child of p */
}

#sidebar {
font-size:1em; /* 10px */
}

——————————————————————————

In a similar manner you could also do percentages to make your site flexible.

body {
font-size: small;  /*changing this keyword will affect all the other elements   */
}

h1 {
font-size: 150%;
}

h2 {
font-size: 130%;
}

h3 {

font-size: 120%;
}

ul li {
font-size: 90%;
}

.note {
font-size:85%;
}

——————————————————————————

As for the actual stylesheets, Ive provided a link for the Em stylesheet which can be viewed here. You can also view the percentages stylesheet here.

I chose those colors because I wanted to create a soothing color scheme which is easy to the eyes and provides great contrast with each other. Also, these colors are similar to the colors that I usually use for my other projects  because they compliment each other so well.

As for other homework, I’ve provided a link to the stylesheet which can be viewed here.

Each box has the actual content with optional padding, border, and margins. In your CSS you can specify the properties for each box. As you can see in the image below, it illustrates how the box model shows the various properties of padding, border, and margins of the content area.

It also shows  the content, padding, border, and margin edges which is the perimeter for each area and each box contains four edges.

To put it plainly, each content has a box. With each content, you can specify padding, border, and margin. Padding can be specified using the ‘padding’ property, borders can be specified using the ‘border’ property, and margins can be specified using the ‘margin’ property. Setting the border for content creates a border for the box. Setting padding for the content will create padding space between the border and content, while setting margins will create space outside of the border.

Here is another example: Box model

I hope this makes it a bit clearer to understand the box model.

To get a better understanding of the box model, please visit http://www.w3.org/TR/CSS2/box.html.

Week 1: Tuesday, July 13, 2010

Homework: Research interesting ideas for your homework page and sketch two examples. Must be paper and pencil. Scan image then use Photoshop to block out content via grids. Print this version and, again using pencil, note navigation, technology, purpose, etc. on this image. Scan and upload to blog. Email me the url.

Create a timeline and/or schedule for your homework assignments and post to your blog.

Week 2: Tuesday, July 20, 2010

Homework:

Create a tutorial page on the Box Model. Be sure that a newbie would be able to understand the difference between content, padding, margin, and border areas. Post to blog. Due week 4.

Color practice: on this same blog, list 3 pantone colors and their RGB equivalent. Should relate to your layout. Due beginning class next week.

Read Chapter 1 of Bulletproof Web Design and create the same stylesheet using Ems (page 22). Link on your blog. Due beginning class next week.

Week 3: Tuesday, July 27, 2010

• Homework:
  • Converting tables to divs – separating content from style. Deconstructing a page: Take this web page and reconstruct it using an embedded style sheet. You don’t have to use all content, but enough to show your work. Your guidelines will be chapter 3 of the book called “Expandable Rows”. As a goal, try to use as few div’s as possible. Discuss on your blog and provide a link to the finished page. [Note: embed your .css on the page. Do not link as an external stylesheet. I want to see your work displayed with the .xhtml.]

Week 4: Tuesday, August 3, 2010

Homework:

• Read Chapter 4 “Creative Floating” of Bulletproof Web Design, do the exercise, and toggle the float direction (page 102). Post link to blog.

Extra credit: Write one style that combines selectors (compound selector) to save code. Post to blog.

Week 5: Tuesday, August 10, 2010

Homework:

• Read chapters 5 and 6 of the book and create a page using elements of both. Use can use CSS3 to create your rounded corners but make sure your layout uses “Indestructible Boxes” and can pass the 10-second usability test. This is your [take home midterm] and is due beginning of next class.

Write in your blogs your best advice for getting creative.

Week 6: Tuesday, August 17, 2010

Homework:

Create a possible portfolio home page using chapter 9 “Putting It All Together” as a source. This is due week 8 at the beginning of class.

Week 7: Tuesday, August 24, 2010

• Homework:
  • Continue work on possible portfolio page, chapter 9. Blog its target audience and design objective. This blog (as opposed to the lab above that is due today) is due by beginning of next class.

Week 8: Tuesday, August 31, 2010

Homework:

• Create wireframe of final project and post to blog.

Week 9: Tuesday, September 7, 2010

Homework:

• Work on final project. Blog how you are creating your project to stand out from all the other submissions. Reflect on how you might use the allowed .css code to give a different look to your page. How can you incorporate what you’ve learned from Bulletproof Web Design?

Week 10: Tuesday, September 14, 2010

Homework:

• Work on project. Create a blog posting that is a sample of a possible process page for your final project. Include screenshots and images. How would you present to potential employers to demonstrate your knowledge? Email me once you have blogged.

Week 11: Tuesday, September 21, 2010

Homework:

• none

I started sketching some ideas of how my homework site is going to look and I came up with a sketch that features a big logo at the top with a shadow effect. I also added some notes to show how and where my navigation and content will be located. Here’s a picture of my sketch.

I like how the layout looks and plan to incorporate more design ideas as the week progresses.

Here’s another Idea that I like a bit more especially with how the layout displays everything you need with all the information being easily accessible.