Creative Coding with CSS

Jake Albaugh, All around dummy

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Lessons (56m)
    • 1. Introduction

    • 2. CodePen is for Creativity

    • 3. "Checking" out Inputs, Labels

    • 4. @mixins vs @extends

    • 5. Sass $variables, color @functions and dynamic @mixins

    • 6. Sass! What is it good @for?

    • 7. A Calculator?!

    • 8. @function-ality

    • 9. Flexin'

    • 10. “Get in line"

    • 11. Dynamic!

    • 12. Making it Pretty

    • 13. Recap


About This Class

This class is a deep dive into some lesser-known functionality of CSS and HTML and how to use Sass well. We’ll discover some HTML and CSS hacks and use them to create unique interactivity. We’ll also explore how Sass can generate complex CSS for us so we can spend less time coding and more time creating.

As a designer-turned-developer, approaching basic programming concepts in Sass made my transition to JavaScript and the world of backend languages much easier. I have found that creativity can be a great mechanism for learning, so we will leverage creativity to “trick” ourselves into learning more about the world of front end development.

This class is for anyone with a basic understanding of HTML and CSS, who is interested in or already familiar with Sass, is probably (justifiably) a bit scared of programming in general, and wants to explore creative coding. Anyone who has the courage to approach and work through something unknown will ultimately get something out of this course.

We’ll check out HTML checkbox/radio inputs and their interesting relationship with labels. In CSS, we will learn about attribute selectors, the CSS calc() function, the power of sibling combinators, as well as some flexbox. You may be familiar with CSS pseudo selectors like :hover, or :active. We’ll get into the less-used pseudo selectors like :nth-child and :checked. Exploring Sass we’ll encounter variables, lists, @functions, @for/@each loops, and the difference between @mixin and @extend. Most importantly, we will build something functional using all these features—a basic calculator that does not use JavaScript.

We will use a free CodePen account to make our project which will simplify the complexity of using Sass and other tools like Autoprefixer and allow us to easily share and get recognized for our work!