Lesson 3: Extending the Base, Bootstrap Changes

1. Purpose of base.html

• Found in the templates folder.
• Acts as the master template for the website.
• Holds all the elements that stay the same across every page.

Examples of what goes here:

• CSS (Cascading Stylesheets) → controls look & feel.
• Navigation bar.
• Flash message container.
• Footer scripts.

2. Structure of base.html

Head section

• Contains the <title> (shown at the very top of the browser).
• Links CSS stylesheets for the site's look and feel.

Body section

• Navbar → navigation links across the top of the page.
• Flash messages container → for displaying alerts or notifications.
• Scripts/footer section → where JavaScript can be placed.

Content block:

{% block content %}{% endblock %}

• Placeholder for page-specific content.
• This is where each page (like animals.html) inserts its unique HTML.

3. Extending base.html

Other HTML files don't repeat the whole layout.

Instead, they use:

{% extends "base.html" %}

Each file only needs to define the content block:

{% block content %}
    <h1>Animals Page</h1>
    <p>This is where animal content goes.</p>
{% endblock %}

All shared elements (navbar, CSS, scripts, etc.) come automatically from base.html.

4. Benefits

• Consistency → Every page has the same look (styles, navbar, layout).
• Efficiency → Only edit base.html if you want to change the site-wide design.
• Clean code → Individual pages stay focused on their unique content.
• Bootstrap integration → Provides a modern, responsive layout and easy styling.

Key Takeaways

• base.html = the foundation of your website's design.
• Use {% block content %} in base.html as a placeholder.
• Other HTML files {% extend "base.html" %} and only fill in their content.
• Change the look of the whole site by editing just one file (base.html).