Mastering CSS Online Course

Mastering CSS Online Course

CSS is a powerful yet often underestimated presentation language that has evolved significantly in recent years. For front-end developers, maintaining clean, organized style sheets is essential—and taking a modular approach to styling is key. Rather than struggle with complex layouts, this course empowers you to master CSS and apply styles with accuracy and efficiency.

Designed for both aspiring and experienced developers, this video-based course offers a practical, easy-to-follow approach to writing CSS. You'll progressively build a deep understanding of modern CSS, with each section exploring advanced CSS3 features to help you create responsive, feature-rich web applications.

Who should take this Course?

The Mastering CSS Online Course is ideal for front-end developers, web designers, UI/UX professionals, and students who want to create visually appealing, responsive, and modern websites. It’s also suitable for anyone looking to deepen their understanding of CSS for layout design, animations, and advanced styling techniques. Basic knowledge of HTML is recommended to make the most of this course.

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