Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
33
Comments
10
P
Oryan Hachamoff
@oryanhach

All comments

  • 李浩•360
    @lh62863
    Submitted 2 months ago

    js relate with form binding to listen submit and input event

    1
    P
    Oryan Hachamoff•440
    @oryanhach
    Posted 2 months ago

    I have not learnt React yet so I am not on a place to criticize your code. But just one thing I think is missing, and is the background color, and centering the card, other than that it looks great!

  • Moundjid Machghour•490
    @PxMach
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm just proud to have finished

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

    I had a little trouble with my Responsive Design

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

    I am listening if you have any suggestions for improvements to offer.

    Frontend Mentor | Article preview component

    1
    P
    Oryan Hachamoff•440
    @oryanhach
    Posted 4 months ago

    It looks great! As I am a beginner, there is only one thing I would suggest, using custom properties. I recently started using them as well after watching Kevin Powell's videos. While this is a smaller project and it may be overkill, it could still help with avoiding mistakes like in terms of wrong color values.

    Marked as helpful
  • P
    Lisviks•690
    @Lisviks
    Submitted almost 3 years ago

    Meet landing page

    1
    P
    Oryan Hachamoff•440
    @oryanhach
    Posted 4 months ago

    This looks great! Much better than what I did! One thing I would suggest is just making the vertical lines a little bit thinner, but overall this solution looks so good, really pixel perfect!

  • Erick Rodrigues•660
    @SortJakke
    Submitted 4 months ago

    Testimonials grid with HTML, CSS and Grid

    1
    P
    Oryan Hachamoff•440
    @oryanhach
    Posted 4 months ago

    Looks great, much closer to the original than mine! One thing I would suggest is just to center the overall grid. I used flex to put it in the middle of the page when working on the Desktop design.

  • PresidentTree94•230
    @PresidentTree94
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I simply followed the original project and coded the solution with HTML and CSS, but I also added a Dark Mode function in Javascript. Next time, I would like to try it in other frontend languages like ReactJS.

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

    Like the last project in the unit, I did not have the Figma to reference so it was a lot of guessing and checking to get it to match the challenge as close as possible. So far, this one was the most challenging to match.

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

    I am still learning the other frontend languages, such as ReactJS, so any advice involving them would be helpful. A React extension may also be included on GitHub.

    Four Card Feature Section (with Javascript Dark Mode)

    1
    P
    Oryan Hachamoff•440
    @oryanhach
    Posted 5 months ago

    This solution looks great! I am a beginner, so I might be wrong, but I have learned many things while watching your code. One thing I would suggest is improving your custom properties' names to make them more descriptive and consistent.

    For example, instead of using --white for a color, try something like --color-white, which makes it clear that it's a color value. Similarly, for --davysGray, you could consider something like --color-davys-gray to maintain consistency in naming. Also, for --gridMinWidth, a name like --grid-min-width might be clearer.

    Making these small changes can help improve the readability and maintainability of your code, especially as your project grows. Keep up the good work!

  • Kristijan Bobovec•90
    @kristijanbobovec
    Submitted 5 months ago
    What specific areas of your project would you like help with?

    Every advice would be helpful.

    Product preview card

    1
    P
    Oryan Hachamoff•440
    @oryanhach
    Posted 5 months ago

    Hi, the solution looks great! I am a beginner so not really suitable for giving tips on that, but if I would recommend one thing is, check out Kevin Powell's code along video on this project! I followed his video, I have learnt many tips and techniques from this video.

  • Fred's GitHub•60
    @4skinSkywalker
    Submitted 5 months ago

    Fredo123Corly321

    1
    P
    Oryan Hachamoff•440
    @oryanhach
    Posted 5 months ago

    Hi, The solution looks great! One thing I would suggest though is putting more work on the colors, especially on the headers. Other than that, it looks really good!

  • Nathan Molina•280
    @Natentado
    Submitted 6 months ago

    CSS FlexBox, CSS Variables and Semantic HTML

    1
    P
    Oryan Hachamoff•440
    @oryanhach
    Posted 6 months ago

    The solution looks great! much closer to the original than mine... One thing I would suggest is not writing CSS in the HTML file, I have heard many times it is considered a bad practice.

    Marked as helpful
  • Nicolas Cappella•120
    @nicocappella
    Submitted 6 months ago

    Responsive Card

    2
    P
    Oryan Hachamoff•440
    @oryanhach
    Posted 6 months ago

    Great solution! One thing I would suggest is instead of using a span tag for the learning part, use an h1 or a p tag. A span tag is supposed to be inside of another text tag, but the learning text is a stand alone element here. Really great solution, I am having problems with giving good class names, and this solution's class names are a really interesting approach i can learn from!

  • Almeida•10
    @RamadhanAdam
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I was able to use flexbox to create a responsive website. I also made sure to use semantic HTML, which improved accessibility. Next time, I’d experiment with CSS Grid to explore more complex layout possibilities, and possibly add some CSS animations for a more interactive experience.

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

    One of the challenges I faced was ensuring the layout worked well on both mobile and desktop views. The mobile-first approach I used helped to address this by focusing on smaller screens first, and then scaling up for larger screens. Another challenge was ensuring the text around the QR code was legible on all screen sizes, which I solved by using relative units (like rems and ems) for font sizes and spacing.

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

    I'd like help with responsiveness and also a feedback on my use of Flexbox for the layout—specifically if there are any ways to make it more flexible or cleaner. Also, I’m open to suggestions on improving accessibility, particularly for users with disabilities, and how to implement best practices in this area.

    Responsive QR Code Component Using Flexbox and Semantic HTML

    1
    P
    Oryan Hachamoff•440
    @oryanhach
    Posted 6 months ago

    I am still a beginner, so not on a level to really give feedback, but I would recommend working on the overall size of the component, and making it much smaller. While i was working on the challenge I used ChatGPT as a personal teacher, while asking him questions like: how can i make this element smaller, or lower it. And the most important thing when asking chatgpt for advice, is not just copy the code solutions, but actually understanding it and learning from it. Good luck! :)

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