Code your first HTML page

Version 1.1

🖊 Your first Pen

1. Create a CodePen account to save your "Pens"
2. Verify your account by clicking on the CodePen email.
3. Create your first Pen by visiting codepen.io/pen/

   ⚠️ Clicking "Pen" in the interface will start with a more complex setup; it still works, but this link is easier.

4. At upper left, change the name to something like Mary's first pen.
5. In the HTML box, type something like this (you can use emoji!)

<h4>My name is Jon and my favorite food is waffles.</h4>
<h1>🧇</h1>
<p id="total">Today I have eaten </p>
	

6. In the CSS box, type something like this:

body {
	font-family: verdana ;
	text-align: center ;
	background-color: orange ; /* You can use most color names. */
	color: white ;
}
h1 {
	font-size: 5em ;
}
	

7. In the JS box, type something like this:

document.querySelector( "#total" ).innerHTML += 16 ;
	

8. Visit the CodePen page for your partner using the formula https://codepen.io/USERNAME.
9. Click on their first Pen.
10. Click "fork" at bottom right and tweak their Pen somehow.
11. Save your fork.

🎩 To use an emoji in HTML, you can use your operating system defaults (Edit > Emoji & Symbols on MacOS) or type in the HTML character code (like &23F0;).