reprograma / on2-projeto-final

Turma Online 2 | Front-end | 2019 | Semana 8 | Projeto Final

Projeto - M de Maravilhosa

Sobre o projeto:

Precisamos falar sobre mulheres que mudaram o mundo.

• Like a girl - Always
• Make what's next - Microsoft
• Mulheres na tecnologia - Le Wagon
• Projeto da turma anterior

Etapas do projeto

1. Escolha uma mulher maravilhosa que te inspira.
2. Crie a página de perfil da Maravilhosa.
3. Insira na página principal (index.html na pasta raiz) o nome e a foto de sua Maravilhosa.
4. Inclua um link para a página do seu perfil ao final da página de perfil da sua Maravilhosa.

Orientações gerais

• Clonar este repositório: git clone https://github.com/reprograma/On2-projeto-final.git
• Crie sua branch: git checkout -b seuNome, ex: git checkout -b fulanaSilva
• Adicione uma pasta com seu-nome dentro da pasta mulheres-maravilha, ex: danielle-naomi
• Dentro da pasta com seu-nome, crie um arquivo html com o nome da mulher-maravilha, ex: ada-lovelace.html
• Além do arquivo html, crie as pastas para imagens, css e javascript, seguindo o padrão abaixo. importante não alterar esse padrão

mulheres-maravilha/
  fulana-da-silva/
    ada-lovelace.html
    css/
      style.css
    js/
      script.js
    img/
      ada-lovelace-perfil.jpg
      background.jpg

• Recomendações para sua página:

  1. faça uso de html semântico
  2. mantenha um padrão na nomeação das classes
  3. página responsiva
  4. mínimo de 2 sections
  5. NAVBAR e FOOTER podem ser iguais aos da pagina principal
  6. Uso de ao menos 1 eventlistener (javascript)

• O objetivo é praticar HTML, CSS (com ou sem Bootstrap), responsividade, efeitos com JS ou JQuery

• Não esqueça de atualizar a Home! Alterar somente em index.html onde houver seu nome - Substitua o link na href, a imagem da sua mulher inspiradora, o alt da imagem e "Seu nome" pelo nome da sua maravilhosa:

<div class="maravilhosas__perfil">
    <a href="./mulheres-maravilha/sua-pasta/seu-html.html">
        <img class="img-responsive" src="img/img-mulher.png" alt="Foto da fulana de tal">
            <p>"Seu nome"</p>

ATENÇÃO

1. A entrega do projeto é obrigatória para obter o certificado do curso (ಠoಠ)
2. O projeto deve ser entregue até sexta-feira (20/12), porém se conseguirem entregar até antes da aula de quinta (19/12), vocês poderão acompanhar o merge e deploy da sua página ! <3

Instalação de extensões no VSCode

• No VSCode, ir em File > Preferences > Extensions
• Busque pelo nome da extensão e instale-a
• Instale a extensão Live Server

• Instale a extensão EditorConfig

Configurando Live Server

• Ir em File > Preferences > Settings
• Na aba User > Extensions > Live Server Config > Settings: Custom Browser, selecionar chrome

Rodando Live Server

• VSCode: habilite o Live Server clicando em Go Live

• Deverá abrir seu navegador com o endereço similar a: http://127.0.0.1:5500/index.html

Verificando seu IP

• Git Bash:
  • Digite no Git Bash ipconfig ou ipconfig //all
  • Verifique o endereço IPv4. Deverá ser similar a: 192.168.X.X

Ou...

• Windows 10: verifique seu IP conforme instruções;

Verificando seu site pelo navegador do celular

• Deixar o notebook e o celular conectados na mesma rede privada de internet (WiFi ou Dados).
• No navegador do seu celular, digite o endereço do seu IP seguido do número da porta aberta pelo Live Server númeroIP:númeroPorta, ex: 192.168.X.X:5500

Obs: Se estiver usando uma rede pública de internet, talvez não seja possível acessar o projeto desta maneira. Se este for o caso, uma solução seria compartilhar sua rede de dados com seu notebook.

Sites para referência:

• (https://natalyapeixoto.github.io/)
• (https://dutra21.github.io/projetoFinalReprograma/)
• (https://deboradom.github.io/venus/index.html)
• (https://search.muz.li/inspiration/best-designed-landing-pages/)
• (https://www.landingfolio.com/)

Fotos sem direitos autorais

• https://unsplash.com/
• https://pixabay.com/
• https://www.freepik.com/
• https://search.creativecommons.org/

Revisão CSS

• documentação geral: (https://developer.mozilla.org/pt-BR/docs/Web/CSS)
• linear-gradient: (https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)
• background-attachment: (https://css-tricks.com/almanac/properties/b/background-attachment/)

Revisão JavaScript Eventos

• metodo addEventListener() (https://www.w3schools.com/jsref/met_element_addeventlistener.asp)
• Lista de Eventos (https://developer.mozilla.org/en-US/docs/Web/Events)