@oc-garcia
@NayaraFreitas
Submitted
Conseguir fazer sem ter uma dificuldade , mas me falta bastante conhecimento em css. Deixe sem a active na imagem do nft , pois ainda não sei fazer.
Se alguém ver algo em que eu possa melhorar, ficarei muito grata se você me passar seu conhecimento e por tomar o seu tempo para me ajudar.
@oc-garcia
Posted
Bom dia Nayara, muito bom, parabéns!
Acho que você poderia usar tags mais semanticas dentro do HTML em vez de usar tantas divs.
Como por exemplo colocar uma <main> e dentro dela uma <section> para fazer o card todo.
@NayaraFreitas
Submitted
Se alguem poder me dar dicas de como melhorar , o meu html e css, ficarei muito agradecida.
@oc-garcia
Posted
Boa noite Nayara, tudo bem?
Acho que para melhorar esse projeto você deveria usar tags de landmark como por exemplo header, main e footer. Por exemplo. Esse é o seu código.
Eu colocaria a section do container dentro de uma tag main. E a div final dentro de uma tag footer.
Outro ponto que acho que pode melhorar é usar o css para formatar tudo em vez de fazer isso pelo HTML utilizando a tag <br> por exemplo!
Mas muito bom, parabéns e bons estudos.
`
<body> <main> <section class="container">
<div class="card">
<img src="./images/image-qr-code.png" alt="QR">
<div class="description">
<p class="p1">Improve your front-end <br> skills by building projects</p>
<p class="p2"> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
</div>
</ main>
<footer> <div class="attribution">Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="https://github.com/NayaraFreitas">Nayara Freitas</a>.
Marked as helpful
@Mugilan010
Submitted
1.I feel difficult to do form validation.
2.nothing.
3.no, i love it
@oc-garcia
Posted
Hello! a feel things that you can improve here mate! instead of making a second html archive, you can change the form to display none and create a second thank you card that appears where it was after you submit it.
Also, try using flex box and responsive metrics as % or rem, it could help you when implementing the project in different screen sizes. As you can see the layout broke in your screenshot.
check my GitHub repository for this project, it is not perfect but it might help you with one thing or another. https://github.com/oc-garcia/interactive-card-details-form-main.
it is difficult to re create the layout without the figma file, but you can do better with the colors and inputs of the form!
Overall great job! keep coding and have fun my friend!
Marked as helpful
@muskatla14
Submitted
@oc-garcia
Posted
Looking very good congrats. Your JS archive is great as well! I made it different but yours has elements that I am going to study and learn.
Maybe you could fix the front end mentor auto reports to clear the error flags.
Solid job.
Marked as helpful
@VaibhavAgarwalDev
Submitted
As it's my first \Project with FrontEndMentor this was very helpful to learn and practice with this kind of challenges.
@oc-garcia
Posted
It looks great! Congrats! You can improve it by following the auto tips from the website. Include a main tag in your project, always use landmarks.
Also, instead of a h4, use a p tag. I think the semantic would be better.
keep on coding and have fun!
Marked as helpful
@purplehazee1337
Submitted
This is my solution. I would like to know what should i improve in this project. It's a little bit chaotic but result is very similar to goal.
@oc-garcia
Posted
Result seems perfect to me mate, good job!
Maybe you could check this css naming convention. It is helpful with code organization.
https://en.bem.info/methodology/naming-convention/
Marked as helpful
