1.2 CodePen

Hello, and welcome back to practical web animation. In this lesson, I wanna give you a brief overview on how we're gonna be using CodePen throughout this course. If you've never used CodePen before, CodePen is basically a website that allows you to very quickly throw together your own front-end web projects and if we create a new pen here for example, you can see that it gives you windows to entering your own HTML, CSS, and JavaScript. And then down here at the bottom, you will see the results of whatever code you've entered in. And one of the powerful things about CodePen is that you can use something that I've created as a starting point fork it which basically just means to make your own copy of it. And then use that as a starting point for your own project so you can fork it and then follow along with whatever changes we're covering in the course. So in this particular pen we might put a div here with a class of red-square for example. And then over here in our CSS we might create a rule for red-square. We might give it a width and height of maybe 100 pixels each and a background color of red. So once we do that you can see down here at the bottom we can see the results of our code. We can enter in some JavaScript in the window over here on the right. You can resize these windows. You can resize the bottom pane here as well. And there we go, so it's very easy to use and if I give you a starting pen to work with when you go ahead and save this one, then I will include the URL for that starting pen in the course notes, and then when you go to that starting pen you'll notice a button that says Fork. When we click on Fork, this basically just makes a new copy of our pen. And then once you have your new copy you can make whatever changes you want and it won't save over the pen that I created because again you've created your own copy. And so that's how we're gonna be using CodePen throughout this course, you can get to the website at codepen.io, I will include the URL for that intercourse notes. And again, for any starting pen that we use as we move forward throughout the course I will include those URLs as well. So thank you for watching, and in the next lesson will jump into CodePen and start creating our own practical web animations.