- Overview
- Transcript
1.2 CodePen
In this lesson, I will demonstrate how I plan to use the CodePen website to kick off all the small projects that you will be building throughout the course.
Related Links
1.Introduction3 lessons, 07:12
1.1Introduction00:30
1.2CodePen02:26
1.3Using External Libraries in CodePen04:16
2.Animation Refreshers2 lessons, 15:09
2.1CSS Animation Refresher06:21
2.2jQuery Animation Refresher08:48
3.Button Animations12 lessons, 1:53:20
3.1Styling Your Navigation11:16
3.2Simple Button Fades09:55
3.3Animating Multiple Properties06:19
3.4Before and After08:53
3.5Background Swipe12:31
3.6Background Swipe Variations06:28
3.7Text Scroll08:54
3.8Setting Up Your Buttons09:56
3.9Expanding Buttons12:53
3.10Setting Up 3D Buttons09:33
3.11Animating the 3D Buttons09:55
3.12Subtle 3D Hover Effect06:47
4.Image Animations3 lessons, 25:57
4.1Basic Image Hover Effects11:31
4.2Images and Captions08:52
4.3Animating the Images05:34
5.Other Web Elements6 lessons, 1:07:16
5.1Floating Form Labels06:07
5.2Animating the Labels11:03
5.3Animated Panels12:02
5.4Panels and Bullets13:09
5.5Styling the Pricing Tables12:50
5.6Creative Product Selection12:05
6.Bonus Projects3 lessons, 26:43
6.1Responsive Animation06:33
6.2Image Animations10:29
6.3CSS Slider09:41
7.Bonus Projects II3 lessons, 33:50
7.1Background Animation10:01
7.2Spinning Buttons09:33
7.3Submit Button Animation14:16
8.Conclusion1 lesson, 00:39
8.1Final Thoughts00:39
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.