Getting Started with CodePen: A Beginner’s Guide to CodePen

hey what's up internet so today we want to go over a really cool tool called codepen which allows you to code instantaneously in your browser without needing to install any additional tools so let's get started all right so in order to do this you can go ahead to the following url it's going to be codepen dot io all right and so once we're here let's sort of talk a little bit briefly about what codepen is then we'll do an overview of the site we'll look at how to sign up log in we'll create a new pen or essentially a new sheet that you can start coding in we'll create a little project we'll look at how you can navigate that little project or that little interface we'll look at things like how you can open up your console keyboard shortcuts look at how to share your what's called a pen with other people and then we'll look at how to clone a project sort of how to build off of something that you've that you found that you like and then lastly we'll touch on the difference between codepen free and co-front code pen pro so let's get started all right so you're here and let's think about what codepen is so in code pen's own words codepen is a social development environment for front-end engineers and developers but really what does that mean it means it's a place that you can code you can explore you can connect and you can discover think of it as a place where can go on the internet and immediately start coding in javascript without having to download additional tools it's all happening in your browser i.e the cloud now there are additional tools things like replit or code chef that will allow you to program in different languages whether that be ruby c plus plus python codepen on the other hand is exclusively focused on three things javascript html and css so with that let's look at how you would sign up well as in most websites these days it shouldn't be too hard to sign up there's often a sign up button up near the top of the screen so we're gonna go to this green button and click sign up now there are a variety of different ways that you can sign up twitter github facebook blah blah blah i'm gonna sign up with email so let's say that my real name as i'm sure you know is co learnable yep that's my real name and our username we want that to be co-learnable and guess what our email address is co-learnable gmail.com and our top secret password is yeah we're not going to tell you but good try and then we're going to click this green button here and it will load and automatically create what's called a pen now we could obviously take a tour but that's sort of what we're here for so we want to give you the tour rather than codepen give you the tour but essentially the way codepen works is you by default get three different sheets you get an html sheet a css sheet and a javascript sheet now if you want to sort of change the way that it displays something so if you said wanted to create a paragraph tag you would probably have to type it correctly so we could do a paragraph tag and i can't type today and we would say hello world and it will show up here on the bottom of the screen now if you want to say that you can click this button here which is safe but generally it saves automatically now if you don't like the way this sort of the display is shown you can come here and you can drag this up so you can have more of sort of what your web page would look like or scroll down if you want more space for coding you can also do that the same here maybe you're not doing so much html and you're not doing so much css and you're mostly going to code in javascript so you could say like console log hello there boom and then you're like okay that's great i wrote some javascript but where does my javascript show up if you want to open the console you go to the bottom corner here and click the console button i know amazing and then you sort of see that the javascript we're written here when we log something to our console with the console.log method it shows up in our console now if you go to settings here there are a number of different things you can do so you can change the name so we could say this is co learnable example codepen but that's actually a pretty terrible name so let's say that you save and chose it change it you'll then know that it's a new project here the project name we could also come up here and change this we'll say airbnb example landing page which is sort of the project that we'll want to do together all right so you can also click this button here which is change view so there are editor views there's detailed views full page view so we could sort of see what that would be but obviously we would have to verify our email address which i don't think we're going to do in this video so instead we're going to hit the back button we've gone ahead and we've created an account if you want to log out you click the little icon here and then you go to log out say that you've already signed up and you want to log in you click this button here and you would put in your username or your email go learnable and then we're going to type in our password boom okay so we get to this page now there are a few different things that you might want to look so you can see a collection of all of your different pens or projects here you can sort of look at different designers or or programmers that you might be following trending is kind of cool you can go here and you can look at challenges which every month they have different challenges again here you can look at different trending projects which is kind of cool so like this is how you would make an animated tab bar but let's say we want to go back to our original project so you go here and here is our example project so we're going to click that and we're back all right so that is all fun and well but then sort of how might we go about doing an actual project now i've thought about how we might want to design an airbnb page and it actually i think makes the most sense if i were to just sort of take some code and and paste it and then if you have questions you can sort of walk through that at a later time but let's say that we had some html we're going to paste it here and then we're gonna take some css again which i've already written and we're gonna paste it here and then we'll add some javascript and paste it in here all right and i'm gonna adjust these windows so that they're about the same size and let's say that we wanted to go through this so basically what we have here let's close the console is say we wanted to design a web page like a landing page for airbnb airbnb just went public here in the us and so imagine you were hired to create them in this new super duper amazing landing page and basically what you want to happen is when you click this button it will go to airbnb.com like that alright so if i were to walk you through sort of the different parts of the code very very quickly again you're not supposed to perhaps understand all of this it depends on where you are your journey maybe this is super simple for you but in any case basically you just have a regular html page so you have html tag and html tag and then within that you have a another tag which is your head and here you have basically a meta tag saying use this character set or title which would show up on the little tab here if this was an independent web page then we have a link so we're using bootstrap so a lot of benefits come with bootstrap there's already a sort of standard styling that you can have access to and then we're creating here what is called a div and then we're adding a specific class of banner which is a custom class which will go back here we're adding an h1 tag a p tag a paragraph tag and then here we're adding an anchor link and we're giving it both an id and a text here so come explore now here we've just copied and pasted some scripts so if you were to go to bootstrap cdn bootstrap link and you were to go to getbootstrap and then introduction essentially all i've done is i've taken this tag here i've copied it and pasted it here in my head tag and then what i've done is i've gone and there are these three additional script tags of javascript that give additional functionality for bootstrap and i've pasted them here like this and then i've created this custom css so basically there's this class which we're calling a banner and the banner basically just has a background size which we're covering we're using a background image we've got this background image from a place called unsplash it's really cool um royalty free images so i just search for like something like airbnb and then i went to orientation landscape scrolled down scrolled down scrolled down that one's cool scroll down and when i found one i liked i went like this right clicked i copied the image address and then here you'll notice in this div tag where we're signing the class of banner basically what i've done is i've just taken this url and i've pasted it in there and then i hit save it should update with this new image so that's sort of just what's going on here then you have additional css styling for the h1 and for the paragraph tag then what's going down here is essentially you've just assigned a button class and then created this custom button class where we're saying we want the text to be white we want this padding to be the specific amount background color we want to be like this we want to transition so that when you hover over it and you have this hover effect essentially it changes colors and then sort of just the last thing i would note is because this is an anchor tag essentially what i want to happen is i want when i click this button i want it to open in a new page and so that's what this target equals underscore blank essentially means that when i click this it opens in a new page whereas if i were to remove that this if i were to save it then when i click this button you'll notice that uh it's essentially having a problem because it's codepen but it would be even more problematic if let's undo that with ctrl d um it would be even more problematic if it was like your own site it was essentially just overwrite the site so that you would directly go to the site and the user would no longer be on your page so anyway we've just used an example where we have some html some css and then here the javascript sort of random contrived example but basically what i've done is i've created constant or sort of a variable and i've assigned it to this item which is document getelementbyid so here if you look at this anchor tag i've added an id so basically what this does is if you want we could log this value well actually let's just do it like this let's just take the javascript and then let's log it in our console so here it's essentially finding this individual element and then what we're doing is we're finding this individual element we're assigning it to a constant ie a variable and then we're adding an event listener if you don't know what event listeners are basically what's happening is there's this cool property that essentially you can find something at an event listener and then when a specific element happens that essentially will trigger some javascript so here is the link if you want to learn more about that but basically we're saying once you click this button we're going to console.log you're now visiting airbnb.com so here let's go down let's scroll down this is our console watch our console when we click this button it will open a new tab go to airbnb.com and then here it's essentially logging that to our console obviously you could do way more cool things but we just wanted to show an example in codepen where you take some html some css and maybe some javascript combine them together all right this is all well and cool but if you wanted to share this how about you share this well there are a few different ways the way sort of i like to think about doing it is you would copy this url up into where there's the question mark or the query stream and then i'm going to open up firefox and once firefox opens we're going to paste that link into the browser like this and we'll hit enter and we'll wait and you'll see that the page loads so say that you coded up something really cool in codepen and you want to share it you would just copy the link and then send it text it sms it whatever to your friend colleague employer whatever you wanted to do now one thing that i like about codepen is that you can actually clone this and buy clone i mean fork but say that you really like this project like for example you can do this i give you permission to use this for this project but then you'd come down here and you would go to fork now you would have to have your own username and password so i guess i didn't 100 think about this but you would sign in and then you would be able to sort of have this code in your own codepen account and you can modify it so say you wanted to change the button color to something like blue you could do that so here you could say blue and then save and it's actually not working because we need to do important and clearly it's not working because now we're on camera so i'm just going to undo that and you could give it the color of fffffffffff and then you could say this text is black and then when you scroll over it changes anyway if you want to fork it you can you can embed it you can export it there's lots of cool things that you can do with codepen all right so that in a nutshell is what we wanted to say about codepen if you have any questions or comments about this tech about this video go ahead and add them in the comments section below the last thing we wanted to go over was this idea of free versus paid so here if you go to the homepage you'll know that there's a codepen pro sort of one of the major differences that i see is that basically if you don't have a pro account all of the links that you create all the pens that you create or projects they're essentially going to be public so say you're working on this top secret stealth project you would probably not want to use codepen for a number of reasons but one of those reasons is all of your code would be widely available to the internet to anyone who has a link so there are also these additional features which you can check out on your own but again there is a slight difference between the pro and the free by slide i mean potentially huge but it's really up to you anyway that wraps it up for our video please add questions or comments in the comments section below feel free to subscribe and or like this video and we'll see you again soon cheers

Channel: colearnable

Views: 2,156

Keywords: codepen project, codepen landing page, codepen airbnb, codepen example, codepen example project, codepen tutorial javascript, beginner's guide to codepen 2021, beginners guide to codepen, beginners guide to codepen 2020, codepen tutorial 2020, codepen tutorial 2021, introduction to codepen, Codepen, CodePen, how to use Codepen, codepen project 2020, beginner's guide to codepen 2020, codepen example project 2020, codepen example project 2021, beginners guide to codepen 2021

Id: eg_Y333qcio

Length: 17min 36sec (1056 seconds)

Published: Fri Jan 01 2021