Projeto Spotify com HTML e CSS

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

AULA 1
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:
Pasta assets: https://drive.google.com/drive/folders/1VveWX0Lcxf6CV6NgNiJLNcp1gAbl6H05
Código da aula 1: https://github.com/RodrigoHarder/imersao-frontend/tree/main/spotify-imersao-alura-aula-01
Acesse o projeto completo aqui: https://github.com/alura-cursos/spotify-imersao/tree/main
-----------------------------------------------------------------
Font Awesome ícones:https://fontawesome.com/icons
Os links para CDN são: https://use.fontawesome.com/releases/v5.15.4/css/solid.css E https://use.fontawesome.com/releases/v5.15.4/css/fontawesome.css
https://meyerweb.com/eric/tools/css/reset/reset.css
https://open.spotify.com/intl-pt
--------------------------------------------------------------------
Deseja ir além? Experimente este desafio:
Construa a aba “Sua biblioteca”.
Aprofunde-se nos seguintes tópicos:
Definição HTML, CSS e Javascript - https://www.alura.com.br/artigos/html-css-e-js-definicoes?_gl=1*1lyrkdb*_ga*MTkwNzA3Mjc3MS4xNzA1MjQyMTQ2*_ga_1EPWSW3PCS*MTcwNjQ3ODc4NS42LjEuMTcwNjQ3OTQ4OS4wLjAuMA..*_fplc*NlZnU0p0dzZXZkJpY0ZRYzlLVnRMc1BqSVdGY3R1bVhFdEJaJTJCVnQ2JTJCdSUyRnBLSVROMnBJWlNHOXElMkZZM2ZHTlFVNkd0bzRnZWN1U2lyVFdyN0E4Qnk5bzJlN0UzTXZLcnp3amhaeCUyQlk4UlpxRG5lbExpUEVLV0RpWmM1V3FMZyUzRCUzRA..
HTML e suas tags - https://www.alura.com.br/artigos/o-que-e-html-suas-tags-parte-5-atributos-elementos?_gl=1*1lyrkdb*_ga*MTkwNzA3Mjc3MS4xNzA1MjQyMTQ2*_ga_1EPWSW3PCS*MTcwNjQ3ODc4NS42LjEuMTcwNjQ3OTQ4OS4wLjAuMA..*_fplc*NlZnU0p0dzZXZkJpY0ZRYzlLVnRMc1BqSVdGY3R1bVhFdEJaJTJCVnQ2JTJCdSUyRnBLSVROMnBJWlNHOXElMkZZM2ZHTlFVNkd0bzRnZWN1U2lyVFdyN0E4Qnk5bzJlN0UzTXZLcnp3amhaeCUyQlk4UlpxRG5lbExpUEVLV0RpWmM1V3FMZyUzRCUzRA..
Guia do CSS - https://www.alura.com.br/artigos/css?_gl=1*1lyrkdb*_ga*MTkwNzA3Mjc3MS4xNzA1MjQyMTQ2*_ga_1EPWSW3PCS*MTcwNjQ3ODc4NS42LjEuMTcwNjQ3OTQ4OS4wLjAuMA..*_fplc*NlZnU0p0dzZXZkJpY0ZRYzlLVnRMc1BqSVdGY3R1bVhFdEJaJTJCVnQ2JTJCdSUyRnBLSVROMnBJWlNHOXElMkZZM2ZHTlFVNkd0bzRnZWN1U2lyVFdyN0E4Qnk5bzJlN0UzTXZLcnp3amhaeCUyQlk4UlpxRG5lbExpUEVLV0RpWmM1V3FMZyUzRCUzRA..
ChatGPT: dicas e como usar - https://www.alura.com.br/artigos/chatgpt?_gl=1*1lyrkdb*_ga*MTkwNzA3Mjc3MS4xNzA1MjQyMTQ2*_ga_1EPWSW3PCS*MTcwNjQ3ODc4NS42LjEuMTcwNjQ3OTQ4OS4wLjAuMA..*_fplc*NlZnU0p0dzZXZkJpY0ZRYzlLVnRMc1BqSVdGY3R1bVhFdEJaJTJCVnQ2JTJCdSUyRnBLSVROMnBJWlNHOXElMkZZM2ZHTlFVNkd0bzRnZWN1U2lyVFdyN0E4Qnk5bzJlN0UzTXZLcnp3amhaeCUyQlk4UlpxRG5lbExpUEVLV0RpWmM1V3FMZyUzRCUzRA..
-------------------------------------------------------------------------------
http://www.flexboxdefense.com/
https://flexboxfroggy.com/
https://mastery.games/flexboxzombies/