Skip to content
OverviewSolutions
38
Comments
4
Faruq Abdul Hakim
@faruqAbdulHakim

All comments

  • Jhonne•90
    @JhonnegSubmitted 10 months ago
    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
    @faruqAbdulHakimPosted 10 months ago

    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. 😃
    1
  • bikeinman•1,080
    @BikeInManSubmitted almost 3 years ago

    Can you please check if this meets all the requirements ? Also, suggestions for improvement, alternate ideas are welcome and very much appreciated. Thanks in advance.

    HTML5 | CSS | Grid | JavaScript

    2
    Faruq Abdul Hakim•580
    @faruqAbdulHakimPosted almost 3 years ago

    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;

    ^^

    0
  • Faruq Abdul Hakim•580
    @faruqAbdulHakimPosted almost 3 years ago

    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 👋🏻

    0
  • bikeinman•1,080
    @BikeInManSubmitted almost 3 years ago

    Experienced developers or other developers who have completed this challenge, can you please test if it meets the design requirements.

    I stuck to just the basics, just HTML, and CSS and one grid. I had tough time with images, especially in desktop mode.

    This challenge took me more than two weeks and 2 attempts to get this far. Any feedback and any suggestions about code will be deeply appreciated.

    Thank you.

    HTML, CSS, JS, GRID, Mobile first workflow

    2
    Faruq Abdul Hakim•580
    @faruqAbdulHakimPosted almost 3 years ago

    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
    0