Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Dúvidas finais e uma sugestão

1 - Sobre os "cortes" de layout com media queries eles são sempre fixos, ex: 1024, 1728, como mostrado no curso ou depende do projeto? e se sim quais seriam os "cortes".

2 - É falado no curso que com mobile-first sempre deve se usar min-width para fazer a responsividade e com desktop first usar max-width, qual seria a explicação para esses 2 usos, e se eu utilizar min-width para os 2 casos daria na mesma?

E por último a sugestão, na conclusão do curso é disponibilizado um planilha muito boa para fazer o acompanhamento dos cursos, como eu estou fazendo os cursos em sequência e como eu fiz apenas o 1 curso novo de HTML e CSS e essa planilha não foi disponibilizada nele, a sugestão seria colocar essa planilha assim que começar o 1 curso de HTML e CSS, para mim essa planilha pode ser a salvação de muitas pessoas que não tem um direcionamento e não sabe ainda mexer na plataforma e seria interessante por na planilha um plano de estudos recomendado pelos instrutores da plataforma em relação a todos os cursos de HTML e CSS, pois assim seria um estudo estruturado para quem está começando nesse mundo, eu montei um plano de estudo pois pesquisei dentro da plataforma e ainda não sei se ele é bem estruturado em si, é isso desculpa o texto grande porém precisava por essa sugestão para fora kkkk, e ficarei grato por quem conseguir responder minhas 2 perguntas TKS.

4 respostas

Opá colega, tudo jóia? Vou tentar te ajudar com as tuas dúvidas:

1- Os cortes não são fixos, você pode usar o tamanho que quiser, porém, na programação é sempre importante padronizar algumas coisas, pois facilita a manutenção e entendimento do código por outros programadores. Segue a figura:

Imagem com os tamanhos recomendados de media query até 480, celulares, até 768 tablets, até 1279 notebooks, em diante monitores de alta resolução

2- A razão dessas recomendações e que quando você utiliza a metodologia do desktop-first, você vai acabar programando de tamanhos grandes para pequenos, você pode utilizar o min-width com desktop-first porém, dara muito mais trabalho pois quando você começar a programar para telas mobile a estilização em desktop vai mudar.

.classe{
    width: 500px;
    display: flex;
}

@media screen and (min-width: 657px){
    width: 200px;
    flex-direction: column;
}

Agora entra um pouquinho de lógica de programação aqui, telas desktop são maiores que 657px? Sim! Então ele vai executar o media query, daí você teria que criar outro media query para telas desktop, isso seria um retrabalho, pois sua tela de desktop já estava pronta, e teria que corrigir tudo de novo, e acredite: dá trabalho!

Além disso tem a questão de boas praticas, imagine sempre que você vai deixar esse código salvo para mexer daqui 3 meses, você tem que deixar facil de entender o que acontece nesse código.

Imagina, você utiliza a metodologia do desktop-first, mas se tirar os media querys(que eram pra ser só para transformar sua tela desktop em telas menores) ela deixa de funcionar. Então meio que você não está utilizando a metodologia, entende?

Por fim, se quiser posso te ajudar a desenvolver um plano de estudos pra ti. Espero ter ajudado, se seguir com duvidas, manda aqui! ;)

Um adendo, achei a tabela que você se referia, acabei de terminar esse curso também. Pra salvar ela basta ir em Arquivo > Fazer uma Cópia daí você pode alterar do jeito que quiser https://docs.google.com/spreadsheets/d/1oxp4Ys3oJmg1SUGHfI4e7as3RoW6lytM07xTdaG-H3Y/edit#gid=1937703626

sobre a planilha e plano de estudos foi mais uma sugestão para o pessoal da alura fazer, e sobre a responsividade eu não consegui entender bem a 2 parte, a dos "cortes" eu entendi, porém a outra que começa com o desktop-first e ter que usar o max-width inves do min-width eu não consegui entender bem, talvez eu vá entender quando eu refazer um projeto meu.

solução!

Testa, quando terminar teu projeto, testa do outro jeito, ve as diferenças, o tempo que tu demorou. É bem massa fazer esses experimentos