Creative Coding with CSS | Jake Albaugh | Skillshare

Creative Coding with CSS

Jake Albaugh, All around dummy

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

      3:25
    • CodePen is for Creativity

      4:27
    • "Checking" out Inputs, Labels

      4:59
    • @mixins vs @extends

      3:24
    • Sass $variables, color @functions and dynamic @mixins

      4:29
    • Sass! What is it good @for?

      5:51
    • A Calculator?!

      4:50
    • @function-ality

      4:34
    • Flexin'

      4:43
    • “Get in line"

      4:52
    • Dynamic!

      4:44
    • Making it Pretty

      4:49
    • Recap

      1:20

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!

87

Students

--

Projects

  • --
  • Beginner
  • Intermediate
  • Advanced
  • All Levels
  • Beg/Int
  • Int/Adv

Level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

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
Report class