PriyaSharma026
@PriyaSharma026All comments
- @briankrouSubmitted 3 months ago@PriyaSharma026Posted 3 months ago
Congrats for completing the challenge!
Some of the improvements you can have : Your main section is not taking the full height, therefore the white section is appearing below the main section. you can give height of 100vh either to body or main to avoid this. And when the main section will grow your grid won't be aligned at the center of the page, for this you can use align-items: center to center your grid layout.
You have designed the "quotation mark" pattern by your own that's really amazing and therefore it is looking slightly different. However, that was already provided in the images section. So in case if you want to make it look more similar to the design mentioned you can use that.
Hope this helps!
0 - @chelsea-hereSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of the Card and component and the dynamic grid layout it feeds into. I'm also proud of figuring out how to make the attribution position correctly, without modifying the layout. Previously, I'd been commenting this code out prior to submitting and then reapplying it later. I'm looking forward to having this done by default in a template.
What challenges did you encounter, and how did you overcome them?I had a lot of issues trying to style the Next.js `````` component so that it sized and positioned correctly. My stubborness paid off and after re-reading the docs for Next.js and reviewing answers on Stack Exchange, I was able to simplify the result by using the exact dimensions for the component and nesting the image in a div.
What specific areas of your project would you like help with?I'm always looking for tips on best practices and how to make the code simpler and more dynamic.
Cheers!
Chelsea
@PriyaSharma026Posted 3 months agoThe solution you provided is exactly the same as the design.
0 - @junwei-wongSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
Learning to use:
- SASS as a CSS preprocessor
- media queries for responsive views
- mixins using SASS
- picture tag
Making different views for mobile and desktop, I never had to prepare screens for each with different pictures.
@PriyaSharma026Posted 3 months agoYou've done a great job. Your code is well-structured and reusable. Your page is surely responsive and your solution is remarkably similar to the design.
1