@jaojogadez
Submitted
What can I do to improve? I have a question about the color of the image, I didn't know how to change it so I looked online and found a solution, but I couldn't leave the color the same :0
Thiago Correa
@ThiagoBRG60
All comments
- Thiago Correa• 350
@ThiagoBRG60
Posted
Oi !👋🏻
O seu Stats Preview Card ta muito bom, aqui estão algumas sugestões:
1 - Bom, acho que o principal que eu notei é que você usa css interno pra estilizar os componentes, no html mesmo. E mesmo que esse seja um projeto simples, recomendo criar um arquivo próprio de css mesmo, porque essa prática de css interno para projetos reais é um pouco complicada, e não muito recomendada, pois depois fica ruim para dar manutenção no código e etc, e também para deixar tudo mais organizado mesmo, e não acabar criando um arquivo html gigantesco, dependendo do tamanho do projeto.
2 - Recomendo usar uma tag main dentro do body, pra indicar o conteúdo principal do seu projeto/site.
3 - Um aviso que eu dou é cuidar com nomes, pensar em bons nomes para classes e ids é muito importante, para projetos reais e etc, seja mais objetivo nos nomes e tente evitar dar nomes genéricos, para que os outros também entendam seu código depois.
4 - A última sugestão é deixar o seu site responsivo, usando media queries. Para deixar ele no tamanho exato nas telas menores, de celulares e tablets, pois percebi que em tela de celulares seu site vaza para as bordas. Media queries podem ser um pouco complicadas de entender no começo mas tenho certeza que rapidinho você pega o jeito.
É isso, continue estudando e melhorando, e feliz ano novo! 🤝🏻
Marked as helpful
0 - Luizocad3• 60
@Luizocad3
Submitted
Thiago Correa• 350@ThiagoBRG60
Posted
Oi 👋🏻!
O seu qr code component ta muito bom, aqui ta o meu feedback e algumas observações:
1 - No seu html, sempre adicione a tag <main> para tornar o html mais semântico, afinal o main define o conteúdo principal de um site. E eu recomendaria ao invés de usar o header, usar talvez uma <section> dentro do main.
2 - Para centralizar o card no meio da tela você pode usar o flexbox, torna tudo mais simples.
3 - Vi que você só definiu o padding bottom dentro do card, e para tirar a imagem da borda de cima você usou margin-top, você poderia aplicar o padding em todos os lados do card, assim ele já iria espaçar os elementos dentro do card, sem que você precisasse definir um margin-top depois.
4 - A única coisa que faltou aqui foi a fonte do texto que vem junto com os arquivos que o frontend mentor fornece.
Em geral, ta muito bom.
Continue aprendendo e melhorando, e feliz natal ! 🤝🏻
Marked as helpful
1 - kaike torres• 190
@kaiketorres
Submitted
I accept constructive criticism 😁, and merry Christmas to everyone
Thiago Correa• 350@ThiagoBRG60
Posted
Oi 👋🏻!
O seu 3-column card ta muito bom, aqui ta o meu feedback e algumas sugestões:
1 - Você incluiu a tag main no seu body, isso é muito importante pra ter um html mais semântico e definir o conteúdo principal do seu site.
2 - Mesmo sendo um projeto simples, eu recomendo você adicionar o texto alternativo das imagens, isso é muito importante pra acessibilidade e pessoas usando leitores de tela.
3 - Você usou quebra de linhas <br> para deixar as palavras nos lugares certos, uma outra forma de ter o mesmo efeito poderia ser definindo o width dos parágrafos.
4 - Novamente, mesmo sendo um projeto simples, sempre dê bons nomes para identificar os elementos, vi que você usou "card1, 2 e 3", você poderia usar por exemplo "card-sedans, card-suvs, card-luxury", o mesmo serve para os botões, apenas sugestão mesmo, pois acredite, nomes são muito importantes também.
5 - A única coisa que eu vi faltando aqui foi o card não ser responsivo em todas as telas, telas menores como do iphone SE fazem o card vazar para fora da tela.
Em geral está tudo ótimo, você fez um bom trabalho. Sucesso com os estudos e feliz natal pra você também ! 🤝🏻
1 - CyberLime• 290
@CyberLime
Submitted
:>
Thiago Correa• 350@ThiagoBRG60
Posted
Hi 👋! Your blog preview card looks good overall, here are some feedback for your solution:
1 - You made sure to use the <main> tag inside of your body, that's really important for more semantic html and defining the main content of your website.
2 - You also made sure to fill the alt="" with the description of the images, that's really good for accessibility and people using screen readers, good job!
3 - Your card is responsive, that's also really good for mobile users.
The only thing I see lacking here is the hover status on the h1 and the cursor pointer property, and also the box shadow should increase when you hover the card, that's all that's left to do, overall you did a great job!
Keep learning and improving! 😊
1 - Alan Fernandes• 50
@AlanFrnnds
Submitted
Thiago Correa• 350@ThiagoBRG60
Posted
Oi 👋!
O seu QR code component ta muito bom em geral, mas aqui estão algumas sugestões:
1 - Você incluiu uma tag <main>, isso é importante pra definir o conteúdo principal de um site, a única observação aqui é que você deixou os elementos "soltos" dentro do main, eu recomendaria usar a tag <section>, ou entao agrupar os elementos dentro de uma div, já que em muitos sites as vezes você pode ter muitos elementos, e deixar eles apenas na tag main sem agrupamento ficaria um pouco mais dificil depois pra dar manutenção.
2 - Mesmo sendo um projeto simples, sempre adicione a descrição da imagem no alt"", isso é muito importante pra acessibilidade e pessoas usando leitores de tela.
3 - Eu vi que pra centralizar o main voce usou o translate(-50%,-50%), você pode ter o mesmo resultado usando flexbox, inclusive é até mais fácil para centralizar os outros itens dentro do main, pois vi que você usou position absolute e aplicou margin nos elementos. E para dar um espaçamento interno, para afastar os itens da borda, você pode usar o padding.
De geral, são essas sugestões mesmo, continue aprendendo e melhorando 🤝🏻.
Marked as helpful
1 - Abelmekonn• 50
@Abelmekonn
Submitted
Thiago Correa• 350@ThiagoBRG60
Posted
Hi 👋! Your blog preview card looks good overall, but here are some feedback for your solution:
1 - Make sure to center the card element, you can do this by using flexbox, align-items and justify-content.
2 - Make sure to have a <main> tag inside of your body tag, so your html have more semantic.
3 - Make it responsive, you can achieve that by using media queries or you can just add the max-width property to your card.
4 - For accessibility purposes, make sure to fill the alt="" with a description of the image, for people using screen readers.
Keep learning and improving! 😊
Marked as helpful
0 - Chantal Ngwenya• 10
@ChantalNgwenya
Submitted
As a newbie, I struggled mostly with styling the components needed and making sure my qr components is the same as the one thats required.This is my solution to Frontend Mentor's QR Code Component challenge. Developing a QR code component that shows an image of a QR code together with a title and description was the challenge. The component had to match the given design preview and be responsive.
I used HTML and CSS to create the QR code component.
Working on this challenge was a lot of fun because it let me use my knowledge of HTML and CSS to make a useful and eye-catching component. I thought the experience helped me become a better front-end developer.
I would be very grateful for any criticism or ideas for development. I appreciate you looking over my solution.
Thiago Correa• 350@ThiagoBRG60
Posted
Your QR code component looks really good, I don't see any problems with your code.
I would just maybe recommend you using a <main> tag inside your <body>.
I also see you used the font-family property inside the body, h1 and p elements, but it should apply to all of the elements if you just keep it inside the body.
Keep learning and improving ! 😊
Marked as helpful
1 - maría• 10
@mariaigle98
Submitted
Heyy, first Frontend Mentor challenge over here. Satisfied with the result but I guess there is easier and improved code on the community solutions and I can't wait to see it.
Thiago Correa• 350@ThiagoBRG60
Posted
Hey, it looks great for a first challenge, just make sure to match the colors. Always keep learning and improving 😉.
Marked as helpful
0
