haquanq ®️• 1,585
@haquanq
Posted
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