Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
2
Comments
4
Juma Khatibu
@lockojk4

All comments

  • Zeynab Movasaqpoor•500
    @zeynabmvs
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of successfully implementing a responsive Bento Grid layout while enhancing it with smooth animations. This project allowed me to refresh my CSS Grid skills and experiment with animations, making the UI more engaging.

    Next time, I would like to explore more advanced animation techniques and optimize CSS animations for better performance. Additionally, I want to experiment with GSAP for complex animations that go beyond basic CSS keyframes.

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

    The main challenge I faced was achieving the exact layout for the grid that closely matched the design. To solve this, I divided the layout into three smaller subgrids, each handling a specific section of the design. I then merged these subgrids back into the overall grid using CSS Grid areas. This approach helped me create a more flexible and organized structure, ensuring the grid aligned well with the design requirements.

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

    I’d love feedback on the animations, specifically on how they enhance the user experience. If there are any areas where the animations could be smoother or more effective, I’d appreciate suggestions on improving them.

    Responsive bento grid landing page with cool animations, pure css & js

    #pure-css
    2
    Juma Khatibu•50
    @lockojk4
    Posted 5 months ago

    Great work, if i may ask is it allowed to add somethings which they were not given in the assets like the way you did?. Because the combo of animation looks great on your project, and if so, you're supposed to have a higher rank.

  • Juliette Villarroel•70
    @juliettedb-v
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I'm very proud of my HTML and BEM structure, I had to do it twice (read my progress) and I'd like to try responsive design mobile first to maybe avoid that kind of problems.

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

    Everything was nice with the desktop view since I did it first, but in the moment I started the responsive, I noticed my cards were distributed differently so I took a deep breath, a long break and then fixed it.

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

    I'd like recommendations for the BEM structure. Is it good? what would you do differently? And If you have other recommendations for CSS, please let me now!

    Bento grid using CSS-grid and BEM structure!

    #bem
    1
    Juma Khatibu•50
    @lockojk4
    Posted 5 months ago

    Great work, yours is better than mine, your CSS code is 486 line try and learn some shortcuts to save repetition of same code in every selector.

    Marked as helpful
  • minLeya•50
    @minLeya
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I made mobile version, hooray! Used mobile first workflow. I enjoyed writing code for this project.

    Landing Page Using CSS Grid

    1
    Juma Khatibu•50
    @lockojk4
    Posted 5 months ago

    nice work, it looks better than mine.

  • Maryam Mazidi•20
    @maryamazidi
    Submitted 5 months ago

    flex box

    1
    Juma Khatibu•50
    @lockojk4
    Posted 5 months ago

    great work! After linking a font from google just putting it in body property is enough to cover the whole body with the same font-family.Unless you want it to differ from others. I appreciate the work of your hands, yours looks nice than mine.

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