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

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/oN... https://codepen.io/colearnable/pen/oN.... 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 (   • Getting Started with CodePen: A Begin...  )
What is CodePen (   • Getting Started with CodePen: A Begin...  )
Sign Up / Create a CodePen account (   • Getting Started with CodePen: A Begin...  )
Create new a CodePen “pen” (   • Getting Started with CodePen: A Begin...  )
View the CodePen console (   • Getting Started with CodePen: A Begin...  )
Use keyboard shortcuts (On bottom left, in same sub-menu as where you activate the console)
View a CodePen pen/project settings (   • Getting Started with CodePen: A Begin...  )
Change a CodePen pen name (   • Getting Started with CodePen: A Begin...   &&    • Getting Started with CodePen: A Begin...  )
Change view of a CodePen pen (   • Getting Started with CodePen: A Begin...  )
Log out of a CodePen account (   • Getting Started with CodePen: A Begin...  )
Log in to a CodePen account (   • Getting Started with CodePen: A Begin...  )
CodePen Sign In Overview -- Features and Areas (   • Getting Started with CodePen: A Begin...  )
Return to existing CodePen pen/project (   • Getting Started with CodePen: A Begin...  )
Get coding in CodePen (   • Getting Started with CodePen: A Begin...  )
Create Landing Page (i.e., Airbnb Example Project) (   • Getting Started with CodePen: A Begin...  )
Share a URL (   • Getting Started with CodePen: A Begin...  )
Clone or fork an existing project (   • Getting Started with CodePen: A Begin...  )
Explore Free v. Pro (   • Getting Started with CodePen: A Begin...  )
Wrap up (   • Getting Started with CodePen: A Begin...  )

Useful Links:
Codepen homepage: https://codepen.io/
Sample Project: https://codepen.io/colearnable/pen/oN...
Open in blank tab: https://stackoverflow.com/questions/1..., https://developer.mozilla.org/en-US/d...
Event lister: https://developer.mozilla.org/en-US/d...
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.