Figuring out the background image and overlay
What challenges did you encounter, and how did you overcome them?figuring out the layout and responsiveness
What specific areas of your project would you like help with?any feedback on layout and responsiveness would be great!
Overall very nice job, this implementation also works well across many screen sizes! :)
Some small things I noticed is that the font weight of the headers should be higher (900).
Also the background color of the footer image should be a darker color as well, compare to the design.
It's worth playing with if you can make the header images span outside of the viewport, while at the same time avoiding horizontal scrollbars :) I managed to get that work on mobile resolutions if you want to check out my solution, but unfortunately not on higher resolutions (yet!).
completing the project
What challenges did you encounter, and how did you overcome them?aligning the items using css-grid, searching for it.
What specific areas of your project would you like help with?all of it.
Great job, I noticed that you even implemented an additional breakpoint where the grid displays 2 columns with cards! That's more than I did, nicely done :)
I did notice some text contrast issues, for instance the Daniel Clifford text should be white, and that the quotes for the cards with white background should be slightly less transparent. Otherwise great job! :)
I was able to write using CSS flex. Understood the concept of web responsive. Understood media queries.
What challenges did you encounter, and how did you overcome them?While using media query for mobile and desktop, initially the code wasn't working. Only desktop layout was working and even if I resize the screen, the div did not get into column. Later I added some height and width and it worked.
What specific areas of your project would you like help with?nothing as such
Hey there, nice job! I think overall you have done a good job with this implementation. I do recommend to check the shadows however, you should have a shadow of X 0, Blur 30px, Y 15px and spread -11px, color #83A6D2 with an opacity of 50% to match the design. The titles can also be further improved, mainly the spacing between the first two headers and possibly the weight and size of the main header. Keep up the good work! :)
I changed ordered-list design,
What challenges did you encounter, and how did you overcome them?i have problem with cursor styling on hover.
What specific areas of your project would you like help with?cursor styling
As far as I know, when you use a custom cursor that is based on an image, you can't change the cursor color. So you need to find an image that matches the cursor color that you want. See this Stackoverflow thread as an example.
.
Very impressive solution and looks really close to the original, well done!
I however noticed that it seems the image URL doesn't work on mobile / lower resolution ( I just get a 404), so might want to check that. But the design itself looks very good, only thing I think is that the button might be slightly smaller (height / top/bottom-padding) in the implementation than in the design :) keep up the good work!
"I'm proud that I was able to learn something new. I refreshed my knowledge of HTML and learned how to style the numbering in an ordered list. Next time, I don't think I would do anything differently."
What challenges did you encounter, and how did you overcome them?"Actually, I didn't find it too difficult to implement something; I just had to Google and read the documentation to figure out how to color the numbers."
What specific areas of your project would you like help with?I would appreciate any feedback
Hi Adem, looks really good! I think some minor comments I could find is that the container (with the white background-color) could be a bit larger to match the design on larger resolutions (I think the container should be 736px but it seems it's around 600px today). This will make the implementation match the design even better. :)
Also nice work on the responsive design, another small tip is to make the "Recipe preparation box" fill up the full available width on smaller resolutions.
All in all this is just some nit-picking so keep up the good work! :)
Nice job! I think one thing to improve is some additional checks to compare closer to the design. Compare e.g. the gap between different elements. Between "Jessica Randall" and "London, United Kingdom" should only be a 4 px gap for instance. Also put a higher font-weight on e.g. text inside the buttons.
All good.
What challenges did you encounter, and how did you overcome them?No challenges yet.
What specific areas of your project would you like help with?No need, thank you!
Great job! I spot a few small differences in terms of font-weight. The styles section here mention which font-weight is used for each font https://fonts.google.com/specimen/Figtree (scroll down to the see the styles section, e.g. Medium 500, meaning that medium should have a font-weight of 500 for instance). I then had to compare this quite closely in Figma to find each exact font-weight.
I also think the author image should be resized to better match the design.
And the card itself should have a different X+Y box shadow value on hover (from 8px to 16px on hover).
Otherwise everything looks great, and this is just some small details! Keep up the good work :)
Well, I liked implementing the use of the flex display in the code, I will definitely use it again, I always used the float display a lot in other study projects.
What challenges did you encounter, and how did you overcome them?The biggest challenge was centering the main div in the middle of the site, it was difficult to choose the best way to use the divs.
What specific areas of your project would you like help with?Regarding the project carried out, as it is simpler, I will not need help related to the project, but I will certainly need it in other projects ahead. Thank you very much!
Very nice job! I agree with the challenges, I had the same challenge too, haha.
Some smaller comments for improvements:
All in all just some very small comments, great job!
