El Rancho High School
Mr. Crone, Room B-101

Web Design "A"

 

Student Work

Web Design "A"

1stSem1415

Home Page Redesign

Use CSS to Maximize Your Home Page Look.

Symmetrical Lines, Consistent Colors, No unplanned white space.
ASSIGNMENT | EC #1 | EC #2
        EXAMPLES: UCLA, Forest, Bananas, More

Advanced Tip: Block vs. Inline

<p> and <div> tags are block. <a> and <span> are inline.

But they don't have to stay that way! Many modern web techniques involve changing the block/inline behavior of a tag: More.

Interview

Assignment Examples

XHTML makes the boxes; CSS decorates them. View the interview assignment WITH and WITHOUT CSS.

Advanced Tip: How wide is my <div>?

A Question with an obvious answer? Think again!

The size of an element (<div>, <p>, <h1>, etc.) is the sum total of all its parts: width, padding, border, and margin: More.

Working At Home?

HTML Editors for Download

With any computer, you can practice what we do in class at home. If your computer is a Mac, Taco Edit can be downloaded here. If your computer runs on Windows, try Notepad++, which you can download here.

CSS Quick Reference

A "Cheat Sheet" of some of the more often used CSS codes.

View the form HERE.

Validation

XHTML 1.0 and CSS 2.0

To get an "A" grade on an assignment, your web pages will need to look correct as well as be correct. Validation ensures that you've written all your code to the specifications, making it more likely that whatever browsers your visitors use, your pages will display well. To validate, we first must add a few more lines of code to our pages: EXTRA CODE. Afterwards, use the links at the left of this page to go to the W3C's validation web site.

Animated GIF

An Old Technique for A Quick Animation

While flash is a much more powerful animation tool, the "animated gif" still has its uses. To get an "A" grade on the Art Gallery, you'll need to make at least one "animated gif".
Tutorial | Example.