Conteúdo

Crie páginas elegantes de forma simples! HTML e CSS, quando bem utilizados, podem ser o sucesso de um projeto e, com os novos recursos, muito do que antes era trabalhoso agora não é mais.

Aprenda as melhores técnicas para escrever seu site por meio de exemplos práticos de funcionalidades úteis do cotidiano. Construa menus, aplique efeitos, estilize elementos visuais, melhore a semântica da sua página e muito mais!

Saiba o que você vai aprender

Sumário

• 1 O desenvolvimento web hoje
• 1.1 Por que você deve aprender HTML e CSS
• 1.2 O estado dos navegadores
• 1.3 A complicação dos prefixos proprietários
• 1.4 A longa e sinuosa estrada deste livro

• 2 Os primeiros passos com o nosso site
• 2.1 Escrevendo HTML, de dentro para fora
• 2.2 Adicionando formatações básicas
• 2.3 Bordas e margens
• 2.4 Um pouco de cor sempre é bom
• 2.5 Primeiro contato com imagens
• 2.6 Adicionando elementos secundários
• 2.7 Faça para sua cidade também!

• 3 HTML5: o que mudou?
• 3.1 Escrevendo menos e fazendo mais
• 3.2 Atributos personalizados
• 3.3 Tags novas para elementos antigos
• 3.4 Refatoração da página de São Paulo
• 3.5 Seja pragmático

• 4 O que todo desenvolvedor precisa saber sobre CSS
• 4.1 A incompatibilidade dos browsers e a razão dos resets de CSS
• 4.2 Compreendendo o Box model
• 4.3 Utilizando pseudoelementos
• 4.4 Desenhando uma faixa com "::before" e "::after"
• 4.5 Decorando mensagens
• 4.6 Criando conteúdo através de CSS
• 4.7 Arquitete o seu CSS para o futuro
• 4.8 Gere relatórios inteligentes e simples com os estilos de impressão

• 5 O que você consegue fazer com CSS 3
• 5.1 A regra @font-face
• 5.2 Como utilizar serviços de distribuição de fontes
• 5.3 Substituição de ícones por fontes
• 5.4 Explore novas possibilidades com bordas
• 5.5 Manipulação de cores com rgba e gradientes
• 5.6 Trabalhe com sombras e crie menus elegantes
• 5.7 Combinando tudo

• 6 Tomando controle da estrutura visual
• 6.1 A propriedade 'display'
• 6.2 Flutue elementos
• 6.3 O clearfix, uma classe obrigatória em seus projetos
• 6.4 Compreenda o uso de position
• 6.5 Crie a sua própria janela modal
• 6.6 Como escolher os métodos para posicionar os seus elementos
• 6.7 Grids - um padrão de estrutura para as suas páginas
• 6.8 Posicionando elementos com CSS 3

• 7 Melhorando os seus formulários
• 7.1 O que temos no HTML 5
• 7.2 Formulários HTML 5 nos dispositivos móveis
• 7.3 Criação do primeiro formulário
• 7.4 Alinhamento e estilos visuais nos campos e formulários
• 7.5 Exibição de mensagens de ajuda
• 7.6 Mostre mensagens de erro
• 7.7 Levando o usuário direto ao que importa com o autofocus
• 7.8 A flexibilidade do atributo placeholder
• 7.9 Aplicando CSS3 em botões

• 8 Efeitos 101: Trabalhando com animações e transições
• 8.1 Transformando elementos
• 8.2 Os efeitos rotate, scale, skew e translate em uma galeria de fotos
• 8.3 Transições de estilos
• 8.4 Transições na galeria de fotos
• 8.5 Um detalhe importante sobre transições e JavaScript
• 8.6 Transformações em 3D
• 8.7 Girar formulários com apenas um clique
• 8.8 Utilizando animações
• 8.9 Começando com keyframes

• 9 O universo fora dos desktops e notebooks
• 9.1 O que é "Responsive Web Design" e porquê você deve se preocupar
• 9.2 O funcionamento dos media queries
• 9.3 Não é uma questão de aparelhos
• 9.4 Por um futuro melhor

• 10 Ferramentas - Frameworks, Plugins e Pré-processadores
• 10.1 Bootstrap
• 10.2 HTML5 Boilerplate
• 10.3 Plugins em JavaScript
• 10.4 Modernizr
• 10.5 Polyfills
• 10.6 Pré-processadores
• 10.7 É tudo CSS e HTML

• 11 Não pare por aqui