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. Nesta aula, você vai:
- 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.
Deseja ir além? Experimente este desafio:
- Construa a aba “Sua biblioteca”.
Nesta aula, vamos abordar o código do menu lateral e aprofundar-nos em CSS, explorando posicionamento, layouts e a técnica do Flexbox Nesta aula, você vai:
- Criar todo menu lateral da página;
- Aprender os fundamentos do CSS Flexbox;
- Saber mais sobre posicionamentos no CSS.
Deseja ir além? Experimente este desafio:
- Fazer a tag (brinque com o botão, faça o gradiente, etc).
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. Nesta aula, você vai:
- Estruturar melhor o projeto;
- Refatorar o código;
- Fazer o layout flexbox;
- Aprender conceitos de responsividade;
- Criar o menu superior.
Deseja ir além? Experimente este desafio:
- Faça os cards de “Boa tarde” e “Navegar por todas as seções”.
Nesta aula, iremos utilizar o CSS Grid no projeto, para os cards da página inicial, aprendendo as medias queries, além de introduzir o JavaScript com o conceito DOM e o método promises. Nesta aula, você vai:
- 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.
Deseja ir além? Experimente este desafio:
- Teste fazer mais cards se baseie na página do Spotify e aprenda muito mais;
- Crie um arquivo API JSON diferente e explore mais.
Nesta última aula, iremos utilizar frameworks de JavaScript React no projeto para, assim, criarmos o componente
! Nesta aula, você vai:- Dar introdução a um projeto React;
- Utilizar o framework React para criar o componente ;
- Aprender as diferenças entre Angular e React.
Deseja ir além? Experimente este desafio:
- Fazer o resto do React.