All solutions

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

I think I came pretty close. Some letter spacing or a font-size here or there might be slightly off, but other then two my major flaws, I should have gotten it mostly right.

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

My two biggest problems where:

1.) The size of the cards and how they are exactly ordered and spaced out on the grid in the MockUp. If you look at the very bottom of my CSS-file you can see my grid area for the desktop view using an excessive amount of colums and rows. However, that was my only solution to get the size and spacing of the cards as close as possible to the actual spacing and sizing of the MockUp.

2.) In the MockUp you can see that the paragraph of the card to the far right card (Kira Whittle) uses a slightly different gap size between it's headline and it's paragraph and is probably meant to adjust dynamically. I tried everything from grids to flex for that, but just could not get it to work for me.

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

Maybe someone knows a better solution to my two problems. Or if you notice anything else, please let me know.

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

I think when it comes to the MockUp, I am pretty close.

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

My biggest problem was the responsiveness. My site now works as was demanded, but I wish it would behave more fluidly and organically when you resize it. I know it is possible even without a Media Query and by just using the grid layout alone, to make the grid just change its layout as you resize the page.

Right now my CSS is a bit of a mess, because of all the adjustments I needed to apply to the Media Query for the mobile version of the page. And when you resize it, it just snaps into into its nerw layout. I wish it would do it more smoothly.

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

Maybe someone could explain to mehow to make the grid grow and shrink and change it's layout when resizing the page more smoothly, when you start out with a complicated layout like in this challenge.

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

I think I came pretty close. I don't know if all the colors are correct, because I didn't see all of the ones mentioned in the style-guide actually being applied on the MockUp. I don't think I had to use the two blue colors once. But I had to color pick and then add another even darker cyan. that wasn't even mentioned in the style guide, for the active effect on the button.

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

The Media Query stuff was a bit tricky at first, but it was pretty cool to figurte out how to make one image appear and the other one dissapear. For the mobile screen version I had to adjust the margin between the text elements in order to look like the MockUp. Maybe there is a better way, by applying flex to the divs, but I don't know.

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

If you find any flaws or mistakes or know any better ways to code, let me know.

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

I think I came pretty close. Once again the MockUp did not give any detailed measurements, so I had to eyeball it. The distance between the bullet pointsand the list items should be larger, but I did not realize this until now. The same goes for the size of the bullet points themselves. Maybe I will take care of it later.

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

I think my code is pretty cluttered. I used a few too many classes and probably could have done a more effecient job with them in my CSS. Well, I am still learning. Maybe I will clean it up a bit later on.

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

Whatever else you do notice.

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

I think it's pretty close to the MockUp

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

None. In fact it was done pretty fast.

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

None.

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

I think it's allright.

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

No accurate measurements in the MockUp and I wasn't able to make the image and headline shrink correctly as shown in the design file for mobile devices.

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

None

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

I think it is okay, but nothing perfect.

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

The MockUp and details about the specific measurements where really vague. In the screenshot my solution has the wrong text color on the little paragraph, but I later fixed this and now you can see it with the correct color on the preview site.

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

Whatever you notice.