Design comparison
Solution retrospective
Can you give me some feedback i'm a beginner thank you!
Community feedback
- @ecemgoPosted over 1 year ago
Some recommendations regarding your code that could be of interest to you.
- If you want to make the card centered both horizontally and vertically, you'd better add flexbox and
min-height: 100vh
to the body - You can use the recommended background color for the screen
body { /* background-color: whitesmoke; */ font-family: 'Outfit', sans-serif; background-color: hsl(212, 45%, 89%); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; }
- If you use
max-width
, the card will be responsive and you can reduce the width a bit
.card { /* max-width: 350px; */ max-width: 300px; }
- You don't need to use the styles below for the img
.image { /* margin-top: 0px; */ /* text-align: center; */ /* display: block; */ }
- Also, you don't need to use
.container
in order to center the card and you can remove it
/* .container { display: flex; align-items: center; justify-content: center; padding-top:100px; } */
- Finally, you don't need to use media queries because the solution will be responsive if you follow the steps above. I recommend you don't use the styles that don't work.
Hope I am helpful. :)
Marked as helpful0@devAeloPosted over 1 year ago@ecemgo thank you ill keep that in mind or thank you ill apply these on my next challenge i appreciate this :)
1 - If you want to make the card centered both horizontally and vertically, you'd better add flexbox and
- @Cyber-ChicPosted over 1 year ago
Wonderful job completing your first challenge! 😊
I have a few small recommendations that may improve your site:
-
Add an alt attribute to your code. Alt attributes are required for all non decorative images on a website. The QR code on your site will be scanned. This means that the image is not considered decorative and will require a description. To fix this you could add the following to your <img> tag
alt="QR code to frontendmentor.io"
-
Add a <main> tag around the main content on your webpage. All web pages should include a <main> tag. A <main> tag is a semantic HTML element that defines the main content on a page such as primary sections, text, articles, etc.
Example:
<main> <div class='container'> <h1>Main heading text</h1> <p>paragraph text</p> </div> </main>
I hope this is helpful! Great work & Happy Coding!
-Angie
Marked as helpful0@devAeloPosted over 1 year ago@Cyber-Chic thank you ill keep that in mind or thank you ill apply these on my next challenge.
1 -
- @apah-devPosted over 1 year ago
In addition to what Abdul has recommended, I do advice you always visit the styleguide.md file to use the correct colors and fonts for the projects.
** It is downloaded with the project files at the beginning of the challenge **
Marked as helpful0 - @0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
CSS 🎨:
- Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using
margin
orpadding
.
- We don't need to use
margin
andpadding
to center the component both horizontally & vertically. Because usingmargin
orpadding
will not dynamical centers our component at all states
- To properly center the component in the page, you should use
Flexbox
orGrid
layout. You can read more about centering in CSS here 📚.
- For this demonstration we use css
Grid
to center the component.
body { min-height: 100vh; display: grid; place-items: center; }
- Now remove these styles, after removing you can able to see the changes
.container { padding-top: 100px; }
- Now your component has been properly centered
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful0
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