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

Mobile-first chat app illustration

Spencer Rundeβ€’ 640

@spencerrunde

Desktop design screenshot for the Chat app CSS illustration coding challenge

This is a solution for...

  • HTML
  • CSS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Really interesting challenge! I liked the focus being primarily on CSS for this one. I know the font and phone in general may look a little small, but I was following the design for this one pretty heavily, and it matches up really well.

Community feedback

P
Alexβ€’ 1,990

@AlexKMarshall

Posted

This looks great, it's nicely responsive, there's really only a couple of points I have.

For the heading and body text, they really should be in rem, not in px, so they scale with a user's chosen base size.

Normally I'd avoid fixed container sizes too, but as they're only on the phone illustration, and this really behaves more like a fixed image than a regular piece of content, I think it's fine.

I would maybe put aria-hidden on the phone container so that it isn't read out by screen-readers. I think otherwise the page would read fairly confusingly. Also, you've got img elements in there with a missing alt property. <img alt/> isn't valid, it needs to be <img alt=""/> or better still, a proper descriptive value. Though if you hide that whole block it will be fine. But it's a good habit to get into checking the alt texts are correct.

Marked as helpful

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