All solutions

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

Be able to finish this project similar to the original design.

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

The hover effect on the image. The small view icon only appears in active stage and I used opacity to solve this problem and hoped it is correct. The dark theme color makes the project harder to finish.

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

All feedback is welcome!

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

Using grid layout for this project and getting the correct hover effect.

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

all feedback is welcome!

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

To be able to produce a layout similar to the project using grid layout. Using grid layout would be a better choice because there are horizontal and vertical alignments to deal with.

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

Using grid layout is a little challenging because I'm still learning it. It took me sometime to figure out the layout but it's great to be able to do it! Also, finding the right colors is a bit difficult to me somehow?! They always look different from the project design.

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

All feedback is welcome!

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

Using grid layout for this project. This is the first time I tried using grid and I'm happy that I'm able to accomplish this layout. I also used flex for individual card's layout which is also possible.

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

Trying to vertically center a grid item using align-self.

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

All feedback is welcome

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

using css flexbox layout, importing google fonts, using :root selectors

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

completing this project using mobile first approach.

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

all feedback is welcome

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

I tried using @font-face for this project. Also, I tried to align the layout of the project as close as possible.

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

The css file was very long and messy at first because I was targeting every single element. It took me a bit of time to refine the file by not repeating the same style on similar elements. The headings and lists are identical/similar in style so I styled them with the identical style first and added element specific style after.

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

I was unable to align the list markers with the list items when it is in mobile design. They look different from the original.

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

Instead of using pixels in sizing, I tried to use rem unit as much as possible this time.

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

The design is in dark mode this time which looks cool but when it comes to creating it, it's a bit difficult to see the design in detail. I tried my best to recreate it as close as possible.

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

all feedback is welcome.

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

Setting the layout as similar as the original design. Setting the card at the center of the screen and also aligning the image and content within the card according to the original design.

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

The card in active state has 2 effects. One effect is on a parent element and the other is on a child element. I had to figure out how to apply different effects on a parent element and a child element when the child element is on hover. CSS's pointer-events property solved the problem.

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

This solution may not be the best responsive design but I created it by looking at the mobile design pic provided. This solution does not look very good at very small device screen.

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

using CSS flexbox to place items in the center

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

centering the text items by using flexbox

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

all feedback is welcome