Skip to content
OverviewSolutions
17
Comments
4
Webdevsonu
@Webdevsonu

All comments

  • Webdevsonu•270
    @WebdevsonuPosted almost 2 years ago

    @burak2482 Nice job creating NFT preview card component Burak Durmuşoğlu. You made your design responsive and clean but as I noticed you may have missed to implement some of the hover effects on the image and some links. You could add hover effects easily by using some pseudo- class in CSS for example, link: hover, a:hover. You can get more info about CSS hover here. I want to suggest you to include semantic tags in you HTML code so you wouldn't have to use div tags every time. Get more info here. I hope this proves helpful to you.

    Happy coding

    Marked as helpful
    1
  • Webdevsonu•270
    @WebdevsonuPosted almost 2 years ago

    @Galin-Dermendjiev Hello there, great job taking on this challenge. Have you heard of media queries, its is very good tool to make a website responsive. It would have been easy if you used it here. In media query you can put a condition, when it will change, a query will be applied for example, If width of a page decrease, some images will change accordingly. I'd recommend watching a YouTube tutorial for it. All you just have to search for is "Media Queries" on YouTube and you should find relevant information on your feeds. And there was few contents for this challenge you could have also use sematic HTML tags like <main> ,<section> etc. So you wont need to keep repeating div tags and putting classes on them. Hope you find this info useful.

    Happy Coding!

    0
  • Webdevsonu•270
    @WebdevsonuPosted almost 2 years ago

    Good job completing the challenge, you made it look exactly alike. You could use semantic HTML in your code, so you wont keep cluttering with div tags(You can learn more about semantic HTML herehttps://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html). Try to give enough padding around your content so it wont overflow near the edge. And yes you need to make your site responsive to mobile screen as well.

    Marked as helpful
    1
  • Valeria Castro•20
    @soul2seulSubmitted almost 2 years ago

    what's best practices when it comes to css organizing that might be flawed in my code? could i save my code from putting too many div tags? could i improve my use of flex box?

    nft preview card using css

    1
    Webdevsonu•270
    @WebdevsonuPosted almost 2 years ago

    @Valeria Castro Nice job creating NFT preview card component with HTML and CSS. You did good by making your code clean. To organize your CSS code you can use one line for each one of code. As I prefer to write each property on a separate line, and use indentation to group related rules. For example:

    #content { /* css / } #content div { / css / } #content span { / css / } #content etc { / css */ } And to minimize the use of div tags you can use semantics in your HTML code. Semantic HTML is a type of a tag which is designed for specific content you can assign to like <main> tag is used for main content of your document and you can use <section> tag to add a section. For more info on semantics you can check here, (https://developer.mozilla.org/en-US/docs/Glossary/Semantics).

    Marked as helpful
    1