Welcome to Codemoji!

I see that it's your first time here. Please consider doing a few lessons first if you are not familiar with Codemoji and in no time you'll be able to come back and master the playground!

This area is called the playground. You can use it to play around with the different tags, building whatever webpage you would like. There are no rules! Simply drag the emojis from the Emoji Box into the text editor on the left and then add text to see what you can create.

As always, press the blue "Run Code" button in the bottom left corner of the screen to run your code, then press the purple "View Code" button that appears to see what you've created!

If you forget your task (to play!) or would like a refresher as to how the playground works, simply click the white triangle in the bottom left corner of the screen and this tip will reappear.

HTML Code Structure

  • HTML
<html>
  <head>
    <title>Your Document Title</title>
  </head>
  <body>
    <h1>Main Heading</h1>
    <p>This is a paragraph in your HTML document.</p>
    <div>Your content goes here.</div>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
    </ul>
    <strong>This text is strong!</strong>
    <em>This text is italicized!</em>
    <br>
    <a href="https://example.com">This is a link</a>
  </body>
</html>

CSS Styles

  • CSS
.color-1 { color: red; }
.color-2 { color: blue; }
.size-1 { font-size: 12px; }
.size-2 { font-size: 22px; }

Basic Tags Overview

  • HTML: Starts and ends the document.
  • HEAD: Contains meta-information.
  • TITLE: Specifies the title of the document.
  • BODY: Contains the main content.
  • P: Defines paragraphs.
  • DIV: Defines a division or section.
  • H1: Defines the most important heading.
  • UL/LI: Creates an unordered list.
  • A: Defines hyperlinks.

Additional Tags Descriptions

  • The IMG tag for images.
  • The TABLE, TR, TD tags for table structure.
  • The BR, HR tags for line breaks and horizontal rules.

Explore and enjoy coding with Codemoji!