Working with CodePen - CSS Tutorial

- [Instructor] CodePen is something of an industry standard for working with HTML, CSS and JavaScript directly inside of your web browser. I'll be working with CodePen in this course, and it's available here at codepen.io. You can follow along with my examples directly in CodePen, via the URL provided for each video without having an account. However, if you have an account, then you can save your work as you go through the process. So to show you how this works might have a web address on your screen, a URL, when you go to that particular URL, you'll wind up in a place like this, where this is called the forking exercise. And it may look like this by default, where I've got the three boxes across the top and the displayed values down at the bottom. You can just go ahead and start typing in here directly. Isn't this fun! Right into these boxes, and you can see the results underneath, but there's a couple of changes you can make to the screen that's going to make in particular, a media queries course a little bit easier to follow. First of all, we'll not be using the JavaScript windows, so feel free to just pull that out of the way, maybe give you a little bit more room for your HTML and your CSS. And under the change view option here, you can switch your editor layout. So by default, the code is on the top with the display on the bottom, not really all that conducive to working with media queries. So if you switch it to either putting your code on the left or the right, then your screen will look more like mine and you'll be able to see media queries more easily in action, since all you have to do is grab the divider here to make your screens smaller or larger and watch what the media queries do. Now, as I mentioned before, if you want to work just from this view here, in which case you are not logged in, you can go ahead and make changes to the code, but those changes will not be saved. So if you'd like to save your work, you can either sign up for an account using the link here, or click on the login link. I'm going to go ahead and leave the site. And you'll be presented with a screen where you can log in or sign up. And then down here at the bottom, notice that my changes got lost, that's a thing. And then down here at the bottom, there is a button to fork this. So feel free to go ahead and click the fork button, and that will make your own copy of this saved into your account, And then you can go on ahead and make your changes from there. Isn't this fun! And then save your changes at the top of the page. So that's a quick overview of how CodePen works, you don't have to have an account in order to follow along with this course, but if you want to save your work, you may find it helpful.