Design comparison
Solution retrospective
Please do provide any feedback for any parts of my code that could be improved or any parts that could be redundant!
Community feedback
- @kartardeveloperPosted about 2 years ago
Hey Farhan, You did Great. If you need some improvements I will help you with this. Here are some suggestions -- 1). First of all what catches my eye is your card shadow. Great, you can try different from the challenge. But I say you use but use lighter shadow now its too hard. You can take shadow codes from there https://getcssscan.com/css-box-shadow-examples 2). Next, You can increase your heading size and make the description text a little bit lighter as in the reference. 3). Always wrap your images in a figure HTML element. Add image widths there and use height, and width 100% on your images. And object-fit property if you want to use it. Object fit CSS property is very helpful when er dealing with images. This is the same as we add background size to our background images. If you want more on object-fit and object position then you can comment to me I will definitely tell you. 4). Last but not least as @MelvinAguilar said. Use semantic tags in your code. It will help you and other developers to see and find something in your code easily. Everything else is looking good. I hope this will help you. If you find this comment helpful for you, then you can mark this as a helpful comment. It will increase my confidence. ๐ And If you need any help then I'm always there.๐
Marked as helpful0 - @MelvinAguilarPosted about 2 years ago
Hi @wakandakingz ๐, good job for completing this challenge and welcome to the Frontend Mentor Community! ๐
Here are some suggestions to improve your code:
1.Try to use semantic tags in your code. More information here:
With semantic tags:
<body> <main class="container"> . . . </main> <footer class="attribution"> . . . </footer> <body>
2.The tag <div> is used to defines a section in an website. It is used to have a container styled with CSS, set special alignment or the content needs a special positioning.
You could use more the <p> tag, the <p> element is paragraph level content, usually text
<p class="footing">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
3.Add a
<h1>
tag in your solution, The<h1>
element is the main heading in 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 class="heading">Improve your front-end skills by building projects</h1>
4.You could use a CSS Reset to remove browser built-in styles and reduce browser inconsistencies
Your body's default margin causes the vertical scrollbar to appear, add
margin: 0;
to body selectorPopular reset style sheets:
5.Tips:
- Use
max-width: 260px
to.container
selector instead of width. - Use
margin: 0.625rem
ormargin: 10px
in thecontainer
selector so that it has some space when viewed on mobile devices. - The shadow of the card is too strong, I recommend using a color with transparency or use these styles based on Freebie: Google Material Design Shadow Helper
I hope those tips will help you.
Good Job and happy coding !
Marked as helpful0 - Use
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