Creative Coding with CSS

Jake Albaugh, All around dummy

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

    • CodePen is for Creativity

    • "Checking" out Inputs, Labels

    • @mixins vs @extends

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

    • Sass! What is it good @for?

    • A Calculator?!

    • @function-ality

    • Flexin'

    • “Get in line"

    • Dynamic!

    • Making it Pretty

    • 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!

3 of 3 students recommendSee All

This was a fun class, and covered a lot of information in a short time. It was a great way to exercise my css knowledge, sass/scss, and flexbox
Thank you so much Jake! I stumbled upon on this course link on Twitter! I loved this course, such an awesome introduction to Sass for someone like me who has been using CSS3 for a while now. The choice or subject of the project was good too, incremental approach with new features in each lecture, to be able to perform logic in CSS and the explanation was to the point. Thank you once again, and hope to see more courses from you in the future. Kudos!





Jake Albaugh

All around dummy

I am an Engineer at CodePen.

My professional trajectory thus far has been from designer to front-end developer to back-end engineer (the real difference between an engineer and a developer I will never know). I've been in the web industry for something like 8 years. I do back-end for a living and front-end for fun, or was it back-end for fun...forget it. I enjoy my work.

My free time with code typically orients itself a...

See full profile

Technology Web Development