All solutions

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

Media query has always been challenging for me, as I tend to get confused with min-width, max-width, etc. I read MDN and W3Schools over and over, and some people here were very kind enough to explain it to me, but I seem to be muddle-headed all the time... Also, I feel that I over-use "display: flex".

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

Responsive image was too difficult for me. I couldn't figure out how to use a different image for a different screen size.

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

I knew that it is way too early for me to challenge JavaScript coding, but I just got so bored with reading the endless JS course materials. I felt I need some hands-on project to keep motivated.

It turned out, as expected, that practical JS coding is beyond the reach of my current skill...What a struggle I had to complete this task!

One thing I am proud of is that I didn't abandon this challenge.

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

Almost everything except simple html mark-up is a challenge for me. All the credit goes to W3Schools, MDN, Stack Overflow and even Google Gemini.

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

I have been away from coding practice due to my hectic work schedule. I am surprised to find that , in one month of absence, I forgot to code even the simplest html... How poor memory I have. I am determined to practice coding at least once a week. The smallest card design will be fine.

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

I wonder whether the day will ever come when I don't need to struggle so hard to create this seemingly simple card design.... Only thing I am proud of is that I didn't give up this challenge and completed submitting it anyway.

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

Full of challenges for me...

• It was very difficult for me to set the direction of the gradient.
• Also, it was hard for me to find the way to align one items to left (e.g. "Reaction") and the other item to right (e.g. "80/100").
• I struggled with the responsive design.
• I spent hours to figure out how to "extend" white background of the right card to the rounded-corner of purple card.

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

I have to confess that this apparently simple task is full of challenges for me.

For the color of paragraph ("Scan the QR code..."), I applied HSL color code specified in the style guide. But somehow, it looked much much paler compared to the sample design. Was something wrong with my browser...? I checked and double-checked everything I could think of, but couldn't figure out why. Finally I gave up and chose my own gray instead (Cheat!).

Also, I struggled with GitHub as always. Of course, I cannot use the command line, which is more than I can chew. Somehow, my css file wasn't applied to the html.index on GitHub. No matter how many times I deployed, it only showed an ugly html-only page... I almost gave up and deleted my repo. Then, I decided to create new repo and uploaded the files again. Somehow, it worked this time. This is the complete mystery for someone with my current skill and knowledge.

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

As a newbie who is struggling with almost everything about coding, it took ages to complete this seemingly simple card... I feel so muddle-headed.

I tried so hard to find the way to make it responsive. I think it does response somehow, but I am not sure about the width of the card.

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

As for the background solid shadow, I decided to use border-right and border-bottom. But the position is not quite right. Should I have used box-shadow property instead...?

Also, I have no clue how to apply black-colored pointer as a cursor, to be displayed when hovering. (sigh...)

I am totally new to coding and learning everyday. For this challenge, I struggled so hard to remove the line space between the title "Preparation time" and the list (total, preparation, cooking), but couldn't find the solution. Is it because I used "flex-direction: column;"...?