Desenvolvimento em CSS: Do Básico ao Avançado

Ref: CAB

Desenvolvimento em CSS: Do Básico ao Avançado

Qual o objetivo do curso?

Capacitar o aluno a estilizar páginas web com CSS de forma eficiente e moderna; Ensinar técnicas avançadas, como Flexbox, Grid, animações e responsividade; Desenvolver habilidades em pré-processadores (SASS e LESS) e frameworks CSS; Preparar o aluno para trabalhar com projetos profissionais e layouts responsivos;


  • 40/horas aula

    A carga horária deste curso é sempre a mesma independentemente do turno que você escolher realizar seu treinamento.

  • Presencial, online e híbrido

    Seu treinamento poderá ser realizado de modo presencial, online (você assistindo ao vivo ou a mesma aula gravada de sua casa) ou híbrido (você assistirá de sua casa quando não puder se fazer presente).

  • Mais info

    Clique para conversar com a gente diretamente pelo Whats e tirar todas as suas dúvidas.

  • Trilha de aprendizado

    Cada treinamento é parte de uma trilha de aprendizado que fará todo sentido na sua formação profissional.

  • Coffee-break em todas aulas

    Em nossos cursos presenciais você terá um intervalo para desfrutar de um delicioso coffee-break com lanches, frutas, bolos, sucos e café. E o melhor: você não paga nada a mais por isso!

  • Material incluso

    No 1º dia de aula você receberá o seu kit de treinamento: uma linda bolsa, caneta, caderno, livro apostila ou pendrive.

  • Estrutura completa

    Conte com uma estrutura completa com 13 laboratórios equipados. Clique e confira!

  • Descontos e prêmios na especialização

    Ganhe descontos e prêmios na sua especialização. Clique e saiba mais.

Esse curso é ideal para

Estudantes e profissionais de TI e Design que desejam aprofundar conhecimentos em CSS; Desenvolvedores iniciantes ou intermediários que buscam avançar suas habilidades; Designers que querem transformar layouts em páginas web funcionais.

O que você precisa conhecer antes

Curso ProWay HTML5 Avançado ou conhecimentos equivalentes.

Conteúdo Programático

Histórico do CSS

  • Evolução do CSS e sua importância no desenvolvimento web

Agrupando e identificando elementos HTML

  • Uso de id e class

Sintaxe e Seletores

  • Seletores básicos e avançados

  • Atributo style

  • CSS inline, interno e externo

Prioridade de regras em cascata

  • Especificidade e ordem de aplicação das regras

Cor e fundo

  • Aplicação de cores, gradientes e imagens de fundo

Fonte e Texto

  • Tipografia: tamanho, peso, estilo, espaçamento entre letras e linhas

Links

  • Estilização de links e estados (hover, active, visited)

Altura e largura

  • Definição de dimensões e proporções

Espaçamento e bordas

  • Padding, Margin e Border

Layouts

  • Modelo de caixa

  • Propriedades display e position

  • Layouts modernos com Flexbox e Grid

Tabelas

  • Estilização e formatação de tabelas

Media Queries e Responsividade

  • Conceito de viewport

  • Design responsivo x adaptativo

  • Estratégia Mobile First

  • Uso de srcset para imagens

Animações

  • Transições e animações com @keyframes

Pseudo-seletores

  • :hover, :first-child, :nth-child e outros

Metodologias de CSS

  • BEM (Block, Element, Modifier)

  • OOCSS (Object-Oriented CSS)

Frameworks CSS

  • Por que usar frameworks?

  • Bootstrap, MaterializeCSS e Bulma

Pré-processadores CSS

SASS

  • Variáveis, Aninhamento, Loops, Herança de seletores

LESS

  • Variáveis, Mixins, Aninhamento, Funções e operações

PostCSS

  • Sintaxe e Plugins

Transition e Transform

  • Transform: scale, translate, rotate e skew

  • Transform: origin

  • Transitions

  • Movimentação de elementos

Surprise Effect

  • O que é o surprise effect

  • Como funciona

  • Ripple Effect

  • Introdução ao Clip-path

  • Clip-path + Surprise Effect

Responsividade Avançada

  • Organização de arquivos do projeto

  • Media Types e Media Queries

  • Layouts para desktop, tablet e smartphone

  • Menus responsivos

  • Sombreamento avançado

  • Arquivos globais e regras CSS

Multi-colunas

  • Propriedade multicolunas

  • Divisão de texto em 1, 2, 3 e 4 colunas

  • Trabalho com imagens e títulos

  • Filtros orientados

Responsividade 2: trabalhando com background

  • Background Position e Background Size

  • Background com Media Query

  • Object-fit

  • Projeto de Thumbnail

  • Menus avançados

Desejo mais informações