Treinamento de Estagiários

CSS

Neste módulo, os estagiários aprenderão sobre CSS (Cascading Style Sheets) e como estilizar páginas web.

Aulas

Aula Programação Web

Curso de CSS Completoopen in new window

Aula Curso em Vídeo

Curso completo e atual de HTML5 e CSS3open in new window

Desafios

Desafio 1: Sintaxe CSS

Objetivo: Aprenda a sintaxe básica do CSS e crie um arquivo CSS externo para estilizar sua página HTML.

Tópicos a serem estudados:

  1. Sintaxe básica do CSS
  2. Seletores
  3. Propriedades e valores
  4. Arquivos CSS externos
  5. Vinculação de arquivos CSS a páginas HTML

Atividades propostas:

  1. Estude a sintaxe básica do CSS, incluindo seletores, propriedades e valores.
  2. Crie um arquivo CSS externo.
  3. Adicione algumas regras CSS ao arquivo para estilizar elementos da sua página HTML, como títulos, parágrafos, listas e tabelas.
  4. Vincule o arquivo CSS à sua página HTML usando a tag <link> dentro da seção <head>.
  5. Teste sua página no navegador para garantir que os estilos estejam sendo aplicados corretamente.

Ao concluir este desafio, o estagiário terá aprendido a sintaxe básica do CSS e como aplicá-la a uma página HTML por meio de um arquivo CSS externo, o que facilita a manutenção e garante uma separação adequada entre a estrutura e a apresentação da página.

Desafio 2: Seletores e propriedades

Objetivo: Explore diferentes tipos de seletores CSS, como elementos, classes e IDs, e use várias propriedades para estilizar sua página HTML.

Tópicos a serem estudados:

  1. Seletores de elementos
  2. Seletores de classes
  3. Seletores de IDs
  4. Seletores combinados
  5. Propriedades CSS comuns

Atividades propostas:

  1. Estude os diferentes tipos de seletores CSS, incluindo seletores de elementos, classes e IDs.
  2. Estude algumas propriedades CSS comuns, como color, background-color, font-family, font-size, margin, padding e border.
  3. Aplique os seletores e propriedades aprendidos para estilizar sua página HTML.
    • Use seletores de elementos para aplicar estilos a todos os elementos de um determinado tipo.
    • Use seletores de classes para aplicar estilos a grupos específicos de elementos.
    • Use seletores de IDs para aplicar estilos a um único elemento com um ID específico.
  4. Experimente com seletores combinados para aplicar estilos a elementos que atendam a várias condições.
  5. Verifique a aparência da sua página no navegador e ajuste os estilos conforme necessário.

Ao concluir este desafio, o estagiário terá aprendido a usar diferentes tipos de seletores CSS e várias propriedades para estilizar sua página HTML de maneira mais eficiente e flexível.

Desafio 3: Cores e unidades de medida

Objetivo: Aprenda a usar cores (nomes, hexadecimal, RGB, HSL) e unidades de medida (px, em, rem, %) no CSS.

Tópicos a serem estudados:

  1. Cores no CSS
    • Nomes de cores
    • Valores hexadecimais
    • Valores RGB
    • Valores HSL
  2. Unidades de medida no CSS
    • Pixels (px)
    • Em (em)
    • Rem (rem)
    • Porcentagem (%)

Atividades propostas:

  1. Estude as diferentes formas de representar cores no CSS: nomes de cores, valores hexadecimais, valores RGB e valores HSL.
  2. Aplique cores diferentes aos elementos da sua página HTML usando cada um desses métodos.
  3. Estude as unidades de medida no CSS, incluindo pixels (px), em (em), rem (rem) e porcentagem (%).
  4. Experimente usar diferentes unidades de medida para estilizar elementos da sua página HTML, como fontes, margens, paddings e tamanhos de elementos.
  5. Compare o impacto das diferentes unidades de medida na aparência e responsividade da sua página.
  6. Ajuste os estilos conforme necessário e veja as mudanças no navegador.

Ao concluir este desafio, o estagiário terá aprendido a usar cores e unidades de medida no CSS, permitindo maior controle sobre a aparência e a responsividade da sua página HTML.

Desafio 4: Layout e posicionamento

Objetivo: Estilize o layout e o posicionamento dos elementos na sua página HTML usando propriedades como display, position, float e flexbox.

Tópicos a serem estudados:

  1. Propriedade display
  2. Propriedade position
  3. Propriedade float
  4. Flexbox

Atividades propostas:

  1. Estude a propriedade display e seus diferentes valores, como block, inline, inline-block e none. Aplique-os aos elementos da sua página HTML e observe como eles afetam o layout.
  2. Aprenda sobre a propriedade position e seus valores, como static, relative, absolute, fixed e sticky. Experimente aplicar diferentes valores de posição aos elementos da sua página e veja como eles afetam o posicionamento dos elementos.
  3. Explore a propriedade float e como ela pode ser usada para criar layouts com elementos flutuantes à esquerda ou à direita. Use float para posicionar elementos na sua página.
  4. Aprenda sobre flexbox, um método moderno e flexível para criar layouts no CSS. Estude suas propriedades e aplique-as para criar um layout responsivo e adaptável na sua página HTML.
  5. Ajuste o layout e o posicionamento dos elementos na sua página usando as propriedades e técnicas estudadas neste desafio.
  6. Teste a aparência e a responsividade da sua página em diferentes dispositivos e tamanhos de tela.

Ao concluir este desafio, o estagiário terá aprendido a usar propriedades e técnicas de layout e posicionamento no CSS, permitindo criar páginas com aparência profissional e responsiva.

Desafio 5: Tipografia e espaçamento

Objetivo: Estilize a tipografia (fontes, tamanhos, pesos, etc.) e o espaçamento (margem, preenchimento, etc.) dos elementos na sua página HTML.

Tópicos a serem estudados:

  1. Propriedades de tipografia
  2. Google Fonts
  3. Propriedades de espaçamento

Atividades propostas:

  1. Estude as propriedades de tipografia no CSS, como font-family, font-size, font-weight, font-style, line-height e text-align. Aplique diferentes estilos de tipografia aos elementos da sua página HTML.
  2. Acesse o Google Fontsopen in new window e escolha uma ou mais fontes para usar em sua página HTML. Siga as instruções para incorporá-las ao seu arquivo CSS e aplique-as aos elementos da página.
  3. Aprenda sobre as propriedades de espaçamento no CSS, como margin, padding, border, e box-sizing. Use essas propriedades para controlar o espaçamento e a aparência dos elementos da sua página HTML.
  4. Ajuste a tipografia e o espaçamento dos elementos na sua página, levando em consideração a hierarquia visual e a legibilidade do conteúdo.
  5. Verifique a aparência da sua página em diferentes dispositivos e tamanhos de tela para garantir que a tipografia e o espaçamento estejam consistentes e agradáveis.

Ao concluir este desafio, o estagiário terá aprendido a estilizar a tipografia e o espaçamento dos elementos em uma página HTML, melhorando a aparência e a legibilidade do conteúdo.

Desafio 6: Responsividade

Objetivo: Faça sua página HTML responsiva usando consultas de mídia e layouts fluidos.

Tópicos a serem estudados:

  1. Consultas de mídia (Media Queries)
  2. Layouts fluidos
  3. Unidades relativas
  4. Imagens responsivas

Atividades propostas:

  1. Estude consultas de mídia e aprenda a criar regras CSS específicas para diferentes dispositivos e tamanhos de tela. Use as consultas de mídia para adaptar o estilo da sua página HTML de acordo com a largura da tela ou outros parâmetros do dispositivo.
  2. Aprenda sobre layouts fluidos e como usar unidades relativas (%, em, rem, vw, vh) para criar layouts que se ajustem automaticamente ao tamanho da tela.
  3. Aplique o conceito de layout fluido à sua página HTML, substituindo unidades de medida fixas (como px) por unidades relativas e ajustando o layout de acordo.
  4. Aprenda a usar a propriedade max-width e outras técnicas para tornar as imagens responsivas e garantir que elas se ajustem ao tamanho da tela.
  5. Teste sua página HTML em diferentes dispositivos e tamanhos de tela para garantir que ela seja responsiva e se adapte corretamente a diferentes condições.

Ao concluir este desafio, o estagiário terá aprendido a criar páginas HTML responsivas que se adaptam automaticamente a diferentes dispositivos e tamanhos de tela, proporcionando uma melhor experiência para o usuário.

Desafio 7: Animações e transições

Objetivo: Adicione animações e transições CSS aos elementos da sua página HTML.

Tópicos a serem estudados:

  1. Transições CSS
  2. Animações CSS
  3. Propriedade transform
  4. Timing functions e delays

Atividades propostas:

  1. Estude a propriedade transition e aprenda a criar transições CSS para alterar suavemente as propriedades de um elemento quando um evento ocorre, como hover, focus ou active.
  2. Aplique transições CSS em elementos da sua página HTML, como botões, links e imagens, para melhorar a experiência do usuário.
  3. Aprenda a usar a propriedade animation e a sintaxe de @keyframes para criar animações CSS mais complexas e controladas.
  4. Adicione animações CSS a elementos da sua página HTML, como carregamento de imagens, rolagem de texto ou efeitos de entrada e saída.
  5. Estude a propriedade transform para aplicar transformações, como escala, rotação e translação, aos elementos da sua página HTML. Combine transformações com animações e transições para criar efeitos visuais interessantes.
  6. Aprenda sobre timing functions e delays para controlar a velocidade e o tempo de início das animações e transições.

Ao concluir este desafio, o estagiário terá aprendido a criar animações e transições CSS para adicionar interatividade e melhorar a experiência do usuário em sua página HTML.

Desafio 8: Pré-processadores CSS

Objetivo: Aprenda sobre pré-processadores CSS, como Sass ou Less, e incorpore-os em seu fluxo de trabalho.

Tópicos a serem estudados:

  1. Pré-processadores CSS: Sass e Less
  2. Variáveis e mixins
  3. Nesting e herança
  4. Funções e condicionais
  5. Importação de arquivos e organização de código

Atividades propostas:

  1. Escolha um pré-processador CSS, como Sass ou Less, para estudar e entender seu funcionamento e benefícios.
  2. Instale e configure o pré-processador escolhido em seu ambiente de desenvolvimento.
  3. Converta seu arquivo CSS existente para o formato do pré-processador escolhido (por exemplo, .scss para Sass ou .less para Less).
  4. Aprenda a usar variáveis e mixins para armazenar e reutilizar valores e blocos de código CSS em seu projeto.
  5. Aplique nesting e herança em seu código CSS para reduzir a repetição e tornar seu código mais legível e fácil de manter.
  6. Explore funções e condicionais disponíveis no pré-processador escolhido para criar lógica mais complexa em seu CSS.
  7. Organize seu código CSS utilizando a importação de arquivos e separe seu código em arquivos menores e mais gerenciáveis.

Ao concluir este desafio, o estagiário terá aprendido a utilizar um pré-processador CSS para otimizar e organizar seu código CSS, melhorando a eficiência e a manutenibilidade do projeto.

Last Updated:
Contributors: Maicon Cerutti