Horário de aula

Tutorial básico CSS

• Tutorial de CSS
• Introdução ao CSS
• Sintaxe do CSS
• Seletor do CSS
• Uso do CSS
• Comentário do CSS
• Cor do CSS
• Cor RGB do CSS
• Cor HEX do CSS
• Cor HSL do CSS
• Fundo do CSS
• Imagem de Fundo do CSS
• Repetição de Fundo do CSS
• Atrito do Fundo do CSS
• Atributo Abreviado de Fundo do CSS
• Borda do CSS
• Largura da Borda do CSS
• Cor da Borda do CSS
• Borda de todos os Lados do CSS
• Atributo Abreviado de Borda do CSS
• Borda Arredondada do CSS
• Margem do CSS
• Mergulho da Margem do CSS
• Preenchimento do CSS
• Altura / largura CSS
• Modelo de Caixa do CSS
• Contorno do CSS
• Largura do Contorno do CSS
• Cor do Contorno do CSS
• Atributo Abreviado do Contorno do CSS
• Deslocamento do Contorno do CSS
• Texto do CSS
• Alinhamento do Texto do CSS
• Decoração do Texto do CSS
• Transformação do Texto do CSS
• Espaçamento do Texto do CSS
• Sombra do Texto do CSS
• Fonte do CSS
• Estilo da Fonte do CSS
• Tamanho da Fonte do CSS
• Fonte do Google do CSS
• Atributo Abreviado da Fonte do CSS
• Ícone do CSS
• Link do CSS
• Lista do CSS
• Tabela do CSS

Tutorial intermediário CSS

• Display CSS
• max-width CSS
• Posicionamento CSS
• z-index CSS
• Transbordamento CSS
• Flutuamento CSS
• Remoção de flutuamento CSS
• Exemplo de Flutuante do CSS
• inline-block CSS
• Alinhamento CSS
• Combinador CSS
• Pseudo-Classe do CSS
• Pseudo-Elemento do CSS
• Opacidade do CSS
• Barra de Navegação do CSS
• Barra de Navegação Vertical do CSS
• Barra de Navegação Horizontal do CSS
• Menu Desdobrável do CSS
• Biblioteca de Imagens do CSS
• Sprite de Imagem do CSS
• Seletor de Atributo do CSS
• Formulário do CSS
• Contador do CSS
• Layout do Site do CSS
• Unidade do CSS
• Especifidade do CSS
• CSS !important
• Função Matemática do CSS

Tutorial avançado CSS3

• Arredondamento do CSS
• Imagem da Borda do CSS
• Fundo do CSS
• Cor do CSS
• Palavra-Chave da Cor do CSS
• Gradiente do CSS
• Gradiente Radial do CSS
• Sombra do CSS
• box-shadow do CSS
• Efeito de Texto do CSS
• Fonte de rede CSS
• Transformação 2D CSS
• Transformação 3D CSS
• Transição CSS
• Animação CSS
• Dica de ferramenta CSS
• Estilo de imagem CSS
• Propriedade object-fit CSS
• object-position CSS
• Máscara CSS
• Botão CSS
• Paginação CSS
• Colunas CSS
• Interface do usuário CSS
• Variáveis CSS
• Variáveis cobertas CSS
• Variáveis CSS - JavaScript
• Variáveis CSS - consultas de mídia
• CSS @property
• Box Sizing CSS
• Flexbox CSS
• Consultas de mídia CSS
• Exemplo de consulta de mídia CSS

Design responsivo CSS

• Introdução ao RWD
• Visão RWD
• Visão em grade RWD
• Consultas de mídia RWD
• Imagens RWD
• Vídeos RWD

Tutorial de grade CSS

• Módulo de layout de grade CSS
• Container de grade CSS
• Item de grade CSS

Exemplo CSS

• Exemplo CSS

Quiz CSS

• Quiz CSS

Manual de referência CSS

• Manual de referência CSS
• Suporte do navegador CSS
• Seletor do CSS
• Função CSS
• Unidade do CSS
• Auditivo CSS
• Fonte de segurança de rede CSS
• Produção animável CSS
• Unidade do CSS
• Cor do CSS
• Valor de cor CSS
• Valor padrão CSS
• Entidade CSS

Curso optativo

Recomendação de curso:

• Caixa de ferramentas CodeW3C.com

O que é design responsivo para web?

O design responsivo para web fará com que sua página da web pareça boa em todos os dispositivos.

Design web responsivo usa apenas HTML e CSS.

Design web responsivo não é programa ou JavaScript.

Design para obter a melhor experiência para todos os usuários

Você pode usar muitos dispositivos diferentes para visualizar a página da web: computador de mesa, tablet e celular. Independentemente do dispositivo que você usar, sua página da web deve parecer bonita e fácil de usar.

A página da web não deve desprezar informações para se adequar a dispositivos menores, mas deve tornar o conteúdo adequado para qualquer dispositivo:

Computador de mesa

Tablet

Celular

Se você usar CSS e HTML para ajustar o tamanho, ocultar, encolher, expandir ou mover conteúdo para que ele pareça bem em qualquer tela, isso é chamado de design web responsivo.

Se você não entender o exemplo abaixo, não se preocupe, vamos desmontar o código passo a passo no próximo capítulo:

Experimente você mesmo

Caixa de ferramentas

Manual de referência CSS

Exemplo CSS

Quiz CSS

Livro de apoio CSS

Link de patrocinador