Working with CodePen

- [Narrator] When web developers create websites, they use special software for doing it. They have a ton of different files of HTML, CSS, JavaScript, and sometimes other files as well. And it makes it complicated to share code with other web developers. So they invented this thing called CodePen as an easy way to share HTML, CSS, and JavaScript. One of the nice benefits to this for us is that we can learn HTML right here inside of our web browser without having to download anything special or work with individual files. So let me tell you a little bit about CodePen because this is the environment we'll use for working with HTML in this course. CodePen is located at codepen.io. You can go there now and you can create an account. And I recommend that you create an account, they are free. And I recommend that you do that so that you will have the ability to change your font size and some other various benefits to it like saving your work. To do this, you can click on the sign up button here, you want the free version, you can sign up with Twitter, GitHub, or Facebook, or just with your email. So choose one of those options now and create your account. If you are opposed to this, and you really don't want to create an account, you don't have to, you can work in CodePen without creating an account, but I warn you in advance that the tech size will be probably kind of small for working. If you have an account, you can log in, I'm going to go ahead and do that right now. So once you've logged into your account, the screen will look different, your screen may look different than mine if you are logging in for the first time. Don't worry too much about what's on the screen. What we want to access are the exercise files. You can download the exercise files right from LinkedIn Learning and inside of the folder that you'll download, you will find a text file called Exercise:files.text. And this is a list of all of the CodePens that we're going to be working with in this course. They're starting and ending states for all of the individual videos for this course. All you need to do is copy and paste the specific URL into your web browser while you're logged into CodePen and you'll be able to access these. If you hadn't created an account, these links will work as well. I am going to show you this first link here right here where it says the CodePen collection with links to all exercise files. This is basically like a folder that holds all of the CodePens for this particular course. And we can just paste it right here inside of our web browser window, and this will show you... I have it configured to show a list of all of these. You may see a series of thumbnails like this so up here at the top where it says grid, you can switch this to a list, I just find that easier to skim through and find when I am looking for. So I'm going to go to the very first link which is at the bottom of the list 'cause it's the oldest one, it's called 00-02 Working With CodePen. Alternatively, you can copy this URL right from your exercise files. Now, my screen once again probably looks very different from yours. One of the things that you're going to see as you come to CodePen is it's going to be configured to look something like this and the text may also be very, very, very small. You'll see these three boxes going across the top of the page just like this where you have your HTML over here on the far left side that's where we're going to be doing all of our work in this course. We have some CSS here in the middle window. CSS stands for Cascading Style Sheets, it's responsible for making your webpage look pretty. And then we have a final box that's called JS, that stands for JavaScript. If you say things that move on the page or that you interact with them in some way, most likely it's JavaScript that's behind those things on the page that are interactive. To change this view because I find this view to be difficult, especially working in a tiny window like this, give yourself a little bit more room, go to this icon here, kind of looks like a top of a castle turret, it's got a big box on the bottom and little ones on the top. If you click that and switch to the side view where you put the little boxes on the left side, that's what I prefer, there's also the ability to put them on the right side, and you will see your code stacked here on the left side of the page. You can grab these rows and you can grab the column to manipulate the size of the screen to make this look bigger or smaller so that you are comfortable in terms of working with this particular screen. The other thing that you may find particularly if you're an older person is that the font size by default is very, very small. And so there's a couple of ways you can deal with that. One is here once again I'm in Chrome on my browser window. There's a little magnifying glass here. You can bump up the magnification of the page if you wish. I've got mine set to 125%, or you can change the font size directly. And to do that, go into your account, the only way to do this is with an account, you cannot do this if you don't have an account. You want to take a look at these settings option. There's two settings options. There's the big button that is not the one you want, you want the one under your account. There's a second settings option just above logout, click that settings option, and then we're going to go to Editor Preferences over here on the left hand side. And this is where you can make modifications to CodePen that might help you. Currently, I have this set to high contrast dark in terms of looking at my code on the screen tends to record really well. But if you prefer to work with a light background with darker text, you can certainly switch your color themes here, it's a very simple thing to do, you can just click around and choose something that works differently for you but I'm going to stick with high contrast dark. If you scroll down just a little bit further than that, you will see that there's a section here called fonts. And right now our code font family is Source Code Pro. There's a couple of other choices here in general, these are monospace fonts just like the typewriter looking font that you see here. But there's some other choices that you may be able to choose if you like those better and you can change your code font size as well. I have mine set to 20, but you can make it bigger or smaller as you wish. Once you've done that, we can just hit the back button to get out of this. And then the last thing that I have to show you is the concept of forking a CodePen. So fork is, not the utensil that you're thinking about, fork means basically make a copy of what's here and save it to my account. To do that once again you have to have a CodePen account in order to do that. If you do not have a CodePen account, you will not be able to fork this. You will be able to jump in the window and edit very freely but forking has to do with saving your work to your own account. So to fork, you want to go down to the bottom, right portion of the screen, you'll see a button here that says fork. You're going to click that button. It'll say forking pen, and it will fork this right to your account and it will save any changes that you make to this to your own account, so that is how you would go about doing it. If you want to check and make sure that you got it right, you can add something here to the bottom of your HTML. Don't even worry about putting in any HTML, you can just say I did it. You'll see that it'll actually show up here inside of CodePen right there on the screen the words that you just typed in and you can now save that into your account and keep it forever just to prove that you have worked with CodePen before.