Skip to content
OverviewSolutions
5
Comments
8
Nick
@HarmoniaCodes

All comments

  • Nick•160
    @HarmoniaCodesPosted about 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
  • Exileurt•100
    @ExileurtSubmitted about 2 years ago

    In Mobile size, i dont know how to make a dropdown list like the solution.... maybe javascript ?

    Another Html and CSS

    3
    Nick•160
    @HarmoniaCodesPosted about 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 about 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 about 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 about 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
  • Shaun Pour•630
    @ShaunPourSubmitted about 2 years ago

    I found this one pretty fun. I don't have much experience building projects from APIs so this was some nice practice in that for me. The css was relatively simple which is good since I prefer to focus on functionality over looks myself. It was also a nice return to doing things in vanilla js as I've been doing mostly react projects lately.

    Mobile First Advice Generator API App

    1
    Nick•160
    @HarmoniaCodesPosted about 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
  • Maryam Ali•220
    @MaryamhusseinSubmitted about 2 years ago

    What did you find difficult while building the project? -little bit Which areas of your code are you unsure of? -the responsive Do you have any questions about best practices? why do sometimes we should put 100vh when we center the body content?

    Frontmentor-product-preview-card-component-main(HTML /CSS)

    1
    Nick•160
    @HarmoniaCodesPosted about 2 years ago

    Hi Maryam! Congrats on completing the challenge! I have a few pieces of feedback:

    -When your site goes to the mobile layout, your .image class is stretching and creating a lot of whitespace. You might try modifying the .main height from 100% to avoid the excess whitespace.

    -To answer the question about 100vh; This means viewport height:100%, or that the element height will take up 100% of the page window height. This helps give a value for things to be centered vertically, whereas margin:auto 0; can used for horizontal centering.

    I hope this is helpful! You are doing great work!

    0
  • Nick•160
    @HarmoniaCodesPosted about 2 years ago

    Hello Wilson! You did a great job loading the fonts into the design! I took a look at your code, and it looks like you did not commit the images folder to your github, so there is no image for the page to load. Also, it seems like you have the dark background color from the style guide. Try using the light gray color from the style guide and see what difference it makes :)

    Great work!

    0