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



Tags: Mastering CSS Online Course, Learn CSS, Master CSS