@Felipemendes097
Submitted
Mais um desafio feito, peço que me enviem feedbacks construtivos, passei um tempinho parado e estou voltando agr desde já agradeço.
@HarmoniaCodes
@Felipemendes097
Submitted
Mais um desafio feito, peço que me enviem feedbacks construtivos, passei um tempinho parado e estou voltando agr desde já agradeço.
@HarmoniaCodes
Posted
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."
@Exileurt
Submitted
In Mobile size, i dont know how to make a dropdown list like the solution.... maybe javascript ?
@HarmoniaCodes
Posted
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!
Marked as helpful
@Alienowy
Submitted
That was my second attempt. What should I improve? I really need your feedback. Thanks a lot.
@HarmoniaCodes
Posted
Hello Allen! Congrats on completing the challenge! I have a few pieces of feedback for your code:
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
Box-shadow Property: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
Keep up the great work! Happy Coding!
Marked as helpful
@rox-stahl
Submitted
This little project has some nice learning nuggets!
@HarmoniaCodes
Posted
Hello! Congrats on completing the challenge! I have one piece of feedback to offer.
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
@Scrub4Life
Submitted
@HarmoniaCodes
Posted
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:
Double check the style guide and design images to make sure that you are using the correct font sizes and weights.
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
@ShaunPour
Submitted
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.
@HarmoniaCodes
Posted
Hello Shaun! Great work completing the challenge! I have a few pieces of feedback based on your design:
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.
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.
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
@Maryamhussein
Submitted
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?
@HarmoniaCodes
Posted
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!
@OnealSpain
Submitted
I accept suggestions and comments for best practices.!
@HarmoniaCodes
Posted
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!