I would greatly appreciate any feedback you may have on my Recipe page solution. Please feel free to point out any mistakes or areas that could be improved. Your input is incredibly valuable to me, and I'm eager to learn from any constructive criticism you can provide. Thank you in advance for taking the time to review my project.
Hey Neel, Congratulations on completing the recipe page challenge 🎉🎉🎉. Some suggestions:
widths and heights on your layout. The width and height you have set on the body and the container class seems unnecessary. I would recommend you get rid of the .box class and wrap the entire page in the .container div or you could use the article tag for proper HTML symantics and give it a max-width. Once you set the max-width You won't be needing the @media query. checkout this article for moresection tags to wrap the different sections on the page like the ingredients, preparation etc..h1 tag since it is the main header for the page and the others h2 or h3.rem/em units for font-sizes and margins and paddings as well since it improves the scalability of the page. checkout this article for moreGood job, and congratulations on completing the challenge 🎉✌️.
Pls let me know me if any correction is needed. Thank you.
Hey, congratulations on completing the blog preview card challenge 🎉. Probable suggestions would be:
max-width instead of a fixed width on the .all class.padding on the body so that the card doesn't stick to the device edges.rem/em units for font-size and also the margins and paddings as it helps with scalability.Otherwise everything looks great to me ✌️. Hope you find my suggestions useful 😊.
I would love a solution for this and as well as the tip to make the next project much better, Thank you.
hey, Arkesh going through your work seems like you are new to the field of web development so, I recommend you go through the HTML and other web docs on w3 school and the MDN web docs and come back to this challenge. This challenge basically requires you to make use of proper HTML symantics like section, article, lists etc.
This challenge seems to be aimed at encouraging proper HTML semantics so, I think It's better to use proper elements like article, section, strong etc. instead of using non-semantic elements like div. ✌️
-I would appreciate feedback on code efficiency: Whether certain elements are redundant, whether the code is clear at what it does
some of my suggestions:
Everything seems fine to me and I didn't find much redundant code except where you have used font-size 16px as it is the default font-size of browsers and the flex-direction: row; which i think you have used in the author section which is also the default value for flex-direction.
you mean desktop and mobile by web and mobile version? if That's right I guess using @media query is the answer.
it's more advisable to use max-width instead of a fixed width for the main tag which will allow your card to shrink (responsiveness) if need be.
It is also preferred to set font-size in rem/em instead of px. checkout this article for more on it.
I am not sure if you have come across it but if not I am linking a youtube video by Kevin Powell on responsive web design here.
Can I get feedback on my work?
The overall design looks fine but I found some issue with the responsiveness your design seems to breakdown when the screen size is decreased I am not really sure what is causing the issue but I am doubting the use of your media queries and the way you have set the width and height of different elements I guess it would be better to set the width on the #main-div as a max-width and another thing is it is recommended to set font-sizes in rem/em. That's my suggestions ✌️.
I am finding new way to add shadow to the second box. Currently, if I add box-shadow it won't work because flexbox design makes the box's height = 100vh, leading to a weird shadow (looks like a frame)
Also, I hope there is a way that I can manipulate the background of the first box. The original design looks better with contrast in different places. I feel like there is better way to manipulate the color, but I just try to decrease or increase color range manually, which looks not as close as the original design.
why don't you try decreasing the opacity of the colors I think that's what is setting your solution off from the original design.
Hi, I'm Sakti, This is my solution in this challenge.
Please let me know any tips & comments about my solution in this challenge for better results.
I am grateful that by taking part in this challenge I realized that I still need to learn a lot in implementing design and other things in any aspect needed for improvement.
Setting the cursor to pointer seems unnecessary to me since there are no interactive elements there especially when hovering over the text "Learning" and the profile and name at the bottom. looking at it's purpose I think a minimalistic approach is enough. Just my suggestion ✌️.
Hi lads, well this time i tried something different. I set it up the width and height with vw and vh, also i sue grid to set the elements in the change part. I checked the output in 1280px width, 800px height, tbh i don't like how it looks i'm still struggling with the output but i guess i need to keep practicing.
woah... it looks like your order summary component has a lot of work to do. Everything is falling out of place.
Had challenge in adding transition. The elements are not transiting from height 0 to height auto.
there seems to be some issue with viewing the code i don't know if it's only in mine.
Hope you will appreciate all bonus features I've implemented like animations on menu. I'm open for any suggestion or critic ! This integration took me arround 8 or 10 hours. **Thanks ! **
the webpage looks great the color combinations were well done. If you had used carousels it could make it look more modern and interactive.
