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
Request path contains unescaped characters
Not Found

Submitted

4 Feature Card Section built using CSS Grid & Flexbox

arey 350

@arey-dev

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


I'm glad I was able to finish this design, but I wasn't satisfied of my solution. Also, one thing I've been confused at is the scrollbar. What I did on this project was add padding on the body element to have scrollbar effect, but I'm not sure if that was the best practice. Can you give me some tips or advice? Thanks!

Community feedback

mubizzy 1,520

@mubizzy

Posted

Excellent job on this challenge! your report has a few issues though:

  1. wrap everything in your body in <main> or use semantics

2.   it is a best practice to use both HTML 5 and ARIA landmarks to ensure all     content is contained within a navigational region.

Hope it helps:)...don't forget to mark it as helpful 👍

You can get more details here...click here

Marked as helpful

1

arey 350

@arey-dev

Posted

@mubizzy Sir, kindly check my HTML code. I did use semantics, although it's true that I can use some ARIA landmarks or maybe include some screen reader only text.

0
mubizzy 1,520

@mubizzy

Posted

@arey-dev yes like it's best practice to use both. Excellent job 👏 👍 👌 Happy coding 😃 😊 😀

0
P
James 340

@james-work-account

Posted

Looks great!

Something to consider, why did you put min-widths on your .feature and .container elements? Any people with phones below ~400px wide (e.g. iPhone 13 mini) will experience horizontal overflow, which is something you'd generally want to avoid.

Also, consider moving away from px for widths/heights/font-sizes/etc and switching to using rem for this. There are a few articles explaining why you'd want to do this (e.g. this one) - there are online px-to-rem converters if you want to make your life easier.

Marked as helpful

1

arey 350

@arey-dev

Posted

@james-work-account Thanks! I put min-width to .feature because I don't want it to squeeze too much as the viewport decreases. I will make sure to fix my layout so the horizontal overflow issue can be solved. Thank you for sharing me the article, I will read it for sure!!!

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