nft-preview-card using html and css with flex layout

Community feedback

• 

  Kelvin•770

  @githukelvinPosted over 2 years ago

  @grgrocky Hi

  I wanna help you with the image styling i mean the svg. So instead of adding the div of the avatar svg to style it you can just use . To style the svg you could have added a class or use this i mean for you you used id will work the same #creator-name svg {here you write your styling and for the border you can you use this border: 1px solid hsl(0,0%,100%;} this will work too . Try this will help you remove the html issue replace section with divs

  But the best idea i will give you is try stop using id and instead use classes they work well. And trying using divs in a div not section in a divit should vice versa divs will do well in styling

  Marked as helpful

  0

  ---

  

  Rocky Gurung•50

  @grgrockyPosted over 2 years ago

  @githukelvin Sounds good. Thanks mate for giving me different view. I will surely apply it. Cheers.

  0

  

  Kelvin•770

  @githukelvinPosted over 2 years ago

  @grgrocky my pleasure happy coding buddy

  1
• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Hi Rocky!

  I just reviewed your project and your HTML layout and structure is fine.

  Personally I don't recommend you to use section, when making these components. Most newbie level projects are components that can be reused in a page so they will be added in some section of this page. Therefore section is usually used for sections of a page not for components, they usually use div to be able to group the blocks of the component.

  That's why in the report it says that it expects your other section to have an h2 inside, although as a general rule it is not necessary to add it, it still detects this error, from my opinion I would recommend you not to use section unless you have to group different themes of your page (sections).

  On the other hand, although your layout is fine, you are missing the active states. If you check the design folder you will find an image with the active states that refers to when you pass the courses or click on something it activates or changes color for example. Add them to finish the challenge completely.

  Good Luck!

  Marked as helpful

  0

  ---

  

  Rocky Gurung•50

  @grgrockyPosted over 2 years ago

  @Sdann26 Exactly, I also had doubt about section. Thanks mate for pointing it out. And I didn't have any idea what to do with this active states. Thank you for clarifying it.

  Cheers

  1

  

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  @grgrocky Don't worry, just add them with the hover pseudoclass. By the way, if you remove all the errors from your report you can generate a new one to have 0 errors.

  Good Coding!

  Marked as helpful

  1

  

  Rocky Gurung•50

  @grgrockyPosted over 2 years ago

  @Sdann26 Thanks mate. I will. Cheers

  1