All solutions

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

It took quite some time but I was able to complete the challenge and I plan to do better in the next.

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

I couldn't get the CSS background-image property to work for some reason, and I don't understand. I took the problem to my codepen to figure out the issue and found out I messed up the CSS selector, which should have been obvious, but I didn't see it; hence, the challenge took longer than expected. I first tried using the before pseudo-element, which worked but wasn't giving me the desired result.

I know the challenges are supposed to be mobile first but I like to approach it from the biggest screen first and that gave me an unexpected issue. I expected the vh of the desktop to work the same for mobile but it didn't or maybe I just don't understand the concept and implementations well enough. This resulted in me having to figure out how to add a margin to the top and bottom of the grid content and it took about 4hrs to finally get it to work. I believe this is a beginner mistake that would have been quickly fixed by a pro.

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

I'd be happy if someone could explain some of the common challenges with desktop first design when building for both mobile and desktop and how to tackle the problems.

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

This challenge took longer than expected but It feels good I was able to complete it. I decided on some implementation which I think is not the best approach to my challenges, but It work😂. I'll probably do it better once I figure out a better design approach.

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

My biggest challenge during this project was placing the content card/box in the correct position. I didn't immediately think the CSS grid was the solution, so it took me longer trying to figure out how to position the boxes. I just started learning Grid actually and I guess I didn't understand I could use Grid in such a manner. I stumbled upon a similar design and inspected the code and saw what they did, so I just copied their code to Codepen and played with it, it seems easy but I still feel I don't understand it enough but hey, it worked😂. I also had a hard time getting the title description displayed correctly. I had to set a min-max for the description to get the result I wanted but I'm not sure if that was the correct solution but again it worked 😁.

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

I would love to get more clarity on the CSS grid. While ChatGPT and Claude Ai have been helpful, I think getting a professional to help me understand the concept would help me improve my skills a lot.

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

I could complete the project without much headaches like the previous one. It was easy and I would try using react to test my understanding next time.

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

I encounter a specificity issue when trying to style a span element. I initially gave the span a colour and tried to change the colour later in the CSS but didn't quickly understand why. I was able to fix the problem using the css !important property but I didn't want the fix. So, I had to remove the span from the group style I created and style it separately.

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

I can manage on my own, at least for now.

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

I figured out how to use the CSS clamp function. While I still don't understand how the preferred unit or middle-value works using viewport width properly, I got the desired result with what I tried.

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

I had trouble removing the padding for the mobile version of the project. I had an idea of what to do but couldn't figure out the implementation. At the end of the day, ChatGPT helped.

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

I'd appreciate it if anyone could explain the clamp function to me as if I'm a child. It is simple, yet I find messing with the middle value challenging.

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

I was able to complete the challenge without help from anyone. Next time I will try using the CSS clamp function to make a responsive design. I stumbled upon a submit challenge where the user used it and it seemed really cool.

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

None, It was quite easy.

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

The projects are still easy now maybe when they get a little too complicated.

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

I'm happy I could complete this challenge faster than the first and didn't face any difficult issues. I will try to recreate the same design in react next time.

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

So, I wrapped a span and p tag in a div and used flex with the direction set to a column. After applying a background style to the span, it filled the entire row and I couldn't figure out how to make it fit content until I asked ChatGPT. The solution was to set a width and height but I thought that wouldn't work well forgetting I could have used the "fit-content" property which I later used to solve the problem.

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

I understand everything I learned from doing this challenge and wouldn't make the same mistake again. Hopefully

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

I like that I was able to recreate the design to closely match the original document. I will probably try to use new CSS elements I have learned in my next design project.

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

I didn't understand why I couldn't vertically centre my div when I started. I just went ahead and finished the rest of the design before I got the idea to wrap the container in a wrapper and use flexbox on it.

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

I'm still learning the basics and not sure if I need any help atm. But will definitely ask for help when the need arises.