Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
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

Responsive card layout using CSS Grid and Flexbox

P

@justinconnell

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I took a mobile first approach and decided to use CSS Grid for the layout - one ting that tripped me up was implementing the desktop version and trying to get the grid centered on the screen - to solve this I set the <main> to 100vh and 100vw, which allowed me to set the margin on the grid to 'auto'. I also tried using BEM - I'm still new to this so any feedback that will help me write cleaner code will be much appreciated.

Community feedback

P
Leon_J 140

@reaperxyndrome

Posted

Hello, I really like your solution and the simplicity of it all . It looks good and looks similar to the design although there are some positional differences, is that intentional? Also, I have looked at the GitHub repository and I see that you have added a README.md file which includes your process. This is really good, I advice you to keep up the good work. I would also would like to provide some advice regarding what next steps you can take: learn tailwind CSS. Why? Because tailwind CSS will make writing CSS much faster, especially when you pair it with frontend frameworks that allow you to decompose your HTML (JSX) into multiple components. Tailwind CSS is an atomic CSS utility classes framework. There are some things you need to configure first though, which you can look into the Tailwind documentation. https://tailwindcss.com/docs/installation

That is all from me. Keep up what you are doing 👍. Once again, congratulations and cheers! 🎉🎉🎉🥳🥳🥳

Marked as helpful

0

P

@justinconnell

Posted

Hi @LeonJ142857, Thanks so much for taking the time to provide me constructive review and feedback, I really appreciate it. I noticed the positioning is out as you pointed out and am fixing that - I put that down to a lack of attention to detail and assuming that the card was centered. The next challenge I will be using TailwindCSS - I was a bit hesitant to get onto a framework too soon, but as you suggest to really move up I should move on and continue building on the foundation I have. Thanks again and all the best for 2024!

1

@DrissssirD

Posted

The design looks exactly like the original Good job Justin keep doing great

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