Links to another website with embedded SitePoint Live Tutorials
SitePoint CSS Live Tutorial by Russ Weakley
Russ Weakley is a world-renowned author, speaker and CSS expert.
Russ has a detailed knowledge of web design and development. His expertise covers graphic design, interface design, site architecture and standards based development especially in the area of XHTML/CSS.
Russ chairs the Web Standards Group which was set up to assist web developers learn about new technologies and accessibility issues. Russ has produced a series of widely acclaimed CSS-based tutorials as well as a book, “Teach Yourself CSS in Ten Minutes”.
Outline
Topic 1: Introduction to CSS
- Lesson 1: CSS Basics
- Linking to CSS files
- Create your first CSS rule
- Lesson 2: CSS in Action
- CSS Inheritance
- Learn best practice CSS techniques
- Lesson 3: Backgrounds and Images
- Using background images
- CSS Shorthand
- Lesson 4: Lists and Display Block
- Creating a vertical list
- CSS display property
Topic 2: Make Things Happen with CSS
- Lesson 6: CSS Sprites
- Using CSS sprites
- CSS Cascade
- Lesson 7: Lists and Floats
- Creating a horizontal list
- CSS Floats
- Lesson 8: Multi-Column Layouts
- Creating a multi-column layout
- Lesson 9: CSS Hacks
- Read about common CSS and browser bugs
- Learn how to use conditional comments
SitePoint CSS3 Practical CSS Live – Building a realtime layout from start to finish by Russ Weakley
Outline
Lesson 1: Introduction, reset and global styles
- Introduction: Principles, strategies, the layout
- Looking at resets: Main types, good and bad, using your own so you know what is in it
- Setting up a simple reset
- Setting up body font sizes and global styles: Always setting the basics and then extending, having these ready to use for every site
- Lesson 2: CSS frameworks and overall page layout – Grids and objects
- About grid frameworks: What they are, how do they work, when they’re good, when they’re bad
- Define a grid: Simple grids
- About objects: How far will you abstract them?
- Find all common objects
- Create a library
- Lesson 3: Setting up the images – Images and markup
- About images: Inline images, background images, sprites
- Defining all imagery
- Final adjustments to the markup: Adding inner containers, spans
- Lesson 4: Styling the header using absolute and relative positioning
- About absolute and relative positioning
- Creating the header
- Creating the utility navigation
- Lesson 6: Styling the tabbed navigation using ‘sliding doors’
- About sliding doors
- Navigation markup
- Styling the navigation
- Lesson 7: Styling a nested list
- Secondary navigation markup
- Styling the secondary navigation
- Lesson 8: Styling the smaller page objects – Styling the layout objects
- The concept of transparent
- Efficient round corners without CSS3
- Creating the object library styling all objects
- Lesson 9: Wrapping up and testing
- Testing
- Conditional comments, hacks, variations
SitePoint CSS3 Live by John Allsopp
Mastering a language like CSS3 can be intimidating. It doesn’t have to be!
Under the expert guidance of John Allsopp, you’ll find the combination of digestible audio, video and mini-articles to be so much fun, you won’t even realize how much you’ve learned by the time you’re done.
Outline
Lesson 1:
- Thinking in CSS
- Can I really use CSS3 now?
- Progressive enhancement with CSS3
- The right selector for the right job – no more ‘classitis’
- Lesson 2:
- CSS Selectors Part 1: Attribute Selectors
- Lesson 3:
- CSS Selectors Part 2: Structural selectors
- Lesson 4:
- CSS3 text properties
- Text-shadow
- Text-stroke
- Browser specific extensions
- Lesson 6:
- CSS3 layout properties
- Border Radius
- Box Shadow
- Multi Column Text
- Lesson 7:
- CSS Transition animations
- Lesson 8:
- CSS Gradients
- Linear Gradients
- Radial Gradients
- Mozilla versus webkit syntax
- Lesson 9:
- CSS Transformations
- 2D Transformations
- 3D Transformations
- Lesson 11:
- Web fonts
- Font embedding and downloadable fonts
- Lesson 12:
- Targeting devices using Media Queries
- Lesson 13:
- The state of the browsers
- Current and future support of CSS3 features
- Lesson 14:
- Bringing it all together
- Navigation bars
- Brings together structural selectors, border-radius, text-shadow, gradients, transitions, box-shadow
- Buttons
- Brings together border-radius, gradients, text shadow, box shadow
embedded by Embedded Video
Download Video
embedded by Embedded Video
Download Video
embedded by Embedded Video
Download Video
embedded by Embedded Video
Download Video
embedded by Embedded Video
Download Video
embedded by Embedded Video
Download Video
embedded by Embedded Video
Download Video
embedded by Embedded Video
Download Video
embedded by Embedded Video
Download Video