Skip to content
OverviewSolutions
23
Comments
7
P

Godwin

@itadori-kunCanada410 points

Anime Lover

I’m currently learning...

Javascript, Sass/Scss, Bootstrap, Html, CSS

Latest solutions

Latest comments

  • P
    Godwin•410
    @itadori-kunPosted about 2 years ago

    Hello Pri89yanka,

    Congratulations on completing the challenge, here are a few suggestions.

    • Stick with one type of unit call ie choose either px or rem and not both.
    • body{width: 100%; background-color: hsl(212, 45%, 89%); display: grid; min-height: 100vh; row-gap: .5rem; font-family: "Outfit", sans-serif; place-content: center;}

    This keeps your code right at the center, the other code was being pushed down the viewport because of the padding you used with the rem unit.

    Also, check this link web.dev to know the reasons why specific units are used.

    hope it helps, once again Happy coding 👻

    Marked as helpful
    1
  • P
    Godwin•410
    @itadori-kunPosted over 2 years ago

    Hello Pretty, Great work and nice code, it is fantastic. Here is a little suggestion.

    • You forgot the: hover and :active on the class ratings.
    • Validate your submit btn to only submit when a rating number has been selected to avoid pushing out blank on the innerHTML part.
    • Try using more semantic tags instead of non-semantic tags like("divs"). Check this out to understand more: "https://www.w3schools.com/html/html5_semantic_elements.asp" or "https://www.freecodecamp.org/news/semantic-html5-elements/".

    Hope you find this helpful!!!. Happy coding 👻💜💜

    Marked as helpful
    0
  • P
    Godwin•410
    @itadori-kunPosted over 2 years ago

    Hello Sebastian, Great job completing the project. Your work is fantastic. Here is a suggestion, you should validate the submit button to work only when the rating number has been selected instead of returning blank when the submit button is selected without the ratings being selected.

    Happy coding, 💜👻

    Marked as helpful
    0
  • P
    Godwin•410
    @itadori-kunPosted over 2 years ago

    Hello kylejrhoden, I want to congratulate you for the awesome work you have done with the code, great work. Though I do have a few suggestions:

    • Try to write more semantic-UI instead of the use of Divs which are non-semantic to aid accessibility. Check out the link, and learn to know what each tag does https://www.w3schools.com/html/html5_semantic_elements.asp

    • On this line of code <img src="images/bg-pattern-card.svg" id="pattern" aria-hidden="true">, add an alt="" just like this since it is presentational.

    • On this line of code <img src="images/image-victor.jpg " alt="Victor Profile Image">, the alt should not contain any words like pictures, images, and related since it is automatically been read by the screen reader to avoid repetition.

    I hope you find this helpful, 👻 Happy coding.

    0
  • P
    Godwin•410
    @itadori-kunPosted over 2 years ago

    The attribution section should be out of the top-parent container. Then use your flex-direction column to get everything in a column instead of a row.

    Also, learn more about semantic UI for accessibility. This might help a bit https://www.w3schools.com/html/html5_semantic_elements.asp to know what each tag does.

    Check this out should tell you more about how to go about responsiveness. https://web.dev/learn/design/

    I hope it does help a bit. Happy coding

    1
  • P
    Godwin•410
    @itadori-kunPosted over 2 years ago

    Hello JorgeNevesFreitas Great work. Regarding your question,

    1. There are two different font-sizes and font-weight on your #checkout-buttons__proceed and the hover state. The weight and font-sizes should only be placed on the #checkout-buttons__proceed state. The hover state inherits the normal state.

    2. You only wrote the code for the .checkout-preview__change a: hover state and not the .checkout-preview__change a state. Apply point 1. when editing and should help.

    Happy coding

    0
View more comments