I'd like to know how, given my current solution, I'd make the images to the left and right of the hero section (on larger resolutions) span slightly off "canvas" (outside the viewport). I can't get it work after trying various ideas so any feedback there is much appreciated! :)
Any feedback on best practices using CSS grid is most appreciated (and any other feedback of course!).
Any kind of feedback is welcome really, but I want to ensure I am using best practices for my code and techniques. So feedback on that is always welcome, both in terms of HTML and CSS :)
Generally any best practices I should follow, in particular for handling the images. Also general feedback is always appreciated!
Well, feedback in particular on semantic HTML, as well as any additional best practices that I should follow for HTML and CSS that I might have missed. :)
Any feedback in terms of HTML and CSS structure, semantics and best practices in general would be very appreciated!
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! :)
