O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning Path: Advanced CSS & Sass

Video Description

This Learning Path begins with an introduction to CSS and other web technologies such as HTML and JavaScript, but soon moves you ahead to flexing your CSS skills to create remarkable websites, web apps, and mobile apps. When you add SASS to the mix—Syntactically Awesome StyleSheets—you'll see how creative you can be as SASS frees you from the time-consuming, repetitive tasks.

Table of Contents

  1. Introduction
    1. HTML5 And CSS - An Introduction To Modern Web Development 00:02:10
    2. About The Author 00:01:32
    3. Overview Of The Course 00:02:04
  2. The Basics Of Developing For The Web
    1. Setting Up Your Workspace 00:01:27
    2. A Simple HTML Document 00:01:53
    3. The Basic Structure Of A Website 00:01:33
    4. Moving Files From Your Computer To A Webserver 00:01:55
  3. HTML Fundamentals
    1. What Is HTML? 00:02:05
    2. HTML Syntax 00:02:22
    3. The Doctype 00:01:13
    4. The Document Head 00:02:50
    5. The Document Body 00:00:59
    6. Understanding Block And Inline Elements 00:02:11
    7. Paragraphs And Line Breaks 00:01:26
    8. Div And Span 00:01:49
    9. Links 00:02:29
    10. Images 00:02:33
    11. Basic Lists 00:01:50
    12. Lists Of Lists 00:01:17
    13. Tables 00:01:53
    14. Validation 00:03:05
  4. Structural HTML
    1. Understanding Document Structure In HTML 00:02:11
    2. Quotes 00:01:21
    3. Articles 00:01:34
    4. Navigation 00:01:03
    5. Figures 00:01:44
    6. Sections 00:01:43
    7. Headers And Footers 00:02:02
    8. Aside 00:01:31
  5. CSS Fundamentals
    1. What Is CSS? 00:01:54
    2. Adding CSS To An HTML Document 00:02:03
    3. Basic CSS Selectors 00:03:16
    4. Grouping CSS Selectors 00:01:09
    5. Using Shorthand 00:01:19
    6. CSS Units 00:03:25
    7. Color In CSS 00:01:47
    8. The Cascade 00:03:30
  6. Text And Typography
    1. Understanding Web Typography 00:03:19
    2. Text Size 00:05:31
    3. Text Weight And Style 00:02:12
    4. Using Fonts 00:03:54
    5. Pseudo-Class Selectors 00:01:45
    6. Styling Links 00:02:01
    7. Dynamic Pseudo-Class Selectors - The Hover State 00:01:28
  7. Color And Images
    1. Background Color In CSS 00:02:38
    2. Adding A Background Image To A Page 00:03:17
    3. Using Background Images On Other Elements 00:01:59
    4. Styling A Blockquote With Multiple Background Images 00:01:49
    5. Gradients With CSS 00:03:48
    6. Shadows In CSS 00:01:58
    7. Opacity And Transparency 00:01:40
  8. Layout With CSS
    1. The CSS Layout Model 00:02:23
    2. Margins And Padding 00:02:56
    3. Borders 00:02:49
    4. Absolute Positioning 00:03:10
    5. Relative Positioning 00:01:06
    6. The Basics Of Float 00:01:57
    7. Clearing Floats 00:03:09
    8. Building A Simple, Floated Layout 00:05:09
    9. Styling The Navigation Sidebar 00:02:32
    10. Styling The Page Header 00:03:39
    11. Styling The Page Footer 00:02:13
  9. Forms In HTML And CSS
    1. Understanding The Role Of Forms On The Web 00:01:52
    2. The Form Element 00:01:10
    3. The Input Element 00:03:20
    4. Form Labels 00:01:35
    5. Text Areas 00:01:30
    6. Buttons 00:01:19
    7. File Input Fields 00:01:57
    8. Hidden Fields 00:01:17
    9. Checkboxes And Radio Buttons 00:02:24
    10. Select Lists 00:02:44
    11. Fieldsets And Legends 00:01:57
    12. Laying Out A Simple Form 00:03:29
    13. Styling Our Form With CSS 00:02:48
    14. Advanced Form Styling Tips 00:04:13
  10. HTML5 Audio And Video
    1. The Audio Element 00:02:10
    2. The Video Element 00:02:51
    3. Providing Fallbacks For Older Browsers 00:03:54
  11. Understanding Responsive Design
    1. What Is Responsive Design? 00:02:04
    2. Media Queries 00:02:24
    3. Images In Responsive Design 00:01:35
    4. A Simple Layout With Three Breakpoints 00:04:33
  12. Browser And Device Testing - Fixing Problems And Ensuring Accessibility
    1. Testing Different Platforms 00:03:14
    2. Debugging CSS Problems 00:02:57
    3. Accessibility Tips 00:02:37
    4. Common Problems When Making Websites Live 00:02:02
    5. Resources And Where To Get Help 00:01:57
  13. Principles of Mobile Interface Design
    1. Principles of Mobile Interface Design 00:49:22
  14. Responsive Web Design Bootcamp
    1. Responsive Web Design Bootcamp 00:47:31
  15. Advanced CSS Styling & Animation
    1. Advanced CSS Styling & Animation Part 1 00:28:25
    2. Advanced CSS Styling & Animation Part 2 00:28:39
  16. Touch & Gesture Event Handling
    1. Touch & Gesture Event Handling: Click Delay 00:08:06
    2. Touch & Gesture Event Handling: Displaying Touch Event Properties 00:11:04
    3. Touch & Gesture Event Handling: TouchToDo 00:23:51
  17. Building Hybrid Apps with PhoneGap
    1. Building Hybrid Apps with PhoneGap Part 1 00:26:50
    2. Building Hybrid Apps with PhoneGap Part 2 00:31:51
  18. Debugging Mobile Web Apps
    1. Debugging Mobile Web Apps Part 1 00:28:12
    2. Debugging Mobile Web Apps Part 2 00:19:48
  19. Getting Started
    1. What You Will Learn 00:03:44
    2. What You Need to Know 00:04:04
    3. CSS3 Versus JavaScript 00:02:46
    4. Software Requirements 00:06:34
  20. 2D Transformations
    1. Translations 00:03:22
    2. Scaling 00:01:54
    3. Rotations 00:00:52
    4. Skewing 00:01:12
    5. Origins 00:01:21
    6. Multiple Transformations And Matrices 00:02:40
  21. 3D Transformations
    1. The Third Dimension 00:07:02
    2. The Z-Axis 00:02:18
  22. Transitions
    1. CSS3 Transitions 00:05:03
    2. Properties, Durations, Timings And Delays 00:04:58
    3. Advanced Transitions 00:05:44
  23. Animations
    1. What Are CSS3 Animations 00:02:39
    2. Animation Keyframes 00:02:24
    3. Animation Properties 00:04:13
    4. Advanced Animation And JavaScript Events 00:03:24
  24. Animation Examples
    1. Blurred Links 00:02:43
    2. Better Buttons 00:01:37
    3. Tooltips 00:02:29
    4. Loading Icon 00:02:28
    5. Accordion 00:03:13
    6. Sliding 3D Menu 00:03:11
    7. Star Wars Scrolling Titles 00:03:27
  25. Further Resources
    1. Development Tools 00:02:57
    2. Online Resources 00:01:35
  26. About The Author
    1. About Craig Buckler 00:01:51
  27. Introduction
    1. A Quick Introduction To CSS3 00:00:55
    2. What You Will Learn 00:01:04
  28. The Basics
    1. CSS Hover 00:05:26
    2. New CSS Selectors 00:03:26
    3. Direct Child 00:08:23
    4. Creating Hover Tabs - Part 1 00:04:42
    5. Creating Hover Tabs - Part 2 00:05:28
    6. New CSS3 Properties - Part 1 00:02:09
    7. New CSS3 Properties - Part 2 00:03:37
    8. New CSS3 Properties - Part 3 00:06:38
    9. Basic CSS3 Transitions - Animations 00:07:52
  29. Building A Simple Menu With CSS3
    1. The HTML Markup - Simple Menu 00:02:21
    2. Styling The Dropdown 00:03:33
    3. Adding The Hover Functionality 00:04:11
  30. Building A Multi-Level Dropdown Menu
    1. The HTML Markup - Multi-Level Menu 00:05:25
    2. Styling The First Level With CSS3 - Part 1 00:04:41
    3. Styling The First Level With CSS3 - Part 2 00:05:37
    4. Styling The Other Levels 00:03:16
    5. When To Style Which Tag 00:06:52
    6. Adding CSS3 Transitions 00:05:28
    7. Changing The Menu Layout 00:04:32
  31. Conclusion
    1. About The Author 00:01:16
  32. Introduction
    1. Welcome 00:00:56
    2. What is Sass? 00:01:47
  33. Configuring the Work Environment
    1. Installing SublimeText 3 and Packages 00:05:27
    2. Exploring the Starting Files 00:05:34
    3. Installing Koala, a Sass Compiler 00:02:33
    4. Creating a Sass Stylesheet 00:04:38
    5. Comments in Sass 00:03:33
    6. Including Simple Variables, Compiling, and Viewing Results 00:07:35
    7. You Try It: Creating Sass Styles with Variables 00:03:41
  34. Working with Variables, Math, and Functions
    1. Global Variables, Local Variables, and Default Values 00:08:47
    2. Manipulating Variables through Math 00:06:08
    3. Manipulating Variables with Core Math Functions 00:07:10
    4. Manipulating Variables with Core Color Functions 00:10:40
    5. You Try It: Manipulating Variables 00:03:58
    6. Writing Your Own Functions 00:06:10
  35. Nesting Expressions
    1. Understanding Nesting with Sass 00:03:07
    2. Using & to Reference Parent Selectors 00:03:02
    3. Nesting Within Selectors and Using Nesting with Caution 00:05:52
    4. You Try It: Nesting 00:03:05
  36. Mixins and Extend
    1. Creating and Using Simple mixins 00:07:22
    2. Understanding and Creating mixins with Variable Arguments 00:08:38
    3. Creating and Using extend 00:04:53
    4. Eliminating Extra Classes with extends 00:03:35
    5. Creating Multiple extends 00:02:39
    6. Chaining extends 00:03:29
    7. Extend-only Selectors 00:04:55
    8. Understanding the Difference Between mixin and extend 00:03:05
    9. You Try It: mixins and extend 00:06:29
  37. Understanding if and else
    1. Understanding @if 00:05:36
    2. Working with @if/@else and Default mixin Values 00:06:55
    3. Media Queries, mixins, and @if/@else 00:10:28
  38. File Management and Organization
    1. Understanding, Organizing, and Compiling Sass Partials and Files 00:11:01
    2. Incorporating External CSS Files 00:03:34
    3. Preparing for Site Launch 00:04:11
  39. Conclusion
    1. Goodbye and Next Steps 00:02:10