Skip to content
Submitted 10 months ago

Responsive CSS masterpiece

Robert level•190
@Rlevel87
A solution to the Chat app CSS illustration challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Proud that I am able to complete this project with little help. Only help needed was for the arrows. Feel I need to learn a better way to program the positioning of elements. Felt I used way to many margins.

What challenges did you encounter, and how did you overcome them?

Creating the phone and fitting the objects was challenging.

What specific areas of your project would you like help with?

Writing the code in a more simply way. I feel I could have coded this with much fewer lines.

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Tom Roche•330
    @TomrocheDev

    Hi Robert,

    Great take on this project! You asked for feedback on a more simple way of writing code. First of all, your code is very consistant in my opinion, so you are doing a great job.

    A tip I could give you is to use more explainatory classes. In your code I read a lot of classes like "lefttextbox" and "lefttextbox1". That is something I personally would avoid, because if you want to change something, it could get hard to find the exact element you want to select (especially on bigger projects). The chronology could also be disrupted when you, for instance, add a new element in between two elements that are named for instance "class1" and "class2". What I would recommend is try to use more classes that discribe what the element is or does. It makes it a lot more readable and professional. I also would recommend to use dashes between words in classnames. I would write "lefttextbox" as "left-text-box". That is more readable.

    For positioning of elements I would recommend to do some research on flexboxes and grids. These technologies are great for the positioning of elements. At first it can be hard to understand, but give it some time. It will help you A LOT with postioning.

    Resources for flexbox and grid: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout https://developer.mozilla.org/en-US/docs/Web/CSS/flex https://www.youtube.com/watch?v=rg7Fvvl3taU -- (A video by Kevin Powell -- This is also a great channel to follow on YouTube)

    Hope this helps!

    Marked as helpful

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