All solutions

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

Create and adapt the formatting from the mobile version to the desktop version.

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

Create the triangle with the ::before pseudo-element and create a smooth transition between the mobile to the desktop version.

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

I wasn't able to use grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); on the .card. The grid didn't "expand" from 1 column to 2 column without a media query.

To make it work I had to disable the display: flex; that I used on the body to center the .container vertically and horizontally. But then the .container was not centered. I also tried margin: auto; on the .card but it didn't work either.

So I used grid-template-columns: minmax(250px, 700px); instead.

Is there a way to center the .container without disrupting the way grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); must work on the .card?

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

Find different solutions and approaches in order to achieve the same result that is shown in the screenshots.

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

Manage to find HTML code that best respects semantics and efficient CSS code. Reading articles and documentation on the subject helped me little by little to find my bearings.

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

To be more precise on the methods to use to better control the dimensions of flexbox elements.

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

To be able to use a flexible grid for the layout on mobile with a grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); and adapt its layout using a grid-template-areas with a media query. Use the :nth-child() pseudo-class to make the order of the cards count for the layout.

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

Make the project quickly editable. I tried to make the css classes flexible, so that I could change the appearance of the cards quickly and not rely on the css classes to organize their distribution, but on their order in the HTML structure.

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

A better understanding of the BEM methodology and a better structure of the CSS.

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

Having succeeded in respecting the requested layout using css grid, use the pseudo element ::before to add a graphic element to the cards.

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

respecting the positioning of the cards in the grid was not easy at first, but after various readings on the subject I was finally able to find a solution. I initially used a data attribute named [color=""] to apply a specific color to the cards, but an error message "Attribute "color" not allowed on element "div" at this point. " appeared when rendering the project, so I had to adapt the code to correct this problem.

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

Knowing the right way of using data attributes for css purpose and if creating a made up data attribute is considered bad practice.

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

To use Grid and Flexbox on the same project and add aria attribute in HTML.

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

First I tried to use only flexbox, but didn't manage to wrap the elements correctly, then I used CSS grid to do the job.

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

For that project it's ok but if you know a good article talking about flexbox, more precisely how to control exactly (with size or other) the point where the wrap option occur on flexbox.

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

Adapting the image to the smartphone version with container queries.

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

I didn't look at the mobile version until I finised the desktop version. I had to make changes in the css for the h1 and the image recipe. I used clamp for the font size and container queries for the image.

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

A better way to adapt the image of the recipe in a fluid manner between the desktop and the mobile version.

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

Using clamp to change the width and the padding of the card.

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

Find the correct values ​​for the clamp. I finally used an online calculator to find the desired values.

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

In the example given, the height of the card decreases for the mobile version. In my case I haven't touched the height, but being able to modify the different spaces fluidly and manage everything with variables interests me.

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

A good use of the flexbox.

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

How to respect the same aspect ratio for the illustration, I used object-fit: cover; to help me with that.

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

With only the images as a model I wasn't sure whether the hover/focus should be applied only to the title of the card or also to the card itself. The same goes for changing the appearance of the cursor. I decided not to place a link on the title but to just change the appearance of it. A comment on these points would be welcome.

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

To complete this first project.

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

I misunderstood the images provided, thinking that it was necessary to create a blue background that should change size depending on the screen. I was able to simplify the project after realizing my mistake.

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

Understand how to optimize the CSS code and make the project as fluid/responsive as possible.