1.2: Becoming Familiar with CodePen
- Page ID
- 20115
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)
( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\id}{\mathrm{id}}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\kernel}{\mathrm{null}\,}\)
\( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\)
\( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\)
\( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
- Discovering CodePen
- Understanding How to Use CodePen in This Course
Becoming Familiar with CodePen
As we start working with CSS Animations, you will see many examples of code that I have created on CodePen. Some of you may not have had experience with working with CodePen and are curious about what CodePen is.
"CodePen is a social development environment. At its heart, it allows you to write code in the browser, and see the results of it as you build. A useful and liberating online code editor for developers of any skill, and particularly empowering for people learning to code. We focus primarily on front-end languages like HTML, CSS, JavaScript, and preprocessing syntaxes that turn into those things."1
CodePen is a repository of coding projects from around the world. Some of the best minds put their work on there for all to see! I would strongly urge you to visit the site and browse through the many examples that can be found there. You will definitely pick up some inspiration for your future projects.
Walkthrough of CodePen
CodePen is a very simple live text editor that is fairly intuitive. When you are using the editor on Libretexts, it can look a bit different than what you see on CodePen's external site. I have a short walkthrough to help you with some of the differences.
One thing I would like to warn you about is that, for the best coding experience, I would strongly recommend that you use a Chrome browser on a desktop machine. Chrome does the best job with rendering the CodePen we will be working with.
Be sure that you are using the Chrome browser to view this textbook. Other browsers may or may not support CodePen well on this platform.
CodePen is much more than what I showed you up above. Want to learn even more about CodePen? Take a look at this video from one of CodePen's founders, Chris Coyier.
Footnotes
- CodePen. (n.d.). About CodePen. CodePen. Retrieved March 2, 2022, from https://codepen.io/about/