Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile-First Blogr Landing Page using Flexbox and Grid with GSAP

@rontoyhacao

Desktop design screenshot for the Blogr landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, it's been awhile. I have to say this challenge really had me depressed because it's my first landing page lol. The layout is very tricky for me and it took me time to pull it off. I hope someone here could check out my code because it's kind of a mess and I'm not really sure if it's okay. It's my first time doing the mobile-first approach. Also I tried to use BEM in doing css. One thing that bothers me is that when the page opens for the first time on mobile, the second image isn't centered. It only gets fixed on reload. Do you guys know why? I'm hoping for any honest feedback.

Community feedback

@pikapikamart

Posted

Hey, upon looking at your stylings, the transform: translate is the causing it, but not it itself, but when you scroll to the element and fires something, is that what GSAP does? Like an event listener? . Also looking at it, there doesn't seem to add any stylings but a transform is appearing on it. I can't really much explain how it does since I don't see any codes adding a style to it. But if you were to use something that fires when you're element is seen, I personally use IntersectionObserver api for that

0

@rontoyhacao

Posted

@pikamart Hi, the transform property is because of GSAP, I think it's GSAP that's causing it to not be centered at its first load. It's my first time using GSAP that is why I have no idea about it. I was just curious on using it. But anyhow thank you for the response I appreciate it. :))

0

@pikapikamart

Posted

@rontoyhacao Oh I see, well goodluck to using GSAP for other challenges^^

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord