Mastering CSS Online Course
CSS is a deceptively simple presentation language that has significantly developed over the last few years. Front-end developers need to keep style sheets manageable and organized by taking a modular approach to building a website. They can either wrestle with it, or learn how to master it in order to easily apply layouts and styles with precision. This web development video course has been designed to help you build your knowledge of CSS and master one of the most valuable tools in modern web design.
This online course is an easy-going and pragmatic approach to authoring style sheets, and will help you gain a very solid understanding of CSS. The course keeps building your knowledge as each section discusses several features with CSS3 in order to create complex, feature-rich web applications.
Course Curriculum
CSS Foundations
- The Course Overview
- The Anatomy of a Rule Set and the Three Types of Style Sheets
- The Box Model and Block versus Inline Elements
Ramping Up
- Text Editors
- CSS Reset
- Chrome Dev Tools
- Renaming Elements: Classes and IDs
- Descendant Selectors
Creating a Page Layout with Floats
- Floats Introduction – Flowing Text around Images
- Creating a Multicolumn Layout
- Solving the Problems of Floats
Creating Buttons with Modular CSS
- Creating Buttons with Modular CSS
- Multiple Classes
- Specificity Rules
- Transitions
- Transforms
- Styling a Call to Action button
- Gradients
Creating the Main Navigation
- Starting the Navigation
- Using Pseudo Classes
- Absolute Positioning
- Building the Dropdown
- CSS Animations
- CSS Animations (Continued)
- Finalizing the Navigation
Becoming Responsive
- Fluid Grid
- Flexible Images
- Media Queries
- Mobile Menu
- Viewport Meta Tag
Web Fonts
- The @font-face Property
- Font Kits and Font Services
- Google Web Fonts
- Subscription Font Foundries
- Icon Fonts
The Workflow for HiDPI Devices
- 2x Images
- The JavaScript Approach
- 1.5x images
- Background Images
- SVG
- Srcset
Flexbox
- Introduction to Flexbox
- From Floats to Flexbox
- Understanding flex-grow, flex-shrink, flex-basis, and flex
- More Layout, More Positioning
- Building the Product Listing
- flex-wrap and align-content
- Changing the Display Order of Content
- Vendor Prefixes
Wrapping Up
- Next Steps
- Conclusion and Links