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

Feature Cards using Grid and Flex

P
Andy 140

@AStombaugh

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm proud that I got through it, honestly. It seemed simple enough at first but by taking a mobile-first approach and knocking out what felt like a simple layout, the desktop layout absolutely threw me for a loop. I kind of wish I had started from the desktop layout and then reduced to mobile as a single column was easy enough but the varying positions of the cards in the desktop layout was a lot harder to tackle than I thought it would be.

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

Getting the left and right cards on the desktop to align to the vertical center of the container. At first, I tried using flex and separating everything into its own column but that messed with the mobile layout and felt clumsy overall. I ended up changing the layout from flex-based to grid-based on desktop. I don't have a ton of experience using Grid so I had to do some research on MDN to see how I could use Grid attributes to achieve the desktop design and it took a while.

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

Is there a more efficient, less complicated approach to this? Is mixing Grid and Flex okay as long as it achieves the solution or should I have stuck to one or the other and worked my way through it? This project was frustrating and I'm not sure if I just made it more complicated than it had to be and that's why I struggled with it so much.

Community feedback

Alex 3,130

@Alex-Archer-I

Posted

Hi!

I can feel the pain in your words, man =)

But actually you did the desktop part right! For mobile version you doesn't have to change it to flex you can just change grid-template-columns: repeat(3, auto) to grid-template-columns: 1fr (I suggest you to use fr instead of auto but that isn't the matter on this case). To slightly reduce your code you can skip this part:

  .team-builder {
    grid-column: 2;
  }

  .karma {
    grid-column: 2;
  }

They'll take their place by themselves. And to answer your question - yeah it's ok to combine different approaches if it helps you to achieve result, just doesn't really necessary here.

Also you could make color lines with border-top property. It'll be a bit easier =)

So, congrats with grid practice, glad to see you improve, even if don't fell so =)

P.S. And I'm really sorry, but there is a list here...

Marked as helpful

1

P
Andy 140

@AStombaugh

Posted

@Alex-Archer-I Thank you for the feedback as always! I think if I had started with the desktop and started with Grid I would have just ended with that instead of ending up with multiple approaches. I think I just got flustered when I couldn't figure out the desktop layout after finishing the mobile version first.

When you say list, do you mean the article elements should have been a list instead of articles? I think that probably makes sense since none of the elements were necessarily "individual" but rather a collective, so a list probably would have made more sense >___<

1
Alex 3,130

@Alex-Archer-I

Posted

@AStombaugh

That nothing more than a lack of practice. If you were more familiar with grid you have noticed it at the start. And, I know, that grid could seems very complex at first, but with practice your brain will obtain autoclick on it =)

And yes, I was talking about ul - li stuff. They could be an articles, but guess they have to less content to it.

Oh, can I take advantage of situation and ask you for an advice as someone from a graphic design environment?

I'm working for test task for web studio with figma template. And the height of the template block is lager than average screen (at least than my screen =)). But it seems to me that the layout assumes the one-screen look. So, the question is - do designers take specific screen sizes into account when preparing layouts? Another words, should I adjust the values or just do as it is?

0
P
Andy 140

@AStombaugh

Posted

@Alex-Archer-I When I went to school, I was taught to design at the current average for a phone, tablet, and desktop. We didn't explore much of what happened once it was in the hands of a developer, it was different disciplines. I learned more about dev and artist relationships later on from 3D modeling because a model can't just "look good"; it also has to be able to be rigged, textured, and animated efficiently.

In my opinion, I think adjusting the values for the sake of functionality is the right approach, based on what I learned when I was getting my last degree.

(Hopefully that answered your question!)

1
Alex 3,130

@Alex-Archer-I

Posted

@AStombaugh

3D modeling? Wow, that's so cool! Is it possible to see your works somewhere or you did not work with it outside of school?

And yeah, you answered my question it some way, thank you! I was trying to look at this from the designer's point of view. But I already try to reduce spaces between elements and now it's all looks too bunchy. So guess I should try to find a compromise.

(Really, I just don't want them refuse to hire me cos I "can't follow the template" =))

0
P
Andy 140

@AStombaugh

Posted

@Alex-Archer-I I decided to pursue the design discipline instead, more stable job market :)

1
Alex 3,130

@Alex-Archer-I

Posted

@AStombaugh

I see. Still cool nonetheless =) That why I love this place - you can meet so many interesting people with different backgrounds.

Thanks again =)

1

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