DEV Community

loading...
Cover image for A Recipe Page Made With HTML, CSS & Bootstrap

A Recipe Page Made With HTML, CSS & Bootstrap

Meia
Software Engineer in training at Techtonica. Filipina-American, born and raised in the Bay Area. Laughter + playlists are my love languages. Pronouns: she/her
・2 min read

It's been a hot minute since I've last used HTML, but getting back on it was pretty fun!

Bootstrap is amazing as it helps make the page more responsive and fluid. Static styling with CSS was pretty simple and, within a couple of days of guided self-learning, I completed this recipe page!

The recipe page was fun to do because, in a lot of ways, setting any goal and breaking it down is like creating your own recipe. So to make a page by following my own internal "mental recipe" to stay on top of my goals, this project was meaningful for me.

Back in the day when I used to customize my Xanga pages, I would usually stick to the classic grayscale for my themes because it was too tedious to figure out a solid color scheme by trial-and-error. Today, it's pretty easy to look up color schemes to use for projects. I used this one.

So for my recipe page, I picked a color scheme that fit the recipe and the photo used. I enjoyed using a linear-gradient for the background to give the viewer a visual "hint" of pistachio. Very subtle, but effective.

a gif scrolling down and shrinking the window to show the responsiveness of the page, while also showing some of the css code in the bg

For the recipe and photo, I used this site because it uses both cardamom and rosewater. The first time I made pistachio kulfi, it was for my boyfriend's parents. I tried to make it as close to the Indian way as possible, but my critics mentioned that, with the rosewater, it was "more Persian than Indian". Either way, they really enjoyed it, and I hope to make it again soon!

Discussion (0)

Forem Open with the Forem app