Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
step by step i am learning web development
What challenges did you encounter, and how did you overcome them?I think i still stuck on flex box and grid
What specific areas of your project would you like help with?website responsive
Community feedback
- @haquanqPosted 4 months ago
Hello @arun81302 👋👋👋
Congrats on completing the challenge!!
Here is my feedback to improve your solution:
- Don't skip heading level because it will mess up you page flow, you should increase the heading level based on the depth of your content (is this sub content belong to this content/heading). Also, heading size has nothing to do when choosing correct heading level, you choose it because it makes sense for you page flow.
- Using more semantic elements, you are overusing
div
while there are many semantic HTML markups out there. For example, you can wrap each card witharticle
and inside it justh2/3/4
p
img
and as you can see that each card has repetitive content structure, you can useul
'li' to indicate that this is a list ofarticle
. - About responsive, lets start with using viewport width as such:
/* min-width is when your screen size getting bigger max-width is when your screen size getting smaller */ @media screen and (min-width: px/em/rem | max-width: px/em/rem) { /* when using min-width: x ~ apply style when my screen size at minimum width of x when using max-width: x ~ apply style when my screen size at maximum width of x */ }
For more reference, you can checkout my solution for this challenge.
Hope this is helpful to you 🙏
0
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