Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

four card features

arun81302 60

@arun81302

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

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 with article and inside it just h2/3/4 p img and as you can see that each card has repetitive content structure, you can use ul 'li' to indicate that this is a list of article.
  • 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 GitHub
Discord logo

Join 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