Skip to content
OverviewSolutions
19
Comments
5
joaovitorwitt
@joaovitorwitt

All comments

  • joaovitorwitt•250
    @joaovitorwittPosted about 2 years ago

    Hello @Kihura, how are you doing today?

    Your solution looks great, no doubt on that. But I have some suggestions that you can make to improve your project.

    On the main tag instead of using position: relative; use display: flex;

    The code looks something like this:

    main {

    display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;

    }

    That way you can properly align your content on the middle of the screen.

    The second thing that you might consider add is the hover effect on the NFT card, you can take a look at my solution for this project to see how that would look like.

    The last thing is to use more HTML5 Semantic tags: https://developer.mozilla.org/en-US/docs/Glossary/Semantics

    Semantic tags can help the search engines determine the importance of your content, make your code more readable, and also offer more accessibility.

    The rest looks great.

    Keep the good work.

    If you have any doubts feel free to reach out.

    0
  • Adriano•38,270
    @AdrianoEscaraboteSubmitted about 2 years ago

    👨‍💻 Hello everyone. This is my solution for the Calculator app.

    This was a challenging project, I found some very different bugs. I managed to practice a lot of new things and I tried to make my code as clean and readable as possible!

    If you find something I can improve let me know!

    I added:

    • 👨‍💻 the user will be able to perform all operations through the keyboard!
    • 🎨 Store theme preference via localStorage!

    Feel free to leave comments on how I can improve my code.

    Thanks! 😊

    👨‍💻 Calculator app w/ (HTML + CSS + SASS + Bootstrap + JS)

    7
    joaovitorwitt•250
    @joaovitorwittPosted about 2 years ago

    So cool man. Always learning from you.

    1
  • joaovitorwitt•250
    @joaovitorwittPosted about 2 years ago

    Hi, how are doing?

    I am looking at your code and I see a lot of potential, but there is still room for improvement.

    For this challenge I recommend you to take a look at "display: flex;". You can find amazing tutorials on Youtube, the ones I suggest are from "Traversy Media" and "Web Dev Simplified".

    They both have excellent resources to learn front end.

    For the HTML you can take a look at semantic tags like main, section, article...

    https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html

    And lastly, to improve the responsiveness take a look at relative units, like rem, em or %

    https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

    Hope this helps you.

    If you have any questions, feel free to reach out.

    0
  • joaovitorwitt•250
    @joaovitorwittPosted about 2 years ago

    Hi Omar congratulations on completing this project, great stuff.

    I also completed this one recently.

    I would just recommend that you add an event to remove the errors after a few seconds.

    You can easily do this with a "setTimeout" function.

    I also suggest adding the error indication as a "background-image", that way you can properly align the icon on the middle of the input with the "background-position" property.

    The code for this would look something like this:

    input {

    background-image: url(./images/icon-error.svg);
background-repeat: no-repeat;
background-position: bottom 8px right 1rem;
border: 2px solid hsl(0, 100%, 74%);

    }

    Hope you find this useful.

    keep up with the great work!

    Marked as helpful
    1
  • Askan Ken•60
    @askan-kenSubmitted about 2 years ago

    How to change images on hover properly? I tried my best, but still looks bad

    Also, how to put line below the price, I tried using border-bottom but yeah it looks bad

    NFT preview card

    3
    joaovitorwitt•250
    @joaovitorwittPosted about 2 years ago

    First of all, congratulations for completing this project.

    I also had trouble to complete this project

    To answer your question on how to change the image on hover, you can work with two divs.

    The first div would be where, in this case, the NFT image would go.

    The second div would go inside the first div and this second div would contain the image you want to display on hover. I suggest using the "background-image" property: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

    It would look something like this:

    <div class="ntf-image"> 
      <div class="eye">

  </div>
    </div>

    You can take a look on my profile to see how the code CSS looks like.

    I hope this helps you. Feel free to reach out

    Marked as helpful
    0