All solutions

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

I would do the breaking down of possible styles a little clearer next time. I also know that the image in the responsive view could have been closer to the solution. I'm proud of taking less time in creating the layout and integrating with the repository online via git.

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

I had problems with the specific style choices such as the image in responsive view and the bullet points for the recipe ingredients etc. I had to search those online and realised how much more I still have to learn.

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

I feel comfortable with my solution but the thing that still bothers me is the image not taking the full width, I know it has to do with the fact that it is placed within the container and I'm sure there's an easier solution. I will look into it later.

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

Again I enjoy organizing the structure, this time I tried to include more appropriate semantic tags. I would check some details before deploying because there were some things that did not appear until I saw the live site version.

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

Working with fonts and responsive aspects. I'm still trying out and I did not totally convinced with my solution but I'm planning on working with Grid in upcominig challenges.

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

As in the previous challenge I had a "cut" part in my design in the resposive view but the container had a declared size so I'm confused as to why it did not show it completely. I also had difficulties with the hover actions when I tried to apply both rules on the element (the lists elements that are links) to switch both the background color and the link text colour. I had to do it separately and it only works when the pointer is above the word when it should be applied when the user hovers on the button.

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

I'm proud of getting most of it done , mainly the structure at once. As usual I would like to be more practical in css but I guess it's a matter of time and practice to get there.

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

Working with flexbox should make things easier but I'm still finding it difficult figuring out the appropriate sizes and how not to make it so it breaks in different views. The way I overcame them was changing values until I was satisfied with how it looked.

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

update: after checking the submition in the comparison part, the screenshot is not the same thing I see on my browser window. I don't know if the comparison applies a sort of zoom or some type of width that "breaks" the final preview. It's frustrating because I've been making changes and it doesn't look like it does on my browser. The one that is shown here is not the one I did which is much closer to the "solution". If you check the "live site" it looks closer to the solution.

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

I like what I've accomplished , even though I'm sure it could have been done in fewer lines and perhaps in a most effective way had I been more exposed to flexbox use.

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

About elements distribution inside a container with just flexbox ( I particularly wanted to work only with this technique) I had checked some tutorials couple of years ago so I think it definitely helped in some ways and then there were some things I didn't remember and try to do as well as I could. I went to watch and or read some tutorials and of course from legitimate sources like MDN webdocs, etc.

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

I'd like to see first how other people solved the inner distribution of elements (img and text) in the card itself, I called this div #contenedor-int , as in internal container. I applied flexbox and tried to distribute the elements using that technology but it didn't work so I had to apply a margin class to those elements and I don't really liked doing that because it adds to the css file size and doesn't seem so practical. I'm still gonna investigate it of course.