Skip to content
OverviewSolutions
10
Comments
12

nerometa

@nerometa280 points

Hello there! I'm nerometa. My coding journey started the day I got a software developer internship since May 2022. I also wanna add my own special CSS sauce too, according to one person I followed after I saw their work for the first time😝

I’m currently learning...

Angular, Typescript, Tailwind CSS, Nest.js

Latest solutions

View more solutions

Latest comments

  • nerometa•280
    @nerometa

    Wow! Great job of you to make this looks very close to the design. A few recommendations, though:

    • The HTML of the price and time section. It looks kinda odd to me when you put an <img> tag inside <p> tag, which mainly uses for texts. I think you can improve upon it by grouping these elements together with <div>, then use <img> for icon and maybe <span> for text so it begins on the same line as your icon. Something like this:
    <div>
<img src="ethereum.svg" alt="Ethereum">
<span>0.041 ETH</span>
</div>
    • This is the matter of taste, but I noticed that any links on the card (like the NFT name or the author's name), you tend to put an <a> tag over any text element to make it resembles a link. I kinda get it. Personally, I would put an <a> tag inside text element like:
    <span>I would like to introduce you to this <a href="#">hyperlink</a>.</span>

    That's my two cents. You're doing great!

    Marked as helpful
  • nerometa•280
    @nerometa

    This is truly amazing, Lucas! Love the hover effect and your take on color that's entirely different to the design.

    After seeing this, I HAVE to follow you man. You're that amazing😀

  • nerometa•280
    @nerometa

    Hmm, looks like your colors are a bit off. But don't worry, it's pretty easy for you to do and I know you can do it.

    in your tailwind.config.js file, you can add custom colors from the style guide that's been provided with the challenge like this:

    theme: { extend: { colors: { "custom-color": "#FF0000" } } }

    and to use it as a utility class, you can then do bg-custom-color or text-custom-color since you've put your color in your config file, Tailwind will know.

    Also, good work! I wanna see you improve this!

  • nerometa•280
    @nerometa

    You're doing great so far! Here's one of the solution I use for your image issue:

    You make 2 <img> tags with different images together, maybe assign a class to work with CSS later. Suppose you got one <img> with mobile image and another <img> for desktop image. Then, for it to change, you put all of that <img> into @media queries and set property display: none when you want to hide it and set display: block for an image you want to show.

    Suppose you got your images and you decided that 720px will be your breakpoint. Set that @media query to (max-width: 720px), which means anything that's below 720px will show up (smaller devices). You might put your desktop image to display: none and mobile image to display: block.

    You don't have to do another @media (min-width: 720px) for desktop since ANYTHING that's not in media query works similar to that. So, out of @media query, you set your desktop image to display: block and then your mobile image to display: none

    Other than that, great job! Keep coding✌⌨

  • nerometa•280
    @nerometa

    ทุกอย่างโอเคเลยฮะ responsive ก็ทำได้ดีเลย ทีนี้ผมอยากให้ลองอะไรหน่อย

    • ตั้งค่า <body> ให้มีความสูงเท่าขนาดหน้าจอ (height: 100% หรือ height: 100vh)
    • ทำ wrapper <div> ครอบตัวคอนเทนต์หลักอีกทีนึง กำหนดให้ทั้งความกว้างและความสูงขนาดเต็มหน้าจอเหมือนกัน
    • wrapper ตัวนั้นให้ display เป็น flex, justify-content เป็น center เพื่อจัดตำแหน่งตามแนวนอน แล้ว align-items: center เพื่อจัดตำแหน่งตามแนวตั้ง แล้วตัวคอนเทนต์หลักจะอยู่กลางจอพอดีฮะ
  • nerometa•280
    @nerometa

    Like others say, it seems like you didn't include images folder into your project. Make sure you push it into Github so your image will show. Add an 'alt' for more accessibility.

    I'm not certain about filepath. maybe "./images/image.png" works, maybe "images/image.png" works depends on where you deploy your app, I think.

    Marked as helpful
View more comments