Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Base Apparel coming soon page

James 390

@neenreva

Desktop design screenshot for the Base Apparel coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Spent way longer on this then I should have. I knew the layout switch between web/mobile would lend itself using grid for layout so I took the opportunity to explore css grid. Found that when you've gained layout intuition from using flexbox, grid challenges that quite a bit. Containers are important and simpler concepts like aligning items are not like you'd expect. Still worth the exploration and definitely something I need to practice more. Scaling seems to be my biggest issue here. My guess is that I am not using the grid-template props in the best way. I've picked up that these two are often used with each other and I now am starting to break down layout with that perspective.

Community feedback

Prince Roy 1,210

@iprinceroyy

Posted

there should not be any margins around the page in a mobile view as well as in a tab view. An image should cover the full width & try to fix other contents with respect to it. So that your page will be more attractive.

Marked as helpful

0

James 390

@neenreva

Posted

@iprinceroyy the padding behaved in an unexpected way. I reworked it with vw.

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