📋 Indíce

• Bem-vindo
• Proposta
  • O desafio
  • Objetivo
• Meu processo
  • Construção do site
  • Aprendizado
  • Prosseguimento
• Screenshots
• Links
• Tecnologias utilizadas
• Pré-requisitos
• Procedimentos de instalação
• Agradecimentos
• Autora

Bem-vindo! 👋

Site Música Alternativa.

Criação de um site que busca mostrar o cenário alternativo da música brasileira e a importância que isso traz para a nossa cultura. No meio da preferência que existe das gravadoras por sons e letras comerciais, existem artistas independentes que fazem a música acontecer com as próprias mãos, com estilo próprio, talento e autenticidade.

🚀 Proposta

Prática de projetos com o objetivo de adquirir habilidades de codificação.

Escolha de um projeto com o prazo de entrega.

Data inicial: 03/09/2022

Data final: 11/09/2022

🏆 O desafio

Os usuários devem ser capazes de:

• Clicar nos links de navegação principal denominados "Pietá", "Léo Middea", "Academia da Berlinda" e "Castello Branco", e serem direcionados para as respectivas sessões no site.

• Clicar na capa dos albúns dos artistas/bandas e serem direcionados os respectivos albúns na página do spotify.

• Assistir aos vídeos do youtube dos artistas brasileiros.

• Abrir o site na versão desktop.

• Abrir o site na versão mobile.

🏆 Objetivo

• Fazer um projeto pessoal para testar habilidades adquiridas ao longo dos estudos de 2 meses nas linguagens de marcação HTML5 e CSS3.

• Criar um site que fala sobre artistas independentes da música alternativa brasileira.

• Criar um site responsivo.

👩🚀 Meu processo

9 dias para concluir o projeto

🏆 Construção do site

• Marcação HTML5 semântica
• Propriedades CSS
• Versão desktop
• Versão mobile

Construção:

1. Criação do arquivo index.html e do style.css.

2. Criação de header, section, main e divs.

3. Uma lista ul li a de navegação principal nav de redirecionamento para a sessão section e para os identificadores.

4. Criação do arquivo style.mobile.css

Dentro da pasta /design terá os designs do projeto. O desenho ficará em formato PNG estático. Usarei meu julgamento para estilos como font-size, paddinge margin.

🏆 Aprendizado

• Reforcei meu entendimento sobre listas não ordenadas
• Melhorei a organização do código no html no que diz respeito a utilização de header e main
• Aprendi a fazer um site responsivo, onde o tamanho da página se adequa a versão mobile.

🏆 Prosseguimento

Criar mais projetos pensando em consolidar conhecimentos em responsividade, para que sejam adequados com telas de celulares e tablets e que se adapte a qualquer ferramenta que os usuários estejam usando para facilitar a sua visualização.

📸 Screenshots

🖥️ Desktop design

📱 Mobile design

✔️ Links

• Clique no link para acessar a página: https://rococo-lily-8747d5.netlify.app/

🛠 Tecnologias utilizadas

• HTML5
• CSS3

☑️ Pré-requisitos

• Editor de código de sua preferência (recomendado VS code)
• Git

📝 Procedimentos de instalação

Clone este repositório usando o comando:

git clone https://github.com/RaizaCirne/site-musica-alternativa.git

Baixar arquivo zip

Extrir arquivos

Abrir pasta no editor de código.

😎 Agradecimentos

Agradeço aos tutores do Time CoDe (em especial ao Jean Meira) que me ajudaram com os feedbacks em projetos anteriores e fez com que eu pudesse melhorar em alguns aspectos.

Agradeço também a Ana Carolina Perdigão que tirou diversas dúvidas e me ajudou demais com este projeto.

😎 Autora

• Personal Page - Raíza Cirne Braz
• Frontend Mentor - @RaizaCirne
• GitHub - RaizaCirne
• LinkedIn - Raíza Cirne Braz

HTML - CSS 🚀