Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
21
Comments
4
Alexander Romero
@AlexanderTejedor

All comments

  • arunbabunt•270
    @arunbungalowil
    Submitted 12 months ago

    NTF preview card mobile first design using HTML and CSS

    1
    Alexander Romero•260
    @AlexanderTejedor
    Posted 12 months ago

    Hello, my friend! 👋 I like what you did! Here are some tips and details that might be useful to you:

    • First, there's a small error in the responsiveness. While it is being modified at 1440px, as you resize the page from 700px to 1440px, the container keeps expanding. I recommend changing the @media breakpoint from 700px to ensure it scales perfectly without errors, or create another one for tablets. 📱

    • Second, you missed the hover effects on the title image and the creator's name. I recommend adding and implementing them; it will make your card look nicer. 💎

    That's all. I hope you can improve it and keep learning. Best of luck! 💪

    Marked as helpful
  • Lyna•60
    @djelidlyna
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    all feedback thank you

    Product (parfum)preview card component

    2
    Alexander Romero•260
    @AlexanderTejedor
    Posted 12 months ago

    Hi, 👋

    In your preview site I can see the image but not in your design comparison, I recommend that you update the photo so we can see your work 👌, Here are some extra recommendations:

    • You can use HTML semantics in future projects. It is very useful for the browser to position your pages much better 💎.
    • You can start with mobile design and then adjust the page to fit the type of resolution. You can do this by looking for resources that explain mobile-first design 📱.
    • To take screenshots of your page, I recommend the following Google extension https://chromewebstore.google.com/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl?hl=es it is very good!! 📷

    The only thing left to do is improve the details of the size of the fonts, and it will improve your challenge a lot, otherwise a very good attempt.🙌.

  • JessB74•50
    @JessB74
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of being able to write the whole code by myself for the first time. I will take time to research more about things I'm not familiar with before beginning the project next time.

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

    There were properties I didn't know and it was my first time inserting a SVG file. I came across hsl for the first time as well. I googled and used MDN docs and W3 schools to find answers to things I didn't know. I also had a bit of trouble centering the box and making it responsive. I believe my main focus was my solution to look identical to the result however there's room for improvement so I'm ready to try more projects.

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

    I need help with CSS positioning or putting a div in the exact position I want it to be. I would also appreciate any feedback as well. As a self-taught individual aspiring to be a web developer, I can use all the resources and feedback I can get to help me do better.

    Blog Preview card using HTML and CSS

    3
    Alexander Romero•260
    @AlexanderTejedor
    Posted 12 months ago

    Hello! 👋

    I always use this website https://developer.mozilla.org/es/, called MDN, it's official and updated documentation that can help you study and understand more about the world of web design and development. Another thing you can work on is Figma, since this challenge allows you to view the Figma file, this file already gives you all the graphic styles, fonts, borders, shadows, etc.

    I hope this helps you, and good luck with your upcoming challenges 👏.

    Marked as helpful
  • Abolaji Nofiu•50
    @JOAN-96
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of the timeframe it took me to complete the challenge. However, I will make use of certain html tags and grid more.

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

    The only challenge I did encounter was aligning the list item which I did by using margins and paddings.

    Recipe Page

    1
    Alexander Romero•260
    @AlexanderTejedor
    Posted 12 months ago

    Hi, 👋

    I like your work, but here are some recommendations 😎:

    • You can use HTML semantics in future projects. It is very useful for the browser to position your pages much better 💎.
    • I highly recommend using Google Fonts to link your fonts. It's super useful for everyone to see the same typography on the page 🈶.
    • You can start with mobile design and then adjust the page to fit the type of resolution. You can do this by looking for resources that explain mobile-first design 📱.

    Other than that, your work is very good. I hope you keep improving and achieve fantastic things 🙌.

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