@bashiirabdullahiSubmitted about 1 year ago
Here is my solution to this challenge. I used to design HTML and CSS only to convert the design.
Christopher Mothuli
@Sirch9All comments
- @xStephxSubmitted about 2 months ago@Sirch9Posted about 2 months ago
Nice work! I hope my feedback makes sense to you, as I’m not as skilled as you are. I noticed that your navigation container isn’t quite responsive between widths of 320 and 425 pixels. The elements look a bit "squashed" and don’t display well.
I understand the design was provided this way, but I think a burger menu would be a much cooler solution.
1 - @chrisvn1808Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I appoached this project different with previous projects.
I plan ahead HTML, CSS structure, what semantic HTML tag should I use, what utility classes will help me achieve consistent look.
I had trouble with how to make the full width image on small screen sizes, but managed to achieve it with negative margin.
Creating a system like Cube CSS makes writing CSS more fun and rewarding.
What challenges did you encounter, and how did you overcome them?I used this trick to achieve full width image on small screen sizes.
What specific areas of your project would you like help with?.recipe__image { margin-left: calc(-1 * var(--space-md)); margin-right: calc(-1 * var(--space-md)); margin-top: calc(-1 * var(--space-md)); }Any feedbacks on the project would be valuable to me and be appreciated. Happy coding!
@Sirch9Posted 2 months agoNice, I too struggled with making the image full screen in small screen and I gave up. Besides using those negative margin and "cal()" , Is there a simpler way to accomplish the task in css.
0 - @Gemy77777Submitted 3 months ago
- @dominguez-danielSubmitted 3 months ago
- @Sevenwings26Submitted 7 months agoWhat are you most proud of, and what would you do differently next time?
I am proud about the fact that I was able to fix the project within 40mins. Next time, I will go through the readme file and use recommended solution approach.
What challenges did you encounter, and how did you overcome them?Responsive was the main challenge. I how able to fix it using by using the percentage to measure my width and vh for my height.
What specific areas of your project would you like help with?How to use vh and rem for height measurements.
