Aprenda CSS Flexbox no Lynda.com

• Pode 18, 2024

Após dez anos, que é a vida inteira na web, decidimos dar um novo visual ao site da MUSED Literary Review. Obviamente, queríamos usar o mais recente HTML e CSS, o que significa usar Flexbox, CSS Grid e Responsive Web Design.

Graças ao Lynda.com, não demorou muito para se atualizar. Abaixo estão apenas alguns dos melhores tutoriais em vídeo que me ajudaram a criar o novo visual do MUSED.

Layouts responsivos avançados com CSS Flexbox
Morten Rand-Hendriksen
Neste curso baseado em projeto, o autor o leva passo a passo ao criar menus Flexbox, layouts de cartões responsivos, layout do Santo Graal e componentes interativos.

Layouts avançados de CSS com grade
Morten Rand-Hendriksen
Você aprenderá muito neste curso. O autor começa com o básico da CSS Grid e o planejamento de layouts de grade. Então você está pronto para criar um layout de várias colunas e um layout de coluna única de sangramento total. Em seguida, você aprende como criar vários layouts de cartões e um painel de navegação fora da tela que desliza para exibição quando necessário.

Treinamento Essencial em CSS 3
Christina Truong
Neste curso, você aprenderá a usar CSS Grid e Flexbox para criar layouts responsivos. Você também aprenderá sobre como preparar suas imagens da Web para telas Retina e imagens vetoriais SVG. O autor passa a animações CSS simples, tipografia responsiva e acessibilidade.

Primeiro CSS do Flexbox
James Williamson
Este curso o leva passo a passo à medida que você aprende todas as sintaxes do CSS Flexbox Layout Module. O autor discute o que o Flexbox pode fazer e o suporte atual ao navegador. Ele então discute minuciosamente tópicos como fluxo de elementos, conteúdo de embalagem, alinhamento de itens e aninhamento de contêineres flexíveis.

Grade CSS Primeiro Olhar
Morten Rand-Hendriksen
Neste curso, você aprenderá uma maneira nova e aprimorada de criar layouts de grade bidimensionais. Começando com o básico do uso da CSS Grid para criar layouts de grade responsivos, o autor aborda o que você precisa saber para criar uma revista on-line e um layout de três colunas.

Criando formulários responsivos com o Flexbox
James Williamson
Você não pode criar um site sem formulários. Os formulários precisam ser tão responsivos a todos os tipos e tamanhos de telas, assim como o restante do site. Williamson ensina como usar o modelo de caixa CSS Flexbox para criar e estilizar formulários da web responsivos. Ele começa com um formulário de pesquisa simples e cria um formulário grande com duas colunas.

Imagens responsivas
Morten Rand-Hendriksen
Se você usa o Wordpress, sabe que ele gerará automaticamente várias imagens de tamanhos diferentes para cada imagem que você enviar para o sistema. Por quê? Este curso irá explicar o conceito por trás das imagens responsivas e como usá-las em seu próprio site.

Instruções De Vídeo: Flexbox tutorial: Current support | lynda.com (Pode 2024).