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.

Lesson overview

This section contains a general overview of topics that you will learn in this lesson.

• 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 puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!

Many great resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate, 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. Yet, there is quite a lot you can do with just HTML and CSS, 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

Knowledge check

The following questions are an opportunity to reflect on key topics in this lesson. If you can’t answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.

• 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?
• What is the difference between HTML, CSS and JavaScript?

Additional resources

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

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

• Save DevDocs.io as a bookmark for future reference. It’s a massive API documentation collection maintained by FreeCodeCamp. Read the ‘Welcome’ message for more information.