---
title: HTML & CSS
description: HTML and CSS are the core languages of the web. This topic covers structuring web page content and styling layouts, enabling learners to build and design visually appealing, responsive websites from scratch.
category: programming-tech
subcategory: web-development
difficulty: beginner, intermediate, advanced
url: /subject/html-and-css
---

# HTML & CSS

HTML and CSS are the core languages of the web. This topic covers structuring web page content and styling layouts, enabling learners to build and design visually appealing, responsive websites from scratch.

## Available Resources

3 Videos • 2 Books • 4 Courses • 4 Websites

## Websites

### 1. A Complete Guide to Flexbox

**Author:** Chris Coyier

Illustrated CSS-Tricks reference to the Flexible Box Layout module, explaining every container and item property, including flex-direction, flex-wrap, justify-content, align-items, align-content, gap, order, flex-grow, flex-shrink and flex-basis, with diagrams and examples. Readers can build one-dimensional CSS layouts confidently.

**Difficulty:** Beginner | **Price:** Free

**Link:** https://css-tricks.com/snippets/css/a-guide-to-flexbox/

**Tags:** css, flexbox, css-layout, web-design

### 2. MDN Web Docs

Mozilla's reference for every HTML element and attribute, with browser compatibility tables, accessibility notes, and worked examples. Use it to check exact semantics and supported behaviour instead of guessing, and as the authoritative answer when tutorials disagree.

**Difficulty:** Beginner | **Price:** Free

**Link:** https://developer.mozilla.org/en-US/docs/Web/HTML

**Tags:** html, documentation, reference, semantic-markup, accessibility

### 3. css-tricks.com

CSS-Tricks is a comprehensive frontend development resource offering tutorials, articles, and code snippets focused on HTML, CSS, and modern web design. It features in-depth guides, a CSS Almanac, and practical examples for building responsive layouts and interactive UI.

**Difficulty:** Intermediate | **Language:** English | **Price:** Free

**Link:** https://css-tricks.com

**Tags:** websites, technology-computer-science, web-development

### 4. MDN Web Docs

MDN Web Docs is a comprehensive resource for learning and referencing web technologies, including HTML, CSS, JavaScript, and Web APIs. It offers tutorials, guides, code examples, and debugging tips to help you build, test, and troubleshoot web applications.

**Difficulty:** Intermediate | **Language:** English | **Price:** Free

**Link:** https://developer.mozilla.org

**Tags:** html, css, javascript, web-apis, web-reference

## Courses

### 1. What The Flexbox?!

**Author:** Wes Bos

Free 20-video course by Wes Bos on CSS Flexbox, covering axes, direction, wrapping, flex-grow, flex-shrink, flex-basis and alignment, followed by projects such as navigation bars, pricing grids and app layouts, so learners can build responsive layouts confidently.

**Difficulty:** Beginner | **Price:** Free

**Link:** https://flexbox.io

**Tags:** css, flexbox, css-layout, responsive-design, front-end

### 2. Responsive Web Design

Master responsive web design with HTML & CSS! FreeCodeCamp's course makes your websites look great on any device.

**Difficulty:** Beginner | **Price:** Free

**Link:** https://www.freecodecamp.org/learn/2022/responsive-web-design/

**Tags:** html, css, responsive-design, accessibility, flexbox, grid

### 3. Responsive Web Design

Free self-paced freeCodeCamp curriculum that teaches HTML and CSS through small guided projects, covering semantic markup, the box model, Flexbox, CSS Grid, media queries and accessibility basics. Learners can build and publish simple websites that adapt to phone and desktop screens.

**Difficulty:** Beginner | **Price:** Free

**Link:** https://www.freecodecamp.org/learn/responsive-web-design/

**Tags:** responsive-design, html, css, accessibility, web-development

### 4. The Odin Project: Foundations Path

The Odin Project provides a free and comprehensive, project-based curriculum for aspiring web developers. Its Foundations path introduces essential web development concepts, including HTML and CSS, and is highly recommended for beginners.

**Difficulty:** Beginner | **Language:** English | **Price:** Free

**Link:** https://www.theodinproject.com/paths/foundations/courses/foundations

**Tags:** web-development, html, css, javascript, git, project-based

## Videos

### 1. Flexbox & Grid in 20 Minutes

Traversy Media screencast walking through the CSS flexbox model: container and item properties, main and cross axes, alignment, wrapping, and ordering. After it you can build navigation bars and card rows without floats or positioning hacks.

**Difficulty:** Beginner | **Price:** Free

**Link:** https://www.youtube.com/watch?v=JJSoEo8JSnc

**Tags:** css, flexbox, layout, responsive-design

### 2. HTML Crash Course

Traversy Media screencast covering document structure, headings, lists, links, images, tables, and forms, building a small page as it goes. After watching you can hand-write valid HTML markup for a simple multi-section site.

**Difficulty:** Beginner | **Price:** Free

**Link:** https://www.youtube.com/watch?v=UB1O30fR-EE

**Tags:** html, forms, semantic-markup, web-development

### 3. CSS Crash Course For Absolute Beginners

Traversy Media screencast introducing selectors, the box model, colors, typography, positioning, and floats, styling a sample page throughout. After watching you can write stylesheets that control spacing and layout deliberately instead of by trial and error.

**Difficulty:** Beginner | **Price:** Free

**Link:** https://www.youtube.com/watch?v=yfoY53QXEnI

**Tags:** css, selectors, box-model, styling, layout

## Books

### 1. HTML and CSS: Design and Build Websites

**Author:** Jon Duckett

Jon Duckett's visually formatted introduction covers HTML markup and CSS styling one concept per page. After working through it, you can structure pages with semantic elements, style text and layout, and read the source of a simple site.

**Difficulty:** Intermediate | **Language:** English | **Price:** Paid

**Link:** https://www.amazon.com/dp/1118008189?tag=edmonddante07-20

**Tags:** books, technology-computer-science, web-development

### 2. CSS Secrets

**Author:** Lea Verou

Lea Verou presents roughly fifty solutions to recurring CSS problems in backgrounds, shapes, typography, and transitions, explaining the mechanics behind each. Readers gain a working command of less obvious CSS features and can replace hacks with native styling.

**Difficulty:** Intermediate | **Language:** English | **Price:** Paid

**Link:** https://www.amazon.com/dp/1449372635?tag=edmonddante07-20

**Tags:** books, technology-computer-science, web-development

---

*This content is part of Dantes.io - Your Treasure Map to Knowledge*

*Curated by humans at Dantes.io. Personal study use welcome; republishing this curation requires permission (team@dantes.io).*

View this page online: https://dantes.io/subject/html-and-css