Layout web com CSS Grid, Flexbox e outras técnicas modernas

Um curso de Javier Usobiaga Ferrer
Web designer. Barcelona, Espanha.
Na Domestika desde 10/04/2015
, Web designer

Descubra as novas retículas e outras formas de desenhar um site com CSS Shapes, variáveis e efeitos parallax

  • 100% Avaliações positivas (84)
  • 1609 estudantes
  • Áudio: Espanhol
  • Espanhol, Inglês, Português, Alemão
Layout web com CSS Grid, Flexbox e outras técnicas modernas

Descubra as novas retículas e outras formas de desenhar um site com CSS Shapes, variáveis e efeitos parallax


  • 100% Avaliações positivas (84)
  • 1609 estudantes
  • Online e no seu ritmo
  • Áudio: Espanhol
  • Nível: Avançado
  • 25 Aulas (2 h 16 m)
  • Disponível no aplicativo
  • Espanhol, Inglês, Português, Alemão
  • Acesso ilimitado para sempre

A web vive uma mudança constante e com a chegada do CSS Grid e do Flexbox, as regras do jogo mudaram novamente. Javier Usobiaga, designer da FrontEnd e co-fundador do estúdio Swwweet, tem 13 anos de experiência na criação de vários projetos para clientes como o Conselho Municipal de Barcelona e, com sua vasta experiência, convida você a descobrir as técnicas e ferramentas mais modernas que estão revolucionando o mercado. setor.

Sim, no curso de Introdução ao Desenvolvimento Web Responsivo com HTML e CSS , desde que você começou no mundo da web responsiva, você aprenderá várias técnicas avançadas com ferramentas como CSS Grid, Flexbox, CSS Shapes, viewport units, variáveis CSS, transformações em 3D ou efeitos de tipo de paralaxe. .

O que este curso inclui?

Índice do curso

  • U1
    U1. Introdução
  • U2
    U2. Moldando o layout
  • U3
    U3. Layout em uma dimensão com flexbox
  • U4
    U4. Layout bidimensional com grade CSS
  • U5
    U5. CSS avançado da grade
  • U6
    U6. A terceira dimensão: profundidade e efeitos no pergaminho
  • PF
    PF Projeto final
Ver detalhe

A primeira coisa que você fará é conhecer Javier Usobiaga, sua carreira profissional e seus projetos mais notáveis.

Você começará aprendendo a modelar o layout com as unidades relacionadas às unidades de viewport, a propriedade de ajuste a objetos e como distribuir texto em colunas com colunas CSS. Você verá como as formas da Web podem deixar de ser retangulares com caminho de clipe e formas de CSS e também aprenderá a otimizar seu código com as propriedades personalizadas de variáveis nativas.

Você descobrirá a revolução que o Flexbox significou no mundo do layout web . Javier lhe ensinará todas as possibilidades de alinhamento de elementos. Para fazer isso, ele explicará as propriedades do contêiner e do conteúdo e os recursos de alinhamentos com um eixo principal, um cruzado e eixos alternativos.

Você continuará descobrindo as novas regras do jogo com o CSS Grid mudando completamente a maneira como você estrutura seu código e coloca o layout . Você aprenderá algumas funções de grade, as propriedades de distribuição e tamanho e como você pode criar uma grade que se adapta a diferentes tamanhos de tela com as[/i] repeat e minmax .

Javier explicará técnicas mais avançadas com o CSS Grid nas áreas de grade, o alinhamento e a ordem, o aninhamento e, por meio de um exemplo, você verá como é possível usar o Grid e o Flexbox de maneira combinada em um projeto.

Você conhecerá brevemente as transformações 3D com um exemplo prático de profundidade e efeitos em rolagem para finalmente ver projetos, exemplos e recursos selecionados por Javier para servir de inspiração.

Qual é o projeto do curso?

Você realizará um exercício livre com uma ou mais das técnicas aprendidas. Javier fará uma página informativa sobre a conquista do Pólo Sul, você poderá escolher o tema e o projeto que deseja.

Projetos de alunos do curso

A quem se dirige?

Quem tem interesse em design e técnicas modernas disposição com Grid CSS, Flexbox e outras técnicas modernas.

Requisitos

Para realizar este curso é necessário ter um sólido conhecimento de HTML e CSS, um computador e um editor de código.


Avaliações

1609 Alunos
84 Avaliações
100% Avaliações positivas
  • Ver mais avaliações

Javier Usobiaga Ferrer

ProfessorPro
Web designer

Javier Usobiaga é web designer e desenvolvedor FrontEnd, há mais de 10 anos e co-fundador do estúdio Marta Armada Swwweet, especializado em projetar webs responsivas desde a concepção inicial até o desenvolvimento front-end.

Ele também gosta muito de sua faceta como professor de Web Design em renomados workshops e escolas como Elisava, IDEP.

A Usobiaga entende a web como um todo, não só o quão bonita ela pode ser na tela do computador, mas também sua usabilidade em diferentes dispositivos e circunstâncias.

Em suas palavras, "Eu acho que tão importante quanto a estética é a rapidez com que é carregada ou o quão bem ela responde, e eu acho que em nossa indústria frequentemente esquecemos disso".


Conteúdo

  • U1

    Introdução

    • Apresentação
    • Influências
  • U2

    Moldando o layout

    • As unidades da viewport
    • Imagens com ajuste de objeto
    • Colunas CSS
    • Formas CSS
    • Variáveis CSS
  • U3

    Layout em uma dimensão com flexbox

    • Introdução ao flexbox
    • Propriedades do Contêiner
    • Propriedades de conteúdo
    • Alinhamentos no eixo principal e no veio transversal
    • Alinhamentos avançados
    • Layouts avançados com flexbox
  • U4

    Layout bidimensional com grade CSS

    • Introdução à grade CSS
    • Funções reticulares
    • Distribuição e tamanho
    • Grade responsiva automática
  • U5

    CSS avançado da grade

    • Áreas na grade
    • Alinhamento e ordem
    • Aninhamento
    • Grid (e flexbox) na prática
  • U6

    A terceira dimensão: profundidade e efeitos no pergaminho

    • Introdução às transformações 3D
    • Cabeçalhos fixos
    • Animações sincronizadas com rolagem
    • Inspiração e recursos
  • PF

    Projeto final

    • Técnicas de layout da web

Assim são os cursos da Domestika

  • Aprenda no seu ritmo

    Desfrute dos cursos em casa, sem horários e sem entregas. Você define seu próprio cronograma.

  • Feito pelo professor

    Aprenda técnicas e métodos valiosos, que são explicados pelos maiores especialistas do mercado criativo.

  • Professores especialistas

    Cada professor ensina somente o que sabe fazer de melhor, garantindo assim que a paixão e a excelência sejam transmitidas em cada aula.

  • Certificado Pro

    Confirme que você participou do curso com um certificado assinado pelo seu professor. Adquira-o com sua assinatura do Domestika PRO.

  • Na primeira fileira

    Vídeos de alta qualidade para que você não perca nenhum detalhe. E como o acesso é ilimitado, você pode vê-los várias vezes.

  • Compartilhe o conhecimento

    Exponha suas dúvidas, peça feedback e ofereça soluções. Compartilhe o aprendizado com os outros alunos da comunidade.

  • Comunidade criativa

    Mais de 1M criativos, e a comunidade não para de crescer. A Domestika é o ambiente ideal para compartilhar e aprender o que você mais gosta.

  • Cursos elaborados profissionalmente

    Selecionamos os melhores criativos, e uma equipe de profissionais elabora o curso em parceria com eles. Eis o resultado: você terá a sensação de trabalhar com os melhores.


Perguntas frequentes

  • Os cursos da Domestika são aulas online que lhe permitem aprender uma série de ferramentas e habilidades para realizar um projeto concreto. Cada etapa do projeto combina vídeos e textos, além de materiais de ensino complementares. Os cursos também oferecem a oportunidade de compartilhar seus próprios projetos com outros usuários e com o professor, criando assim uma comunidade em torno do curso.

  • Os cursos são 100% online, portanto, assim que são publicados, os cursos começam e terminam quando você quiser. Você determina o ritmo da aula. É possível voltar para ver o que lhe interessa, passar o que você já sabe, fazer perguntas, resolver dúvidas, compartilhar seus projetos e muito mais.

  • Os cursos são divididos em diferentes unidades, cada uma inclui lições, textos explicativos, tarefas e práticas para completar seu projecto passo a passo, recursos e documentos complementares. Você também terá acesso a um fórum exclusivo no qual poderá interagir com todos os alunos do curso e o professor, bem como compartilhar seus trabalhos e o projeto que realizar, criando uma comunidade em torno do curso.

  • Você pode resgatar um curso que recebeu de presente acessando a página de resgate, na qual poderá inserir o código de presente fornecido.

Layout web com CSS Grid, Flexbox e outras técnicas modernas. Um curso de Design e Tecnologia de Javier Usobiaga Ferrer

Layout web com CSS Grid, Flexbox e outras técnicas modernas

Um curso de Javier Usobiaga Ferrer
Web designer. Barcelona, Espanha.
Na Domestika desde 10/04/2015
  • 100% Avaliações positivas (84)
  • 1609 estudantes