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

All comments

  • P
    Roy 195

    @royschrauwen

    Submitted

    Hello everyone! 👋

    I love doing all these challenges and finished another one, it's my ninth one! 🎉

    I have been self-learing HTML and CSS since May 2021 and I want to become a developer, so any constructive criticism is very welcome. 😊

    ❓️ Specific Questions ❓️

    1. I wanted to make this one as responsive as possible. I think I managed to do that, but please give me tips on how to improve or point out things where I did a good job.

    2. I tried to take accessibility into account when making this page. I have no experience with it, so please tell me what I did right and where I can improve.

    Thank you very much for any support you can give me. I love all the small tips and tricks the community gives me. 🙏

    Have a nice day! 🙋‍♂️

    @brianlfarmerllc

    Posted

    I think the responsiveness and accessibility is great. The form is keyboard accessible and the use of a tags lets you tab through all the links in the footer.

    Not sure if you are familiar with it but the lighthouse tool in google chrome dev tools can give you great insight to the accessibility areas that need to be improved on in projects. I use it a lot. Firefox dev tools also have a great accessibility tool. Though i'm still learning how to use it myself.

    Great Job!

    Marked as helpful

    2
  • @brianlfarmerllc

    Posted

    great job!

    The bug I saw on the input was that the input got larger when you clicked on it. Was that what you were referring to? If so you could add this to the bill_container and the nr_people_container to keep the img and the input on the same line.

    display: flex; justify-content: space-between; align-items: center;

    For the nan maybe use a ternary operator in the case that it's a negative number in the input? I didn't look at the code for that but maybe something you could easily fix?

    Marked as helpful

    1
  • @brianlfarmerllc

    Posted

    Hi there looks really good but I have two suggestions.

    To help with the mobile layout you should look into the built in responsiveness that css grid can provide. I found this article very helpful. https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/

    and second consider creating a 4 row template on the container where the bottom one would hold your social icons. This would help with getting the icons closer to the bottom of the page.

    Keep up the great work!

    1