Style Sheets
CLASS SYLLABUS
|
Instructor: Bruce Donald Campbell
Faculty, Continuing Education — RISD Adjunct, Brown University, Computer Science (research) Director, Bruce Donald Campbell Consulting Email: bcampbel01@risd.edu Website: bdcampbell.net Prerequisites: None |
COURSE DESCRIPTION
As the preeminent presentation language of the Web, CSS (Cascading Style Sheets) allows designers to effectively separate form and content, while reinforcing their control over a site's published appearance. With the introduction of CSS3 and HTML5 standards, the Web is becoming a much more stable and robust platform for designers, whose work must now stretch from traditional desktop browsers to an ever-widening array of mobile devices. In this course, you'll become familiar with CSS behavior through video, readings, and exercises in a project-based learning model that anticipates the likely changes in CSS standards. You can expect your resulting webpages to be more structurally sound, as they demonstrate the qualities that have long been associated with inspired design.
GRADING
Class participation - 30%
Homework - 30%
Final project - 40%
RESOURCES
Books
There are no required books associated with this class — instead, we will use the wide resource library available from Web sites promoting and explaining CSS practices.
Course Handouts and On-line Readings as identified below and in class.
LINKS
CSS Home PageW3C CSS Validator
CSS Cheat Sheet
W3C Schools CSS Page
CSS Zen Garden
CSS Reset
CSS Sprites
Color Scheme Designer
TOPIC1
welcome to css
For Class:
- Watch the Welcome to Class (Your Responsibilities) Video.
- Understanding your responsibilities:
- Reading all the Provided Resources
- Participating in the Weekly Forum by Submitting Work and Discussing the Materials
- Using Inspect Element to see CSS application explicitly
- Validating your code before submission
- Submission of am ostrich progress page before our fourth class.
- Submission of a class project before the end of our time together.
Readings:
Homework:
- Master the week one examples through interactive study.
- Young adult class version
TOPIC2
advanced content selection
For Class:
- Watch the CSS Content Selection Techniques Video.
- Continuation of ostrich page enhancements.
- Creating Class Selectors
- Attribute Selectors
- Explore the Compound Selectors: CSS Selector Reference.
- Understanding Layout Positioning and the z-index
Homework:
- Master the week two examples through interactive study.
- Do the CSS Diner exercise and report your findings in the Forum provided.
- Young adult class ostrich page
TOPIC3
applying css with other technologies
For Class:
- Watch the Topic Three Techniques Video.
- Interactive lab with week three examples.
Readings:
- Explore using CSS with SVG.
- Explore using CSS with 3-D.
- Take a look at a student's Ostrich page progress.
- Notice a Pure 2D Example
Homework:
- Master the week three examples through interactive study.
- Scope your final project.
TOPIC4
interactive CSS design components
For Class:
- Watch the Topic Four Project and Techniques Video.
- Sharing of ostrich page enhancements work.
- Image replacement techniques
- Links - Visited - Hover - Active
- Vertical and horizontal navigation menus
- Flex box directives (note Grid also - try by example)
- Consider this video on Grid v. Flexbox
- Week 1-3 homework review of other student work
Homework:
- Master the week four examples through interactive study.
- Work on your final project.
TOPIC5
CSS feature smorgasborg
- Watch the Topic Five Techniques Video.
- Interactive lab with week five examples.
Readings:
- Consider CSS3 enhancements
- Border Radius
- Box Shadow
- Gradients
- Image Hover Overlay (student example)
- Text Effects
- Simple Animation
- Work with the week five examples.
Homework:
- Master the week five examples through interactive study.
- Consider investigating directives from the CSS Cheat Sheet
- Check out the week five young adults class examples.
- Work on your final project.
TOPIC6
Where to go next with CSS
- Watch the Week Six Video.
- Project Critique
- Interactive lab with week six examples.
In class:
- Animation
- 2D and 3D Transforms
- Preparing for Project Critique
Homework:
- Play with the week six changes made in a young adult class.
- Make a plan for keeping your CSS skills active.
- Submit your project on the last day of class.
- Provide a critique of other student work by responding to their submission in the forum