Kihura• 880
@lucaszebre
Submitted
joaovitorwitt
@joaovitorwitt
All comments
- joaovitorwitt• 250
@joaovitorwitt
Posted
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• 34,020
@AdrianoEscarabote
Submitted
👨💻 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! 😊
joaovitorwitt• 250@joaovitorwitt
Posted
So cool man. Always learning from you.
1 - HelloDearSir• 20
@HelloDearSir
Submitted
joaovitorwitt• 250@joaovitorwitt
Posted
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 - Omar• 560
@to-my-learning-path
Submitted
joaovitorwitt• 250@joaovitorwitt
Posted
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-ken
Submitted
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
joaovitorwitt• 250@joaovitorwitt
Posted
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><div class="eye"> </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
