Implementação de novo layout #9
Conversation
Começando pela versão mobile.
|
@MaikonTT Primeiro, parabéns pela iniciativa. Já deixei na minha agenda pra avaliar o PR mais tarde ;) |
|
Muito obrigado, todo feedback será muito bem vindo! 😄 |
assets/css/my-style.scss
Outdated
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
There was a problem hiding this comment.
É bem pessoal, mas há uma tendência no uso de 2 espaços invés de 4 espaços.
Faça o teste veja se curte :)
There was a problem hiding this comment.
Você diz no tab? Se for, já irei testar daqui a pouco.
assets/css/my-style.scss
Outdated
| padding: 0; | ||
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | ||
|
|
||
| header { |
There was a problem hiding this comment.
Dois pontos, é boa prática no CSS, evitar aninhamentos. Isso causa problemas de performance e especificidade. Você aninhar a partir do body, vai fazer com que todos os elementos tenha body el, gerando aninhamentos gigantes.
Ao invés disso trabalhe com classes: .header, sempre criando escopos para cada bloco de elemento.
Nesse artigo, explico bem isso, da uma lida depois.
assets/css/my-style.scss
Outdated
| header { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| padding: .3em 0 .3em .3em; |
There was a problem hiding this comment.
Sempre que usar números, por exemplo .3em, tenta criar variáveis, assim eles deixam de ser "mágicos" e começam a ter muito mais padrão.
Costumo usar esse padrão nos projetos em SASS
There was a problem hiding this comment.
Isso é o mesmo método aplicado no Bootstrap né? Achei bem interessante! Eu quero pegar pra aprender do zero, mas só depois aprender de fato Bootstrap.
assets/css/my-style.scss
Outdated
| display: block; | ||
| margin: 0 .7em; | ||
|
|
||
| h1 { |
There was a problem hiding this comment.
Evite o uso direto de tags, vale o mesmo principio de classes que listei no comentário lá em cima.
Também vale dar uma lida sobre BEM
assets/css/my-style.scss
Outdated
| background: #8888dd; | ||
| } | ||
|
|
||
| .ver-tudo { |
There was a problem hiding this comment.
Evite misturar nomes em português e inglês. Por boas práticas, todas as classes devem ser escritas em inglês.
assets/css/my-style.scss
Outdated
|
|
||
| .Brasil { | ||
|
|
||
| } |
index.html
Outdated
| <meta name="keywords" content="front-end, frontend, comunidade, html, css, javascript, brasil"> | ||
| <meta name="viewport" content="width=device-width"> | ||
| <link type="text/plain" rel="author" href="humans.txt" /> | ||
| <link href="//fonts.googleapis.com/css?family=Lato:100,300,400,700" rel="stylesheet" type="text/css"> |
There was a problem hiding this comment.
Essa fonte está sendo carregada, mas não está sendo usada no CSS.
index.html
Outdated
| <meta name="viewport" content="width=device-width"> | ||
| <link type="text/plain" rel="author" href="humans.txt" /> | ||
| <link href="//fonts.googleapis.com/css?family=Lato:100,300,400,700" rel="stylesheet" type="text/css"> | ||
| <link rel="stylesheet" href="assets/css/my-style.css"> |
There was a problem hiding this comment.
CSS pode ser chamado de style.css
index.html
Outdated
| <header> | ||
| <div class="logo"> | ||
| <h1> | ||
| <a href="#"> |
There was a problem hiding this comment.
O <a> está sem função, talvez seja melhor deixar direto no .logo.
index.html
Outdated
| </head> | ||
|
|
||
| <body> | ||
| <header> |
There was a problem hiding this comment.
Não esqueça da role='banner'
|
Muito obrigado pelo feedback, estarei revisando e terminando já mando um código melhorado, estou estudando front por conta própria e sinto um pouco de dificuldade em algumas partes, por isso resolvi ir pra Open Sources, pra realmente ver como funciona e me educar também, irei ver todos os links que indicou, e trabalhar em cima disso, e fico muito mas muito agradecido mesmo! =D |
|
Tamo junto mano, qualquer coisa gritai. Sobre escrever mobile first, segundo você disse nos comentários, sugiro dar uma olhada nesse técnica |
Além de melhorar a estrutura.
|
Dei commit nas mudanças, sei que ainda tem muito a melhorar, mas acho que já consegui um avanço. |
|
Fala @MaikonTT, dei uma olhada rápida. Ainda tem algumas coisas em aberto, principalmente com relação aos aninhamentos e classes misturando Mas parabéns pelo trabalho 😉 |
|
Certo, muito obrigado! Estarei melhorando mesmo que pouco a pouco. |
Coloquei uma breve descrição baseada na descrição do repositório, além de separar os arquivos de CSS e SCSS. Também troquei o indicador de IDs(#forum, #works, etc) e coloquei o direcionamento para às páginas.
Começando pela versão mobile.
Eu sei que está um pouco cru, mas peço para que verifiquem, e colaborem tanto para esse novo layout que o @kvnol criou, quanto para gerar mais aprendizado pra mim.
Não terminei ainda, pois preciso de um feedback para evitar errar lá na frente e ter que refazer tudo do 0.
Nota: estou aprendendo a usar o github também.