Home Page

Our Home page looks like that.

Let's beef it up a little bit. Under the different navbar examples, we can see this nice gray rectangle with a little bit of text and a little button here to launch something. Put this into our Home Page with some welcome things and some little things to explain what it is, and then have this link to our main web page with all our recipes.

Let's go back to the View Page Source code here. Find <h1>Navbar examples</h1> at the end of the page.

So our Home page is empty. Go to the index.html, which is our template for Home page. Right below that Home page text, paste in the key elements and give the whole document a little style.

Once that's done, hit the refresh button, and voilà! Your page just got a whole lot more interesting.

Instead of Nawbar examples, let's write "Welcome to CookBook Craze" and change the text here on the welcome text generated by ChatGPT.

Let's make things more interactive. How about counting the number of recipes in our database and displaying that count on the Home page? To do this, we'll need to insert a new tag between the paragraph and a button like this: <h3>We have {{ }} recipes</h3>.

Now, head over to the main.py file, and within the home function, create a variable with a query to retrieve the recipe count from the database. Then, pass this variable as a parameter when rendering the template.

Come back to the index.html and add inside curly braces {{ num_recipes }}.

Refresh page:

So, we've got a navbar up and running, and we've created a beautiful Home page – all thanks to Bootstrap, which worked quite swiftly. With some inspect-copy-paste-edit techniques, you can easily incorporate any free design from the internet.