Course Description
In this class you will advance your web development skills by learning standards-based web development strategies that employ semantic HTML markup and CSS. You will learn to use the core properties of CSS 2 and 3 modules to create great looking web pages that display properly in contemporary browsers and adhere to best practices in web design and development. You will also be introduced to advanced topics such as CSS animation, CSS for mobile web development, browser specific CSS extensions, progressive enhancement, and scripting techniques that leverage CSS to create such popular in-page widgets as accordions and lightboxes.
This class is appropriate for beginners as well as those with a working knowledge of HTML and CSS. General computer literacy and familiarity with browsers is assumed.
Texts
(Paperback) Simon Collison, Andy Budd, Cameron Moll
(Paperback) by Dan Cederholm and Ethan Marcotte
Note: this text is available with a DVD (not required for the class but recommended). It is intended for those with some familiarity with CSS and will not required for the first 5 sessions.
Projects and Grading
Midterm
For the midterm you will translate an image provided by the instructor into an HTML page and style it using CSS.
Final Project
Design a minimum of two templates. The templates should be used to develop a web site in time for review and commentary by the tenth (final) class. You should try to validate both the HTML and CSS.
Homework
Readings and homework will be assigned. For your own benefit you should attempt the homework assignments.
Grading & Etcetera
Final project 50%
Midterm: 50%
Due to the nature of the subject material the contents of this syllabus are subject to change.
Facilities
You will be provided with space on an NYU server - http://db.it.scps.nyu.edu/. A user name and password will be distributed in class. Do not store irreplaceable material on this server. Be sure to keep a copy of all your important files.
Class Sessions
Session One
Understand the basic principles of semantic HTML and the evolution of web development by updating a table-based layout to a standards-based layout. This session will cover:
- The general concept of separation of content, presentation and behavior
- Installing and using the Firefox Web Developer Toolbar and Firebug
- A general discussion of applications and development environments
- The anatomy of a CSS rule
Homework
Install Firefox and the Web Developer Extension and Firebug.
Select a text editor, purchase texts and try logging into the class server following the instructions in the additional session notes link below.
Review and follow the instructions in this pdf.
Reading
Additional Session Notes »
(there
are 5 comments)
Back to Top
Session Two
Be able to manipulate boxes via css in both quirks and standards mode and describe the different kinds of CSS selectors (element, class, ID, etc.). You should be able to analyze a simple CSS selector.
- Simple page layout with CSS
- Using unordered lists to create navigation
- Understand the box model, its history and (ab)uses
- Structuring your CSS
- Selectors, declarations, properties and values
- External, embedded and inline style sheets
Homework
Create two pages from the template created in class and enable the user to navigate between two pages while highlighting a different tab on each page.
Reading
Additional Session Notes »
(there
are 2 comments)
Back to Top
Session Three
At this point you should be very comfortable with the differences between CLASS and ID styles and know how to use them effectively. In this class we review list-based menus and expand our use of lists to include definition lists and floats.
- Reset Stylesheet
- Reviewing Floats
- styling unordered, ordered and definition lists
Homework
If you haven't completed the week two assignment please do. Add the tabbed menu created in class to the restaurant reviews page and create two pages that can be accessed using the tabs.
Reading
- CSS Mastery - chapters three and four (positioning and backgrounds)
Additional Session Notes »
(there
is one comment)
Back to Top
Session Four
Understand basic design patterns for CSS multi column page layouts using CSS. Understand why absolute positioning is not a recommended solution for page layout in most cases. Understand the value of opposing floats for layout.
- floats vs. absolute positioning for layouts
- margins and gutters
- min- and max-width properties
- faux columns
- the overflow property
Homework
Review the midterm files.
Reading
Additional Session Notes »
(there
are no comments)
Back to Top
Session Five
Styling a complete page - Basilica.
- The importance of structured HTML
- CSS Hotspots
- Workflow
Homework
Prepare midterm.
Reading
- CSS Mastery - chapter eight (layout)
Additional Session Notes »
(there
is one comment)
Back to Top
Session Six
Understand the promise of new combinators/selectors available in IE7, Firefox and Safari. Understand the concept of progressive enhancement.
- "Classitis" - an overabundance of classes and how to avoid it
- Child combinators
- Adjacent sibling combinators
Homework
Midterm project due
Reading
- CSS Mastery - chapter eleven
Additional Session Notes »
(there
are no comments)
Back to Top
Session Seven
In this class we review css grid-based layouts first by creating our own and then by looking at the Blueprint grid system.
- Why grids are good
- The Blueprint grid system
- The 960 grid system
Reading
Homework
Use a grid to format an HTML document.
Reading
Additional Session Notes »
(there
is one comment)
Back to Top
Session Eight
An examination of advanced CSS3, vendor specific properties, advanced typography, and CSS for the mobile web.
- simple CSS animation
- -webkit- and -moz CSS3 properties
- typography with @font-face
- border-radius and RGBa
- CSS Media Queries
Homework
Continue to work on your final project
Reading
Additional Session Notes »
(there
are 2 comments)
Back to Top
Session Nine
Understand the importance of the Document Object model (DOM), the concept of separating style, content and behavior). An overview of JavaScript (and JavaScript libraries) and how they work with CSS to create interactive effects.
- unobtrusive scripting
- designing for accessibility
- a brief introduction to CSS and CSS selectors in jQuery
Homework
Prepare final project for next class.
Reading
Additional Session Notes »
(there
is one comment)
Back to Top
Session Ten
- Individual project review - compatibility testing on multiple browsers, html and css validation
- Final Q and A
Additional Session Notes »
(there
are no comments)
Back to Top
Useful Information
The Mysterious “Save For Web” Color Shift
Viget Labs on the Photoshop color shift that seems to show its ugly head from time to time.
“While working on the Odeo relaunch, we kept running into a frustrating problem: When we saved out the slices, the awesome Odeo pink flattened to a dreary ‘light coral’. I’d seen the problem before, but never so pronounced: The color, through no fault of its own, was obviously changing, and we were at a loss for a way to prevent this.”
Fig. 1 : Dastardly!
“The usual suspects get knocked out pretty quickly in this issue: It isn’t a Mac/PC thing, it isn’t a monitor thing, it isn’t because the color profile is somehow set ‘wrong’. Fellow designers: Somewhere between PSD and JPG, Photoshop is draining our colors of their life, like some horrible, RGB-stealing vampire.”
Update - Looks like Smashing Magazine is jumping into the mix now.
Going Up?
HTML-ipsum
Excerpt
HTML-Ipsum is worthy and convenient successor to the venerable Lorem Ipsum generator. Simply click to select text complete with HTML elements including all the major types - lists, headings and paragraphs. Ye olde generator is still worth a gander though is you want the a bit more info on what it is you’re pasting.
Includes special settings for Coda and TextMate for Mac.
Going Up?
The League of Moveable Type
A limited but superb source for open source fonts for use with @font face declarations. Chunk Five is a nice replacement for Rockwell - if you’re into slab serifs.
The League of Moveable Type
Going Up?
Westciv’s CSS transforms and etc. test bed
This widget should prove useful the next time you need a quick recap of the fancier side of CSS.
Going Up?
The New Clearfix Method • Perishable Press
Say goodbye to the age-old clearfix hack and hello to the new and improved clearfix method..
The clearfix hack, or ‘easy-clearing’ hack, is a useful method of clearing floats. I have written about the original method and even suggested a few improvements. The original clearfix hack works great, but the browsers that it targets are either obsolete or well on their way. Specifically, Internet Explorer 5 for Mac is now history, so there is no reason to bother with it when using the clearfix method of clearing floats.
The New Clearfix Method • Perishable Press
The original clearfix hack looks something like this:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: ' ';
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
Yes it’s ugly, but it works.
Going Up?
Setting rather than Resetting Default Styling
Setting rather than Resetting Default Styling: “Setting rather than Resetting Default Styling”
A very good introduction to the theory and practice of resetting browser defaults with CSS -
“For a long time, the very first line in my styles sheets was:
* {padding:0;margin:0;}
This simple rule was very convenient as it leveled margin and padding values of all elements across browsers. This “hard reset” was short and simple and it had the advantage of belonging to the main styles sheet rather than being an external file.
Later, this technique was denounced as bad practice as it makes the rendering agent style (check) every single element in a document. It also triggered issues with form controls, but authors were used to specifying styles for these.”
(Via Vitamin Master Feed.)
Going Up?
