Design e Codifique a Página Inicial do Twitter com JavaScript, CSS e Figma

Transferir o Design UI UX para Componentes de Desenvolvimento Web Nativo Front-End com HTML, CSS, JavaScript, Lit JS e Figma

Neste curso, você aprenderá como utilizar o poder da tecnologia de componentes web nativos para criar componentes web impressionantes para o Twitter. Começaremos projetando esses componentes do zero usando o Figma, uma poderosa ferramenta de design. Não apenas projetaremos os componentes, mas também construiremos um sistema de design abrangente para nosso projeto de interface do usuário do Twitter. Esse sistema de design incluirá estilos de cor, tipografia e sombra reutilizáveis. Uma vez que o design estiver completo, transferiremos para o código front-end usando o Lit JS, um framework que simplifica o desenvolvimento de componentes web nativos. O Lit JS nos permite encapsular nosso HTML e CSS em classes JavaScript, facilitando a criação de componentes personalizáveis e o escopo de nossos estilos CSS. Com o Lit JS, podemos construir componentes web nativos prontos para o futuro usando apenas JavaScript puro. Uma das melhores práticas no desenvolvimento front-end é a reutilização de código, e o Lit JS facilita a conquista disso. Ao usar o Lit JS, podemos desenvolver componentes compartilháveis e evitar a complexidade de transferir designs para marcação HTML. O Lit JS é construído em cima da API de componentes web nativos, o que significa que não precisamos nos preocupar com Módulos Node ou empacotadores JavaScript. Ao longo deste curso, você aprenderá como projetar componentes no Figma e desenvolvê-los usando JavaScript. Você também aprenderá como utilizar a API de componentes web nativos para criar elementos personalizados reutilizáveis. Além disso, aceleraremos nosso processo de desenvolvimento usando o framework Lit JS. Ao encapsular nossa lógica CSS e JavaScript, poderemos desenvolver componentes de tema claro e escuro. Também exploraremos recursos avançados do Figma, como Variantes e Auto Layout, para projetar componentes personalizados. Para aprimorar sua experiência de aprendizado, guiaremos você na configuração de um Sistema de Design no Figma especificamente para o projeto de interface do usuário do Twitter. Isso ajudará você a organizar e otimizar seu processo de design. Junte-se a nós neste curso e desbloqueie o potencial do desenvolvimento de componentes web nativos com o Lit JS. Vamos criar componentes bonitos e funcionais do Twitter juntos!