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

1st challenge - NFT preview card

@DrunkenNeoguri

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


Nice to meet you! That's my first challenge in Frontend Mentor.

I tried to hard that making site, but I think too big card size in site^^; I'm newbie and studied to html/css for 1 month, so my code will be a lot of awkward things. If you think better way in the code I wrote, please give me feedback! I will study hard by referring to it. :D

See ya!

Community feedback

@AmodeusR

Posted

The card is pretty big, indeed xD But you know, for someone studying for a month? You did a great job putting all that together! I have some pieces of advice for you:

  • Don't use percentages on paddings and margins. You don't want the boundaries of your content and elements changing accordingly to the user screen's width arbitrarily, only when it needs to.
  • At the beginning of your css files, always give to all elements the content-box: border-box property. You don't need to learn right now what it means, but it'll save you from a lot of headaches, now and in the future. To give this property to every css element, just use the * selector.
  • Work on your Github readme! Documentation is important and helps others understand the process you've been through. Do not underestimate it just because it doesn't involve coding. It's easy to find people who know how to put things together and make it ~kinda~ work, but not so many who documents its steps. Futhermore, the more you dive deep into the programming world, more you'll see how documentation is important.

This video may help you quite a lot! Kevin Powell is a really great and talented teacher, check it out :) https://www.youtube.com/watch?v=JnTPd9G6hoY

Marked as helpful

1

@DrunkenNeoguri

Posted

@AmodeusR

(I wrote it using Google Translate. Sorry for the awkward sentence!)

Thanks for the reply! After reading the replies, I thought I should study harder. > ▽<)/

After reading the comments, I have two questions!

  1. For this solution, would it have been better to use a fixed value such as 'px'? If there is a value that can be substituted for '%', which value should be used?

  2. When writing a ReadMe file, I would like to receive advice on what to write in ReadMe!

1

@AmodeusR

Posted

@DrunkenNeoguri We all need to study harder :P About your questions:

  1. Since you're on your first steps, it's ok to use pixel values, generally all beginner's tutorial use them as well, so no big problem. However, as you progress at web development, you'll learn about relative units, e. g. rem, em, vw, vh and many others. Whenever you need to declare fixed values, relative units are the best approach. Take a look at this video from Kevin Powell as well, he explains what are, generally, the best unit to use in each case: https://youtu.be/watch?v=N5wpD9Ov_To

  2. Frontend Mentor starter files guide you on how to make a good Readme for your repository, just read the readme files they provide with the starter files and you'll have a great starting point! If you want any more reference on how to write a repo though, feel free to see one of my FM challenge repos, as I use the template FM recommend us, you may get ideas on how to approach using it. If you want a headstart, this one is one of my best Readme's in my opinion 😁

https://github.com/AmodeusR/FM--nft-preview-card/

Marked as helpful

1

@DrunkenNeoguri

Posted

@AmodeusR Thank you for your precious reply! I will study by referring to the video you shared! XD

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