Responsive Recipe Site, Using Bootstrap and vanilla CSS/JS

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

I’m proud that I stuck with this project, even when the JavaScript got frustrating. This was my first time using Bootstrap, so learning its layout system while also rendering recipes from JSON was a lot to work through. Getting the cards, recipe pages, search, and filters connected felt like a big step. Next time, I’d build one small piece at a time and make sure I could explain how it works before adding another. I’d also keep my formatting more consistent as I go, because messy code made debugging harder.

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

Bootstrap spacing and figuring out which parent should control the layout took some getting used to. Combining search with both time filters was another challenge. Initially, they worked separately and would overwrite each other’s results. Breaking the filtering down into individual checks helped it make sense. I also used the console, checked documentation, and asked for guidance from Codex when I got stuck. Scope, callbacks, and working with an array versus one recipe object are things I’m still getting more comfortable with.

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

I’d appreciate feedback on my JavaScript organization, especially the repeated card-rendering code and how I’ve connected the filters. I’d also like feedback on whether I’m using Bootstrap appropriately or adding unnecessary layout classes.

Accessibility and responsive-layout feedback would be helpful too. I’m trying to get better at understanding why an approach works, so explanations alongside suggestions would mean a lot.