QR Code Component Main made with VSCode by StarChan
Design comparison
Solution retrospective
MY FIRST CHALLENGE
Hi! This is my solution for my first challenge in this site :D
I used VSCode to develop and ChatGPT for helping me
Hope u like it <3
Community feedback
- @danielmrz-devPosted 10 months ago
Olá @StarChan013!
Seu projeto está excelente!
Tenho duas sugestões:
📌 Primeira: Por questões semânticas, e por ser o título principal da tela, você pode substituir o
<h3>
por<h1>
.Ao contrário do que a maioria das pessoas pensa, a diferença entre os HTML headings não é só sobre o tamanho e peso do texto.
- As tags
<h1>
a<h6>
são usadas para definir títulos em HTML. <h1>
define o título mais importante.<h6>
define o título menos importante.- Use apenas um
<h1>
por página - isso deve representar o título principal de toda a página. Além disso, não pule os níveis de título - comece com<h1>
, depois use<h2>
e assim por diante.
📌 Segunda: Use
<main>
pro conteúdo principal ao invés de uma<div>
. Tags como<div>
e<span>
são exemplos típicos de elementos HTML não-semânticos. Elas servem apenas como containers para o conteúdo, mas não indicam qual o tipo desse conteúdo e nem o papel que ele desempenha na página.Essas mudanças de tag geram pouco ou nenhum impacto visual mas tornam o seu código HTML mais semântico e melhoram a otimização SEO e acessibilidade do projeto.
Espero que ajude!
Fora isso, ótimo trabalho!
Marked as helpful0@StarChan013Posted 10 months ago@danielmrz-dev
Olá Daniel! Desculpe a demora na resposta!
Agradeço primeiro por ter gostado!
Segundo, fico muito feliz com os feedbacks e as sugestões para a melhoria do código. E agradeço principalmente por dedicar alguns minutos para compartilhar seu conhecimento. Irei fazer a alterações
Muito obrigada!
1 - As tags
- Account deleted
great work but some tips for future projects:
1- use alt attribute for images for accessibility check mdn
2- always use h1 for main header (you can use h2,h3 for subheading)
3- you should use general css reset for all your projects check this links joshcomeau and piccalil
4- in css file change the html to body and omit flex-direction:column
5- the important thing is that you must always use rem units instead of px unit for responsive design Happy coding and keep going
Marked as helpful0@StarChan013Posted 10 months ago@sina-ghadimi
Hello!
Thanks for the feedback!
I just made the changes you recommended! Also, can you give me tips to how make good alternative texts for HTML?
Thanks a lot!
0Account deleted@StarChan013 well done keep going. Sure you can learn about semantic html using web.dev website by Google.
Marked as helpful0
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