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. Fique até o final da aula e descubra insights e orientações exclusivas para impulsionar o seu aprendizado de forma eficaz com o uso do ChatGPT.
Link do projeto base: Acesse o projeto base aqui.
- VS Code
- Pasta Assets com imagens
- Font Awesome: ícones
- Os links para CDN são: solid.css e fontawesome.css
- Reset.css
- Guia exclusivo da Imersão Front-End!
- ChatGPT
- Landing page do Spotify
- Código aula 1
Na barra Atividades, clique no ícone Extensões; Na caixa de pesquisa, digite Live Share; Se o botão Instalar for exibido ao lado da extensão, clique nele para instalar a extensão no codespace; Se a extensão estiver cinza na lista, clique nela com o botão direito do mouse e clique em Habilitar; Na Barra de Atividades, clique no ícone do Live Share; Clique em Compartilhar (Você pode clicar em Tornar somente leitura se quiser impedir que os convidados façam alterações nos arquivos que você compartilha com eles); Envie o link na área de transferência para qualquer pessoa que você queira ingressar na sessão do Live Share; Importante: considerando o nível de acesso que as sessões do Live Share podem conceder aos convidados, você só deve compartilhar com pessoas em que confia e considerar as implicações do que está compartilhando. Para saber mais confira Recursos de segurança do Live Share.
Ter uma conta no GitHub; Vincular sua conta do GitHub com o VS Code; Criar uma pasta e adicionar arquivos; Não precisa acessar o GitHub pra criar um repositório nem abrir um terminal; Depois de criada a pasta no computador, abra ela no VS Code; Clique em Source Control; Clique na segunda opção: Publish to GitHub; Escolha se o repositório será privado ou público; Escolha os arquivos que serão enviados e pronto; No GitHub, adicione #ImersãoFrontEnd e #Alura; Agora é só compartilhar marcando a Alura nas redes sociais! Divulgue seu projeto Mostre o seu projeto para o mundo compartilhando no LinkedIn e Instagram! Marque a Alura (@AluraOnline). Vamos adorar ver os seus projetos e acompanhar a sua evolução! Lembre-se de utilizar a hashtag #ImersaoFrontEnd para que o seu projeto alcance ainda mais pessoas.
Estamos ansiosos para mergulhar em aprendizado junto com você! Bom mergulho e até a próxima aula.