Curriculum (16+ hours)
What is CSS?
30 minutes - FREE
Learn what CSS is and why we use it. Start with some basic syntax and get comfortable with our code editor.
Tag Selector - Colors
60 minutes - FREE
Start by selecting tags and learning how to change colors. We will also cover different ways to represent colors in CSS. Finally, learn how to mix and match colors. Perfect for those that lack an eye for design.
Class Selector - Fonts & Text
70 minutes - FREE
Graduate to class selectors as we discuss the importance of classes in today's world of CSS. Learn industry best practices and how to manipulate text styles. Finally we will load in external fonts.
ID Selector - Units
Parent Child Selector - Positioning & Display
Let's combine all of our selectors and use inheritance. We will also learn how to properly position things on the page and what the different display types do in CSS.
Psuedo Selectors - Backgrounds & Borders
Finally, the last of the selectors, Psuedo, Before, After & Attribute. These are the least used, but some of the most powerful and expected. We will also cover Backgrounds & Borders and how to properly use images in CSS.
Reset Styles - Box-Model
Learn why most professionals start their CSS with a general Reset. You've heard of the box-model, now let's break it down into it's 4 parts. Margin, Border, Padding & Content. Learn the biggest hack in CSS history.
Specificity - CSS Math
Believe it or not, CSS isn't just an art form, it's also Mathematics. Learn what goes on behind the scenes with CSS Specificity. Learn WHY CSS just works.
FontAwesome - Icons
We all love icons, and FontAwesome makes it so easy to include icons in your website that are scalable and do not lose quality. Learn all of the magic of FontAwesome and how easy it is to master it.
Responsive - Mobile Design
One of the most in-demand skills of modern CSS Developers is the ability to design for all screen-sizes. Learn what employers mean when they ask for "Responsive Experience". How can you easily design for screens as large as billboards and as small as a SmartWatch.
Flexbox - Magic
Positioning has been fun but hard, make it easy and magical with CSS' built in Flexbox.
Animation - Transitions
Make your designs come to life with Animations. Learn about the Transition and Transform properties and even how to keyframe with CSS.
Sass - Variables & Functions
Who said CSS is not a programming language? Now it can be with Sass! Go deep into the world of CSS Preprocessors and how you can use variables, functions and more to automate your CSS.
Frameworks - Bootstrap & Materialize
Sometimes you just need to get things prototyped quickly. Maybe you want to focus on functionality and not design. Frameworks can cut out a lot of legwork when it comes to CSS and Design. Notice we learn this almost last, after you have become a professional CSS Developer.
Chrome Developer Tools - Design Inspiration
One of the most essential skills when debugging CSS is the Chrome Developer Tools. Learn from others and style directly in the browser instead of your code editor. Mastering Dev Tools will save you hours every week.