briankrou• 100
@briankrou
Submitted
PriyaSharma026
@PriyaSharma026
All comments
- PriyaSharma026• 40
@PriyaSharma026
Posted
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 - Pchelsea-here• 140
@chelsea-here
Submitted
What 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
PriyaSharma026• 40@PriyaSharma026
Posted
The solution you provided is exactly the same as the design.
0 - Jun Wei• 200
@junwei-wong
Submitted
What 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
What challenges did you encounter, and how did you overcome them?
Making different views for mobile and desktop, I never had to prepare screens for each with different pictures.
PriyaSharma026• 40@PriyaSharma026
Posted
You'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
