I tried css only solution for the dropdown first using animation. It worked great--for half the time. The other half the <detail> element just immediately showed the contents without having the smooth animation. why?
In mobile layout, I added padding to the body tag so that my content won't touch the bottom. It didn't and site ignore me lol. I had to add 100% height to html instead--why? why can't I just tell body to occupy 100% and add padding and call it a day?
The background was acting weird too. The smooth gradient would load fine at first load in mobile. As soon as the scrollbars appeared, the gradient would start again? I had to add the background to html. But when I removed the background from body, it would do the same thing--huh?
I tried using sass. It was pretty easy to learn and to organize. I really liked that you can change the value of variables using darken() lighten(). Will definitely use for future projects.
I found it difficult to make it look right for Galaxy Fold. It would mess with my grid/flexbox.
I had to use query selector inside my .then statements. It did not work right outside of it. I do not think this is best practice as examples I saw did not do this and declared outside of it first.
I had a lot of hard time making the autofill using grid work right. When it was resized to mobile, the whole module would look squished and wonky or misaligned. I ended up using flexbox with flexwrap for my solution which worked out great especially at mobile sizes.
I also struggled using "place-content: center". I was trying to figure out why my grid would move out of the viewport at smaller-sizes instead of generating the scrollbar. I eventually figured out it was this property that was causing my issues. I also updated the grid so that there is a row above and below with 1fr and middle row with my content to perfectly center it. This helped with the centering and the smaller viewport issues. I don't know if that's best practice, but so far, positioning with grid behaves more like what I expect when set up this way.
I put a lot of effort into adding the "(" in the corner of each summary items. I added pseudo elements and positioned them manually. I don't know if there was a better way to do this.
I used "figure" in efforts to be more conscious about semantic HTML markup. The left side of the module is a figure, and the summary is another figure. I don't know if that's the best way to handle this or if I'm misusing <figure>
I had fun adding transition to the continue button. I'll be using this trick in the future.
At some point I was trying to practice using webpack to manage my files but grabbing the icon images url was a nightmare after packaging. It would throw errors that whatever url I parsed from json is not a valid text. I eventually gave up and did not use webpack. I just used ES6 import feature.
I was unsure what the width of the component should be. I set the size based on the design example in mobile version.
I don't think I needed the flex-container and a component div inside it. It was a remnant from when I was playing around with where I should place the attributions. I don't know where attributions generally go so I decided to place in the bottom.
