Introdução

O propósito do HTML, CSS, e JavaScript, a diferença entre frameworks e linguagens, e encontrando o seu caminho em torno de um projeto de um site com o Atom. Leia mais

an empty icon

Páginas Web Básicas

O esqueleto de cada página da Internet, assim como elementos HTML fundamentais como cabeçalhos, parágrafos, listas, etc. Leia mais

basic web page icon

Links e Imagens

Linkando a outras páginas, referindo-se a elas com caminhos absolutos, relativos, e relativos a raíz, inserindo imagens, e toques finais no esqueleto básico da nossa página web. Leia mais

links and images icon

Olá, CSS

Inserindo uma folha de estilo (stylesheet), estilizando elementos HTML com todos os tipos de Propriedades do CSS, selecionando diferentes elementos e reutilizando estilos em várias páginas da web. Leia mais

CSS styles icon

O Box Model

Elementos block, inline, padding, borders, margins, dimensions, e uma introdução do quão belo são os websites construído com caixas. Leia mais

CSS box model icon

Seletores CSS

Seletores de classes, seletores de descendentes, <div>s mais úteis, links de estilo com pseudo-classes, e porque os selecionadores de identidade são uma má idéia. Leia mais

CSS selectors icon

Floats

Introdução aos layouts baseados em floats, controlando o fluxo horizontal da página, limpando os floats, e escondendo o overflow. Leia mais

CSS floats icon

Flexbox

Flex containers versus flex items, alinhamento vertical e horizontal, distribuição, wrapping, re-ordenação, e construindo layouts CSS modernos. Leia mais

CSS flexbox icon

Posicionamento Avançado

Posicionamento estático, relativo, absoluto e fixo, dropdown menus, z-index, e outros truque de CSS que vão fazer você se sentir muito inteligente. Leia mais

CSS advanced positioning icon

Design Responsivo

Utilizando media queries para controlar quando as regras do CSS são aplicadas, desenvolvimento mobile-first, e desativação do zoom do viewport. Leia mais

responsive design icon

Imagens Responsivas

A parte difícil do design responsivo: telas retina, imagens fluídas, otimização de dispositivos com srcset, e art direction com o elemento <figure>. Leia mais

responsive images icon

Semantic HTML

Outline do documento, articles, sections, navs, headers, footers, asides, figures, e outras maneiras de deixar seu HTML mais informativo. Leia mais

semantic markup icon

Forms

Formulários no front-end: o HTML para criação de campos de texto, radio buttons, menus dropdown, checkboxes e botões, bem como o CSS para criação de estilos em todos eles. Leia mais

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

Tipografia na Web

Onde encontrar fontes para web, hospedando localmente versus externamente, lidando com múltiplas font faces, e princípios básicos de tipografia como alinhamento, espaçamento de linhas e tamanho horizontal. Leia mais

web typography icon