Design comparison
Community feedback
- @petritnurediniPosted 9 months ago
Congratulations on completing the "QR Code Component" project! 🎉 Your project shows a great understanding of HTML and CSS. Here are some best practices and recommendations for further enhancements:
-
Semantic HTML:
- Use more semantic tags to enhance the structure and accessibility of your code. For instance, wrapping the main content in a
<main>
tag is a good practice, which you've done well. - In your
img
tag, consider adding a more descriptivealt
text for accessibility purposes, likealt="QR Code for Frontend Mentor"
.
- Use more semantic tags to enhance the structure and accessibility of your code. For instance, wrapping the main content in a
-
CSS Best Practices:
- Organization: Your CSS is well-organized. Keep maintaining this structure as it will help in managing more complex projects.
-
Code Efficiency:
- DRY Principle: Always look for opportunities to reduce repetition in your code. This makes your codebase cleaner and easier to maintain.
- CSS Shorthand: Utilize CSS shorthand properties where possible to make your code more concise.
-
Accessibility:
- Keyboard Navigation: Ensure that all interactive elements are accessible via keyboard.
- Color Contrast: Check that the text and background colors have sufficient contrast, especially for readability.
-
Further Learning:
- As you continue your journey, explore topics like CSS animations, flexbox, and grid systems to enhance the visual appeal and layout of your projects.
- Experiment with different design frameworks like Bootstrap or Tailwind CSS to see how they can speed up your development process.
Useful Resources:
- MDN Web Docs for comprehensive learning resources on web technologies.
- W3Schools for tutorials on HTML and CSS.
- A List Apart for in-depth articles on web design and development.
Keep up the great work, and I'm looking forward to seeing more of your projects! 🚀
Marked as helpful1@xStephxPosted 9 months ago@petritnuredini thanks for advice! I followed all advices and will apply them in future projects. If you have any other suggestions feel free to text me!
1 -
- @hemel17Posted 10 months ago
Greate work! But for the class a you could use a header tag and for the class b you could use a p tag. Btw, checked your github profile and got some motivation to code daily. Keep up the good work. Thank you. :)
Marked as helpful1@xStephxPosted 10 months ago@hemel17 thanks for the feedback! For the suggestion of using header tag and p tag, I will fix it to make the code better organized. I am also glad that I have motivated you with my github profile. If you have other suggestions feel free to text me again.
1@hemel17Posted 10 months ago@xStephx Wanna improve your css skill? Complete this challenge. https://cssbattle.dev/play/VMfkYfdqT7pH9oPEqNb0 Let me know your score.
1@xStephxPosted 10 months ago@hemel17 thanks a lot for giving me challenge. I solved this challenge and I got 600.75 score with 659 characters and match percent 100%. If you have other suggestions feel free to text me again.
1@hemel17Posted 10 months ago@xStephx I'd to use almost 100 more characters to get the same result. Can I see your code?
1@xStephxPosted 10 months ago@hemel17 here you are,
<div class="a s"><div class="x c a"></div><div class="w t l a"><div class="c a z"></div></div><div class="w b l a"><div class="c a z"></div></div><div class="w t r a"><div class="c a z"></div></div><div class="w b r a"><div class="c a z"></div></div></div>
1@xStephxPosted 10 months ago@hemel17 I don't know why it doesn't want to I am trying to write
0@xStephxPosted 10 months agobody{background-color:#0C2428;display:grid;place-items:center;}.s{position:relative;width:100px;height:100px;}.w{width:50px;height:50px;}.x{width:40px;height:40px;}.t{top:-25%;}.b{bottom:-25%;}.l{left:-25%;}.r{right: -25%;}.a{position:absolute;background:#D9D9D9;}.c{border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#0C2428;}.z{width:20px;height:20px;}
0 - @iamkishoremahtoPosted 11 months ago
nice work
1
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