Layout web com CSS Grid, Flexbox e outras técnicas modernas
Um curso de 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
- 99% avaliações positivas (300)
- 9,249 alunos
- 25 aulas (2h 16m)
- 16 recursos adicionais (14 arquivos)
- Online e no seu ritmo
- Disponível no aplicativo
- Áudio: Espanhol, Inglês, Francês, Italiano, Português, Türkçe
- Espanhol · Inglês · Português · Alemão · Francês · Italiano · Polonês · Holandês · Türkçe
- Nível: Avançado
- Acesso ilimitado para sempre
Qual é o projeto deste 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
Para quem é este curso online?
Quem tem interesse em design e técnicas modernas disposição com Grid CSS, Flexbox e outras técnicas modernas.
Requisitos e materiais
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
Javier Usobiaga Ferrer
Um curso de Javier Usobiaga Ferrer
Javier Usobiaga é Web Designer há 10 anos e co-fundador do estúdio Marta Armada Swwweet, especializado no design de webs responsivas desde a concepção inicial até o desenvolvimento de 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 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.
-
Certificados
PlusSe você for um membro Plus, obtenha um certificado personalizado assinado pelo professor de cada curso que concluir. Compartilhe-o em seu portfólio, mídia social ou onde quiser.
-
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.
An Amazing course to learn Flexbox & Grid and some advanced animations.
increíble
Cours très instructif, agréable, très complet
Es un curso muy bueno
Um curso prático e direto, com ênfase em um entendimento passo a passo.