Submitted over 1 year ago

Responsive Chat App Illustration Built with CSS Flexbox & Mobile First

#accessibility#bem

Johnny• 470

@johnnysedh3lllo

Preview site View code

This is a solution for...

Chat app CSS illustration

HTML
CSS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

hey guys, it's been a few days since i submitted a solution. i started this challenge 3 days ago and was able to complete it today against all odds 😅.

i did run into series of #Difficulties with this challenge, being that this was the first time doing one like this where i had to build the mock image with CSS. maybe i should be playing more CSS Battle 😅.

first challenge i encountered was making the notch for the mock phone image.
then the background graphics.
i also found it a bit difficult to create the check circles for the pricing tags.
then overtime because of the consistent trial and error it was a bit hard to manage my code.

#Uncertainties

in terms of uncertainty, i don't think i really managed my code properly.

#Questions

if you have advice in regards to improving modularity. i would be really glad to know more on it.
and if you have any comments about my code in general please feel free to comment.

this challenge was unexpectedly challenging for me 😅. i didn't expect that but i believe with struggle comes growth and i was happy to experience something new.

Community feedback

Lucas 👾• 104,580

@correlucas

Posted over 1 year ago

👾Hello Johnny, congratulations for your new solution!

Great solution as always, is all perfect and I can say that you've done a great work with this complex solution!

The only thing I think you need to improve is the phone component alignment, if you look you've a margin right that creates a gap in the right size. I think what is causing this space only one side is the amount of the position: relative/absolute you've used. I try the maximum I can to use this kind of aligment because this create some behavior like that. My to go aligment is ever flexbox.

👋 I hope this helps you and happy coding!

Marked as helpful

Johnny• 470

@johnnysedh3lllo

Posted over 1 year ago

thanks alot Lucas, glad to have you here.

Lucas 👾• 104,580

@correlucas

Posted over 1 year ago

@johnnysedh3lllo <3 you're improving a lots bro, I don't have idea how to do this challenge is really complex to wrapp all the content/ Ill try that in future for sure. Keep it up Johnny!

Johnny• 470

@johnnysedh3lllo

Posted over 1 year ago

☺ thank you my friend, for your very kind words. I'm sure you'll do great with this challenge. you know your solutions are always far cooler than the actual designs 😂

Please log in to post a comment

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