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
There are very few requirements for this project other than it must be a web page or series of web pages that incorporate the concepts and techniques covered in class.
It is not required that you prepare a specific number of pages. Depending on the design goals, one good template could suffice for many pages and it is possible to spend as much time on a single page as on an entire site.
Making the page "mobile friendly" is optional but you should, at the very least, include some basic allowances for smart phones and tablets.
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://oit.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
Objectives
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 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
Back to Top
Session Two
Objectives
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
Assignment
Update - the first homework assignment is in (thanks Shannon). Follow up 1, 2, 3
Download the session 2 done files or use your own copy. With the “poor man’s” reset enabled in the CSS, redesign start.html paying attention to layout, color, typography, and background. You should correct for the margins that were removed (i.e. the paragraphs) when the reset was applied.
Then, time permitting, using the page you have redesigned create a copy (don’t forget to make the CSS external first) and. Using the new nav tab bar we constructed in class set it up so you can navigate between them. The appropriate tab should be highlighted indicating which page you are one.
You may alter the HTML, removing items as you see fit in order to make your job easier.
Bonus - employ CSS3 visual features from CSS3 Generator.
Good luck!
Reading
- CSS Mastery - chapters one and two (structured code and selectors)
- Margin Collapsing - a simple introduction
- A handy CSS reference
- The problem with CSS3 - e.g. Gradients support
- The CSS3 generator
- Fitt’s Law - “the time required to rapidly move to a target area is a function of the distance to the target and the size of the target”
Back to Top
Session Three
Objectives
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
Assignment
- Download the midterm files and prepare a sound, semantically structured HTML (version 4 or 5) document. Don’t worry about implementing columns or any visual design features (except for using the html pre tag to preserve line breaks as discussed in class). Be sure to validate your code.
- Incorporate the definition list we created in class to your previous assignment and, by changing the css, style it to match you design. (If you have not completed the assignment from session 2 you will need to do so first.)
Reading
Back to Top
Session Four
Objectives
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
For Next Class (Assignment)
Reading
Back to Top
Session Five
Objectives
Styling a complete page - Basilica and Co..
- The importance of structured HTML
- CSS Hotspots
- CSS Gradients
- Intro to media queries
Assignment
Using the files from session 5 adjust the HTML and CSS in order to style the nav_features div so it matches the image. You should adjust the css for other portions of the page (including the footer) so that they match the image as well.
Reading
Back to Top
Session Six
Objectives
Expand on your knowledge of selectors in order to avoid unnecessarily complex HTML constructs and maintain semantic goodness. Understand the concept of progressive enhancement. Using web services to include custom fonts on your web page.
- “Classitis” - an overabundance of classes and how to avoid it using…
- Child and first child selectors
- Adjacent sibling combinators
- nth child selectors
Assignment
Start thinking about your final project. Prepare a short written summary of what you hope to achieve and email it to me. There are very few requirements for this project other than it must be a web page or series of web pages that incorporate the material we have been covering in class.
It is not required that you prepare a specific number of pages. Depending on the design goals, one good template could suffice for many pages and it is possible to spend as much time on a single page as on an entire site.
It is optional to make the page “mobile friendly” but you should make at least some basic allowances for smart phones and tablets.
Please try to keep it simple and “doable” in the amount of time remaining this semester.
Reading
Back to Top
Session Seven
Objectives
In this class we review css grid-based frameworks, first by creating our own and then by looking at the Blueprint grid system.
- Grids in graphic design and web development
- The Blueprint grid system
- The 960 grid system
Assignment
Using percentages to specify width create a rough layout from this image of this image. Try to use common html elements and as few div’s as possible. The end result should be a layout that adapts to the user’s browser width. You can use a simple media query as outlined in class in order to optimize for small devices.
Reading
Back to Top
Session Eight
Objectives
An examination of advanced CSS3, vendor specific properties, typography, and CSS for the mobile web.
- Modernizr
- Print style sheets
- CSS Media Queries
- Media Queries and multi-column layout
Assignment
Continue to work on your final project
Reading
Handcrafted CSS - chapters two and three
Back to Top
Session Nine
Objectives
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
Assignment
Prepare final project for next class.
Reading
Back to Top
Session Ten
Objectives
Understand the use of advanced CSS3 including:
- CSS3 transforms
- CSS3 transitions
- CSS3 key frame animation
Assignment
Final projects due.
Reading
Back to Top
