proud of myself. will work smarter on the next project.
What challenges did you encounter, and how did you overcome them?Encountered the challenge of implementing the active states, but it was solved with deep and logical thinking.
What specific areas of your project would you like help with?I would just like an honest review of this project's source code and feedback on areas I can improve.
It's amazing work man. The only super-tiny thing I noticed was that in the image, you have given a transition duration to the overlay layer, but not the "view" icon which appears instantly on hover. But otherwise, amazing job dude
It's not like I'm proud really. I try to return my skills. Not like I had much before :) I want to think more clearly about structure of pages. How to make it more
What challenges did you encounter, and how did you overcome them?I didn't know at first how to manage different sources of one image. I found a solution to use <picture> with <source> inside it.
What specific areas of your project would you like help with?When should I choose flex over grid? Is there a way to handle confusion about sizes of elements more clearly?
I noticed that you changed the display of the main card from flex to grid using media queries. I think you did that because simply changing the flex-direction to flex-row caused some uneven space occupancy by the components. But that can be solved by simply giving both components a width of 50% in the media query, just as the flex-direction changes to row. The main advantage of flexbox is the responsiveness compatibility. It's a unique solution, what you did, but i don't think changing the display was the best solution. I would suggest that you understand how the flexbox elements automatically adjust sizes.
I am proud of how I easily setup the html part and then aligned everything up until very end where I encountered an issue of specific aligns that I did a sloppy fix with margins and using widths.
What challenges did you encounter, and how did you overcome them?I had issues with perfectly aligning elements, I did a sloppy job of overcoming some of them with margins and width.
What specific areas of your project would you like help with?On how to perfectly align everything without having to using margins/width fix.
It's great work dude. regarding your question about accuracy with precision, I noticed a lack of the usage of padding. Padding is my all saviour when it comes to spacing inside flexboxes, grids etc. I think you should try using padding most often and only using margin, or spaces that are not used anywhere else. For eg, the 4 summary types all have equal space on their left and right. so instead of using margin-left, you can make the whole .summary-container as a flexbox and give it some padding on the left and right (even top and bottom since the "Summary" heading and the "Continue" button also have space between them and the border)
the last part, i used grid system and grid template columns, but then i realized i could have used a table and would be much easier.
Your desktop version is absolutely perfect. But your mobile view is not the same, the image is supposed to overflow. It's not that hard, give it a try
Good stuff dude, I think the upper and lower padding can be made a little neater but otherwise nice stuff
"Thanks, no help needed 😊 But I’d really appreciate any tips or feedback!"
You did an amazing job! Apart from the picture size, you nailed it!!
You can try to use an H1 tag for the darker text or simply increase the font-size of the paragraph using an ID selector
