When minimizing and maximizing the browser, I see that the share pop-up kinda flies(?) around and gets back to its original position. Would there be a way to resolve this?
I was not sure if I should use p or a blockquote, but I decided to choose the latter and place the p tag in it. I want to know if this is a good practice or use!
Total layout of the HTML/CSS. And I am willing to gain help with making my SASS/SCSS much more convenient and cleaner!
The HTML structure and how to change the color of the icon!
I was unsure if using another div (.recipe) inside another div (.container) is efficient. I initially had issues when using paddings inside the .container div while leaving the image to fit fully inside the container. So, I decided to place another div (.recipe) to make it separate from the image. Later on, using a media query, I placed 0 padding to the div (.recipe) and added the padding to the div (.container). (I hope this makes sense... 🥺)
By learning that trying our best to keep HTML clean at most, I was unsure if using another div (.recipe) inside another div (.container) would be a nice practice.
The container's padding difference in the card. I can see that the card's padding for mobile is narrower than the desktop. I really tried my best to figure out what I can do instead of using media query.. but could not ):
Using react and the states o react. Also the other challenge was using position absolute and relative
What specific areas of your project would you like help with?I will like help of the usage of absolute and relative. Im not sure if there is a better way to this
Nice work! I still see some issues with your mobile version of the design. I can see that the share icon disappears from the view!
I was being able to use SASS for the first time. I must admit writing code with it is quite fun and easy. Just deploying it for the first time requires a bit of effort. It is not difficult, but for a lazy like me, it was just something extra that I wished I could skip.
What challenges did you encounter, and how did you overcome them?Surprisingly, this time, I did not face as many problems with the overall layout as with aligning the elements within the cards themselves. Just to get the alignment of a little area right, I had to write extra markup, but the other ideas I had were not responsive enough, so I had to settle on my current approach in the end.
What specific areas of your project would you like help with?Is it possible that I can simplify my project a bit? If there is any redundant HTML or CSS, I would like to eliminate it.
Great that it was your first time with SASS! I hope you enjoyed it. Just looking through your code, I was wondering why you decided to place the .review.highlight aside from the blockquote! I think it can be included inside the blockquote! (:
I'm proud that I was able to complete this project. I was able to use SCSS for my style which made my work faster.
What challenges did you encounter, and how did you overcome them?I encountered an problem when I was trying to make the card looks like the original one. But with thorough research, I was able to make it work.
What specific areas of your project would you like help with?Nothing for now..
Great work! What I would love to recommend is to use clamp() for responsive design. For example, the font size of your heading 1! It makes it much more convenient for the heading to increase its size depending on the resolution of your device!
I wanted to give a little more difficulty to the challenge by using a preprocessor, and I realised that if you don't know a technology and you want to use it, you don't necessarily have to go to tutorials, it's not always the case, but one of the best guides is the documentation. Thanks to this in a few hours I was able to do the challenge and acquire skills using Sass.
HTML looks semantic and your project looks very similar to the design (maybe a bit of modification to 'Add to Cart'! Though, I would love to recommend using CSS Reset!
Hey Jean! Nice job you've done here! One of the things I noticed and recommend is to always place contents inside the <header><nav><main><aside><footer>, rather than using <containers> or any other elements outside of it!
Think or view HTML like a little story plot! As we can see, our recipe page includes only the main part of the story. So, we can easily assume that all contents should fall under the <main> tag.
Which also goes the same for the .attribution. I recommend placing this inside of the <footer> tag, which contains the contents that should go after the story. Think of the footer as the ending credit of the movie!
I did this project using CSS presets for the first time and am really happy with how it went. I'll definitely be using them for every project going forward. I also implemented media queries for the first time and it was much easier than I thought it was going to be. New hover interactions were also used. I'm very happy with how this turned out.
What challenges did you encounter, and how did you overcome them?Never doing CSS Presets or Media Queries too some time to figure out but now that I know them, things will hopefully get much faster and more streamlined in the future.
What specific areas of your project would you like help with?I think everything went ok and is looking good but if you see anything I missed or ways I can improve my code, please let me know. Thanks.
Your solution looks quite similar to the design provided! As I lack knowledge of coding, I am not sure if I am in the place to give a helpful feedback. I am glad you used CSS presets as they are really helpful! I've recently received a feedback that there are many resets out there and it will be really helpful to understand why they were written that way.
