Introduction to HTML and CSS


So here it is: it’s time to actually start making things. This section will teach you the basics of HTML and CSS, the two foundational building blocks of pretty much everything on the web.

Learning Outcomes

  • Get a basic overview of HTML, CSS and how they work together.


HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists and buttons are created in HTML. CSS is what adds style to those plain elements. HTML is used to put information on a webpage and CSS is used to position that information, give it color, change the font and make it look great!

If you want to get technical, HTML and CSS aren’t programming languages because they are only concerned with presenting information. They are not used to program any logic. JavaScript, which you will be learning in the next section, is a programming language because it’s used to make webpages do things. There is quite a lot you can accomplish with just HTML and CSS however, and you will definitely need them both. The following lessons focus on giving you the tools you need to be successful once you get to the JavaScript content as you continue through our curriculum!


  1. Read HTML vs CSS vs JavaScript. It’s a quick overview of the relationship between HTML, CSS and JavaScript.

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental.

  • This FreeCodeCamp article goes into a little more depth than the assigned one. It covers things we’ll be teaching explicitly in later lessons though, so don’t worry about memorizing any of the details.
  • Bookmark Read the “Welcome” message. Massive API documentation collection that even works offline. Essential collection of reference material for everything covered and more. (Maintained by FreeCodeCamp)

Knowledge Check

This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.

Improve this lesson on GitHub

Have a question?

Chat with our friendly Odin community in our Discord chatrooms!

Open Discord