@MelvinAguilar
Posted
Hello there 👋. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
- Change the name of the file
qrcode.htmltoindex.htmlto access the solution only using https://cyclone3603.github.io/qr-code-component-main/. by default when typing a url the fileindex.htmlis displayed and that's why you had to manually write the file name.
HTML 📄:
- Use the
<main>tag to wrap all the main content of the page instead of the<div>tag. With this semantic element you can improve the accessibility of your page.
- Always avoid skipping heading levels; Always start from
<h1>, followed by<h2>, and so on up to <h6> (<h1>,<h2>,...,<h6>).
CSS 🎨:
- Instead of using pixels in font-size, use relative units like
emorrem. The font-size in absolute units like pixels does not scale with the user's browser settings. You can read more about this here 📘.
- Use
min-height: 100vhinstead ofheight: 100vh. Theheightproperty will not work if the content of the page grows beyond the height of the viewport.
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy coding!
Marked as helpful
@Cyclone3603
Posted
@MelvinAguilar I named the file qrcode.html because I want all my projects to be in one giant website. https://cyclone3603.github.io is the main website with links to all the rest of them, that's why the naming is off.
I didn't know that something like a <main> tag existed. Will remember for next time, I'll edit the code. I'll also remember the the heading levels for next time.
How do I make the text break and go to the next line within the same <h1> tag without using a <br> tag?
I'll remember the units for next time, do these help with responsiveness too?
Thanks for all of your inputs! I'll be sure to include all of them in my next project!
@MelvinAguilar
Posted
@Cyclone3603 Hi
- That is valid, but it is a standard to set the name of the main file as "index.html", I share this repository with many challenges where in each one the file is called as index.html, you will see that there is no problem in using that name:
https://github.com/elaineleung/frontendmentor
When using many index.html what matters is the folder, not the name of the file, plus it has fewer letters.
before: https://cyclone3603.github.io/product-preview-card-component-main/productreview.html
after: https://cyclone3603.github.io/product-preview-card-component-main/
- Testing with your solution, currently if I remove the <br> tag I don't see a difference but if it has problems I personally set a maximum width and try to center it with margin, e.g. (Random values):
p {
max-width: 15ch;
margin: 0 auto; /* If you don't use flexbox in the component, to center it use margin auto. */
}
Marked as helpful
@Cyclone3603
Posted
@MelvinAguilar Ohhh, it's only the folder that matters? So I can just link the folder instead of the HTML?
max-width seems like an interesting property. I'll have to play around with it. Thanks for letting me know!
