CodePen 101: Everything You Need to Know to Start Coding

Interested in CodePen? Just getting started? Want to level up? In this video we'll show you how to use CodePen (https://codepen.io/) to quickly create projects in HTML, CSS, and/or JavaScript! Below, we've added time stamps so that you can go to the part(s) of the video that most interests you. In this tutorial, we'll be building a sample landing page for a site like Airbnb (https://www.airbnb.com/). If you want to follow along, clone, or fork the project you can find it here: https://codepen.io/colearnable/pen/oNzqvBE https://codepen.io/colearnable/pen/oNzqvBE. What else? We'll be using a mix of custom HTML, CSS, and JavaScript for the sample landing page -- and although there we don't explain every line of code in detail, we try to give an overview of what we're trying to accomplish with the code used. More specifically, in this video we'll go over the following topics -- click the link to jump to that specific part of the video: Video Agenda (https://youtu.be/eg_Y333qcio?t=21) What is CodePen (https://youtu.be/eg_Y333qcio?t=68) Sign Up / Create a CodePen account (https://youtu.be/eg_Y333qcio?t=106) Create new a CodePen “pen” (https://youtu.be/eg_Y333qcio?t=163) View the CodePen console (https://youtu.be/eg_Y333qcio?t=241) Use keyboard shortcuts (On bottom left, in same sub-menu as where you activate the console) View a CodePen pen/project settings (https://youtu.be/eg_Y333qcio?t=258) Change a CodePen pen name (https://youtu.be/eg_Y333qcio?t=262 && https://youtu.be/eg_Y333qcio?t=281) Change view of a CodePen pen (https://youtu.be/eg_Y333qcio?t=296) Log out of a CodePen account (https://youtu.be/eg_Y333qcio?t=315) Log in to a CodePen account (https://youtu.be/eg_Y333qcio?t=322) CodePen Sign In Overview -- Features and Areas (https://youtu.be/eg_Y333qcio?t=337) Return to existing CodePen pen/project (https://youtu.be/eg_Y333qcio?t=368) Get coding in CodePen (https://youtu.be/eg_Y333qcio?t=377) Create Landing Page (i.e., Airbnb Example Project) (https://youtu.be/eg_Y333qcio?t=403) Share a URL (https://youtu.be/eg_Y333qcio?t=830) Clone or fork an existing project (https://youtu.be/eg_Y333qcio?t=890) Explore Free v. Pro (https://youtu.be/eg_Y333qcio?t=996) Wrap up (https://youtu.be/eg_Y333qcio?t=1041) Useful Links: Codepen homepage: https://codepen.io/ Sample Project: https://codepen.io/colearnable/pen/oNzqvBEhttps://codepen.io/colearnable/pen/oNzqvBE Open in blank tab: https://stackoverflow.com/questions/15551779/open-link-in-new-tab-or-window, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target Event lister: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener Airbnb homepage: https://www.airbnb.com/ Background image used: https://unsplash.com/photos/l8OKlH71Xh0 So what is Codepen? “CodePen is a social development environment for front-end designers and developers.” -- but what does that mean? Code, explore, connect, and discover. Think of it as a user-friendly place to start coding with no previous experience or need to install or download additional tools (It allows you you to instantly code in your browser with no additional setup). Everything happens on the cloud. It’s a community-oriented site where you can code, review code and projects, and connect with others. Unlike other online IDE’s and communities (like Repl.it or Codechef), Codepen is focused exclusively on HTML, CSS, and Javascript. Although you can use Javascript or CSS frameworks like Vue or Flutter, you won’t have much luck on Codepen if you want to program in languages like C++, python, or Java.