Skip to content
OverviewSolutions
5
Comments
8

Nick

@HarmoniaCodesAtlanta, GA, US160 points

Hello!

I’m currently learning...

Reactjs

Latest solutions

Latest comments

  • Nick•160
    @HarmoniaCodesPosted over 2 years ago

    Olá Felipe! Bem feito neste desafio! Tenho dois feedbacks pra você.

    • O cor do fundo não corresponde com o style guide. Você usou "--neutral-grayish" / hsl(218, 22%, 67%), mas o desfaio usa "--neutral-light" / hsl(204, 43%, 93%)

    • Voce pode tentar o CSS property "box-shadow" no seu button para adicionar "profundidade."

    https://developer.mozilla.org/pt-BR/docs/Web/CSS/box-shadow

    0
  • Nick•160
    @HarmoniaCodesPosted over 2 years ago

    Hello! Visually, the layout looks good. However there is an issue with your code not being responsive to mobile layouts. This can be achieved using media queries. Check this link for more info.

    https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

    In regards to your question about collapsible mobile menus, check out this guide from W3 schools. You are correct that Javascript is a solution for this!

    https://www.w3schools.com/howto/howto_js_mobile_navbar.asp

    Marked as helpful
    0
  • Nick•160
    @HarmoniaCodesPosted over 2 years ago

    Hello Allen! Congrats on completing the challenge! I have a few pieces of feedback for your code:

    • The background images are missing. This requires the use of 2 .svg files in order to match the design prompt. You might look into positioning properties and z-index values in order to get these where they need to go. The MDN documentation for these is below.

    Edit: Upon further inspection, it also appears that the url you are using for the background images is resulting in a 404 error.

    CSS Position Property: https://developer.mozilla.org/en-US/docs/Web/CSS/position

    Z-index Values: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

    • The card itself should have a shadow effect. Box-shadow is an easy solution to this. Check out the MDN documentation for this below.

    Box-shadow Property: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

    Keep up the great work! Happy Coding!

    Marked as helpful
    0
  • Nick•160
    @HarmoniaCodesPosted over 2 years ago

    Hello! Congrats on completing the challenge! I have one piece of feedback to offer.

    • Your background .svg elements don't resize/aren't responsive to the viewport size. You may want to check out some scaling options such as media queries or using the clamp function. You can find their documentation below.

    Using Media Queries: : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

    CSS clamp() function : https://developer.mozilla.org/en-US/docs/Web/CSS/clamp

    0
  • Nick•160
    @HarmoniaCodesPosted over 2 years ago

    Hello Avery! You did a great job using the API. I especially like how you've added a "loading..." message when the button is pressed.

    I have a few pieces of feedback regarding your css styling:

    1. Double check the style guide and design images to make sure that you are using the correct font sizes and weights.

    2. You might try moving the button down so that it more closely matches the design image by using a 'margin-top' style. Also, don't forget to style the button's active state!

    Best,

    Nick

    Marked as helpful
    0
  • Nick•160
    @HarmoniaCodesPosted over 2 years ago

    Hello Shaun! Great work completing the challenge! I have a few pieces of feedback based on your design:

    1. The advice div is very far down on the page. You may try using align-items or justify-content styles with flexbox to put the content in the center of the page. You may also want to double-check the design image to see that your fonts are set correctly.

    2. Your button has a few issues. The glow effect is missing for the active state. I noticed that the button is also not a perfect circle. Rather than using padding to create the width of the button, you might try setting a width, then an aspect-ratio of 1.

    3. Finally (and maybe most importantly), your button does not load new advice in firefox. Please check out the documentation here for more info: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities

    Best, Nick

    Marked as helpful
    0
View more comments