Introduction to HTML and CSS

Introduction

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

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!

Assignment

  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 or if you need to dive deeper into something.

  • 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.

Knowledge Check

  • What do HTML and CSS stand for?
  • Between HTML and CSS, which would you use for putting paragraphs of text on a webpage?
  • Between HTML and CSS, which would you use for changing the font and background color of a button?
Improve this lesson on GitHub

Have a question?

Chat with our friendly Odin community in our Discord chatrooms!

Open Discord