HTML & CSS
Is Hard

(But it doesn’t have to be)
A friendly web development tutorial for complete beginners

Introduction

The purpose of HTML, CSS, and JavaScript, the difference between frameworks and languages, and finding your way around a basic website project with Atom. Read more

an empty icon

Basic Web Pages

The skeleton for every web page on the Internet, as well as fundamental HTML elements like headings, paragraphs, lists, etc. Read more

basic web page icon

Links and Images

Linking to other pages, referring to them with absolute, relative, and root-relative paths, embedding images, and finishing touches to our basic web page skeleton. Read more

links and images icon

Hello, CSS

Connecting a stylesheet, styling HTML elements with all sorts of CSS properties, selecting different elements, and reusing styles across multiple web pages. Read more

CSS styles icon

The Box Model

Block boxes, inline boxes, padding, borders, margins, dimensions, and an introduction to how beautiful websites are built up with boxes. Read more

CSS box model icon

CSS Selectors

Class selectors, descendant selectors, more useful <div>’s, styling links with pseudo-classes, and why ID selectors are a bad idea. Read more

CSS selectors icon

Floats

Introduction to CSS float-based layouts, controlling the horizontal flow of the page, clearing floats, and hiding overflow. Read more

CSS floats icon

Flexbox

Flex containers versus flex items, aligning vertically and horizontally, distributing, wrapping, re-ordering, and crafting modern CSS layouts. Read more

CSS flexbox icon

Advanced Positioning

Static, relative, absolute, and fixed positioning, dropdown menus, the z-index, and other fancy CSS that’ll make you feel real smart. Read more

CSS advanced positioning icon

Responsive Design

Using media queries to control when CSS rules are applied, mobile-first development, and disabling viewport zoom. Read more

responsive design icon

Responsive Images

The hard part of responsive design: retina screens, fluid images, device optimization with srcset, and art direction with the <picture> element. Read more

responsive images icon

Semantic HTML

The document outline, articles, sections, navs, headers, footers, asides, figures, and other ways to make your HTML markup more informative. Read more

semantic markup icon

Forms

Frontend forms: the HTML for creating text fields, radio buttons, dropdown menus, checkboxes, and buttons, as well as the CSS for styling all of them. Read more

HTML forms icon (on) HTML forms icon (off)

Web Typography

Where to find web fonts, hosting locally versus externally, dealing with multiple font faces, and basic typographic principles like text alignment, leading, and measure. Read more

web typography icon