0

Design Responsivo HTML/CSS

Samuel Costa
Samuel Costa

Uma das minhas maiores preocupações ao desenvolver para web é criar algo que seja acessível ao maior número possível de dispositivos. Em um eccomerce, por exemplo, podemos pensar que a esmagadora maioria dos clientes irão acessar a plataforma a partir de um smartphone.


Por isso, me interessei pelo conceito de desenvolvimento mobile-first, desenvolver pensando primeiro no layout de dispositivos móveis.


Nesse projeto inicial deixei um pouco de lado as animações, JS e processamento backend e me concentrei totalmente em como os elementos seriam renderizados na tela. E um recurso que acredito que todo dev já ouviu falar ou agradeceu muito por ser criado é a flex-box


O Chrome devtools possui até uma ferramenta que, quando você define o display: flex, é mostrado ferramentas simulando as configurações possíveis em tempo real.


Nesse projeto tomei por base um layout do site UpLabs. Como o layout tem direitos autorais, não irei utilizar em nenhum projeto real de eccomerce, criei apenas para aprendizado.


Gostaria que você dessem uma olhada no código e no vídeo que estão no github. Pesquisei bastante na internet mas gostaria de opiniões sobre boas práticas na escrita de css.

Desde Já agradeço e sucesso a todos!!


Projeto: https://github.com/kailera/htmlcssresponsivetest.git


Modelo: https://www.uplabs.com/posts/fashion-e-commerce-app-7a2334e2-a8e8-48a1-b178-df34a5d8a86f

0
0

Comentários (4)

0
Samuel Costa

Samuel Costa

04/05/2021 07:43

Bom dia Eros, me interessei recentemente pelo conceito de pwa e quero me aprofundar. Estou desenvolvendo um app pro meu serviço e gostaria de aplicar o conceito de pwa. Se tiver alguma dica ou um guia fico agradecido

1

Conhece o conceito de PWA? E os bootstrap s?

0
Samuel Costa

Samuel Costa

03/05/2021 19:08

Obrigado Diego, se tiver alguma sugestão fique a vontade

3
D

DIEGO TEIXEIRA

03/05/2021 19:07

Texto interessante!

Usar programação para otimizar e melhorar os sistemas para todos.

Brasil