Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
6
Comments
23

Dan

@dtp27300 points

Hi I'm Dan! I have a passion for combining creative and technical endeavors, which is what led me to Web Development. I aim to use Frontend Mentor first as a place to learn, and then as a place to help others as well.

I’m currently learning...

Web Development Fundamentals

Latest solutions

  • Responsive Order Summary

    #bem

    Dan•300
    Submitted almost 3 years ago

    2 comments
  • Interactive Rating Component

    #bem#accessibility

    Dan•300
    Submitted almost 3 years ago

    1 comment
  • NFT Preview Card Component using HTML/CSS


    Dan•300
    Submitted almost 3 years ago

    2 comments
  • Responsive E-Learning Landing Page using Generic HTML/CSS, BEM Naming

    #accessibility#bem

    Dan•300
    Submitted almost 3 years ago

    1 comment
  • Product Preview Card Component


    Dan•300
    Submitted almost 3 years ago

    1 comment
  • QR Code Web Component using HTML and CSS


    Dan•300
    Submitted almost 3 years ago

    1 comment

Latest comments

  • Priyanshu Tiwari•150
    @d3monviking
    Submitted almost 3 years ago

    NFT Preview Card Component

    1
    Dan•300
    @dtp27
    Posted almost 3 years ago

    Hi Priyanshu!

    That looks really good overall! The one thing I would recommend is to take care of the HTML and Accessibility issues. You want to make sure to include the alt="" property, not just for accessibility, but also incase the image doesn't load for whatever reason.

    Also, adding properties like aria-label is a good idea for anchor tags to describe where the link would take you. Here's a good set of articles from MDN. Hope this helps.

    Happy coding!

    Dan

  • Cristina Kelly•140
    @cristinakellyt
    Submitted almost 3 years ago

    NFT preview card using CSS

    #accessibility#sass/scss
    3
    Dan•300
    @dtp27
    Posted almost 3 years ago

    Hi Christina!

    That looks fantastic! I noticed that you're using the BEM naming convention. It was recommended to me that I start using it as well. How have you liked using it and how does it compare with anything you've used in the past?

    Thanks!

    Dan

  • DHRUV KUMAR JHA•10
    @dhruvjha206
    Submitted almost 3 years ago

    QR Code Component

    1
    Dan•300
    @dtp27
    Posted almost 3 years ago

    Hi @dhruvjha206!

    Congrats on your first challenge, and welcome to Frontend Mentor! A few recommendations I have on your solution:

    1. I would use another p instead of span so that it's treated like a block component in normal flow instead of an inline component.
    2. It's good that you're using Flexbox to center, but I would add flex-direction: column; to make sure that the card and footer are stacked vertically instead of horizontally.
    3. For the img width, I would use max-width: 100%; so that it responsively adjusts to screen size.
    4. It also seems like you hard-coded the width .container to 1440px, which is the total width of the page the design is at. Instead, I would play around with % for the width of the .container, which will make the card responsively adjust.

    Let me know if you have any questions.

    Happy coding!

    Dan

  • Alexis Champion•160
    @iTwiixZ
    Submitted almost 3 years ago

    Utilisation de CSS Flexbox

    1
    Dan•300
    @dtp27
    Posted almost 3 years ago

    Hi Alexis!

    Pretty good solution overall! A few things I would recommend:

    1. I see you're using Flexbox in the card. I would also use it in the body, since that will then center your entire card on the page. Also include min-height: 100vh; in the body to ensure the content takes up the whole page (i.e. it'll be centered relative to the entire page). 2 . I would also change the width property in your img to max-width: 100%;. This will ensure the image scales down responsively with smaller screen sizes.
    2. I recommend setting the base font-size in the body, then using rem to scale fonts from the different elements up and down. This can make it easier to control all of the fonts.
    3. I don't think you need those <br> elements in your paragraph to match it "line-for-line". Pay attention to the design font sizing and weights, and it should take care of itself.

    Let me know if you have any questions or thoughts.

    Happy coding!

    Dan

    Marked as helpful
  • Hammad Ahmed•180
    @HammadEngr
    Submitted almost 3 years ago

    nft-preview-card using HTML and CSS

    1
    Dan•300
    @dtp27
    Posted almost 3 years ago

    Hi Hammad!

    Pretty good solution overall! Flexbox makes it super easy to center the NFT component on the page. You would to add something like this to your body:

    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    

    That will center the direct child elements on the page, which in this case is just main (your component).

    Let me know if you have any questions about this, thanks!

    Dan

    Marked as helpful
  • Filip•110
    @fica25
    Submitted almost 3 years ago

    NFT Preview Card using flexbox and grid

    2
    Dan•300
    @dtp27
    Posted almost 3 years ago

    Hi Filip!

    Great solution overall! Make sure you style your horizontal line in the component. If you're using HTML to make a <hr> component, you can do something like this in the css:

    hr {
        border: 1px solid hsl(215, 32%, 27%);
    }
    

    Also, pay attention to the font-weight property for the different elements to make sure they are similar to the design.

    Happy coding!

    Dan

    Marked as helpful
View more comments

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub