Fazer Front
é Difícil

(Mas não precisa ser)
Um tutorial amigável de desenvolvimento web para iniciantes

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. Ler mais

um ícone vazio

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. Ler mais

ícone de uma página web básica

Âncoras e Imagens

Ancorando 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. Ler mais

ícone de uma ligação e imagens

Olá, CSS

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

ícone de estilos da CSS

Modelo de Caixa

Elementos de bloco, de linha, preenchimento, bordas, margens, dimensões, e uma introdução do quão belo são páginas web construídas com caixas. Ler mais

ícone modelo de caixa CSS

Seletores CSS

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

ícone seletores CSS

Floats

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

Ícone Floats CSS

Flexbox

Conteineres Flex versus itens flex, alinhamento vertical e horizontal, distribuição, encapsulamento, reordenação, e construindo layouts CSS modernos. Ler mais

Ícone Flexbox com CSS

Posicionamento Avançado

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

Ícone posicionamento avançado com CSS

Design Responsivo

Utilizando media queries para controlar quando as regras do CSS são aplicadas, desenvolvimento focado em dispositivos móveis, e desativação do zoom do viewport. Ler mais

Ícone de design responsivo

Imagens Responsivas

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

ìcone de imagens responsivas

Semântica HTML

Esboço do documento, articles, sections, navs, headers, footers, asides, figures, e outras maneiras de deixar seu HTML mais informativo. Ler mais

Ícone de marcação semântica

Formulários

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

Ícones de formulários HTML com cursos piscando 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. Ler mais

Ícone tipografia web