Overview of CSS3
The web today is almost unrecognizable from the early days of white pages with lists of blue links. Now, sites are designed with complex layouts, unique fonts, and customized color schemes. This course will show you the basics of Cascading Style Sheets (CSS3). The emphasis will be on learning how to write CSS rules, how to test code, and how to establish good programming habits.
Duration
2 Days
Prerequisite for CSS3
Students should have prior experience with HTML and CSS.
Course Outline for CSS3
Day 1
- Introducing
- CSS3
- What is CSS3?
- Selectors and Pseudo Classes
- Attribute Selectors
- The Target Pseudo-Class
- UI Element States Pseudo-Classes
- Negation Pseudo-Class
- Structural Pseudo-Classes
- Fonts and Text Effects
- Fonts on the Web
- Font Services
- the @font-face Rule
- Text Shadow
- Word Wrapping
- Colors, Gradients, Background Images, and Masks
- Color
- The Opacity Property
- Backgrounds
- background-origin, and background-size
- Borders and Box Effects
- Image Borders
- Rounded Corners
- Box Shadow
- Must Know
- position
- Float
- Clear
- overflow
- resizes
- margin
- padding
- z-index
- Transitions, Transforms, and Animations
- Transitions and Transforms
- Transitions
- Layout: Columns and Flexible Box
- Layout: Columns and Flexible Box
- Flexible Box Model
- More CSS3
- Techniques to optimize CSS
- CSS compression tool
- CSS3 / Media Queries / Fallback
- Usage of! important keyword
- Naming Convention
- Conditional CSS
Day 2
- Vendor Prefixes
- What Are Vendor Prefixes?
- Maybe They Aren’t So Bad
- Strategies
- Embedding Media
- Video Formats
- Styling Video
- Media Queries
- Targeting Widths and Devices with CSS3 Media Queries
- Responsive Images and the viewport Metatag
- Writing media queries for desktop browsers
- Writing media queries for tablet viewports
- Writing media queries for mobile devices
- Writing media queries for extra small screens
- Writing media queries for printers
- Responsive Building Blocks
- Fluid Grids
- Fluid Images/Media
- Media Queries
- Breakpoints
- Overview
- What is SASS?
- Pre-processing
- Getting Started
- Installing SASS
- SASS Syntax
- Your Workflow
- Using the command line
- Using a desktop app
- Output Styles
- SASS style guides
- Working with SASS
- Comments
- Variables
- Nesting
- Functions
- Import and Partials
- Mixins
- @extend
- Conclusion