HTML & CSS

Learn how to create websites by structuring and styling your pages with HTML and CSS.
Lessons
0%
Projects
15 available
Quizzes
6 available
Start

enrolled students

estimated course time

required technical level

Unit 1: Introduction to HTML

Lesson: HTML Basics

Fundamentals of HTML

Lesson: Build Your Own Webpage

Now that you know HTML, you can create your very own webpage. Let's get started!

Unit 2: HTML Structure: Using Lists

Lesson: HTML Basics II

Now that you know how to build a webpage, let's learn how to make it look a little nicer. You can add lists, change fonts, and more!

Lesson: Social Networking Profile

It's hard to believe, but you now know enough HTML to create your own basic social networking profile! Let's get started.

Unit 3: HTML Structure: Tables, Divs, and Spans

Lesson: HTML Basics III

Paragraphs and lists are great, but sometimes you want to lay your webpage out in a more complex way. Enter tables, divs, and spans!

Lesson: Clickable Photo Page

Have you ever wanted to make a photo album or collection of images like the ones you've seen on Facebook or Pinterest? All it takes is a table.

Unit 4: Introduction to CSS

Lesson: CSS: An Overview

CSS (Cascading Style Sheets) are what give your HTML pages their beautiful appearance. You've got the HTML structure down pat—now it's time to make your website look great!

Lesson: Design a Button for Your Website

Now that you know some CSS, you can style great-looking buttons for your webpages.

Unit 5: CSS Classes and IDs

Lesson: CSS Selectors

You've learned a bit about CSS—now it's time to dive into the details of selectors, including multiple selectors, universal selectors, and class and ID selectors.

Lesson: Sorting Your Friends

You've probably got a lot of friends on social networking sites, but they're not all your friends: you've probably got acquaintances, family members, coworkers, classmates, and so on. Let's sort them with CSS!

Unit 6: CSS Element Positioning

Lesson: CSS Positioning

Now that you know exactly how to style any HTML element you want, it's time to learn how to place them exactly where you want them to appear on the page.

Lesson: Build a Resume

Ready to (wait for it)... reposition yourself?

Unit 7: HTML & CSS Projects

Project: Broadway

In this project you'll add a navigation menu, background image, and make a button.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: Innovation Cloud

In this project you'll add a background image, make a button, and add a navigation menu.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: MOVE

In this project you'll add a background image and button, and build two sections of the web page from scratch.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: Shutterbugg

In this project you'll use Bootstrap's 12-column grid to create a page layout with offset columns.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: Red Eye Photography

In this project you'll use Bootstrap's grid to make a gallery of images

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: BestBite

In this project you'll build a page layout using Bootstrap's grid. You'll also use Bootstrap's reusable components to add a navigation menu.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: Junction

In this project you'll use Bootstrap's 12-column grid to build a page layout.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: Adoptly

In this project, you'll use Bootstrap's grid to build another page layout.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: Headlines

In this project you'll use Bootstrap's grid to build a page layout from scratch.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: Excursion

In this project you’ll learn how to use the HTML <video> element in a web page.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: Pocketbook

In this project you’ll learn how to use the HTML <form> element to make a signup page.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: Bolt Network

In this project you’ll make a web page with a form and a grid of images.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: Bass

Build a landing page for a music app from scratch.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: Armando Pérez

Build a portfolio page with a grid of images from scratch

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
Project: Newsroom

Build a news page from scratch that ties in elements you’ve seen in previous projects.

Get access to Projects and more exclusive, advanced content with Codecademy Pro.
Upgrade Now >
HTML & CSS FINAL PROJECT
Exclusive for Pro: HTML & CSS Final Project
Design and build a website from scratch. You'll work entirely off of Codecademy, using the fundamentals you've learned to create a fully functioning site from the ground up. Test your skills, practice them, and come out with final product to show what you've learned.
Upgrade to Codecademy Pro