Creative Coding with CSS | Jake Albaugh | Skillshare

Creative Coding with CSS

Jake Albaugh, All around dummy

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

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • 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.





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!

Meet Your Teacher

Teacher Profile Image

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 around my other interests. I enjoy making noise, visualizing sound, hacking with CSS, and trying to solve the Travelling Salesman Problem.

As a two-time college drop-out with a "third time's a charm" two-year degree from a community college (that took four years to earn), I have foun... See full profile

Related Skills

Technology Web Development

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Introduction: My name is Jake Alba. I'm an engineer at For those that don't know, CodePen is a tool and community for front end developers. I've been working there for 2.5 years. I'm a back-end dev primarily, but my background is actually in design. I went for a formal design education to self-taught front end and two self-taught backend. When I say self-taught, I really mean leaning on the backs of everyone else in my life over 10 years. But I understand how hard it can be to make those transitions. The one thing that I found that kind of kept me going through all of that was being creative. In fact, that creativity, I would argue, is one of the best mechanisms one can have to learn new things. So I am very inspired, creative person, and that comes out for me in the world of front end code. Even though my job is doing back-end at CodePen, I spend a lot of my free time coding on the front end for fun. What this course is, I just got done with all of my videos for it. I'm really excited to share it. We're going to be building a CSS calculator using SAS, HTML and CSS. SAS is a pre-processor that generates CSS for us. So at the end of the day, it's all HTML and CSS. There will be zero JavaScript, but this calculator will function. We will be doing math equations in a web browser only using CSS. We're going to be using code pen to do it. The reason for that is that it will take a lot of time out of the equation for us. Things like spinning up a dev environment or worrying about other things. Codepen takes care of a lot of stuff for us and so one of the added benefits is that I can also just share CodePen links with you. You can click them and see the code that we're going over in the lesson. You can save it to your own account. We're going to be setting up free CodePen accounts in the first lesson. Then once you have that, you can start collecting all of this code into your CodePen account to refer to it later, and to go over it again after you watch the lesson. This lesson format is fairly fast-paced. We're going to be going through a lot in a very short amount of time. I wanted to make this as potent as possible and have the end result be as good as possible. So we're we're going to run through a lot of stuff in the next 60 minutes. And I just want you to know that you are more than welcome to go back to ask questions and to explore the code that I share with you outside of the lesson. I'm really looking forward to this. I'm looking forward to being creative with you. Hopefully you will feel some level of creative inspiration hacking around in HTML and CSS. We'll see you in the first lesson. 2. CodePen is for Creativity: All right. Welcome to the first lesson. All we're going to be doing here is setting up a free CodePen account and getting used to the editor and our settings for the editor. To sign up for a CodePen account, we're going to go to CodePen dot io. We can either sign up for free here or just click this button up here, and you can go through that sign-up process. I am not going to do that because I already have an account. In fact, I have two. This is my main account. This is my paid account. If you're interested in seeing my work, you can go to CodePen dot io slash Jake Albaugh. But my editor is going to look a little bit different than yours because of that. I am signed in as my free account and once you're signed in from this homepage, we're going to create a pen. So to do that, we click Create and we hit New Pen. Now, what a pen is, is HTML, CSS, and JavaScript that we can code. I'm going to hide JavaScript because we're not even going to use that in this entire course. We'll just say, hello world. In our CSS, we're going to say color red, box shadow zero pixels, three pixels, zero pixel. Let's make it 10 pixels. Why not? We get this box shadow around our H1 and we're going to be using some CSS settings for everything we do in this course. We can either access that here with this button or we can just click Settings up here and navigate to our CSS settings. Now our CSS preprocessor, we're going to be using SCSS, which is Sass. It's different than SASS, but we won't get into that at this point in time. You're going to want to enable Normalize and Autoprefixer. By default, you'll see neither. We're going to do normalize for getting rid of, it's a small CSS file that overrides the default styles and makes them a little bit more palatable and Autoprefixer adds our vendor prefixes for us, so we don't have to write dash WebKit or dash MOZ or dash MS or anything like that. It'll take care of all of that for us. If we want we could add external resources. You could add something like bootstrap by just typing it in and spelling it correctly. Bootstrap. There we go. Now bootstrap is in our style sheet. We're not going to use any resources in this course, but this can be incredibly helpful if you want to include other libraries. From here, we can also title or add a description to our Pen, add some tags to it. We're not going to worry about that right now. We've added Autoprefixer and we've added Normalize. When we look at our compiled CSS here, so here's the CSS we've written, but we can also see the compiled CSS. This is what the browser is reading. We'll see that Autoprefixer ran and added a WebKit box shadow in there for us so that this box shadow will show up in all the browsers. The Normalize converted the default Serif into a San-Serif, it got rid of a margin around the body. But the thing is, these settings as nice as they are, they're a bit annoying to turn on every time we create a new Pen. What we can do is we can go to our Settings and this is where we can control all of our editor settings. Right now, we can change the way that our editor looks. I'm on Twilight right now, I'm using this font, but we could change the font for the editor, you can change the font size. I prefer Sublime Text key bindings, that gives me the shortcuts that I'm used to. Then down here in this section, you can select Normalize and Autoprefixer to be enabled by default, which means when you create a new pen in the settings, these two will be default to on. Now that we've done this and we've set-up our editor. We're going to get into some actual coding. From this point on, I'm going to be providing links to Pens for each lesson. Now you can click those links, copy the Pen over to your account just by saving it, and you can follow along and even edit them as well. Let's get into it. 3. "Checking" out Inputs, Labels: In this lesson, we're going to get into siblings and sibling combinators and attribute selectors. But to start, let's take a peek at HTML siblings. You can see here we have three siblings. They're all paragraphs and they're actually siblings of a div. That's because they all share the same parent. They are not siblings of this paragraph because this paragraph does not share the same parent. It's parent is this div. Now we can select siblings using pseudo-selectors. Now the first child, pseudo-selector, refers to the first sibling that is a paragraph in this case. We're going to make the color red. What you see is we actually have two first childs, our first children I guess, and that's because this paragraph is the first paragraph in this parent. This paragraph is the first paragraph in all of our HTML. They are both first child. From that, we can select other paragraphs. Here we have first child plus P. What this plus is, is it's the adjacent sibling combinator, and all that means is immediately following. If we read this backwards, we see, find a paragraph that is immediately following a first child paragraph. In our case, that would be this paragraph, My name is Jake, because it is immediately following a Hello World, which is our first child. When we make that italic, we'll see that my name is Jake is the only paragraph that is selected by our adjacent sibling combinator. The general sibling combinator, which is this tilda, means any paragraph sibling that follows the first child. Instead of it being any adjacent sibling, it's any sibling. When we say text-decoration underline, that underlines are two paragraphs that are siblings of our first child. Note how this doesn't apply to the paragraph that is inside of the div because this paragraph is not a sibling of our first child. Now that we understand siblings, let's look at attribute selectors and how we can use these sibling combinators to achieve logic in our CSS. In our HTML, we have two inputs with a type of checkbox. They both have unique IDs and they are siblings of a paragraph with two labels. These labels have this for attribute which corresponds to the IDs of an input. This label is for input one, this label is for input two. The reason that we use a for attribute is to link a label to an input. In the case of a checkbox or a radio input type, that means that when we click a label, it will check the input that it is four. Now, that's something that we can hack and we're going to get into that in just a second. Here you'll see that we're using this for attribute in a selector, and to use an attribute selector, you just simply wrap the attribute in square brackets and that is the same thing as if we gave it an ID or a class. But since we've already had to write this for markup to link it to the input, we might as well use it and not worry about adding a class or an ID to the label. When we say label for input one, red, that makes the label for input one red. Same goes for input two, and we're making it lime green. Now one cool thing about checkbox and radio inputs is that they have this pseudo selector called checked. That's kind of this pseudo state that only applies when they are checked. When we have input with an ID of input one checked, that only works when that input is checked. What we do is we combine that with our general sibling combinator to find its sibling P, and then inside of that paragraph, we find a label for input one using our attribute selector. What this allows us to do is style our labels only when their inputs are checked. When we say font size 30 pixels, when we check this, the font size becomes 30 pixels. This is really cool because we've achieved logic in CSS and HTML. Now let's look at how SAS can help us do that on a bigger scale. To start, we're going to get into mixins and extends. 4. @mixins vs @extends: Let's say you have a bunch of CSS and you need to apply it in multiple places, but you don't want to repeat yourself. That's where Sass can help us with mixin's and extends. Before we get using Sass, we want to make sure that in our Sass settings, we have selected SCSS as the preprocessor, so this will default to none and we want to use SCSS. This is the form of Sass that looks most like CSS, as A:Sass uses white space, doesn't have semi-colons or curly brackets, and so we're going to avoid that just so that our Sass looks a lot like CSS. Now here we have two elements, there are two spans with two different classes, and we want to apply some basic styles, just give them some padding and a background color. To do that, we're going to use a Sass mixin, so the way you define a mixin is you say, @mixin and then you give it any name you would like, in this case I'm using button. Then inside of that, you write the code that you want to apply with this mixin. To use the mixin, we use this keyword "Include" and then write our mixin name. When we do that for our two classes that we've applied up here, we can see, 'view compiled CSS', in this drop down here. This is the CSS that Sass generates, so it's important to understand, the browser's not reading Sass, the browser is reading CSS. This is the CSS that it's generating. We see that we've applied our two blocks of declarations here, but this is inefficient, it's the exact same thing two times, and so that's unnecessary. That is why Sass gives us this thing called extend. Extend looks exactly like our mixin except instead of including a mixin, we are extending a class. We've defined a button class up here with the same code block that we were using in our mixin, and we are calling it extend.button instead of include. When we look at the compiled CSS, you'll see that Sass is intelligent enough to put all of this in one block for us instead of the two separate blocks we had in Sass. Now it might be annoying to you that we have this extra button class that we're not using in our HTML, and that's why Sass gives us placeholders. A placeholder, we use a percentage sign instead of the dot we are using up here with our class. What happens is, when we view the compiled CSS.button is no longer in our list of selectors here. Now, the reason that could be valuable is that, if we give something a button class later on, we won't have a conflict with this class. It's always better to use placeholders when applicable. You might be thinking, why would I ever use a mixin if an extend can do the same thing? Well, it can't, it only can in this example. In the next lesson, we're going to get into how we can make it dynamic mixin to do a lot more work for us than we could ever do with an extend. 5. Sass $variables, color @functions and dynamic @mixins: In this lesson, we're going to look at Sass variables and how we can make our mixin dynamic. Alright, so here we have some behavior that we're already used to. We have an input and a label for the input. When we click this label, it checks the checkbox above it. I'm going to hide this for now and we're going to skip past this mixin here, and we're going to look at these variables. In Sass, all a variable is, is it's a way to store a value and you can use the variable name all throughout your style sheets. If I copy this variable name and I put it here, I can say color equals color primary, and that's the same thing as writing color tomato. Now the reason we would do this is if we have enough of these uses of color primary, we only have to change color primary one time and it will update the rest of our style sheet. This variable syntax allows us to inject these colors all over the place and only have to change them in one place. Now, you'll see that our label here is including our button mixin above, and it's passing in a variable. It's saying include button, and I'm going to give you the color black. Now what happens is our mixin expect something to be passed in. So in this case it's naming it color. It doesn't care what this variable name is. It's giving it its own name for the mixin. We can have multiple variables being passed in here, but we're only using color right now. What we do is we apply a background of the color. So our label, will have a background of color black, which is 444. That is why our labels background here is 444. Now you'll notice that there's a border that goes around it and it's lighter and to do that, we're using a Sass color function called lighten. All you do, this only works in Sass, but you pass in a color and how much you want to lighten that color, and it will convert that to an actual color for you. If we look at our compiled CSS, we'll see 444 than 5e5e5e, which is a hex value that is slightly lighter than 444. Now, beneath that we have this ampersand hover and all ampersand represents is the selector that existed when you included the button. In our case when our label include button, this is the same thing as writing label:hover. If we say ampersand hover, we're referring to the label's hover state. In here we're using the darken Sass function to make a slightly darker color on hover. When I hover over this, the background becomes slightly darker. We can see that in our compiled CSS 373737 is slightly darker than 444. Now, what we've done is we've encapsulated this idea of a button and the hover state of the button inside of this mixin. But what's cool is we can pass any color into it. In our selector that selects the label when the input is checked, we can pass in our primary color, which is tomato and that turns into a lighter tomato border and a darker tomato background on hover, but only when it is selected. Now it's important to understand that we're passing variables in, but it doesn't have to be. This can be the color red. This could be any hex value. That's a random hex value. Yeah. So we have a darker hot pink magenta here. We can use this mixin all over the place and include different colors and we can extend this idea of a button to any element we want. Sass mixins save us a lot of hassle writing code, but Sass provides other resources for us to, to help us save time in other scenarios and we're going to get into that in the next lesson. 6. Sass! What is it good @for?: To start this lesson, we are going to create text content using CSS and then change it dynamically. Here we have two radio inputs, and a radio is just like a check box. The only difference being that when you name them the same, it groups them, which means only one of the two can be checked at any point in time. In the HTML, we also have two labels for those radios and inside of this div, we also have an empty h1 tag. You can see that this h1 tag has content in it, but it actually doesn't in the HTML, and we're using CSS to do that, not JavaScript. If we look down here, we'll see that to make these labels have a background of tomato, we're doing our sibling combinator to select each label in the same way that we've been doing up until now, and using that logic, we can also select the h1 when a radio is checked. When the radio 1 is checked, select the h1, and then we use a pseudo-element before and add content to it that says, radio-1 is checked and here we're doing the same thing with radio-2. Now, when we look at this here in our Inspector, we'll see that we have a before element that's gotten injected in here. There's before and there's after. Those are the two that have this CSS property content that we can put stuff into. What's important to recognize here is that this content isn't real content. If someone has a screen reader, because they have a disability or they use it for other accessibility reasons, this content is invisible. This is only something we want to do when we're having fun and hacking around. This isn't a technique you'd want to do for actual content for an actual website. But the cool thing about it is, it allows us to conditionally display things on our screen only using CSS. This is really cool. But what happens when we have a more complex scenario? That's where Sass can help us out. Here's our example from before, where we have two radios and we're doing their labels state and we're also changing the h1 before content. Now, let's say we have 10 of these. That turns into a lot of code that we don't want to have to write, and that's a great use case for Sass. So in this pen, I have an example of 10 radio inputs with 10 labels and when we look at the CSS here, we have a mixin that has a hover and active. Active is when you're holding down a button and we're going to just put that away for a second here. We'll see that our default labels state, we're just extending an inactive button placeholder class, which calls the mixin and passes in a dark gray. But then beneath that, instead of writing the active state for every combination of checked radio input, we're using a for-loop, and the way a full loop works is, you define how many times it's going to loop. So one way we could write this is for i from 1 through 10, that would loop 10 times. In this case, I'm just putting it in a variable. So we'll just say radios. For i from 1 through radios which is 10, do this inside of it. I represents the value that's iterating. So it'll be one the first time through two the second time, three and so on. Now you'll see here we can use i in our selector. In order to do that, we need to use what's called string interpolation, which takes the i and looks at it as a string instead of an integer. To do that, you wrap it in curly braces and you put a pound sign at the front of it. This will turn into radio dash 1, the first time through 2, 3, and so on all the way through 10. What we're saying is radio 1 is checked, find the div, find the label for radio 1. We're using string interpolation again here and extend active button. When the input is checked, make the label active. Now down beneath it, we're doing the same thing except we are changing our h1s before element and we're saying the content will be radio variable i is checked. What this looks like is we have our default label style with hover and active states, then because we're extending the active class in our for loops, we get radio 1, find label for radio 1, do the same thing for 2, all the way up to radio 10 and this is our active label color. Then when we do the hover bit, it does the same thing and this is all coming from that mixin. In the same way we have these three from the mixin, we get these three active states from the mixin. Then beneath that we get our before content from 1 all the way down to 10. This allows us to, in theory, if we had in our HTML 100 radios, all we have to do is change that number and our CSS accounts for it. So this goes all the way up to radio 100 and then the content beneath goes crazy all the way up to 100 as well. This is great. We're able to dynamically display different types of information only using our CSS. What happens if that information is more complex, like a math equation? We'll get into that in the next lesson. 7. A Calculator?!: Now we're going to actually do math with CSS and we're going to need some help from Sass. You can see the result down here, is that we have series of radios, two groups of radios, two groups of labels for those radios, and an output that is the actual addition of Group 1 plus Group 2. 2 plus 8 equals 10. In our HTML, we can see here's our two input groups, we have inputs that are radios, which means only one in a group can be selected at a time, and they're grouped by their name, Digits 1 and their name down here of Digits 2. Each one has a value. This property, we're not really using, it just for us to keep our wits about us as we're looking at this. This input is the value of zero. We can see that this is reflected in the ID. We have the name plus a dash plus the value is giving these IDs. Beneath all of these, we see we have a sibling section, a sibling of the inputs. Then inside we have two groups of labels for each input. Here's all the ones for Group 1, and here's all the ones for Group 2. That corresponds to these two rows of labels right here. Beneath all of it, we have a result just like our H1 from before and that is where we're injecting the content for the math equation. Now in our CSS, we're using Sass to do a four loop, which you'll remember is just a thing that runs a certain amount of times. Inside of that, we have a variable that changes its value every time the loop runs. We have this big loop right here, this 4x, and x goes from zero through nine, so it'll be 0, 1, 2, and so on. What we do is, we first handle the label styles. Here we have an input with an idea of digits dash 1, dash x. When that's checked, find the label for digits dash one, dash x. The first time through that'll be zero and we do the same thing for the second group. What that allows us to do, is it allows us to extend the active button to both groups for zero through nine and so that's going to target each one of these labels over here. Beneath that, we have another loop inside of our original loop. All we do, is we set a separate variable name. In this case, it's y. This will run 10 times for each of the 10 main loops. Here we have the logic for two things being checked. Right now, I have the two first inputs being checked. So this is, zero is checked and zero is checked. What that looks like here, would be, when the input with an ID of digits 1-0 is checked, find the input sibling digits 2 dash 0. If that is checked, find the section and then find the result. In the before pseudo element, write the content x, then the literal string plus and then y, then the literal string equals. Then here, we're actually doing real math with Sass. We're adding 0 plus 0 in this case. Sass knows how to do math for us. If I change this to multiplication, and I'll just change it here so it makes sense, when we do 7 and 7, it's giving us 49. I'll undo that back to our addition here. Now 7 plus 7 equals 14. When we look at what we're generating here, we'll see that here are our active labels, the same way we've been doing in previously. So background tomato for each label and then we get into the logic of our CSS. When zero and zero are checked, write 0 plus 0 equals zero. That goes all the way down to every combination of numbers in our HTML. All the way down to 9 plus 9 equals 18. What's cool about this, is that we're literally generating every potential outcome of our calculator in something like JavaScript, that would happen dynamically, like when you click this and when you click this, JavaScript would do math and tell you the result. But for us, instead of rendering on input, we render every potential input, we come up with every possible thing that can happen and then we just play the game of find the scenario and show the output down here. This gray null, but it doesn't do multiplication, division, or subtraction. We're going to get into that in the next lesson. 8. @function-ality: By the end of this lesson, we'll have all the mechanics of our calculator complete, and it'll only be a matter of styling from that point on. Now that we've tackled basic addition, let's take a peek at how we make this work. Every possible infinity, four divided by zero, every possible mathematical function we can perform here using basic operators. You'll see that we have four new radios. Those correspond to these four labels right here. In our HTML, we've defined these radios as operators. We have operator 0, 1, 2, and 3, which are plus, minus, times, and divide. Then we also have our labels for them. Here, with the prettier form of times and the prettier form of divide, we get the symbols. At the very bottom after our second row of digits, we have our result. Let's see what it takes to make this happen. You'll recognize our x and y loops from earlier. The only difference is they're inside of an old loop. This is another loop. This will run four times, once for each of our operators. We select the label for the active input, just like we've been doing, and we've extend the selected place holder here to give it the background and whatnot. Then inside of our x loop, we're doing the same thing. We're styling the two digit groups for those active digits. Then finally inside of the y, that's where we do our math. If you remember earlier, we were just doing x plus y, but now, it's not just plus. We need a way to do all the different types of operations right here. To do that, we're using a math function. It looks like math takes operator, which is 0-3, x, which is going to be 0-9, and y, which is going to be 0-9 as well. It's going to return the math result here. This function is not a SAS function, this isn't built into SAS. This is a function that I have created. If we scroll to the top here, we'll see this math function that I made in this SAS file. Declaring a function is as easy as declaring a mixin, you literally just write function and then name it whatever you want, you define what's going to be passed into it. In this case I'm saying, we're going to get an operator, an x and a y, and then I have a reminder up here what each operator represents. Zero is plus, one is minus, and so on. Inside of the function, we need to return a result. We return different things based on different conditions. To do that, we use the if conditions and else-if and else to return different things based on different scenarios. What I do is I say if the operator is a zero, so in the case that the operators are zero, return x plus y, because we're doing addition. I do the same thing for subtraction if it's one, and the same thing for multiplication if it's two. When it's three, we get into that scenario where dividing by zero is infinity. It's funny because SAS will actually throw an error if we try to divide by zero, so we need to catch that and say if y is equal to zero, return infinity else return x divided by y. We can put an if condition inside of another if condition. That way we can conditionally return different things for division. Finally, if something else is passed in that isn't a 1, 2, 3 or 0, just return [inaudible] because that shouldn't be happening. Finally, let's take a peek at what we output here. You can probably predict the result is a lot of CSS, and so let's just take one for example here. When operators 2 is checked, that's multiplication and digits 1-9 is checked, that's nine, and digits 2-7 is checked, make the result 63. What that's saying is seven times nine, times coming from here, 7 times 9 is 63. That is how we can do all of these different functions using hardly any CSS here. Our output is a functioning calculator. In next lesson, we're going to use flexbox to set the layout of our calculator. 9. Flexin': In this lesson, we're going to use flexbox to make the layout of our calculator a bit more calculator like as you can see, we have a lot of, I mean, I've just removed most of the style from the last, the last lesson and we're going to style this thing out. I also added a bunch of ugly styles that we can keep track of what's going on. Our section is going to have a background of hot pink, that's the body of our calculator and then the divs inside of it have a background of light gray. I've added some default style here for our section, I just allows it to be a little bit responsive. We're going to design this thing mobile-first, we're not going to get into large screens in this lesson. But what we're going to want to do is, use flexbox because that's going to give us a lot of potential options for our layout and have a dynamic and responsive layout in the end. We're going to start by giving our section display flex, which as you can see, puts every div and the DH1 inside of it in a row horizontally. We're going to want to use flex-direction column and what that does is that puts it back in a column format. It looks identical to before we turned on flexbox, but that's fine. We need flex later on and so we want it to be explicitly flex in a column layout. Now, for each of these divs, we're also going to make them flex and you'll see that that sucks up all the labels to the left here. When we squish this, you'll see that they stay horizontal but what we want to do is we actually want them to rap and so to do that, we use flex-wrap. Now you can see that the 7-8-9 got pushed to the next line for both sets of numbers. The reason for that is we're going to have a layout where it's a three by three grid of numbers and so to do that, we need to be able to wrap the numbers around. I'm going to add a margin to each of these divs here so we can see it more clearly. For every label inside of a div, I'm just going to enable some default style. What that's going to do is that's going to make, it so that they've a black background and white by default, that's their color and their text-align center so that when they become bigger, the texts will be inside of it, centered. Now for our digits, those are the two sets of zero through nine. We're going to set the height of those divs, to a 180 pixels. Imagine a three by four grid here of each of our numbers so 012, 345, 678 and then nine at the bottom. In order to do that, we're going to want some vertical spacing here. For our operators, we're just going to have them go horizontally, but we want them to be taller than what they were. Our operator's div, we're going to give a height of 45 pixels. Inside of our operators. We want these labels to have a width of 25 percent. That'll spread them out across the entire operator's div. Now, you can see our result is at the bottom here, but on a calculator, result is normally at the top. The way we can do that with flexbox since our section is display flex, we can set the order of divs so or any element. We're going to say all of our divs have an order of two, but div dot result will give an order of one and since this is lower than this, the result will be first. Now, this can be any number, it could be 20 or whatever, as long as this order is less than this order, it'll come first. I'm going to add some padding to our result here and then finally, we have to style these labels inside of our digits. I'm going to give each layer label a width of 33.333 percent, which will evenly padded out here. Now we have a three by four grid of our buttons for each of these and we're going to set the height explicitly because we're going to need that later. From this point, you can see how we can start to envision what the final calculator is going to look like. But we have a lot of other things to take care of. For one, these numbers are in the wrong order. We'll get into that in the next lesson, and start making this thing look good. 10. “Get in line": In this lesson, we're going to make our labels look a little bit more like buttons and get them into the right land. The first thing we'll do is add a margin to these labels and you'll see that that extra margin of four pixels around the entire label makes it so that they no longer fit in the width. That's because we gave them a width of one-third, but then added eight pixels. What we want to do is set the width to be one-third minus eight pixels so that they will fit inside of here in a row of three. The same thing for the operators, except 25 percent and the way we do that is using a calc function. Now calc isn't SAS. This is normal CSS and it allows us to add or subtract different units from each other. We can say one-third minus eight pixels, and that will translate in the browser to one-third minus eight pixels. When we look at this, it doesn't turn into a number. It is actually calc, that's the value of the width and that allows the browser to calculate what that is whenever this changes. One-third minus eight pixels is a different size whenever the window changes. We need to do the same thing for the height because these were bumped down, so 25 percent minus eight pixels. Then our operators are 25 percent width minus eight pixels and 100 percent height minus eight pixels. Now, what we're going to do is we're going to make our zero, 100 percent width. In the end of this, we're going to have our zero be the last item and in the calculator layout, the zeros at the bottom, one through three are in the second-to-last row. Four through six are in the second row and seven through nine are in the top row. We're going to use our order property from earlier to do that, but for now, we're going to assign 100 percent width to zero and to do that, we use nth-child. This is the same thing as saying first-child and nth-child just gives us the ability to put in any number here. I put in two, that selects the second child and makes it 100 percent. Our ones are 100 percent. We could do seven and if we do something like 70, it won't apply to anything because there is no 70th child in our markup here. We need to change our order here. Zero needs to be last, seven needs to be first, and so on. To do that, we're going to use a loop and these borders. This is a list, I named it orders. This could be anything, but I put for reference the digits above it. Our first child is a zero, our second is a one, our third is a two, and so on. Beneath it, I have defined these orders. We want our zero to be last. I'm giving it a 10 as its order. I'm giving our one a seven, I'm giving our seven a one, and so on. Since we're using SAS here, if we use a normal standard CSS comment, this will render these values beneath. What I'm rendering here is i inside of our loop, which is one through 10 in this order, and so order is going to be nth orders i. What that means is, this is a SAS function that plucks something out of a list in a position. If I say nth order is one, that will grab a 10. If I say nth order is two, that will grab the seven because that's the second position. If I say nth order is 10, that'll grab our three because that's the last position. When we put i in here, it's going to say the first child is nth orders one. If we look at this, when we compile this in our comments that we've written, we see what those values are. When i is one, order is ten, when i is two, order is seven, and so on. Now all that's left is we just need to use that value here. We say the order is whatever this plucks out. This order value will dynamically change because it's inside of the loop. We see that our orders are correct over here and that's how we get ourselves a calculator looking layout. This layout is great, but on larger screens, the column format may not be best. In the next lesson, we're going to use media queries and flexbox to change the layout to be horizontal on larger screens. 11. Dynamic!: We're so close to being done here. In this lesson, we're going to change our layout on larger screens. I've gotten rid of some of our default style here we have a white background instead of pink, and all the divs no longer have that gray background behind them. The first thing we want to do is take these labels and center the text vertically, and we're going to do that with flexbox. So when I set these labels to display flex, it sucks their content. There's no HTML inside, just the number. It sucks it up to the upper left-hand corner. Right now the flex-direction is row, so it's going horizontally. We want to center it vertically. So we're going to set the flex-direction to column, and then we use this property called justify content, and we say center, and that only applies to things that are display flex and that will center the inner content vertically because flex-direction is column. Now if we want to do the same thing for our result div, a result div is already display flex and it's flex-direction row right now. I'm going to uncomment this just so we remember that it's flex-direction row by default, and then when we add justify contents center, it centers it horizontally because it is flex-direction row. So these are centered vertically because they're flex-direction is column and this is centered horizontally because it's flex-direction row. Now we're going to get into media queries to make this look better on a bigger layout. So we want a horizontal layout. We want the numbers than the operators, than the other numbers. This is normal CSS and it looks like SAS, but it's not, and this is a media query. So anything that happens inside of here will only apply when the screen is at least 600 pixels wide. We can see when we resize on CodePen, we get the screen size down here at the bottom beneath my cursor, and so anything in here only applies when that goes over or is equal to 600 pixels. So what I'm going to do is I'm going to say when it's over 600 pixels, make the section flex-direction row, and turn on wrap so that these wrap over the way that they were, and you'll notice we go back to column as soon as we get under 600 pixels. Now that we're over 600 pixels, let's make our H1s width 100 percent, and since flex wrap is enabled, that'll push everything down, and we're going to make the result also 100 percent width. Except you'll see now that this is misaligned on the left side, and that's because our div is result. But inside of here, our labels have a four pixel margin inside their div. So they're div lines up with this invisibly. But we want the label to line up with this. To do that, we'll just add a four pixel margin to our result. Now, our heights are off. In this format, we want them to be a little bit shorter so that we don't take up the full height of the screen, but in this we can afford to be a bit taller. So we'll set the two divs heights, the two classes of divs heights to be 300 pixels. Now all three of these have a height of 300 pixels. Now, since we are inside of a section which is display flex, We have this property as children of the section. So as the div is a child of the section, and so what flex does is it allows us to make these variable subdivisions. So when I say digits is flex three and operators is flex two, you'll see that we have a two to three ratio between our operators and our digits, either of the digits. So these are just variable three width and this was variable two width, and so then that applies at whatever scale we're at here as this flexes back and forth, it's a two to three ratio. Now, inside of operators, we can now make it a two-by-two grid instead of just going straight across. To do that, we'll use our calc again. Remember we're still inside of this media query up here. Now they're 50 percent width and 50 percent height for these labels in here, and now we have what we need to start putting the finishing touches on our calculator. Now that this thing is usable and adapts to different screen sizes, we can put the finishing touches on it and get into the design of it. That's what we'll tackle in the next lesson. 12. Making it Pretty: We are here. We are putting the finishing touches on our calculator. We are going to make this thing look snazzy, and you won't be seeing any more code after this lesson. Let's get into it. As you can see I've applied some default button styles here. They are coming in through this button mixin that takes a color. I've also defined our colors up here. We have teal, tomato and gray. Now down below you'll see that I have these extended classes using place holder classes [inaudible]. We have the selected button which is passing tomato into our button mixin. We have the digit button which is passing in teal so that's the default teal color for our digit buttons, and then we have our operator button which is passing in gray for our four operator buttons here. Everything else you can see we're extending our selected buttons down here. This is all code you would recognize. I'd encourage you to go through it. It's just a cleaner version of all the concepts we've been going over and you can see that I'm including these mixin. That's what we are going to be dealing with up here at the top so body and title and whatnot. We'll start with our buttons. The first thing we'll do is we'll give them a border radius of four pixels that rounds the edges a little bit, and then we're going to give them a box shadow that's slightly darker version of whatever the background color is. Now the box shadow it's first property is the X offset. If it's negative it'll go to the left. If it's positive it will go to the right same for Y. In this case we are actually [inaudible] a two pixels down. Then we have the fade which if I make 10 pixels you'll see the fade allows us to fade the shadow which we're not going to use, and then there is the spread. If I make this 10 pixels, you'll see that the spread spreads 10 pixels out. Right now since the spread is one pixel we have half a pixel on either side and then two pixels or three pixels total on the bottom because that's combined with the two pixels offset. Now for hover we're going to do a darker background. We are getting a darker background on hover, same coordinates for the box shadow but slightly darker color so that the shadow stays just as dark compared to the background. For the active state when we are going to be clicking, that's what active represents, that we're going to move the box shadow up to zero pixels. From two pixels down to zero pixels. The reason we're doing that is so that when we move the whole element down two pixels, so that's using transform and translate Y, we get this cool little interactive effect that makes these feel like buttons. That's being done by replacing the two pixel box shadow offset with a two pixel element offset. For the body, we're going to do a darker background, we're going to do a bigger shadow, and we're going to add a larger border-radius for that. This relative to the mass of the body of this calculator, our section element, it's better to have a bigger one than for the smaller mass of these labeled buttons. For our title, we'll give it a font-style italic. We'll make it white and uppercase. I'll make it a little bit bigger and give it a border bottom of our teal. We're going to do a cool little thing here with tech shadow. You'll see we get this 3D glasses effect and the way we achieve that, this is a cool feature of box and tech shadows. You can make multiple box and tech shadows in a single declaration. This has two tech shadows, the first of which is negative two on the x-axis, so that's left, negative two on the y-axis, so that's up, and then zero fade. There's no spread for tech shadows. The second shadow goes to the bottom right, and it's tomato. Finally, we'll get the result, so that's this area right here. We'll just add some basic stuff here, we'll have the font match and everything. We'll make it a little bit bigger than our buttons. We'll give it a border radius of four pixels and then for the box shadow, we're going to use this inset property. This inset keyword means push the shadow to the inside of the elements of the outside. If I remove this, you'll see that the shadow goes to the outside of the element, but we wanted on the inside. That does it. You made it. We finished making this crazy calculator. In the last lesson, I'm just going to give a quick little recap and talk about the places you can go from here with it. We'll see you then. 13. Recap: You made it. That was a lot. If you feel you still need to go back and look at code and reprocess, that's totally fine and totally expected. The most important thing is to make a habit out of creating. I hope from this point and I would challenge you to keep creating. CodePen's a great place to do it. It's really easy to just draft up a little sketch. I would encourage you to do that. Apply some of these principles. Maybe two other cases that you can think of, whether that's creating maybe a five-star rating system. That is five stars and their state changes based on inputs being checked or whatever. I would love to see it. Feel free to reach out to me. Feel free to ask questions. I will get back to you as soon as I can. I had a lot of fun doing this personally, to have my first-class on SkillShare has been a lot of fun and so I look forward to talking with all of you and maybe even doing another course here in the future. If you have any ideas for that, let me know. Have fun, stay creative and don't quit. It gets easier. Bye.