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 SPA using sass, css flexbox and mobile first workflow

@laynet

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I would love any feedback, especially re: my many media queries and accessibility.

Community feedback

stenito 80

@stenito

Posted

Hi there! Nice work! I hope my feedback can help you :)

  • Alt attribute on images

If an image is not part of the content, but rather a design element, you can add an empty alt tag to the element: <img src="./images/..." alt ="">. That is accepted if you check accessibility.

  • Media queries

When I write simple CSS, even with SASS, like this exercise, I just create one media query and add all changes to that media query. When I work on something more complex, I usually use @include media in SASS. I end up with a lot of media queries that are not grouped. It is said to be more overhead for the browser than grouping the media queries, but I have not noticed any significant difference on rendering time. I prefer the ease of development when the media queries are in the rule :)

Marked as helpful

1

@laynet

Posted

@stenito thank you!! I've updated my code based on all the feedback i've gotten here and on slack and am re-submitting my solution. I will definitely look into @include media for the next FEM project i'm doing which has a tablet design. much appreciated!!

0
Abdul 8,540

@Samadeen

Posted

Hey!! Cheers 🥂 on completing this challenge.. .

Here are my suggestions..

  • You should use <main class="main"> instead of <div class="main">.
  • You should add a alt text to your img tag to aid screen-readers

This should fix most of your accessibility issues

. Regardless you did amazing... hope you find this useful... Happy coding!!!

Marked as helpful

1

@laynet

Posted

@Samadeen thanks so much, I've made some changes based on your feedback and re-deployed!!

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