Design comparison
Solution retrospective
This is my first submission and I am open to all suggestions. Do point out my mistake so I can learn more and perform better in the future.
Community feedback
- @IamArshadAliPosted 12 months ago
Hey there! Congratulations on completing your first challenge on Frontend Mentor! 🎉
It's a great achievement, and I'm glad to see your enthusiasm for learning and improving. 🎖️
After reviewing your code, here are a few areas where you can make some enhancements to further develop your skills: 🔍
- Organize Files: Consider putting your
HTML
,CSS
, and other relevant files into separate folders to improve the organization of your project.
| assets/ |- images/ |-- image-qr-code.png |-- screenshot.png |-css/ |-- style.css | index.html | README.md
- Separate CSS: Keeping your
CSS
file separate from theHTML
will make your code look cleaner and more maintainable.
... <head> <link rel="stylesheet" href="./assets/css/style.css"> ... </head> ...
- Use Relative Values: When sizing elements in
CSS
, consider using relative values likepercentages
,em
, orrem
to make your layout more flexible and adaptable to different screen sizes.
.card { padding: 1rem 0.5rem; }
- Keep Color Values in
:root
Storing color values in the:root
selector allows you to define reusable variables for colors throughout your code, making it easier to maintain consistency and make global changes to your color scheme.
:root { --clr-red: hsl(0, 100%, 66%); } h2 { color: var(--clr-red); }
- Play with paragraph color and shadow to make your design look more identical to the challenge
.card { box-shadow: .1rem 1rem 3rem lightblue; }
These are just suggestions to help you improve your skills. 🚀
There is a lot more ahead. Keep up the great work, and don't hesitate to reach out if you have any questions or need further assistance. 🤝
Happy coding! 🤓
Marked as helpful2 - Organize Files: Consider putting your
- @kevorklepedjian1Posted 12 months ago
Great job! Congratulations on your journey to becoming a frontend developer. The project was excellent. I would recommend that you look into using Flex and Grid for CSS. For instance, you could apply Flex to the body, justify it to the center, and align it to the center so that the card will be centered. Other than that, well done!
Marked as helpful1 - @Islandstone89Posted 12 months ago
To add to the advice above:
HTML:
-
You need a
<main>
. Changemain_content
from a<div>
to a main. I would also use a class instead of ID, that's most common. -
It's very important that images have alt text! This helps screen readers understand what the image shows. The alt text should describe the content, and in this example, it also needs to say where it leads.
-
Headings should always be in order. So, you never want to start with
<h3>
. Make it a<h1>
. -
.attribution
should be a<footer>
. -
"Challenge by" and "Coded by" should be wrapped in a
<p>
.
CSS:
-
It's good practice to include a CSS Reset at the top. Andy Bell has a good one you can use.
-
Remove all fixed widths and heights. Add a
max-width
in rem onmain_content
. This prevents the card from getting too big at larger screens. -
Put
text-align: center
on the body. The children will inherit the value, and you have one less line of code. -
Font-size must never be in px. This is damaging for accessibility. Use rem instead.
-
Remove negative margins.
-
To center the content horizontally and vertically, put this on the body:
display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; gap: 2rem;
The gap is to adjust the spacing between
<main>
and<footer>
.Good luck - you got this :)
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