Mastering CSS
Learn advanced Web formatting and layout techniques.
Mastering CSS is the continuation of our HTML5 and CSS course. It's intended to take you beyond the basics into intermediate and advanced Web page layouts. You'll learn how to debug and work around tricky CSS problems, implement common CSS idioms that work well in any browser (including Internet Explorer), and learn strategies for organizing and maintaining complex style sheets.
Instructor
-
Denise Jacobs
Denise Jacobs adores being a Speaker, Author, Consultant Web Design Trainer and Creativity Evangelist. Denise wrote The CSS Detective Guide and is a co-author to Interact with Web Standards: A holistic approach to Web Design. Denise has also developed curricula for the Web Standards Project Education Task Force (WaSP InterAct) and was nominated for .Net Magazine’s 2010 Best of the Web “Standards Champion” award. She aspires to encourage more people from underrepresented groups to Rawk The Web.
Course Outline
- CSS Coding best practices
- Organizing
- CSS Resets
- What and why
- How to use
- How to create
- Optimizing
- Reduce, reuse, and recycle
- Troubleshooting
- Page Styling Foundations and Essentials
- Typography and visual rhythm
- Font properties
- Sizing (fixed v. relative)
- @font-face
- Text treatments
- Drop caps with :first-letter
- Text-transform
- Text-shadow
- Styling blockquotes
- Lists: menus & information organization
- Lists for menus
- Other uses for lists
- Image treatments
- Images as links
- Image galleries
- Background image tricks
- Image clipping, etc.
- Other element treatments
- CSS rollovers
- Rounded corners, drop-shadows, gradients, transforms
- Page Layouts: Introduction
- Different layout techniques: different situations and devices
- Fixed width
- Flexible/liquid/fluid (with %)
- Elastic (with ems)
- Hybrid
- Responsive (fluid with @media queries)
- Thinking and Considerations
- Optimum line length
- Viewport size
- Device differences
- Bandwidth
- Foundations
- Floats
- Float nitty-gritty
- Float-clearing techniques
- Negative margins
- Positioning – relative, absolute, fixed. relative-absolute
- Lists
- Inline-block display
- Making and breaking a layout
- Font size changes
- Float issues
- Excessive rigidity
- Grid frameworks
- What and why
- Frameworks options
- DIY
- Page Layouts: How-to
- Fixed-width layouts
- Fixed footer
- Referral links
- Faux columns
- Flexible/liquid/fluid layouts (with %)
- Percentage-based backgrounds
- Multiple backgrounds
- Sliding doors technique
- Elastic layouts (with ems)
- Sizing with ems
- Visual rhythm
- Tabbed interfaces
- Hybrid layouts
- Min-height and width
- Fixed positioned elements
- Modal windows
- Responsive layouts (fluid with @media queries)
- 3-4 designs: one page, one stylesheet
- Multi-platform and device
- @media queries
- Image size change
- Display and visibility change
