Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
19
Comments
10
Martín Beltrán
@JMBeltranDev

All comments

  • P
    zhansayatazhibayeva•640
    @zhansayatazhibayeva
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Did faster than other projects

    What challenges did you encounter, and how did you overcome them?

    easy project in comparison to other projects

    What specific areas of your project would you like help with?

    Any kind of feedback would be helpful

    Responsive 3 column preview card component

    2
    Martín Beltrán•260
    @JMBeltranDev
    Posted about 1 year ago

    In the hover you can use <outline> instead of <border> so that the card does not resize

    .luxury button:hover{
        background-color: hsl(179, 100%, 13%);
        color: #fff;
        border: 1px solid #fff;
    
    }
    
    .luxury button:hover{
        background-color: hsl(179, 100%, 13%);
        color: #fff;
        outline: 1px solid #fff;
    
    }
    
    Marked as helpful
  • Stephanie0905•230
    @Stephanie0905
    Submitted about 1 year ago

    Article component

    1
    Martín Beltrán•260
    @JMBeltranDev
    Posted about 1 year ago

    Arrow button to exit the modal is not well located.

  • P
    Lyubomir Lyubomirov•90
    @Ljubo6
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    .

    What challenges did you encounter, and how did you overcome them?

    .

    What specific areas of your project would you like help with?

    .

    Responsive landing page using CSS Grid

    1
    Martín Beltrán•260
    @JMBeltranDev
    Posted about 1 year ago

    I liked your solution

  • leodev•570
    @hangtime319
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    In this project I learned a lot about grid layout. It seems like it's an easier layout to adjust than flexbox, but it's limited. I didn't have many difficulties applying responsiveness.

    What challenges did you encounter, and how did you overcome them?

    I found few difficulties applying grid layout. But next time I will use other grid layout resources so I don't need to use media queries.

    What specific areas of your project would you like help with?

    Suggestions on how to simplify the grid layout.

    Four card feature using CSS Grid Layout responsive

    3
    Martín Beltrán•260
    @JMBeltranDev
    Posted about 1 year ago

    It seems like a good solution to me.

  • P
    Matthew•360
    @MattJM1007
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Overall this was a fairly straight forward build.

    What challenges did you encounter, and how did you overcome them?

    I am still struggling with getting the spacing just right between elements with padding and margins. I feel like there should be an easier way to do it. I also find that the text doesn't look exactly like the design file, even though I put in the same font and properties that are in the design. I am not sure why this is.

    What specific areas of your project would you like help with?

    Can anyone provide tips on how to format/layout the text elements? Is there a better option than what I did? Also, how are my media queries? Anything I can improve there?

    Responsive Product Card

    4
    Martín Beltrán•260
    @JMBeltranDev
    Posted about 1 year ago

    Note that to use different image sizes, you load them simultaneously, and in the media query, you use a display:none. This implies that if you open the page on a mobile device, the desktop-sized image is still loaded, which has an impact on performance. The following code is an example of how the image would be loaded depending on the screen size. <picture class="product__img"> <source media="(min-width:600px)" srcset="./images/image-product-desktop.jpg"> <img src="./images/image-product-mobile.jpg" alt="perfume imagen"> </picture>

    Marked as helpful
  • Quentin•330
    @QuentinPetton
    Submitted about 1 year ago

    Product-preview-card-component

    1
    Martín Beltrán•260
    @JMBeltranDev
    Posted about 1 year ago

    Very good solution, you just need to load the image according to the size of the screen.

  • Eric•70
    @esurreal
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud that I was able to use resources available to figure out a solution to the problem.

    What challenges did you encounter, and how did you overcome them?

    This one was trickier than the last one. I had to use multiple span tags and figure out how to make a table that would look like the design file. I overcame them by looking up examples on stack overflow.

    What specific areas of your project would you like help with?

    I couldn't get the numbered list to change the color of the numbers without messing something up.

    Recipe Page using CSS and HTML

    1
    Martín Beltrán•260
    @JMBeltranDev
    Posted about 1 year ago

    You still need to make the responsive design, the good thing is to keep practicing and improve day by day.

  • Chris•110
    @cgyeager
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    .

    What challenges did you encounter, and how did you overcome them?

    .

    What specific areas of your project would you like help with?

    .

    Social Links Profile

    1
    Martín Beltrán•260
    @JMBeltranDev
    Posted about 1 year ago

    You can move the CSS code that you have in the HTML to the CSS file, you also missed the hover effect in the links, the important thing is to practice to improve our code.

  • andiaz•150
    @andiaz
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I enjoyed trying out a bit of animations for the hover states! It also felt good that I have started feeling a bit more comfortable using flex.

    What challenges did you encounter, and how did you overcome them?

    I struggled to find some good way to resize the "Learning" chip/button without giving it a fixed width.

    What specific areas of your project would you like help with?

    I'd like to better understand flex-basis, flex-grow and flex-shrink.

    I'd also really like to know if there's a better way than just setting a fixed width for the Learning button. Ideally I'd like that button/chip to grow dynamically based on its content (but not take up the full width as the rest of the content).

    Blog preview card with animations on hover

    1
    Martín Beltrán•260
    @JMBeltranDev
    Posted about 1 year ago

    For "Learning" to use 'width: fit-content' that makes the background color fit the text content, I tried to use 'display:inline-block' but it didn't work.

  • CharlieDW•20
    @CharlieDW
    Submitted about 1 year ago

    QR Code component using flex-box

    1
    Martín Beltrán•260
    @JMBeltranDev
    Posted about 1 year ago

    The style code that is in the HTML should be in the CSS file. Instead of using an h4 you should have used an h1 or an h2. It was not necessary to use media queries.

    Marked as helpful
Frontend Mentor logo

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