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

Responsive 4 Card Feature Section Using CSS Flexbox

Anosha Ahmedβ€’ 9,340

@anoshaahmed

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


Would appreciate any suggestions to improve my code!

Community feedback

PhoenixDev22β€’ 16,990

@PhoenixDev22

Posted

Well done Anosha Ahmed ! I checked your solution . Your solution is great Keep up !

Marked as helpful

1

Anosha Ahmedβ€’ 9,340

@anoshaahmed

Posted

@PhoenixDev22 thanks Phoenix!

0
noorβ€’ 540

@Maahnoor

Posted

hi, great solution, perfectly matches the design. Looking at your code it seems you designed the website for mobile and then added media queries for larger screen sizes. is there an advantage to this? I am new to web development and have been doing it the other way around. will appreciate an explanation :)

Marked as helpful

1

Anosha Ahmedβ€’ 9,340

@anoshaahmed

Posted

@Maahnoor yes. google "mobile-first approach css"

0
Harshdeep Singhβ€’ 220

@JunDevHarsh

Posted

The design of your solution is so much accurate that it matched the given challenge. You did a nice job.

Marked as helpful

1
Alexβ€’ 660

@al3xback

Posted

Hi Anosha,

I think this structure is not well optimized when have long content. (https://prnt.sc/24lvdv1, https://prnt.sc/24lvvu0)

Marked as helpful

1

Anosha Ahmedβ€’ 9,340

@anoshaahmed

Posted

@al3xback Thank you for saying that! It helps me think outside of the box. This page, I guess, isn't meant to have long text.

0
Fernando FeNβ€’ 425

@Fernando0654

Posted

I think it's because of the h2 element, before h1. You have h1, h2 and h3 but they are not in a sequentially-descending order

Great work, btw. Love when fits so well in the design / solution window

Marked as helpful

1

Anosha Ahmedβ€’ 9,340

@anoshaahmed

Posted

@Fernando0654 Yeah I know. I was wondering if it will be an issue, and it turned out, it did lol

1
Moayadβ€’ 100

@Moayad7

Posted

great work!

1

Anosha Ahmedβ€’ 9,340

@anoshaahmed

Posted

@Moayad7 Thanks i appreciate you!

0
Adarsh Raiβ€’ 560

@AdarshRai0

Posted

Well done Anosha Ahmed ! I checked your solution just wanted to know how you make your solution exactly same as the design any tips it can help me to improve;✨🎯

0
Anosha Ahmedβ€’ 9,340

@anoshaahmed

Posted

Well, I have h1, h2 and h3 in my code so i don't know about the accessibility issue. I guess i should have had them in ascending order.

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