Projetos Avançados em CSS e JavaScript
7 projetos + BEM + Sass + Node.js + npm + JavaScript + webpack + Bootstrap + animações + responsividade e otimização
Olá! Obrigado pelo seu interesse no curso Projetos Avançados em CSS e JavaScript. Este curso oferece não apenas projetos interessantes, mas também tecnologias e habilidades que vão além dos conceitos básicos de HTML, CSS e JavaScript. Abaixo você encontrará as informações mais importantes sobre o curso. Vamos aprender juntos!
O QUE VOCÊ APRENDERÁ NESTE CURSO:
- BEM - uma metodologia muito popular na qual dividimos partes da nossa interface em blocos e elementos, e definimos variações de ambos usando modificadores. O BEM pode ser desafiador no início e pode parecer pouco intuitivo para algumas pessoas. Vou mostrar que na verdade é uma maneira interessante de pensar sobre a interface do usuário com base em uma abordagem original para criar classes e seletores. Tenho certeza de que, como desenvolvedor front-end, você encontrará e precisará usar o BEM em sua carreira - espero que você também queira. Portanto, vale a pena conhecê-lo hoje.
- Sass - o pré-processador CSS mais popular (A.D. 2020). O pré-processador estende as capacidades do CSS e é uma tecnologia obrigatória para desenvolvedores front-end. Usar o Sass requer que você aprenda a sintaxe de uma nova metalinguagem - uma linguagem que estende o CSS. Claro, o CSS é a etapa final no trabalho com o Sass, e a última etapa desse trabalho é compilar o Sass em CSS (você também verá diferentes maneiras de fazer isso). Neste curso, você aprenderá os conceitos mais importantes do Sass e os benefícios de usá-lo. Haverá teoria e prática. Você também verá que o Sass funciona muito bem com o BEM aprendido anteriormente.
- Flexbox e CSS Grid - as técnicas CSS mais recentes e populares para criar layouts de página e posicionar elementos em contêineres. Neste curso, focamos principalmente no CSS Grid, assumindo que você já aprendeu o Flexbox (talvez em um dos meus cursos anteriores). Se você precisa revisar o Flexbox e obter uma boa explicação do CSS Grid com exemplos, veio ao lugar certo.
- JS e DOM - Parto do pressuposto de que você tem pelo menos um conhecimento básico de JavaScript. Nesta parte, vamos nos concentrar principalmente em usar o JavaScript para trabalhar com o DOM e usar APIs (AJAX). Também haverá tempo para explicar a relação entre o navegador e o servidor. Este curso também explica módulos em JavaScript, tanto nas especificações CommonJS quanto ES Modules - você não pode escapar deles em projetos mais avançados.
- Node.js e NPM - uma introdução essencial para desenvolvedores front-end. Se você já fez coisas mais avançadas no front-end (por exemplo, usou React.js) ou aprendeu desenvolvimento back-end, já conhece o Node.js e o NPM. Se sim, isso será principalmente um lembrete para você. Se não, você aprenderá coisas importantes que definitivamente usará se quiser avançar em sua carreira como desenvolvedor front-end. O conhecimento de Node.js e NPM profissionaliza e acelera nosso trabalho.
- Webpack - um ótimo e popular ambiente de desenvolvimento. Graças ao webpack, é possível fazer o empacotamento (JS, CSS, gráficos, HTML) e a automação de tarefas (por exemplo, compilador Sass, transpilação para ES5, minificação e otimização), bem como o uso de um servidor de desenvolvimento. Vou tentar explicar como o webpack funciona bem, não apenas mostrar como configurá-lo copiando e colando.
- Animações - um site sem animações? Mesmo no século XX, já existiam gifs :) Brincadeiras à parte, as animações têm um grande impacto na estética de um site, mas também na interface, e ajudam muito a tornar um site amigável e atraente. Vamos nos concentrar nas animações CSS, mas também usaremos JavaScript.
- SVG e GSAP - gráficos vetoriais são uma ótima solução em algumas situações ao criar um site. Escaláveis (bons para qualquer tela), pequenos, amplamente suportados em navegadores, muito bons para animações e interações - não é surpresa que esses gráficos sejam frequentemente encontrados. Neste curso, você também aprenderá o básico de como trabalhar com uma das bibliotecas de animação mais populares (incluindo animações SVG), que é o GSAP (Green Sock Animation Platform).
- Responsividade - otimização - acessibilidade - como criar sites eficientes, com recursos otimizados, rápidos e que possam ser usados em diferentes dispositivos, resoluções e navegadores. Este é um tópico amplo que não se limita apenas às Media Queries e à abordagem mobile-first. Abordaremos seriamente essa questão.
- BÔNUS: Bootstrap (convidado) - Bootstrap é um framework para criar interfaces de usuário. Na prática, o Bootstrap permite criar sites responsivos com base em elementos de interface prontos e estilos definidos - você não precisa escrever tudo do zero. Você pode amar e usar o Bootstrap ou não. Mas vale a pena conhecê-lo.
E além disso, um total de 7 projetos avançados usando CSS e JavaScript - um criado por mim e 6 criados por convidados.
CONVIDADOS NO CURSO:
Neste curso, alguns materiais foram preparados por convidados. Isso é indicado no cronograma. Graças aos convidados, você aprenderá o estilo de trabalho de vários desenvolvedores front-end, o que agrega valor a este curso.
Junte-se a nós agora e comece a aprender!
