Skip to content
OverviewSolutions
38
Comments
4

Faruq Abdul Hakim

@faruqAbdulHakim580 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Jhonne•90
    @Jhonneg
    What are you most proud of, and what would you do differently next time?

    used px for setting font sizes, not anymore

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

    Sizing thing with rem instead of px.

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

    Had some issues with sizing things in general, had to use font size from the style guide as a reference but the final result was a still a bit off.

    QR Code solution

    4
    Faruq Abdul Hakim•580
    @faruqAbdulHakim

    Hi Jhonne 👋,

    I have some suggestions for you to center the component. First of all, make sure your document is filled 100% of screen height by applying:

    body {
    min-height: 100vh;
}

    and then, if you want to add attribution (optional) make sure it doesn't affect the component by applying:

    .attribution {
    position: absolute;
    bottom: 0;
}

Hope this can help. 😃
  • Faruq Abdul Hakim•580
    @faruqAbdulHakim

    Nice work. Did you forget to add your images directory? i can't see the background image there. Suggestion from me, i think you can styling the button when user clicked, so the user know what are they doing;

    ^^

  • Faruq Abdul Hakim•580
    @faruqAbdulHakim

    First of all, nice work 👏🏻. Congratulations on finish this challange. 😄 I have some suggestions on your solution.

    • do you forget to check your image source? You should use alt="./your-icon.svg" instead of ./images/your-icon.svg. Because there isn't directory named images in your repository.
    • to solve accessibility issues, you can change your <div class="container">...</div> to <main class="container">...</main>. And you can change your <div class="attribution">...</div> to <footer class="attribution">...</footer>

    I hope my sugesstions can help you, have a nice day and happy coding 👋🏻

  • Faruq Abdul Hakim•580
    @faruqAbdulHakim

    First of all, nice work. Congratulations on finishing this challange. 🎉

    I want to give some sugesstions that i hope can help you to the next level.

    • I have issues when show site in mobile screen, there is an overflow problem. After trying to resolve that, width and height which is set 100% on html style should be removed. And instead using height 100vh in body style, it should changed to min-height 100vh. (or you can use fixed background-attachment)

    • I suggest to using link <a> only when linking to another page or only when redirect to a particular section on the same page

    • as in the style guide, font-family need set to Kumbh Sans, sans-serif.

    happy coding ^^

    Marked as helpful