A Beginner's Guide to Codepen in 2020 | The Basics

what's up guys so in this video i'm gonna be giving you a brief intro to codepen so for those of you guys might have felt behind or just confused about how to use it these videos can have some basic basic tips and tricks about codepen what it is and how you're gonna be working with it so first things first you're always going to start on google if you want to type in the codename domain it is codepen.io if you end up searching this on google and just type in codepen you need to make sure you click this first link that takes you to codepen.io so as we can see here codepen is an online community for testing and showcasing user created html css and java code javascript code snippets so that's exactly what we're going to be using throughout the course if you go to the home page you'll notice that likely you have a login button here the first thing you're going to want to do is log in so for the sake of this video go ahead and log out of my account click login go ahead and log in using either your username or your email that you signed up with so in my case i'm going to use my username since that's what i remember most clearly um the first thing that you're going to do so when you get to the home page you're actually going to see a bunch of different pens so all these pens are kind of like showcases a lot of people tend to showcase their work on codepen that's the beauty of it so as you're developing your own online portfolio codepen is really great because you get your online portfolio automatically saved for you so it kind of builds this portfolio for you as you're learning and going along doing your work so that's the main reason why we're using it but if you want to check out other people's work and some fun stuff they're doing using html css and javascript you can go ahead just click this arrow button and kind of scroll through all the different projects but it's really interesting once you start to see some of these things right so if you check out this you can actually click on their their pen that's what they call them pens and you can see what they created so we can see here if i click this it does a switch between light and dark mode in this case we can see it's made by braden coyer and we can actually see all the code that goes along with his design that he created created here so i'm going to go ahead and go back to the home page and the first thing we're going to do is create a new pen so whenever we start a new project we're going to want to create a pen okay so go ahead and click this the top right profile icon and you can just create new pen here or you can actually create it here on the side as well and you can create from template there's a couple different options that you have but for the most part we're always going to be creating a new pen so you can go ahead and click create new pin on the bottom left of my screen here you'll see my keyboard and this is just going to show you some of my key presses in case you ever get stuck or confused about what i'm pressing so as i said before html css and javascript so throughout this course is what you're going to be using for the beginning and this is what we're trying to get comfortable with so this is our editor and all this is is again a way to showcase whatever it is we're working on so if we're working on a project along the lines of a personal portfolio you can title your project accordingly i can click that edit icon up there call it personal portfolio for now i'm just going to go ahead and call this understanding codepen and then i'm going to click enter and that will automatically update my title so although this is updated you always need to save it so i'm going to use ctrl s to save and this is going to save my pen so instantly if i go here and go to profile we'll see although i have many other pins here we'll see if i click view all pins that i have an understanding coping here make sure this button is click public because it likely saved as a public pen so you're going to want to click that so click that and you'll see again understanding codepen is here and now we're in my editor so i have three tabs html css and javascript right so html css and javascript if i wanted to navigate between these two all i have to do is click that allows me to go back and forth whichever language that i'm using on the bottom we'll see the output so if i'm producing html i can add in tags here and we should see output put to the bottom of the screen same thing with css i can add um any css and it should update live um on your screen it might take a second or so but it should update lastly we can do javascript so i can go ahead and add some random variable and i can log that to the console and codepen is useful and that actually provides a console for you so again make sure to always save i can either click save or control s does the same thing so at the bottom of the code pin you actually have the console down here so this is going to be useful for one against javascript but just something to know for now that will produce obviously off this javascript that's here but for now since we're sticking with mainly html and css one thing useful to know is that you can easily close this javascript section just by clicking and dragging i can also double click on this little bar and it will bring that section to the side so if i clicked here we'll see i have all csf s if i click here i'll have all html you can also adjust these so they're as big as you want another thing that i like to do when i'm working with my pens is go ahead and go to change view go to editor layout here so i can click a left view this is my preferred one and then i can just go ahead and remove this javascript section by dragging it to the bottom and i can also adjust this depending on which one i'm working on at any given time so for now let's go ahead and create a basic document so i'm going to create doctype html i have html tags right i'm going to have a head section and i'm going to have a bottom section so normally i would format this myself and i would try to do my best to keep formatting if you're new to programming you might not be completely familiar with what pro with formatting is so it might be a little difficult for you to grasp at first but know that whenever you're in a weird situation or you're confused about how to format something like say for example or to put a h1 over here it usually will attempt to auto format three if it doesn't auto format for you let's say it were to still be aligned over here i can go ahead and use these useful options in codepen all you do is click the drop down arrow right here and click format html it should attempt to format it and make it look nice for you so this is useful because it actually creates these little drop down arrows on the side and it can open and close those specific sections of my code so if i including a drop down arrow for my html which contains all these other sections it's actually going to close it up and make it look a lot more tidy i can do the same thing for these other parts so i can close the head section i can close the body section it just allows me to see things much more easily especially when you have like large large chunks of code so those arrows in this format html key are like life savers make sure you're using them you can also play around with these analyze html will attempt to find errors and kind of warn you of different things if you're incorrectly creating your html or your css so you can actually analyze your css as well and a similar thing for javascript so it has similar features besides that those are the main settings that you're going to want to play with there's also settings at the top here so you can mess with your overall pen settings if i click that you'll see my title here which again i can edit that is public to everyone in the world if you choose to make it public so you'll see down here we have our public and our private private apparently is only for pro members so you guys will be creating public pens for now also a description description and tags are useful so that if you did want people to see your creations let's say you created something truly amazing something you really like and you want to share with the world the description and those tags are what is going to allow people to find you easier so if they were to search for something along the lines of home page and you had the tag of home page then it would be more likely for them to find your pen and there's also these different sections so for html i can add in stuff for my head section so like it says here meta tags link tag script tags i can add that to my head section in terms of css i can change the preprocessor we'll learn about that later on but if you want to look into some of these preprocessors it's pretty useful and we can actually add in css resources so the most common one we've been using twitter bootstrap all we have to do is search for it and you can search for a ton of different resources like animate css and other things like that you can actually add in your own links if you have links to resources and the same thing for javascript so i can search in for the javascript for bootstrap and other ones as well if you have pen details we already talked about that editor so you can actually adjust some of the editor settings so how does the code indent and the indent width behavior does it automatically save this is super useful i strongly suggest you add this and template so you can actually create a template let's go ahead and do that and it it's a pen that can be used to start other pens so it's very useful let's say you have the basic document structure you want to create a template off that so every time you start a new project you retain that document structure that could be a super useful thing right so i'm just going to go ahead and save this and go back to change view change view you have a couple of different options the main one is the editor view which is the default you go to details full full page view is for if you just want to see the output on a full page you can do this if you have a two monitor setup you can obviously drag this to one side and it can be useful in that way just depends on your use but one general thing you're definitely going to want to do with your codepen account is go ahead and go down to settings after clicking your profile button over here and take a look at some of these settings you can mess with the themes that are on your page so look at how it changes in the example here we can see that there's a couple different themes and depending on your eye strain how easy and sensitive you are to these different colors of light you know you might want a different theme in terms of the code font family all that's doing is just changing how it looks and then you can also change the size of that key binding so if you're used to a specific text editor like i've been using sublime for a while and you knew those key bindings then you can actually enable those key bindings apparently so some other really useful things are to do let's scroll down line numbers you're definitely going to want that enabled so if you ever want to reference a line line wrapping i like to keep enabled and auto complete so autocomplete will help you let's say you for some reason forgot one of the attributes um autocomplete will attempt to fill that entry assuming you know maybe a couple letters of that thing but those are the basics if you guys have any questions you can always feel free to ask a question other than that thank you guys for watching please like the video please subscribe that will help later on as we create more videos which are geared towards you guys again we're going to be transitioning all these videos onto an online course that will kind of guide you through the course as it is but in video format so thanks again for watching guys appreciate it

Channel: Manuel Zavala

Views: 15,826

Keywords: codepen, html, css, javascript

Id: v1io5m8MxfA

Length: 11min 34sec (694 seconds)

Published: Mon Sep 28 2020