1.2 jQuery UI and CodePen

Hello and welcome back. In this course, we're gonna be taking a close look at the animation specific features of jQuery UI. You can find the jQuery UI website at jqueryui.com. And this is where you will find the documentation for jQuery UI, as well as any other information you might want. You can see the download links over here on the right, if you want to download those and use them on your local system. Or as we're gonna be doing in this particular lesson, we're gonna be pointing to the jQuery UI CDN in CodePen. So we're gonna be using the CodePen website to enter in all of our HTML, CSS and JavaScript. So on the jQuery UI website, you'll notice that there are a series of links over here on the left that show you everything that you can do or all the main features of jQuery UI. So we have some Interactions, some Widgets, and then some Effects down here closer to the bottom. In this particular course, we're gonna be looking more in the Effects section, specifically those effects that are specific to animation, such as Color Animation and Easing. So, again, we'll take a look at those as we move forward in the course. But for now, let's jump over to the CodePen website and let's talk about how we're gonna set up each of our projects. So on the CodePen website, which you can find at codepen.io, we can at any time create a new pen by clicking on the New Pen link over here on the right. And I would advise creating your own account on CodePen. It's a wonderful website, it's a great way to experiment with some front-end development features. So we can click on New Pen here and it will create a new pen for us and you'll see we have three windows for HTML, CSS, and JavaScript. And then over here on the right is our preview area. Now for all of our projects in this course we're gonna be using jQuery and jQuery UI for our animation. So if we wanna set this up in CodePen so that we can actually use jQuery code, we would click on the Settings link. And then under Settings you'll see there's a JavaScript tab. If we click on that, we can Add External JavaScript links here. So if you have your own JavaScript files, you can point to the URL for those files here or you can point to any number of different CDNs that host files like jQuery. And one of the great things about CodePen is it has this Quick-add section where we can click this drop-down and you'll notice that there are options for jQuery and jQuery UI. So we're going to select jQuery first and you'll see that that populates in the first text field here. And then if we go back to Quick-add and click on jQuery UI, you will see that that populates in the second section there. You can also click on add another resource if you want more than just two here. And then once you're done, you'll click on Save & Close. So that's the basic set up we're gonna be using as we move forward with the rest of our lessons. So we'll get started taking a look at our first animation effect with jQuery UI in the next lesson. Thank you for watching.