using html css

Solution retrospective
not very hard
Please log in to post a comment
Log in with GitHubCommunity feedback
- @denielden
Hi Rahul, congratulations on completing the challenge, great job! 😁
The correct link for the preview is
https://rahulpaul12.github.io/nft-review/nft-preview-card-component-main/nft-preview-card-component-main/
because you uploaded nested folders to the repository. Upload the files directly to the repository: theindex.html
must be on first level of repositoryAlso some little tips for optimizing your code:
- add
main
tag and wrap the card for improve the Accessibility - also you can use
article
tag instead of a simplediv
to the container card for improve the Accessibility - You can fix the effect
:hover
creating adiv
that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution - using
<hr>
for the line is not the best way because this tag have a semantic meaning... in this case use div withborder-bottom
because this line is decorative img
element must have analt
attribute, it's very important!- add descriptive text in the
alt
attribute of the images - remove all unnecessary code, the less you write the better as well as being clearer: for example the
div
container of texts - remove all
margin
fromcard
class - use flexbox to the body to center the card. Read here -> best flex guide
- after, add
min-height: 100vh
to body because Flexbox aligns child items to the size of the parent container - instead of using
px or %
use relative units of measurement likerem
-> read here
Hope this help! Happy coding 😉
- add
- @correlucas
Hello Rahul, your site is not displaying and I can see that you're having some issues to setup the Github Pages. In my first days I tried to use Github Pages too but was too hard to setup, doesn't helps if you're a beginner like us.
My advice for you is to use
vercel.com
ornetlify.com
that are really easier platforms for live sets and totally user-friendly, in a matter of 5min your live site is online. All you need to do is to connect the Github account, import the repository and deploy it. Really fast.The easy one is
Vercel
and is the one I use for my solution.Fixing that you've to update the solution with the new link and we'll be able to see your live site and help you.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord