0

Treinando a Responsividade.

Virginia Silva
Virginia Silva

Olá pessoal, assim como muitos estudantes, eu também já fiz muitos trabalhos extras pra poder pagar os estudos. Hoje conhecendo mais sobre tecnologia, mais precisamente conceitos de HTML e CSS, fiz uma página para um antigo trabalho. Nele foi usado HTML e CSS que são as tecnologias base de todo projeto web, as páginas do Facebook, Google ou Instagram tem algo em comum: todas elas tem HTML CSS no código!

Por isso é de suma importância o bom conhecimento dessas tecnologias para você se considerar um programador.

No projeto foi usado HTML5 e CSS3 que são as versões mais recentes dessas linguagens onde foram adicionados recursos sensacionais, como tags, regras, conceitos de Flexbox, padrões de código, organização de código, responsividade (media query) e muito mais! Vou colocar o endereço do github onde tem mais alguns projetos. Todos os códigos são abertos.

Este é o link do meu Github: https://github.com/virginia-silva/HTML5-CSS3-JS/tree/master/Pagina%20V%26E

0
0

Comentários (2)

0
Virginia Silva

Virginia Silva

04/06/2021 13:05

Oi Pedro, que legal.... Muito Obrigada pelas dicas, vou olhar com muito carinho sim. Muito Obrigada.

1
Pedro Dias

Pedro Dias

04/06/2021 13:00

Olá Virgínia!


Vi rapidamente aqui e achei legal; é isso aí, sempre praticando para fixar o conteúdo e sempre buscar o conhecimento.


Vou te dar algumas dicas:


Ao invés de:


  1. border-top: 1px solid #b8860b;
  2. border-left: 1px solid #b8860b;
  3. border-bottom: 4px solid #b8860b;
  4. border-right: 4px solid #b8860b;


Use:


border-style: solid;

border-width: 1px 4px 4px 1px; /* top, right, bottom e left */

border-color: #b8860b;


E deixe as imagens "responsivas", para isso, use:


img {

width: 100%;

height: auto;

}


Outra dica que dou é usar como referência o bootstrap no caso das resoluções. Vi que você usou: @media(max-width: 460px). Sabemos que existem muuuuitas resoluções, então para não ficarmos perdidos, que tal focarmos no que irá abranger grande parte delas? Veja o exemplo do bootstrap:


Extra small

<576pxSmall

≥576pxMedium

≥768pxLarge

≥992pxExtra large

≥1200px


Não precisa usar todas, só aquela onde o layout precisa realmente mudar/melhorar... Por isso o ideal é sempre usar um layout fluido fazendo uso de porcentagem nos valores das propriedades.


Dica extra: evite usar imagens muito grandes (vi que tem imagens com mais de 1200px) em situações onde o máximo que ela deve chegar seja a 200px, por exemplo. Exporte as imagens já no tamanho final.


Espero ter ajudado e conte comigo se tiver alguma dúvida!


Estudante de Análise e Desenvolvimento de Sistemas - UNIP Jaguariúna.

Brasil