Formações Front-end CSS avançado: implementando designs com Grid, Flexbox e Sass

Formação CSS avançado: implementando designs com Grid, Flexbox e Sass

Domine o CSS avançado e crie designs que se destacam, com menos código e mais eficiência

* Esta formação faz parte dos nossos cursos de Front-end

Quero Estudar na Alura
45h

Para conclusão

5
Cursos
6
Artigos

CSS: cursos para transformar designs com Grid, Flexbox e Sass

Se você já conhece HTML e acha que seu CSS tá no ponto, é hora de dar aquele próximo passo e mergulhar fundo no universo do CSS avançado. A gente sabe que criar layouts bonitos e funcionais é uma das maiores alegrias de trabalhar com frontend, mas aplicar o CSS de maneira avançada te permite criar layouts complexos e adaptáveis. E o melhor de tudo: você vai perceber que não precisa de toneladas de código pra fazer isso, só precisa conhecer e saber usar as ferramentas certas.

Nessa formação, a gente vai te mostrar como o CSS pode ir muito além de uma simples lista de regras, se transformando em uma verdadeira linguagem para expressar suas ideias. Vamos começar explorando o poder do Grid e do Flexbox, que vão te dar uma flexibilidade incrível para criar layouts responsivos e sofisticados. Depois, vamos nos aprofundar nos seletores complexos e aninhados, além de boas práticas que vão te ajudar a estilizar exatamente o que você precisa de forma precisa e eficiente.

E, pra fechar com chave de ouro, vamos mergulhar no Sass, uma ferramenta que vai revolucionar a forma como você escreve e organiza seu CSS, economizando tempo e facilitando a manutenção dos seus estilos.

Então, se você quer levar seu conhecimento de CSS pra um novo nível e fazer seus projetos brilharem de verdade, essa formação é pra você. Vem com a gente e vamos transformar o jeito que você escreve CSS!

Por que estudar esta formação?

  • Guia de aprendizado

    Conteúdos pensados para facilitar seu estudo

  • Do básico ao avançado

    Formação completa para o mercado

  • Você dentro do mercado

    Do zero ao sonhado emprego em sua área de interesse

Comece essa formação agora mesmo e capacite-se para seu próximo projeto!

Conheça os planos

Com quem você vai aprender?

  • Mônica Mazzochi Hillman

    Bacharela em Tecnologias Digitais, especialista em User Experience e pós graduanda em Docência e Performance na Educação a Distância com experiência em suporte técnico de T.I e com tecnologias front-end. Atualmente é Tech Community Manager na Magalu Cloud e instrutora na Alura. Nas horas vagas gosta de assistir animes e produções da marvel, ouvir kpop e post-hardcore, jogar Valorant e TFT.

  • Mônica Mazzochi Hillman

    Bacharela em Tecnologias Digitais, especialista em User Experience e pós graduanda em Docência e Performance na Educação a Distância com experiência em suporte técnico de T.I e com tecnologias front-end. Atualmente é Tech Community Manager na Magalu Cloud e instrutora na Alura. Nas horas vagas gosta de assistir animes e produções da marvel, ouvir kpop e post-hardcore, jogar Valorant e TFT.

  • Neilton Seguins

    Sou graduado como Bacharel em Ciência e Tecnologia e em Engenharia Mecânica. Atuo como Instrutor de Desenvolvedor de Software na Alura e possuo experiência com desenvolvimento usando JavaScript/TypeScript, React js, Next js e Node.js. Amo compartilhar conhecimento, pois acredito que a educação é transformadora e quero mudar a vida de pessoas através da educação assim como consegui mudar de vida. Também amo ouvir e tocar música, ler livros e mangás e assistir séries.

  • Neilton Seguins

    Sou graduado como Bacharel em Ciência e Tecnologia e em Engenharia Mecânica. Atuo como Instrutor de Desenvolvedor de Software na Alura e possuo experiência com desenvolvimento usando JavaScript/TypeScript, React js, Next js e Node.js. Amo compartilhar conhecimento, pois acredito que a educação é transformadora e quero mudar a vida de pessoas através da educação assim como consegui mudar de vida. Também amo ouvir e tocar música, ler livros e mangás e assistir séries.

  • Nayanne Batista

    Nayanne (Nay) é uma paraibana arretada que fez transição de carreira para a TI depois de concluir um doutorado na área da saúde e ser professora no ensino superior. Graduada em Análise e Desenvolvimento de Sistemas, já atuou como Dev Frontend em projetos e hoje é Instrutora na Alura. Acredita completamente no poder transformador da educação e da tecnologia na vida das pessoas. Ama livros e café! :)

  • Nayanne Batista

    Nayanne (Nay) é uma paraibana arretada que fez transição de carreira para a TI depois de concluir um doutorado na área da saúde e ser professora no ensino superior. Graduada em Análise e Desenvolvimento de Sistemas, já atuou como Dev Frontend em projetos e hoje é Instrutora na Alura. Acredita completamente no poder transformador da educação e da tecnologia na vida das pessoas. Ama livros e café! :)

Passo a passo
  1. 1 Dominando layout com flexbox e grid

    Nesse primeiro passo vamos mergulhar nas técnicas avançadas de layout, onde você vai dominar flexbox e grid. Saber isso vai te deixar preparado para resolver desafios de layouts que se ajustam de acordo com a quantidade de elementos e tamanho da tela - ferramentas essenciais para qualquer pessoa front-end.

  2. 2 Utilizando seletores, variáveis, media queries

    Nesse próximo passo, vamos nos aprofundar em seletores e variáveis, te dando o controle total sobre como e quando aplicar estilos de maneira precisa e dinâmica. Além disso, você vai dominar o uso de media queries para garantir que seus layouts sejam perfeitamente responsivos em qualquer dispositivo. E, também vamos explorar o CSS Houdini, uma ferramenta inovadora que permite criar efeitos e animações personalizadas diretamente no CSS, expandindo ainda mais o que é possível fazer no front-end.

    • Curso CSS: explorando seletores e utilizando variáveis

      10h
      • Entenda como utilizar seletores avançados de CSS para estilizar elementos de forma específica
      • Crie efeitos interativos utilizando :hover e :focus
      • Use pseudo-elementos ::before e ::after para adicionar conteúdo a página
      • Organize seu código CSS com variáveis
      • Compreenda o que são design tokens e como aplicá-los em seus projetos
    • Curso CSS: aplique responsividade usando media queries

      08h
      • Use media queries para criar layouts responsivos
      • Aplique técnicas de layout fluido com medidas flexíveis
      • Implemente imagens responsivas usando srcset
      • Entenda como flexbox e grid podem ajudar na construção de layout fluido
      • Teste e ajuste a responsividade do layout
    • Artigo Houdini CSS: um jeito mágico de criar estilos personalizados | Alura

    • Artigo Container queries: responsividade além das media queries | Alura

  3. 3 Implementando animações, SASS e integração com Vite

    Nesse passo você vai as animações com CSS, aprendendo a criar transições suaves e interações que dão vida aos seus designs. Além disso, vamos mergulhar no uso de SASS, começando pela integração com Vite, uma ferramenta moderna que vai otimizar seu fluxo de trabalho. Por fim, exploraremos como o SASS se encaixa no universo dos frameworks, permitindo que você escreva código mais organizado e eficiente, facilitando a manutenção e escalabilidade dos seus projetos.

Escola

Front-end

Além dessa, a categoria Front-end conta com cursos de HTML, CSS, React, Angular, JavaScript, jQuery,e mais...

Conheça a Escola

Comece a estudar agora na maior escola de tecnologia do país

Conheça os Planos para Empresas