-
Aula 02: Estilo Avançado e Posicionamento: Transformando Layouts
-
Aula 03: Layout Flexbox, Pseudo-classes e Responsividade em CSS
-
Aula 04: CSS Grid, Media Queries e Manipulação do DOM com JavaScript
-
Acesse aos códigos de cada aula aqui
-
Acesse o projeto completo aqui
Nesta aula, vamos começar o nosso projeto da recriação da página inicial do Spotify por meio do HTML e do CSS, aprenda atalhos, recursos e as diferenças entre os códigos.
- Entrar no VSCode;
- Revisar as diferenças entre HTML, CSS e JavaScript;
- Fazer a sidebar navigation;
- Aprender dicas de atalho no VSCode para escrever HTML;
- Introduzir as propriedades de estilo do CSS no projeto, com truques no Devtools.
- VS Code
- Font Awesome: ícones
- CDN Links:
- Reset.css
- Guia exclusivo da Imersão Front-End!
- ChatGPT
- Landing page do Spotify
Nesta aula, vamos abordar o código do menu lateral e aprofundar-nos em CSS, explorando posicionamento, layouts e a técnica do Flexbox.
- Criar todo menu lateral da página;
- Aprender os fundamentos do CSS Flexbox;
- Saber mais sobre posicionamentos no CSS.
- Guia de Mergulho da Imersão Front-End!
- ChatGPT
- Landing page do Spotify
- CSS: seletores avançados que facilitam o desenvolvimento web
- Guia de CSS Flexbox
-
Treine seu conhecimento em CSS jogando Grid Garden e Flexbox Froggy:
-
Padrão BEM para CSS:
-
Websérie: ChatGPT e IAs generativas:
Nesta aula, nos concentraremos na estrutura do código, além de irmos mais a fundo no CSS, mexendo com as variáveis; entendendo conceitos de responsividade e, também, criando o menu superior.
- Estruturar melhor o projeto;
- Refatorar o código;
- Fazer o layout flexbox;
- Aprender conceitos de responsividade;
- Criar o menu superior.
-
Definição e prática das Pseudo-Classes:
-
Construa CSS com variáveis:
-
Propriedade variável do CSS:
-
CSS: grids e responsividade:
-
ChatGPT e a análise de dados avançada:
Nesta aula, iremos utilizar o CSS Grid no projeto, para os cards da página inicial, aprendendo as media queries, além de introduzir o JavaScript com o conceito DOM e o método promises.
- Criar os cards da página inicial;
- Aprender a usar o CSS Grid Layout;
- Utilizar media queries para responsividade;
- Instalar do Node.js;
- Introduzir o JavaScript no projeto;
- Utilizar o conceito DOM;
- Conhecer o método Promises do JavaScript.
- Guia de Mergulho da Imersão Front-End!
- ChatGPT
- Landing page do Spotify
- Código estrutura HTML
- Código main-content CSS
- Código media-query.css
- Download do Node.js
- Pasta api.artists
- Pasta script.js
-
Guia de JavaScript:
-
Guia de propriedades CSS Grid:
-
Flexibilidade em páginas mobile com media queries:
-
O que é DOM?:
-
O que é o método Promises do JavaScript e quando usar?:
-
O que é JSON?:
-
Criador de imagem IA gratuito: Microsoft Bing:
-
Criador de imagem IA paga: Midjourney:
-
Criador de imagem IA open-source: Stable Diffusion:
-
Utilize o Stable Diffusion na plataforma paga: Clipdrop:
Nesta última aula, iremos utilizar frameworks de JavaScript React no projeto para, assim, criarmos o componente Header!
- Aprender os conceitos básicos do React;
- Criar um projeto React e entender sua estrutura básica;
- Utilizar componentes funcionais e de classe no React;
- Entender a diferença entre state e props no React.
- Guia de Mergulho da Imersão Front-End!
- ChatGPT
- Landing page do Spotify
- Tutorial de React para Windows e como usar no VS Code Tutorial de React para Windows e como usar no VS Code
- React JavaScript tutorial no VS Code
Aprofunde-se nos seguintes tópicos:
- Guia de React em JavaScript
- Podcast Hipsters - Do Front ao React
- Baixe apostilas de conteúdos gratuitos da Alura aqui
- Angular vs React vs Vue.js
- React e como os componentes funcionam
- Podcast Hipsters: Angular vs React
- JavaScript ou TypeScript
- Comunidade Angular_sp no YouTube
- GitHub - Copilot
- Guia de carreira Front-end | #HipstersPontoTube