skipprrr• 70
@skipprrr
Posted
bro where is your website , its showing nothing , your server isn't online , your should check it
Marked as helpful
0
@shubham7522
Posted
@skipprrr thanks bro for your suggestion its reuploaded and working
0
Design comparison
Community feedback
Melvin Aguilar 🧑🏻💻• 61,220
@MelvinAguilar
Posted
Hi @shubham7522 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉
Here are a few suggestions I've made that you can consider in the future if you're looking to improve the solution further.
- Update solution link with https://shubham7522.github.io/QR-Code-Solution-Frontend-Mentor-/qr-code-component-main/.
The reason why it is not displayed is that you have a folder "qr-code-component-main" and inside is the solution.
Here are some other suggestions:
- Try to use semantic tags in your code. Click here for more information.:
With semantic tags:
<body>
<main class="white-board">
. . .
</main>
<footer class="attribution">
. . .
</footer>
<body>
- The
<br>tag is not a semantic tag, so you should not use it. Also, if a screen-reader reads the text, it will break the flow of reading at the line break tag, so it should be used to add vertical spacing. There are only a few cases where it is necessary (for example, in a poem or an address), and it is possible to avoid them by applying padding and margin styles via CSS. More information here. - Try to use more descriptive names for your classes. I suggest you learn the BEM naming convention standard for CSS class names because increases the readability of front-end code and provides a modular structure.
- Add an h1 tag to your solution. The
<h1>element is the main heading on a web page. There should only be one<h1>tag per page, and always avoid skipping heading levels; Always start from<h1>, followed by<h2>, and so on up to <h6> (<h1>,<h2>,...,<h6>). The HTML Section Heading elements (Reference)
Solution:
<h1>Improve your front-end skills by building projects</h1>
I hope those tips will help you.
Good job, and happy coding!
Marked as helpful
0
PhoenixDev22• 16,950
@PhoenixDev22
Posted
Hi Shubham Srivastava,
Excellent work! You have received some helpful feedback which is nice to see , just going to add some suggestions as well:
- In order to center the card on the middle of the page , you can use the flexbox properties and
min-height: 100vhfor the<body>add a little padding to the body that way it stops the card from hitting the edges of the browser. No need for the large margins or position:absolute. Also remove position: absolute from the rest element
- Consider using rem for font size , it' not recommended to use px for font size as absolute units don’t scale for example 15px will always be 15px on the same device. Using pixels is a particularly bad practice for font sizing because it can create some accessibility problems for users with vision impairments.
width: 300pxan explicit width is not a good way to have responsive layout . Consider usingmax-widthto the card inrem.
height: 450pxIt's not recommended to set fixed height to component, you almost never want to set it. let the content of the component define the height.
- Remember a modern css reset on every project that make all browsers display elements the same.
Hopefully this feedback helps.
1
Please log in to post a comment
Log in with GitHub
Join 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