All solutions

What specific areas of your project would you like help with?

Accessibility controls mostly. I don't really understand how that works, I tried to add some controls but native tab controls sometimes just don't work. This is the challenge in the accessibility path after all.

What are you most proud of, and what would you do differently next time?

This was the biggest challenge so far, I'm most proud of the result coming out good enough (to my standards). I would want to write better and easier manageable code because the current repo looks like my kitchen when I get bored D:

What challenges did you encounter, and how did you overcome them?

Had a lot of trouble in very weird random places, like letting the page render without the flicker for the theme change, since it's my first time doing a multi page app on Astro. Or a hydration mismatch which is not the library's fault, just the way of taking data from localStorage being different from server rendered HTML. A bunch of tinkering later gave solutions that look very "simple" and short.

What specific areas of your project would you like help with?

Probably better labeling for inputs and accessibility settings.

What are you most proud of, and what would you do differently next time?

I'm most proud of somehow making the slider's styles correctly. This looked simple at first but seeing how convoluted the support for range inputs is was so frustrating.

What challenges did you encounter, and how did you overcome them?

A lot of trouble styling the slider correctly on Safari and Chrome since the webkit is missing one pseudo class to style the left side of the slider, so I used a linear gradient with strict color stops instead.

What are you most proud of, and what would you do differently next time?

I'm most proud of the responsive styling. I took way too much time, and I hope next time it would take less time.

What are you most proud of, and what would you do differently next time?

I'm most proud of the share view popup when clicking the share button, I'd want to use animations for pop-ups and slide-ups next time.

What challenges did you encounter, and how did you overcome them?

Had some trouble styling the text at first to fit the correct height, I didn't know how to check the image dimensions provided in Figma. Had a LOT of trouble trying to make the share popup reusable for both use cases mobile and desktop, don't know how to make them reusable as in the mobile version, its placement is based on the entire text content div, but in the desktop version, its placement is based on the share button's position. So I put two copies of the same component, one in the share button and one in the text content and toggle if correct screen size.

What specific areas of your project would you like help with?

Probably about the share popup view, I'm interested what's the conventional way of implementing it. Also how would you position the image? I used a lot of fixed pixel positioning to get it to display, and didn't really flow accordingly to flexbox or something.

What are you most proud of, and what would you do differently next time?

I'm proud of the entire thing as a whole, this was a step up in difficulty compared to previous challenges for me, and also proud of my inability to double check, see below lol.

What challenges did you encounter, and how did you overcome them?

I thought I had to align the two images for hero left and right well to scale up even if it's two separate images, until I realized there's the combined image in the assets folder also. I also had trouble putting the background image in for the footer, until I realized I was misspelling the css property.

What specific areas of your project would you like help with?

I saw on a few notes about shorthand properties and the / in css, I dont know what it is, it seems very specific on what it does on specific properties, and MDN docs weren't exactly easy to understand.

What are you most proud of, and what would you do differently next time?

Most proud of the styling to make the cards have a decent width and height, while also being flexible when the screen size doesn't display the grid.

What challenges did you encounter, and how did you overcome them?

Had a lot of trouble with max-height and height stuff when trying to make it so cards don't get cut off when it's not in a grid, shouldn't be that difficult but the responsive queries were messing it up a little.

What are you most proud of, and what would you do differently next time?

Getting the grid layout first try, unsure if that's the "proper" way of doing it though.

What are you most proud of, and what would you do differently next time?

I'm most proud of the button sliding in on hover.

What challenges did you encounter, and how did you overcome them?

The button sliding in. Worked it somehow by using two layered buttons, with one's width being 0 and grow to 100% on hover.

What are you most proud of, and what would you do differently next time?

I'm most proud of making it as dynamic as possible that as long as the recipe has items filled in, it can still display fine without hard-coding the recipe details.

What challenges did you encounter, and how did you overcome them?

I didn't know how to style tables properly and was having a lot of trouble getting the padding. I "overcame" them by just using flexbox because I don't know.

What specific areas of your project would you like help with?

Tables styling, probably also lists because the design's ordered listing used normal numbers and i don't know how to set the css to use that instead of tabulars.