Transcript
CodePen is the web-based Integrated Development Environment or IDE that we use when students do not have access to a text editor or desktop IDE such as VS Code. We like it because it allows students to build and test their code in real time and it allows them to share their projects with each other and the teacher for review.
In this lesson, we’re going to set up your CodePen account and go over some of its features. And then we’re going to do our big HTML challenge for this module and code a resume.
First, open a web browser (preferably Google Chrome if you have it) and type codepen.io in the address bar. You’ll see this screen.
So, you see over here where it just says “Start Coding”? Some students may get ahead of you and click that button. (Some teachers watching this video likely have as well!) Make sure that you call them all back in and remind them to set up their account first so they can save their projects.
To set up an account, click the green “Sign Up” button in the upper righthand corner. The sign up button is in the same place if you’ve already started a project as well.
Then, click Sign Up with Email. Type your name, the username you’d like to use, your email address, and a unique password that you’ll remember. Make sure to write down your username and password somewhere safe.
Once you’re logged in, you’ll see an interface similar to this one. There’s a menu off to the left where you can start a new Pen — which allows you to code HTML, CSS, and JavaScript all in one place, or you can start a new project, which allows you to upload files you’ve already coded and preview the code that way. You can also explore other people’s Pens or Projects by clicking through down here.
To start a new project or open an old one, you’ll click over here and just select Pen. Vue Pen and Flutter Pen are both more complex frameworks for advanced web development. You can just ignore them.
When you open your Pen, you’ll see three coding windows and a preview window where you can see what your code looks like when the web browser interprets it. You can change the way the windows are arranged on your screen by clicking Change View up here or by clicking on the down arrow on one of the code editor windows and maximizing or minimizing that editor.
We’re going to be working in HTML for this lesson, so I’m going to drag the edges on those two to take up most of the screen and leave the JavaScript window closed.
Now, up here, I’m going to title my project before I do anything else. I’m going to call it “Shannan Resume,” because that’s the project we’re going to work on together. If you don’t have an old copy of your resume lying around, that’s fine. Just pull a sample one off the web to use for this project.
Next up, I’m going to create my HTML page. By default, CodePen will interpret any HTML I put in this window as being in the body section of my page. However, since we’re learning, I want you to go ahead and set up the page structure as though this were a completely blank text file. You can delete it once we start writing in the body.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8”>
<title>My Resume</title>
<body></body>
</head>
</html>Now, let’s practice. Using the guide we’ve given you, code your resume. I’ll code the beginning of mine to help you to get started.
Normally, the top of a resume has your name, but since we’re doing this as a webpage, let’s make that heading a little more meaningful.
::edits <title> to say Shannan Palma | Resume ::
Next, I need to create a top level heading that describes my entire page. If I’m putting my resume on my website, I’m just going to put Resume and not my name. If I’m posting my resume on another site, I’d add both again.
<h1>Resume
</h1>Let’s say I still want to put my contact information up top. I’ll add an <h2> element for that and create a contact section. I might decide to do that at the top or I could do it at the bottom. I want to put mine at the top and then add a link to email me underneath it.
<h2>Contact
</h2>
<p>Email: <a href=”mailto:shannan@theheracademy.org”>shannan@theheracademy.org</a>
</p>Now, I want to add another section called Education. I’m going to add another <h2>
Now, in HTML, it’s tough to get this formatting I have here where I’ve got some indenting. I’m going to want to use CSS for that, but we haven’t learned CSS yet! So what I’m going to do is use paragraph elements for each line and then wrap the part I want to indent in a span element <span>. The span element works like a container and allows you to mark up part of a block element and insert CSS just there instead of applying code to the entire block. We’ll learn more about how to use the span element in the next lesson.
<p>2012 <span>Ph.D., Women’s, Gender & Sexuality Studies, Emory University<span>
</p>
<p>2012 <span>Ph.D. Certificate, Film and Media Studies, Emory University<span>
</p>
<p>2000-01 <span>Graduate School of Motion Picture, Television, and Recording Arts, Florida State University, Tallahassee, Florida<span>
</p>
<p>2000 <span>B.A., English (Rhetoric and Composition), minor in Film Studies, The Ohio State University<span>
</p>Next, I have another second level heading.
<h2>Employment
</h2>Now, I’m going to do each job title as a third level heading because each one is a subheading with a lot of relevant information underneath it. The default formatting in CodePen doesn’t match my paper resume, but I’ll format them to look the way I want using CSS later. I may add more span tags at that point. We’ll see. I’m also going to put the years in <i> tags because I want to set them apart visually without telling screenreaders to shout them at anyone.
<h3>Vice President, Continuing Education</h3>
<p>HER Academy<br><i>2021-pr.</i>
</p>
<h3>Founding Faculty Director of the graduate program in Writing and Digital Communication and Assistant Professor of Women’s, Gender, and Sexuality Studies</h3>
<p>Agnes Scott College<br><i>2018-20</i>
</p>Now, I want to add some bullet points under this second job here, so I’m going to add an unordered list.
<ul>
<li>Provide conceptual leadership for program direction and steward development of curriculum to prepare graduate students to be inclusive digital communicators.
</li>
<li>Administer program, including managing budget, hiring and supervising faculty, forming relationships with external partners, and shepherding new policies through governance process.
</li>
</ul>We’ll stop there. Go ahead and try coding your resume in HTML before continuing on to the next lesson. In that one, we’ll learn the syntax for CSS and apply that to make our resumes look the way we want them to.