Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Landing page using CSS margins

umi 30

@umelkheir

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I couldn't overcome certain issues like the mobile responsiveness for the :hover effect. I would like some feed back as this is my first time building something from scratch on my own. I would also appreciate critical criticism on my code in general any pointers to help me improve is much appreciated.

Thanks in advance.

Community feedback

Eles 1,300

@eleswastaken

Posted

Hey!

On the design image you can see the pointer cursors, that means that those elements are interactive. And that usually means that element is either a button or a link. E.g. in this challenge when you try to click the image, you would expect it to take you somewhere so it is a link. Same is with the card title and author name.

Things to learn for now:

  • interactive elements(for now - buttons and links)
  • pseudo elements(for now - :hover)
  • flexbox (there is a great course from Wes Boss - flexbox.io)

My advise would be to just building stuff from Frontend Mentor. And do it everyday. You can check out mentioned things just to know that they exist; doesn't matter whether you understand them. And whenever you think you could use them in the projects go research.

Just start from the easiest(Newbie) challenges, I suggest you complete them all. Then move on to the harder difficulty.

Best of luck!

Marked as helpful

1

umi 30

@umelkheir

Posted

@eleswastaken I appreciate advice and suggestions. Thank you

0

Please log in to post a comment

Log in with GitHub
Discord logo

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