All solutions

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

Receive feedback & suggestion from fellow developers for previous challenges and be able to apply those suggestions to this challenges.

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

Applying grid system for both the cards container and the cards themselves seemed to work on firefox, but the elements alignment is messed up in other browsers (chrome & edge). I fixed them by changing the display of the cards from grid system to flexbox.

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

If you can point out anything that violates the best practices of HTML and CSS in my code, I would be very appreciated and gladly learn from it.

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

In the next update, I would try to write styles using a pre-processor (Sass)

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

Challenges

1. The difference of element position between mobile (image on top of content) vs desktop (side by side) Overcame by using a wrapper div and applying display:flex in the desktop mode
2. Conditional loading different size of image for different screen size by using html only. Overcame by self-research and found out the `` tag.

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

Nothing for now.

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

Get a solution that's quite similar to the design image, without design files.

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

Handle image size to look good on different screen sizes. My current method: Using vh unit to set the height of the image until it looks good for my eye, so it's quite personal-based, without any formula.

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

I'm looking for any articles / guidances about best practices when working with image size for different screen sizes. If you could provide some, I would be very appreciated.

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

Be able to implement the solution that looks close to the design, without design file.

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

No design file (Figma) is provided (since I'm using free account), therefore it would be impossible to get the distance (margin, padding, etc.) between elements correctly. So I overcame that by using the distance of previous solutions' designs.

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

Nothing particularly.

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

Complete the challenge in a quicker duration than the first challenge.

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

Since this challenge is mostly HTML & CSS, there is not actual significant challenge encountered.

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

Nothing for now.

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

Most proud of: Be able to complete the whole challenge and be able to breakdown and apply styling from the design (Figma) to the css code

Would do differently next time: Read the guidance (if any) before jumping into implemententing the solution, since it provides lots of useful info to ease up the implementation progress.

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

The most challenging thing is to figure out the distance between elements (padding, margin, etc.) when looking at the Figma design. Since I have little experience with Figma, the only thing I can do is to look at info like X, Y, W, H between elements and manually calculate the distance between them.

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

Are there any other ways in Figma to calculating the distance between elements without having to look at the X, Y, W, H of elements then calculate them manually?