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 section, responsive using grid. Mobile first approach

#accessibility
Marcia 50

@marciabel

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


Hello everyone! This was my very first time applying grid by myself (no tutorial projects), and it was a bit tricky. I'm not sure it was the cleanest, but it worked! Do you have any suggestions on how could I improve this?

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hi, Marcia! 👋

Congratulations on finishing this challenge! It is great that you do this project by yourself. 👍

I have one suggestion:

No <br> elements: Do not use <br> element to break text. You should make the <span> as a block element. Learn more about accessibility issues that can happen when using <br><br>: The Line Break element - HTML: HyperText Markup Language | MDN #accessibility_concerns

I hope this helps. Happy coding!

Marked as helpful

0

Marcia 50

@marciabel

Posted

I appreciate your comment @vanzasetia ! It was actually very helpful, didn't consider that when I was working on it. Will make sure to not use it like that in the future, thank you!

0
Vanza Setia 27,795

@vanzasetia

Posted

@marciabel You are welcome! 👍

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