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 mobile first. build with html, scss and javascript

idris adam• 140

@iredox10

Desktop design screenshot for the Social media dashboard with theme switcher coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Please check the design and tell me what to improve

Community feedback

Raymart Pamplona• 16,090

@pikapikamart

Posted

Hey, great work on this one. Layout is different from the original, it's fine, but it could be improved. The responsiveness is great and the mobile layout is great as well.

Some suggestions would be:

  • The .top_background element could be removed I think, it doesn't really add anything.
  • For the color theme toggle. It would be great to implement those using input. Right now, yours is not really accessible. What you could do is that, use a fieldset along with legend. Those color theme is a 2 selection, so 2 radio input should be used. I don't have a specific implementation of my solution for this one, but my other solution, you could check it out. It is the rest-api-challenge, but you will the color theme toggle that I made. Inspect it, and you will see the html structure. That is fully accessible. If you have any more question about it. You can respond again to this feedback and maybe I can make a simple snippet where you can check :>
  • Avoid using multiple h1 element. Use only at least 1 h1 per webpage.
  • To be honest, the html for this challenge is really hard, I am having a bit of trouble as well, so I could just only give right now feedback about obvious usage.
  • The alt value for the social media icons should only use their name like alt="facebook". Do not include words like "icon, image, picture, logo, graphic", assistive tech will handle those for you.
  • Lastly, the your font is not really applying. Right now it is using the default arial. You might want to check that one out.

Aside from those, still a good job.

1
idris adam• 140

@iredox10

Posted

Raymart thanks for your feed and I really appreciate looking into my challenge. and I will consider your suggestions and your corrections. thanks, Raymart

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