marcobrunodev commented 5 years ago

Coloque o link do repo do seu GitHub, com cada desafio separado por commit:

[002] - Desafio Básico [002] - Desafio Intermediário [002] - Desafio Avançado

thejullius commented 5 years ago

Ola, segue as resoluções dos meus desafios. Acho que o avançado ta gambiarra, mas deu certo. Vou pegar leve e aguardar as aulas de posicionamento pra entender melhor essa role ai. [002] - Desafio Básico [002] - Desafio Intermediário [002] - Desafio Avançado

Vi que fui o primeiro, espero não ter feito nada errado. Qualquer coisa é só avisar :)

joviane commented 5 years ago

Vi que fui o primeiro, espero não ter feito nada errado. Qualquer coisa é só avisar :)

Opa @thejullius pode ser assim também, o exemplo que o Marco deu era da mensagem de commit. Poderia ter mandado só o link pro repositório :-) Está ótimo assim, não precisa mudar :-)

ghost commented 5 years ago

Olá segue a resolução do desafio :) https://github.com/robsonribeiros/loja-fone

jrmarqueshd commented 5 years ago

[002] - Desafio Básico [002] - Desafio Intermediário [002] - Desafio Avançado

rafaelgeronimo commented 5 years ago

[002] - Desafio Básico [002] - Desafio Intermediário [002] - Desafio Avançado

Pliavi commented 5 years ago

Loja Fone - Commits

[002] - Desafio Básico [002] - Desafio Intermediário [002] - Desafio Avançado

luxu commented 5 years ago

[002] - Desafio Básico [002] - Desafio Intermediário [002] - Desafio Avançado

brunobolting commented 5 years ago

Link dos Commits

Rod94 commented 5 years ago

Desafios aula002

dmaiabjj commented 5 years ago

[002] - Desafio Básico [002] - Desafio Intermediário [002] - Desafio Avançado

gregolly commented 5 years ago

https://github.com/gregolly/loja-fone/commits/master

Zanonni commented 5 years ago

Vi tarde demais que era para separar :( Todos os desafios

icastilhog commented 5 years ago

https://github.com/icastilhog/do-front-ao-end/tree/master/loja-fone

anacunha commented 5 years ago

https://github.com/anacunha/loja-fone/commits/master

krivax commented 5 years ago

[002] - Desafio Básico [002] - Desafio Intermediário [002] - Desafio Avançado

luisfilho commented 5 years ago

https://github.com/luisfilho/loja-fone

caiolarroza commented 5 years ago

[002] - Desafio Básico [002] - Desafio Intermediário [002] - Desafio Avançado

CrisMorgantee commented 5 years ago

Desafios Aula 002 https://github.com/CristianoMorgante/Loja-Fone/commits/master

Marco, era assim msm que era pra postar? Se entendi errado me avise ae kkkkk

KlausSantos commented 5 years ago

https://github.com/KlausSantos/loja-fone/commits/master

lucaskahl commented 5 years ago

[002] - Desafio Básico [002] - Desafio Intermediário [002] - Desafio Avançado

leonardosouzafaria commented 5 years ago

https://github.com/leonardosouzafaria/loja-fone

isapires commented 5 years ago

[002] - Desafio Básico [002] - Desafio Intermediário [002] - Desafio Avançado (com display flex) [002] - Desafio Avançado (com position absolute)

ghost commented 5 years ago

[002] - Desafio Básico [002] - Desafio Intermediário [002] - Desafio Avançado

rivanildojr commented 5 years ago

https://github.com/rivanildojr/loja-fone

rafael-ff commented 5 years ago

https://github.com/rafael-ff/loja-fone

eudes-silva commented 5 years ago

Desafios aula 002

GuiMoraesDev commented 5 years ago

[002] - Desafio Básico [002] - Desafio Intermediário [002] - Desafio Avançado

leandrosouza0786 commented 5 years ago

https://github.com/leandrosouza0786/ladingpages

jairoleite commented 5 years ago

Olá segue os desafios, tentei deixa semântico o máximo possível thanks!!!

[002] - Desafio Básico

[002] - Desafio Intermediário

[002] - Desafio Avançado

Wanhenri commented 5 years ago

arrumando [002] - Desafio Básico [002] - Desafio Intermediário [002] - Desafio Avançado

GarciaDFE commented 5 years ago

[002] - Desafio básico [002] - Desafio intermediário [002] - Desafio avançado

RaphaelOhlsen commented 5 years ago

[002] - Desafio Básico [002] - Desafio Intermediario [002] - Desafio Avançado

vinicius-assis commented 5 years ago

[002] - Desafio Básico [002] - Desafio Intermediário [002] - Desafio Avançado

AdalbertoGarc commented 5 years ago

Menu Repo Loja Fone

[002] - Desafio Básico [002] - Desafio Intermediário [002] - Desafio Avançado

Meu Repo do Site é separado de onde estão as evidências.

camila-becker commented 5 years ago

Oi, segue o link do meu repositório da aula 002:

https://github.com/camila-becker/loja-fone

ghost commented 5 years ago

[002] - Desafio Avançado

marcobrunodev commented 5 years ago

Ola, segue as resoluções dos meus desafios. Acho que o avançado ta gambiarra, mas deu certo. Vou pegar leve e aguardar as aulas de posicionamento pra entender melhor essa role ai. [002] - Desafio Básico [002] - Desafio Intermediário [002] - Desafio Avançado

Vi que fui o primeiro, espero não ter feito nada errado. Qualquer coisa é só avisar :)

Ai sim @thejullius! Fez todos os desafios. A seguir aí está meus comentários sobre o que achei:

Desafio básico

Sem muito comentários você fez o que foi solicitado :-)

Desafio intermediário

Mutio bom. Aqui você se preocupou também com os usuário que não estão usando Windows, deixando outras opções para o navegador utilizar como font:

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

font-family: Arial, Helvetica, sans-serif;

Desafio avançado

Você comentou que fez umas gambiarras, mas não teve muito disso não :-) Mantendo o mesmo código que você fez, só tem um propriedade que não é necessária. Você usou no um text-align: left; no h1, nesse caso não é necessário, realmente se você tirar terá o mesmo resultado visual. Por que que não é necessário? Como você já usou o float: left; no h1 essa propriedade já fez ele se posicionar ao lado esquerdo ;-)

Seu código do h1

h1 {
    color: #fff;
    font-size: 40px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left; /* remove essa propriedade e vê se não muda nada ;-) */
    float: left;
}

Eu acho que a propriedade text-align: left; está ali porque você estava fazendo uns teste (chutes) para tentar posicionar o elemento. Foi isso?

Um ponto interessante de melhoria é no seletor da nav onde você utilizou o padding-bottom com o valor de 45px, achei bem criativo. Você usou o conhecimento que tinha para fazer com que o conteúdo do h1 (Logo) aparecesse na tela, sem esse valor você teria o seguinte resultado visual:

Imgur

Já quando você adicionou o padding-bottom: 45px;, você resolveu o problema adicionando um respiro interno na nav :-)

Seu código da nav

nav {
    text-align: right;
    padding-bottom: 45px;
}

Imgur

Tem uma forma de resolver o problema sem colocar magins ou paddings com números mágicos. Você pode adicionar no elemento pai do elemento que está com float, nesse caso o header a propriedade overflow com o valor hidden;, aí você pode retirar o padding-bottom: 45px; da nav e deixar o código do seu header da seguinte forma:

Atualize o conteúdo do seletor de tag header:

header {
    background-color: #e24647;
    overflow: hidden;
}

Remova o padding-bottom do seletor nav:

nav {
    text-align: right;
}

Você deve estar se perguntando porque funcionou. Essa explicação é um pouco mais longo :-) Felizmente tenho ela em vídeo no YouTube, por favor cola lá e assisti:

marcobrunodev commented 5 years ago

Olá segue a resolução do desafio :) https://github.com/robsonribeiros/loja-fone

Nice @robsonribeiros. Vamos lá pros comentários :-)

Desafio básico

Sem novidades você tirou de letra mandou o font-size: 21px no seletor da tag a. Qual seria a diferença de você criar um seletor pra tag nav e deixar o font-size: 21px nela em vez de definir na tag a?

Exemplo de como fica no seletor de tag nav

nav {
    font-size: 21px;
}

Desafio intermediário

Muito bom. Fez o que foi pedido no desafio de forma suave. :-) O que vai acontecer se o usuário não estiver no Windows? Uma vez que essas as duas família de fontes que utilizamos no layout são proprietária do Windows.

Desafio avançado

Caraka! Já fez um display: flex; feliz :-) No desafio comento que o texto do h1 está alinhado com o top do texto que está dentro das âncoras (tags a). Sendo assim, qual valor e qual propriedade é necessária você mudar pra ficar alinhado pelo top?

Seu código do seletor de tag header:

header {
    background-color: #e24647;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

Caramba cara fique mó feliz de ver o segundo desafio que estou revisando com o display: flex top top top. Parabéns mano ;-)

marcobrunodev commented 5 years ago

[002] - Desafio Básico [002] - Desafio Intermediário [002] - Desafio Avançado

Show @jrmarqueshd! Bora dar uma olhada nesse código aí :-)

Desafio básico

De boas mandou benzão. Sem novidades usou no seletor de tag a o font-size: 21px;. Top! Qual será a diferença se em vez de aplicar o font-size: 21px no seletor de tag a você criar um seletor de tag para a nav e deixar o font-size: 21px nela:

Exemplo de como ficará o código da nav

nav {
    font-size: 21px;
}

Desafio intermediário

Isso aí, fez o que coloquei no desafio e também tomou cuidado caso o usuário não tenha na máquina dele as fontes Arial e Segoe UI.

Você fez um seletor pra tag body e aplicou a font-family: 'Segoe UI', Tahoma, Verdana, sans-serif; nela. Show de bola pensar no futuro já, mas depois da uma olhada no layout e você verá que a font-family mais usada no layout é a Roboto. Acho que você vai querer trocar o valor da font-family do seu body...rs :-)

Desafio avançado

Achei top que você usou o position: absolute para posicionar o a sua ul no lado direto da dela :-) Você também tomou cuidado em usar o position: realative no header para garantir que a sua ul respeitasse ele o seu header. Um ponto de melhoria, é que você não precisa do position: relative; aplicado também no h1, só é necessário deixar ele no header, então você pode remover o seu seletor:

header, h1 {
   position: relative;
}

E deixar o position: relative apenas no seletor da tag header:

header {
    background-color: #e24647;
    position: relative;
}

Extra

Gostei que você usou outras tags no seu código. Mas toma cuidado pra não abusar e criar um tags a mais. Quanto mais código você tiver mais complexo ficará a manutenção dele e mais caro o seu produto se tornará, um bom dev faz código um dev diferenciado faz código e entende o impacto de códigos complexos sem necessidade traz para o produto de forma negativa. Essa é uma dica pra você pensar no futuro, não foi comentar sobre as tags porque você irá evoluir durante o curso cada vez mais, então é só um ponto de atenção, continua fazendo os códigos que já está top e ficará em pouco tempo top top top :-)