All solutions

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

I'm most proud of effectively using CSS Grid and grid-template to create a well-structured layout.

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

I struggled with absolute positioning causing elements to overlap or overflow (specially the icons in the cards). I resolved this by carefully using position: absolute within the grid to control placement and avoid layout issues.

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

I need help adjusting the unwanted padding and margin on the h1 and h2 elements, which are making the headings appear too narrow and affecting the overall layout.

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

I’m proud of how quickly I was able to adapt to the design and efficiently implement it using Figma. For now, I can’t pinpoint anything I would do differently next time, but I’m always open to improving my workflow.

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

I struggled to remember how to display different images based on screen size. I resolved this by searching for the solution on MDN, which provided clear guidance on using media queries for responsive images.

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

I would appreciate any advice on optimizing the use of media queries and reducing redundant CSS to streamline the code.

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

Getting a result very close to the original design!

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

It was a challenge to have the image full width on mobile with no border radius.

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

I need help with the mobile view (screens under 500px). I removed the border-radius from the img element, as well as its parent items, but a border radius is still visible on the bottom edges of the image. I could not figure out where this is coming from.

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

This is my third challenge, and I am proud of how much faster I was able to complete it. I have grown more comfortable using Figma, and I truly enjoy leveraging it to create great designs. In the future, I would like to focus on refining my attention to detail and experimenting with more advanced CSS techniques to enhance the overall design.

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

One challenge I encountered was remembering how to set up the hover animation on the links. To overcome this, I consulted external resources and experimented with different animations until I achieved the desired result.

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

coding the blog preview card in mobile first

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

There is an unwanted marge between the .illustration image and the .card-container that I could not manage to understand where it comes from and how to get rid of it.

Note that I have used CSS reset (normalize.css).

According to the design, there should only be 24px between both elements, but right now there are 24px (margin set-up on class .content) + an additional 10px (unsure where they come from).

Any idea why there is this extra space?

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

Proud of submitting my first solution

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

• identifying the correct padding and margin from the Figma file. I was able to try out the dev mode version on Figma which was very helpful.
• setting up correctly the padding and margin via CSS, trial and error eventually paid off

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

is there a better way to have consistent margin and padding that are reflecting the design?