Design comparison
Solution retrospective
When making the responsive and not writing a lot of code to organize the divs, how does the responsive work well, how to improve the responsive part and the organization of the elements and have good practices?
Community feedback
- @kanishkasubashPosted over 1 year ago
Hi, Kristhian👋. Congratulations on successfully completing the challenge! 🎉
Your solution looks great, and you've done a fantastic job overall! However, here are some small suggestions and answers to your question that might interest you:
HTML:
- The
<main>
element should wrap around the entire component. Using the<header>
,<main>
,<footer>
elements provide structural clarity, accessibility improvements, SEO benefits, and facilitates responsive design. It helps you create well-organized, maintainable, and user-friendly web pages. - It's important to note that the
alt
text should be descriptive but concise, conveying the essential information without being overly long. It should provide a meaningful summary of the image's content and purpose. (Eg: alt="QR Code for frontendmentor.io")
<body> <main class="container"> <div class="card"> <img class="card-image" src="images/image-qr-code.png" alt="QR Code for frontendmentor.io"> <h1 class="card-heading">Improve your front-end skills by building projects</h1> <p class="card-description">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </div> </main> <footer><div class="attribution">...</div></footer> </body>
CSS:
- You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.
CSS resets that are widely used:
"My Custom CSS Reset" by JoshWComeau
- You can use the
max-width
,margin
andpadding
to control the width and position of your elements. - Percentages are often used to define
widths, heights
, andmargins
. They are relative to the parent element's size. For example,width: 50%
would make an element half the width of its parent.
For example:
.container { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .card { max-width: 20rem; background-color: hsl(0, 0%, 100%); border-radius: 0.938rem; text-align: center; } .card-image { width: 90%; border-radius: 0.625rem; margin: 5%; } .card-heading { margin: 2% 5%; padding: 0 5%; } .card-description { margin: 5% 5% 12%; padding: 0 5%; }
This also helps you too... Link
I hope you find this helpful! 😄 Keep up the great work! 👍
🖥️Happy coding!
Marked as helpful0 - The
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