Masterclass de Layouts CSS: Construa Websites Responsivos e Adaptáveis

Aprenda e Domine Layouts Responsivos, Adaptáveis e Mobile-First para Construir Websites do Mundo Real com Flexbox, Grid e Sass

Avaliação: 4.8 de 5249 avaliações

49.5 horas totais

239 palestras

Todos os Níveis

Bem-vindo à Masterclass de Layouts CSS. Estou empolgado em apresentar a você esta masterclass abrangente e prática. Esta masterclass é o resultado de extensa pesquisa e experiência, e ela irá ensinar todas as habilidades necessárias para se tornar um especialista em HTML e CSS. Você também aprenderá como incorporar o Sass, um pré-processador CSS, em seu fluxo de trabalho de desenvolvedor moderno. Principais recursos da Masterclass: - 10 Layouts para CSS Flexbox - 10 Layouts para CSS Grid - 10 Exercícios para CSS Flexbox - 10 Exercícios para CSS Grid - 2 Websites Responsivos Completos do Mundo Real - 1 Website Adaptável Completo do Mundo Real - Fluxo de Trabalho Moderno com Sass Descrição da Masterclass: Começaremos esta masterclass abordando os fundamentos do HTML e CSS. Em vez de uma abordagem teórica, eu o guiarei na criação do seu primeiro website de portfólio, garantindo uma experiência de aprendizado prática e envolvente. Além disso, há exercícios no final das seções de HTML e CSS para reforçar o seu entendimento. Em seguida, mergulharemos na criação de 20 layouts usando CSS Flexbox e CSS Grid. Essas tecnologias nos permitem construir websites visualmente impressionantes. Nesta masterclass, você aprenderá essas técnicas resolvendo e codificando layouts. Demonstrarei cada layout de duas maneiras: 1. Desenhando Layouts com Flexbox e Grid: - Eu irei idealizar o layout em um quadro branco, explicando a estrutura HTML e os elementos estratégicos para Flexbox ou Grid. - Em seguida, escreverei o código CSS no quadro branco, ensinando você a resolver o layout usando Flexbox ou Grid. 2. Codificando Layouts com Flexbox e Grid: - Após a aula de desenho no quadro branco, demonstrarei como codificar o layout usando HTML e CSS no VS Code. - Essa abordagem permite que você entenda o processo de pensamento por trás da criação do layout e adquira experiência prática em codificação. Depois de dominar o Flexbox e o Grid, aplicaremos essas habilidades para codificar a interface do usuário do website de portfólio apresentado nas seções de fundamentos de HTML e CSS. Também compartilharei segredos e atalhos para aprimorar a acessibilidade e o apelo visual de websites em vários dispositivos. Para aprimorar ainda mais suas habilidades de layout com Flexbox e Grid, você terá 20 layouts de comércio eletrônico exclusivos para praticar. Esses exercícios fornecem desafios do mundo real e incluem capturas de tela para referência. Além disso, soluções em vídeo estão disponíveis caso você encontre alguma dificuldade. Mas nossa jornada não termina aqui. Para elevar suas habilidades para o próximo nível, tenho mais dois projetos em mente. Vamos nos concentrar em conjuntos de habilidades orientados para o mundo real, em vez de apenas dominar o Flexbox e o Grid. Ao longo do segundo e terceiro projetos, você aprenderá como estabelecer um fluxo de trabalho de desenvolvedor moderno, garantindo a manutenibilidade e escalabilidade do projeto. Os tópicos abordados incluem organização de projetos, propriedades e variáveis personalizadas, funções, classes utilitárias e utilização do Sass para pré-processar seu CSS. O segundo projeto, chamado EventGrids, envolve a criação de um website completo de várias páginas que se adapta de uma tela grande para telas menores. Este projeto expandirá seu conhecimento e levará suas habilidades de responsividade a novos patamares. O terceiro projeto, ZeaL, é um website adaptável projetado para visualização em dispositivos móveis. Essa abordagem, procurada por empresas, simplifica o processo de tornar os websites acessíveis em todos os dispositivos. Ao concluir esses projetos, você não apenas entenderá as diferenças entre designs responsivos e adaptáveis, mas também dominará o processo de design para qualquer layout e website. Ao longo desta masterclass, você adquirirá uma ampla gama de habilidades do mundo real que o impulsionarão para a próxima geração de desenvolvedores web. Junte-se a mim nesta jornada emocionante e vamos explorar as incríveis possibilidades do HTML e CSS. Mal posso esperar para vê-lo na masterclass! O que você aprenderá: - Melhores práticas para criar layouts e websites do mundo real usando as técnicas mais recentes - Abordagem de aprendizado baseada em problemas para CSS Flexbox e CSS Grid para websites responsivos e adaptáveis - Aprimoramento das habilidades de resolução de problemas por meio de aprendizado prático - Criação de layouts responsivos e adaptáveis modernos e sofisticados - Estabelecimento de um fluxo de trabalho de projeto ou configuração de desenvolvedor para websites notáveis - Utilização do Sass de ponta para websites escaláveis e de fácil manutenção - Domínio na criação de layouts com CSS Flexbox e CSS Grid - Construção de dois websites responsivos com foco em desktop - Desenvolvimento de um website adaptável com foco em dispositivos móveis - Conceitos cruciais de HTML e CSS para fundamentos de desenvolvimento web - Avanço nas habilidades de HTML e CSS - Criação de vários layouts com CSS Flexbox e CSS Grid - Elaboração de layouts com CSS Flexbox e CSS Grid - Desenho de layouts com CSS Flexbox e CSS Grid - Criação de 20 layouts com CSS Flexbox e CSS Grid - Resolução de 20 exercícios de layout com CSS Flexbox e CSS Grid - Otimização da velocidade de carregamento do website - Implantação de websites na internet gratuitamente