Kim needs a better way to access recipes from a tablet, other than searching through the 80+ PDFs we have. Watched a video about the new Gemini coding web apps from scratch and thought I'd give it a try.
Not pretty, but functional. Interesting that a virtual novice can have an LLM do help with this, and that it works with little effort.
Then, I asked Gemini to write the post that follows.
In a few months, this will be obsolete, and the LLMs will be making it even faster.
What follows was generated by Gemini
Ever had a bunch of awesome recipes scattered everywhere and wished you had one cool place to keep them all, maybe even share them? Well, I did! And I decided to build my own recipe website. Sounds super techy, right? I thought so too! But with a little help (okay, a lot of help from my friendly AI assistant!), we broke it down. Here’s the lowdown on how we cooked up this website, step-by-step, so simple even I could follow along!
Chapter 1: The Big Idea - "I Need a Recipe Website!"
It all started with a thought: "I have about 40 recipes I want to display step-by-step." I pictured a main page with a list of all my yummy creations, and then, when you click one, you'd go to its own special page.
On that recipe page, I wanted:
- The recipe title, big and proud.
- Ingredients, but not just a jumbled list! Nope, I wanted them grouped by type, like "Spices," "Veggies," etc.
- The instructions, shown one step at a time, with "Previous" and "Next" buttons to flip through them. And these buttons? They had to stay put, no matter how long the instruction was.
Chapter 2: The "No-Code-Yet" Chat - Planning is Everything!
Before we even thought about writing a single line of computer code, we just talked about it. Like, how would this even work? We decided we'd need two main kinds of pages:
- A "Table of Contents" page (we called it
index.html) to list all the recipes. - A "Recipe Card" page (we called it
recipe.html) that would magically show the details for whichever recipe you picked.
We also figured out that my recipes themselves needed to be stored in a simple, organized way. We chose something called JSON – think of it like a super neat digital index card for each recipe, holding its title, ingredients (all grouped!), and steps.
Chapter 3: The Magic Ingredients - HTML, CSS, and JavaScript
These are the three main tools for building websites:
- HTML (HyperText Markup Language): This is like the skeleton of the website. It builds the structure – like saying "this is a heading," "this is a list," "this is a button."
- CSS (Cascading Style Sheets): This is the fashion designer. It makes everything look good – colors, fonts, where things sit on the page. It’s how we made those "Previous/Next" buttons stay in one spot!
- JavaScript (JS): This is the brain. It makes the website interactive. It’s the magic that would:
- Read my recipe "index cards" (JSON files).
- Create the list of recipes on the main page.
- Show the right recipe when you click it.
- Handle the "Previous/Next" step navigation.
Chapter 4: Building the "Recipe Book" - Page by Page
First, we built the main list page (index.html). The JavaScript would look at my list of recipe file names and automatically create a clickable link for each one.
Then, we tackled the individual recipe page (recipe.html). This was like a template. When you clicked a recipe link (like "Instant Pot Black Beans"), the URL would tell recipe.html which recipe file to grab. JavaScript would then:
- Fetch the right JSON file.
- Plop the title into the heading.
- Neatly display the ingredients, all grouped into categories.
- Show the first instruction step.
- Make the "Previous" and "Next" buttons work, showing only one step at a time and disabling themselves when you're at the first or last step.
Chapter 5: Sharing with the World (Almost!) - GitHub Pages
Once we had the basic pages working on my computer, it was time to put them on the internet! We used something called GitHub Pages, which is a free way to host websites like this. It was a bit like uploading files to a special folder online.
Side Quest: The Android Oopsie! I first tried to just open the files on my Android tablet from its storage. It didn't quite work right because of some security stuff in browsers when you open files directly. Turns out, websites need to be on a proper web server (like GitHub Pages provides) for all the cool JavaScript fetching to work smoothly. Lesson learned!
Chapter 6: Making It Pretty & User-Friendly - The Glow-Up!
With the basics working, it was time for some fun improvements:
- Two-Column Power: We changed the recipe page so on bigger screens, the ingredients would sit nicely on the left, and the instructions would be on the right. Much easier to read! (And it cleverly stacks into one column on smaller phone screens).
- "Beam Me Up, Scotty!" Button: Added a "Back to Recipe List" link on each recipe page so you can easily go back to the main index.
- A Dash of Flavor (Background): We talked about finding a nice, subtle food-themed background image to make the whole site feel more "cook-y."
- Fancy Title Trick (Knockout Text): This was cool! We made the main title ("My Awesome Recipes") transparent so the new background image would show through the letters. Snazzy! We also made sure the font size was just right.
Chapter 7: Adding More Deliciousness
One of the best parts? Adding a new recipe is pretty easy now. I just:
- Create a new JSON file for the new recipe.
- Add one line to a JavaScript file (
main.js) telling it the title and filename of the new recipe. - Upload those two things to GitHub. Boom! New recipe appears.
The Journey Continues...
And that’s where we are! It’s been a super interesting journey from just an idea to a working website. There are always more tweaks and improvements to make, but for now, I'm thrilled with how it's turned out. It just goes to show, even complex-sounding things can be tackled one simple step at a time.
No comments:
Post a Comment