Layout web com CSS Grid, Flexbox e outras técnicas modernas
A course by Javier Usobiaga FerrerWeb designer
A course by Javier Usobiaga Ferrer, Web designer
Descubra as novas retículas e outras formas de desenhar um site com CSS Shapes, variáveis e efeitos parallax
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 você aprenderá neste curso online?
25 aulas & 16 downloads
As unidades da viewport
4 minutos, 40 segundos
Imagens com ajuste de objeto
4 minutos, 44 segundos
Colunas CSS
3 minutos, 1 segundo
Formas CSS
7 minutos, 5 segundos
Variáveis CSS
4 minutos, 11 segundos
Introdução ao flexbox
3 minutos, 12 segundos
O que está incluído neste curso?
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.
What is this course's project?
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
Who is this online course for?
Quem tem interesse em design e técnicas modernas disposição com Grid CSS, Flexbox e outras técnicas modernas.
Requirements and materials
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
- há 8 meses
An Amazing course to learn Flexbox & Grid and some advanced animations.
- há 8 meses
increíble
- creative_250792PLUShá 9 meses
Cours très instructif, agréable, très complet
- há 1 ano
Es un curso muy bueno
- há 1 ano
Um curso prático e direto, com ênfase em um entendimento passo a passo.
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 carrega ou o quão bem ele responde, e eu acho que na 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
O que esperar de um curso da Domestika
Aprenda no seu ritmo
Aproveite para aprender desde casa, sem um horário fixo e no seu ritmo. É você quem define sua disponibilidade.
Aprenda com os melhores profissionais
Aprenda métodos e técnicas fundamentais com os melhores profissionais do setor criativo.
Conheça os maiores especialistas
Cada professor compartilha seus conhecimentos com entusiasmo e explicações claras, oferecendo uma perspectiva profissional em cada aula.
Certificates
PLUSIf you're a Plus member, get a certificado personalizado signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
Sente-se na primeira fila
Com vídeos da melhor qualidade, você não perderá nenhum detalhe! Graças ao acesso ilimitado, você pode assistir às aulas todas as vezes que precisar para aperfeiçoar sua técnica.
Compartilhe conhecimentos e ideias
Pergunte, peça opiniões e ofereça soluções. Compartilhe sua experiência de aprendizagem com outros alunos da comunidade tão criativos como você.
Conecte-se a uma comunidade criativa global
Esta comunidade acolhe milhões de pessoas do mundo todo, curiosas e apaixonadas por descobrir e expressar sua criatividade.
Assista a cursos produzidos de maneira profissional
A Domestika seleciona cuidadosamente seus professores e produz cada curso internamente para garantir uma experiência de aprendizagem online excelente.
Perguntas frequentes
O curso é voltado para quem já tem conhecimentos básicos de CSS e quer se aprofundar em layouts avançados, técnicas modernas e experimentação com propriedades recentes. Não é preciso ser expert, mas é importante conhecer os fundamentos de HTML e CSS.
Você deve ter conhecimentos básicos de HTML e CSS, além de um editor de código e um navegador moderno. Não são necessárias ferramentas especiais nem experiência com frameworks.
Você vai aprender a criar layouts avançados e responsivos com Flexbox e CSS Grid, animações parallax, formas personalizadas, uso de unidades de viewport, controle de imagens e colunas, variáveis CSS e transformações 3D para interfaces web inovadoras.
O curso cobre alinhamento de elementos, propriedades avançadas, diferenças entre Flexbox e Grid, layouts responsivos, grids aninhados, áreas personalizadas, técnicas de distribuição e quando escolher cada um conforme o design.
Usa-se vh e vw para ajustar tamanhos de blocos, textos e imagens ao tamanho da janela do navegador, garantindo interfaces responsivas e evitando problemas de scroll horizontal ou proporções erradas.
Sim, você vai aprender a implementar animações parallax, cabeçalhos fixos e efeitos sincronizados ao scroll usando CSS puro e técnicas avançadas de interação visual.
Sim, o curso ensina a ajustar imagens com object-fit, object-position, media queries e técnicas para que as imagens se adaptem a qualquer contêiner e tela.