Close
Create an Account
Student

Student

Learn the basics of coding while building your own website
Parent

Parent

Track your student's progress and assign them challanges
Teacher

Teacher

Create a classroom and assign lessons to your students
Already have an account?
Log In
Close
I Am A
Student

Student

Learn the basics of coding while building your own website
Parent

Parent

Track your student's progress and assign them challanges
Teacher

Teacher

Create a classroom and assign lessons to your students
Don't have a Google account?
Log In
Close
Log In

Welcome Back!

Login to have access to all of Codemoji's features, including all of our HTML, CSS, and JS lessons!

Forgot password?
Don't have an account?
Sign Up
Close
Google Log In

Welcome Back!

Google Login allows you to connect with your classroom in the click of a button!

Don't have a Google account?
Log In
Close
Create a Student Account

Welcome to Codemoji!

Not a student? Click here
Already have an account?
Log In
Close
Create a Parent Account

Welcome to Codemoji!

Not a parent? Click here
Already have an account?
Log In
Close
Create a Teacher Account

Welcome to Codemoji!

Not a teacher? Click here
Already have an account?
Log In
Next Lesson
Lesson 3: Font-Family

Font can make your text wacky or slim and cool. Sometimes adding a wacky font to the header you just made and colored will make it stand out.

Next

Cool, simple, non-wacky fonts are used for most tag fonts and stand out a lot less than the others. Sometimes wacky is good, other times it's cool, and occasionally basic is better.

Next

Make the font-family aleo by clicking on the firstand then clicking the and select the T in the middle .

Got it!

Sorry, that's not correct! Make sure that you clicked on the firstand then clicked the and select the T in the middle .


Try Again

Congratulations! You've just changed the font-family of the header.

View Code

Lesson 3: Font-Family

index.html

style.css

1.
This is the title
This is the heading, apply styling to it by clicking the opening h1 tag!
2. 3. 4. 5. 6. 7. 8. 9. 10.
1.
.color-1{ color: red; }
.color-2{ color: blue; }
.color-3{ color: green; }
.color-4{ color: orange; }
.color-5{ color: purple; }
.size-1{ font-size: 12px; }
.size-2{ font-size: 22px; }
.size-3{ font-size: 32px; }
.size-4{ font-size: 42px; }
.size-5{ font-size: 52px; }
2. 3. 4. 5. 6. 7. 8. 9. 10.
Play around in the playground.
Run Code
View Code

!

This is the <html> tag. Before you can get going, you need a green light. All HTML documents start and stop with the so drop one in to begin, and to end your document.

This is the <head> tag. You'll find the brains of the operation, at the start, in the panda's head - not seen on the page. You might want to add a title within the head.

This is the <title> tag. Turtles love titles. They like to put order to things and give them a name.

This is the <body> tag. Lots of things get layered to make a perfect . Within the buns of a perfect burger or page, all of the content with be layered in the body. Go ahead, jam in as many toppings as you can.

This is the <p> tag. Need a new paragraph ? Newspapers are fill with them. Drop a newspaper in to get a new paragraph.

This is the <div> tag. Just like buses that have to come to a complete stop before starting up again, a is a division in the content, separating things in the body.

This is the <h1> tag. Just like swirls on a soft serve ice cream cone, H1 to H6 tags are here. The most important ones are the H1, like the biggest swirl at the bottom, and the least important ones H6, like the smallest swirl at the top.

This is the <br> tag. We've all had a heart break. It creates separation and break between likes of text, or friends .

This is the <strong> tag. Sometimes you need to emphasize something and say it strongly. Add a little muscle, like this flexed bicep.

This is the <img> tag. Who doesnlt love to take snapshots and pictures to share with friends? If you need to add an image to your page, just use a and select the picture you'd like.

This is the <map> tag. Location is everything. Add a map to your document by dropping this map in and selecting a country.

This is the <ul> tag. Some lists don't have any order, like a checklist. Drop in the checkmark when you want a quick list that's not ordered.

This is the <li> tag. Lists are a great way to add some order to things. Add a list to your page and see the magic.

This is the <b> tag. Go boldly where no one has gone before, or just make some text bold with a rocket.

This is the <i> tag. Sometimes you need to say something special, like a book title, or movie name, so why not italics

This is the <span> tag. Just like a scroll, span is a section in the document.

This is the <a> tag. Links connect the internet, and allow you to connnect to various sources, pages, or content. Drop in a to make a connection.

This is the <blockquote> tag. Most good books are filled with quotes, so anytime you want to add a blockquote, just open a book.

This is the <table> tag. Structure make things easier to understand sometimes. Add a table to make rows and columns when you need say something with structure.

This is the <audio> tag. Life is always better with some music. Add some audio to your page with the .

This is the <video> tag. Who can resist eating when you go to the movies or watch a video. To add a video to your page, drop in this .

This is the <tr> tag. Life is always better with some music. Add some audio to your page with the .

This is the <td> tag. Who can resist eating when you go to the movies or watch a video. To add a video to your page, drop in this .