@cuong0411
Submitted
Looking to hire developers?
@Binh2
@cuong0411
Submitted
@Binh2
Posted
Hey there! 👋 Here are some suggestions to help improve your code.
Congrats on completing your challenge! 🙌
I have 3 suggestions for you:
.card { box-shadow: 0.5em 0.5em 1em var(--clr-grayish-blue); }
. You could choose a different color box-shadow if you want.<title>Frontend Mentor | QR code component</title>
so you don't need <h1> tag :v. Cool trick though.If you have any questions or need further clarification, feel free to reach out to me.
You've done so well. I can't find many errors.
Happy Coding! <3 😊
@TalasaDev
Submitted
Hi everyone,
this is a new solution for the News Homepage and the first junior-level challenge I've completed. I finally got to figure out how to get the dimmer effect in the main element when toggling the menu in mobile design. I add an empty <div class="dimmer"> element to the <main> and use styling to overlay it and toggle the background color with Javascript.
I will appreciate any feedback to learn about different approaches.
Happy coding!!!
@Binh2
Posted
Hey there! 👋 Here are some suggestions to help improve your code:
Congrats on completing your first junior challenge! 🙌
Answer to your question: you could set .dimmer { background: black; } and use JS to add to style attribute opacity: 0.7;. Not much different to your original way :v ...
I have 7 suggestions for you:
<h2>New</h2>
to <h2>News</h2>
.:root { font-size: 16px; }
for your base element, use rem for your block and use em for your element inside your block. When you do it like this, people with eye problem could resize your font-size with Ctrl +/-.<div class="attribution"></div>
to <footer class="attribution"></footer>
.<div>01</div>
instead of <span>01</span>
because both of them are non-semantic tags. But <div> tag add a line break after your content.If you have any questions or need further clarification, feel free to reach out to me.
Really well done on your part. I try to find errors. But there's not much to be found.
Happy Coding! <3 😊
@taqh
Submitted
This is my first JavaScript heavy project I had a lot of problems while building especially with the form and switching sections it was also really hard to get it to display properly for various screen sizes but I did my best.
@Binh2
Posted
Hey there! 👋 Here are some suggestions to help improve your code:
Congrats on completing your challenge! 🙌
I have 10 suggestions for you:
<div class="plan arcade" />
to always check one even if the user haven't check anything.<input type="tel" />
instead of <input type="number" />
for telephone. Because telephone can sometimes be written as "0123-456-789" (invalid number, btw) or (415) 555-2671 (can't type parenthesis in type="number")input[type="text"], input[type="tel"] { cursor: text; }
instead of cursor: pointer.If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding! <3 😊
Marked as helpful
@julietaxcc
Submitted
First try, it cost me a bit but we did it (I think soo). Do you have any tips??
Thank you in advance!!!
@Binh2
Posted
Hey there! 👋 Here are some suggestions to help improve your code:
Congrats on completing your first challenge! 🙌
I have 9 suggestions for you:
.container { box-shadow: 10px 10px 20px #bbb; }
to add shadow* { margin: 0; padding: 0; box-sizing: border-box; }
Because on Chrome, your <h1> tag have a large margin.img { width: 80%; }
to size your image dynamically depending on parent width..container2 { width: 80%; }
:root { font-size: 16px; }
to give a default font-size. And, it is best practice to use rem for your container font-size and other property value. Use em for your elment. Using these units will give the users the ability to scale elements up and down, relative to a set value.If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding! <3 😊
@Binh2
Posted
Português
Ei! 👋 Aqui estão algumas sugestões para ajudar a melhorar seu código:
Parabéns por completar seu primeiro desafio! 🙌
Tenho 6 sugestões para você:
<p>Scan the QR code to visit … </p>
em vez de<span>
<p>…</p>
<p>…</p>
<p>…</p>
</span>
h1 { color: hsl(218, 44%, 22%); }
p { color: hsl(218, 44%, 22%); }
footer { text-align: center; }
ficará melhor.Se você tiver alguma dúvida ou precisar de mais esclarecimentos, sinta-se à vontade para entrar em contato comigo.
Codificação feliz! <3 😊
Portanto, a página da Web será dimensionada proporcionalmente ao tamanho da tela, em vez de depender de um formulário de largura fixa #centralizar
English
Hey there! 👋 Here are some suggestions to help improve your code:
Congrats on completing your first challenge! 🙌
I have 6 suggestions for you:
<p>Scan the QR code to visit … </p>
instead of<span>
<p>…</p>
<p>…</p>
<p>…</p>
</span>
h1 { color: hsl(218, 44%, 22%); }
p { color: hsl(218, 44%, 22%); }
footer { text-align: center; }
will look better.If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding! <3 😊
So the webpage will scale propotionately to screen size instead of relying on fixed width form #centralizar
Marked as helpful