All solutions

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

CSS grid is incredible for building complex, responsive layouts. I learned how to utilize grid-template-areas to make incredibly flexible layouts, making it a breeze to move things around as needed. Using this simple setup:

.grid-container {
  display: grid;
  gap: 1.5rem;
  grid-auto-columns: 1fr;
  grid-template-areas:
    "card-1"
    "card-2"
    "card-3"
    "card-4"
    "card-5";

  padding-block: 2rem;
  margin-inline: auto;
  width: min(95%, 70rem);
}

All I needed to do was rearrange the layout in a media query:

@media screen and (min-width: 70em) {
  .grid-container {
    grid-template-areas:
      "card-1 card-1 card-2 card-5"
      "card-3 card-4 card-4 card-5";
  }
}

And just like that, you have two totally different layouts for mobile and web, both fully responsive. It truly is a beautiful thing!

Also took advantage of CSS psuedo selectors to make styling the grid easier.

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

Using all of the pseudo selectors, I ran into some styling conflicts and some styles overriding others and all that fun stuff. Thankfully I got it all sorted out pretty quickly!

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

Getting the CSS grid to actually work, even if I am unhappy with it.

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

Getting CSS grid to work. Honestly, for some reason, CSS grid is so hard for me to wrap my head around. After going through all the reading material, I actually felt like I had a solid grasp of it, finally! But then I went to actually do it, and it was not so easy. Getting the initial layout was pretty simple, actually. It was figuring how to make it responsive. I knew that I should do it without using media queries, but I could not figure it out, so I just resorted to using media queries.

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

CSS Grid, haha. I'm sure someone better than me would like at my code and see so many dumb decisions. And, I know there is a way to do it without media queries but I couldn't figure it out.

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

Getting the dynamic picture imports working and styled.

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

the card component has a border-radius, but the image was covering the border-radius (because it's square, obv.). At first, I tried to apply border-top-left and border-bottom-left to the img, which worked fine, until I checked the mobile layout and realized the position of the image changes (in mobile, top-left and top-right need radius). I could have just used a media query to override border-bottom-left and set border-top-right instead, but, my spidey-senses were tingling and I knew there had to be a better way. This is 2024 afterall, we don't need to be that verbose with our CSS, right?

Sure enough, a quick google search revealed that all I needed to do was apply overflow: hidden to the card container, and boom - just like that, the problem was solved.

So, this:

picture img {
  /* ... */
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

@media (max-width: 768px) {
  /* ... */
  border-bottom-left-radius: none;
  border-top-right-radius: 10px;
}

became this:

.card {
  /* ... */
  overflow: hidden;
}

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

Not over-relying on flex box, and creating/styling the table (I know that's not really a big deal, but I try and avoid tables because I hate them so much for some reason). Also, using more semantic HTML instead of throwing divs all over the place, and finally, how comfortable I've gotten implementing Figma designs.

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

The mobile layout of the Card, I had trouble implementing the image change, specifically getting it fixed to the top of the page with full width. I thought it would be straightforward, but the I kept running into issues (the image would not take up the full width, instead it would just make the entire card smaller, things like that, etc.). I tried position absolute, but then it ignored the content below it. Finally, I got it working by setting position: absolute; top: 0; left: 0 and then moving the card content down like 300px to be below the image, but 1) that didn't feel right, and I'm sure it's the wrong way to do it, but 2), most importantly, I just didn't like the way it looked. Of course if this was an actual company I would stick to their design, but since this is going in my projects I went with what I thought looked best (image still has padding around it).

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

Even though I don't like the way it looks so I went another route, I do want to know: what is the best way to implement the correct styling for the image for the mobile layout (fixed to the top, full width)?

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

Implementing the Figma designs. That's what I am most unfamiliar with, but this time around I felt much more comfortable. I am proud of the fact that I felt comfortable and confident pretty much the entire time, and I knew exactly what to do and how to do it.

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

Trying to make the profile social links accessible. This wasn't a code issue which is what made it so difficult to debug... Eventually, I discovered it was simply a Safari issue that was preventing me from being able to tab between the links.

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

Implementing the Figma designs precisely, as I'm just learning how to use it.

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

HTML/CSS is still pretty straightforward for me; mainly it's just working with Figma and implementing the designs.

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

I could not figure out how to dynamically change font-size without using media queries. I normally use TailwindCSS, which makes something like that a piece of cake. Couldn't figure out how (and I don't know why you would even do it without media queries) so I just ended up using media queries. Would be curious to hear the solution though!

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

Using Figma for the first time!

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

How to navigate Figma, honestly. Trying to figure out how to utilize all the features, make sense of everything, and find the things I was looking for.