cristiancdias/missao-spotify

Missão 02 - Estruturando Página Inicial do Spotify

missao-spotify

Página Inicial do Spotify.

Para rodar o projeto altere para branch versao3-index

git branch versao3-index

Então rode o comando docker-compose

docker-compose up

E acesse http://localhost/

missao-spotify's Issues

em nomes de arquivos, urls e afins nunca usar acentuação, espaços ou caracteres especiais. Usar somente a-z0-9-_.

missao-spotify/index.php

Line 20 in d5ca203

<img src="./imagens/balão.png" alt="balão">

Dar nome titulo-destaque que remeta ao que de fato esse código faça

missao-spotify/sass/style.scss

Line 21 in 992feec

.utilitario{

Indentação não me parece correta aqui, revisar o código garantindo sempre a indentação adequada

missao-spotify/index.php

Line 47 in d5ca203

<strong>EDITAR PERFIL</strong>

Estes blocos banner, aviso e bloco eu colocaria de forma padronizada com seletor padrão

missao-spotify/sass/blocks/_visao-geral.scss

Line 19 in 992feec

.banner-roxo{

Eu levaria rodape p/ divs pois é muito específico

missao-spotify/sass/blocks/_rodape.scss

Line 1 in 992feec

@import "../vars/colors.scss";

Criar estilo próprio para ele com contexto

missao-spotify/sass/blocks/_editar-perfil.scss

Line 5 in 992feec

a{

usar classe .small e verificar se ela já não atende a esta diminuição desejada de tamanho de fonte

missao-spotify/sass/blocks/_editar-perfil.scss

Line 4 in 992feec

font-size: 0.8rem;

Colocar este bloco em arquivo próprio dentro de blocks

missao-spotify/sass/style.scss

Line 28 in 992feec

.btn-primary, .bnt-inverter, .btn-banner, .btn-submit{

Usar imagem mas com classes utilitárias do bootstrap como img-fluid para cuidar da responsividade também

missao-spotify/index.php

Line 20 in d5ca203

<img src="./imagens/balão.png" alt="balão">

Colocar dentro do include apenas o conteúdo e tirar do include a coluna tamanho 3 (que faz parte da estrutura)

missao-spotify/index.php

Line 26 in d5ca203

<?php

O que mudou neste botão para ter adicionado esta classe que nos outros não precisou?

missao-spotify/index.php

Line 75 in d5ca203

<a href="#" class="btn btn-primary grande">

Especificar a logo como componente sem precisar de body

missao-spotify/sass/style.scss

Line 12 in 992feec

.logo{

Pelo tamanho do design, até parece um h1 mas não é o título mais importante do site. Rever para h2 ou h3 e customizar estilo aí sim para ser quase um h1

missao-spotify/index.php

Line 30 in d5ca203

<h1>Visão geral da conta</h1>

Usar tabela do HTML como componente para este recurso

missao-spotify/index.php

Lines 32 to 45 in d5ca203

	<div class="row linha">
	<div class="col-md-6 informacoes">
	<p>Nome do usúario</p>
	<p>E-mail</p>
	<p>Data de nascimento</p>
	<p>País ou região</p>
	</div>
	<div class="col-md-6">
	<p>cristiancdias</p>
	<p>[email protected]</p>
	<p>5 de janeiro de 1983</p>
	<p>Brasil</p>
	</div>
	</div>

Padronizar nome do repositório

Apenas para padronizar, alterar nome para

missao-spotify

Usar placeholder

missao-spotify/sass/style.scss

Line 29 in 992feec

font-size: 0.8rem;

Cada um dos três blocos desta divisão deveria estar em uma contenção de forma organizada.

missao-spotify/index.php

Lines 31 to 48 in d5ca203

	<h3>Perfil</h3>
	<div class="row linha">
	<div class="col-md-6 informacoes">
	<p>Nome do usúario</p>
	<p>E-mail</p>
	<p>Data de nascimento</p>
	<p>País ou região</p>
	</div>
	<div class="col-md-6">
	<p>cristiancdias</p>
	<p>[email protected]</p>
	<p>5 de janeiro de 1983</p>
	<p>Brasil</p>
	</div>
	</div>
	<a href="#" class="btn btn-primary">
	<strong>EDITAR PERFIL</strong>
	</a>

Este exemplo mostra uma das "partes" que deveria estar sendo "represada" dentro de uma div ou outra estrutura de html.

"row linha" como classes ficaram um tanto estranhas, repensar esta classa "linha"

missao-spotify/index.php

Line 32 in d5ca203

<div class="row linha">