Design comparison
Solution retrospective
text center with image. space between image and text with the div
Community feedback
- @correlucasPosted about 2 years ago
👾Oi Felipe Souza, tudo bem? Parabéns pelo desafio!
Acabei de ver sua solução e tenho umas dicas pra melhorar seu código/design:
1.Adicione o favicon da sua paginando colocando o link dentro do
<head>
.<link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">
2.Ao invés de usar
<h2>
pro bloco contendo o título principal, ao invés use<h1>
, porque cada página precisa de um h1 pro título principal e siga a sequência se você adicionar outro título como h1, h2 , h3…3.A sua solução ficou muito boa, a estrutura html o design também, algo que você pode fazer para melhorar a imagem que precisa mudar entre mobile e desktop é usar
<picture>
ao invés de<img>
dentro de uma div. Por motivos de SEO e mecanismos de pesquisa tipo Google e bing, não é uma boa prática importar esta imagem do produto com CSS, pois isso dificultará a localização da imagem no google. Você pode gerenciar ambas as imagens dentro da tag<picture>
e usar o código html para definir quando as imagens devem mudar configurando o dispositivomax-width
dependendo do dispositivo (mobile / desktop) Aqui está um guia sobre como usarpicture
:https://www.w3schools.com/tags/tag_picture.asp
Veja o exemplo abaixo:
<picture> <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg"> <img src="./images/image-product-desktop.jpg" alt="Gabrielle Parfum" style="width:auto;"> </picture>
👋 Espero que essas dicas te ajudem e que você continue no foco!
Marked as helpful1 - @CarolkiariePosted about 2 years ago
Hello Felp, nice work done! I have just recently completed the challenge myself and would like to make a few suggestions.
-
Try including media Queries in your CSS to make it more responsive. you can read more from https://www.w3schools.com/css/css3_mediaqueries.asp
-
You could include a CSS reset to your code because browser have different "built-in" styles which they apply to different html-elements. These style definitions may vary across different browsers. The normalizing css files are meant to „normalize“ the rendering of the page across browsers by resetting these browser-specific styes. You could use https://www.joshwcomeau.com/css/custom-css-reset/
-
CSS variables will make your work way easier when using css. My favorite video which helped me understand the usefulness of them was by TheNetNinja . https://www.youtube.com/watch?v=8Yum7EQgadM.
0 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord