From the course: Introduction to Web Design and Development

Introducing writing code using CodePen

- To write code for the web, we need a code editor. CodePen is a popular online tool used for sharing code, practicing coding techniques and inspiring other developers. It's located at codepen.io and it offers a free account which is perfect for your work in this course. Head on over to the site, create your account, let's start coding. Click on the Start Coding button in the upper-left to create a pen or a blank screen where you can start coding. You'll see three boxes on the top of the screen, which are there to write HTML, CSS and JavaScript. Underneath, you'll see a larger window spanning across three columns. This is where your work will display. Let's start by typing in the HTML window, a little bit of text. Hello, my name is Jen. Notice how that text displays immediately on the window underneath the HTML window. If you were to turn your work into a webpage that's what you'd see at this point. Let's add another sentence to this on its own line. I live in Boston. Even though I have these sentences on separate lines in the HTML box, they show as being on the same line in my display box. Why is this? Because HTML doesn't know that it should make these into separate paragraphs. Let's fix that problem quickly by placing paragraphs, tags around each sentence and that will indicate that these are in fact paragraphs. So a tag looks like this, it's an angle bracket. And in this case, it's going to be followed by the letter P for paragraph and then we need to tell it where to stop. So we're going to put in another angle bracket, a slash and a P after that. And that will indicate that this is a paragraph. And we can do the same thing here around the next line. CodePen will display this for you honoring the paragraph elements that you added to the text. Before we move on, let's modify the view of this window. By default, the code shows at the top of the screen and the display underneath. Using the Change View button, we can put the code on the left side and the display on the right. I find this to be easier to read as you can adjust the size of each coding window easily while still viewing your display. So if we click this button here, let's change it to putting the code on the left-hand side. Notice that we can make these boxes bigger or smaller as needed. So since I'm just working with HTML right now I can just pull my CSS and JavaScript here, out of the way. Now let's say that we wanted to make this text a different color. In the CSS box that you see here, type P for paragraph and then a couple of these curly brackets, those are the ones that are next to the letter P, most likely on your keyboard, hit the Shift key in order to get them. And in between these curly brackets, we're going to type Color and the following: A pound or hashtag sign FF0000 and then put a semicolon after all of that. Now your text should display as red text. Our style applies to all paragraph elements, so that's why both paragraphs have red text. Congrats, you've created your first webpage. To save your work, click the Save button in the top-right. Now that you know how CodePen works, let's try writing some more code.

Contents