# First Project URL: /kida/docs/get-started/first-project/ Section: get-started Description: Build a multi-page template project with inheritance, filters, and context --- > For a complete page index, fetch /kida/llms.txt. Build a mini email template system using inheritance, filters, and context passing. ## Project Structure ``` my-templates/ ├── templates/ │ ├── base.html │ ├── welcome.html │ └── invoice.html └── render.py ``` ## Step 1: Base Template Create `templates/base.html` with a shared layout: ```html {% block title %}Notification{% end %}

{% block content %}{% end %}

``` ## Step 2: Child Templates Create `templates/welcome.html` extending the base: ```html {% extends "base.html" %} {% block title %}Welcome, {{ user.name }}!{% end %} {% block content %}

Welcome aboard, {{ user.name | title }}!

Here's what you can do:

{{ feature }}

{% if user.role == "admin" %}

Admin panel: {{ admin_url }}

{% end %} {% end %} ``` Create `templates/invoice.html`: ```html {% extends "base.html" %} {% block title %}Invoice #{{ invoice.id }}{% end %} {% block content %}

Invoice #{{ invoice.id }}

{% for item in invoice.items %} {% end %}

Item	Qty	Price
{{ item.name }}	{{ item.qty }}	${{ item.price }}

Total: ${{ invoice.total }}

{% end %} ``` ## Step 3: Render Script Create `render.py`: ```python from kida import Environment, FileSystemLoader env = Environment(loader=FileSystemLoader("templates/")) # Add a custom filter env.add_filter("currency", lambda v: f"${v:,.2f}") # Render the welcome email welcome = env.get_template("welcome.html") print(welcome.render( company="Acme Inc", date="2026-02-08", user={"name": "alice", "role": "admin"}, features=["Dashboard", "Reports", "API Access"], admin_url="https://admin.example.com", )) print("---") # Render the invoice email invoice_tmpl = env.get_template("invoice.html") print(invoice_tmpl.render( company="Acme Inc", date="2026-02-08", invoice={ "id": "INV-001", "items": [ {"name": "Widget", "qty": 3, "price": 9.99}, {"name": "Gadget", "qty": 1, "price": 24.99}, ], "total": 54.96, }, )) ``` ## Step 4: Run It ```bash python render.py ``` Both templates share the same base layout, but each fills in its own title and content blocks. ## Key Takeaways | Concept | What You Learned | |---------|-----------------| | `{% extends %}` | Child templates inherit a base layout | | `{% block %}...{% end %}` | Named sections that children can override | | `{{ obj.attr }}` | Dot access works on dicts and objects | | `{{ value \| title }}` | Filters transform output inline | | `env.add_filter()` | Register custom filters at startup | ## Next Steps :::{cards} :columns: 2 :gap: medium :::{card} Template Inheritance :icon: layers :link: /docs/syntax/inheritance/ :description: Extends, blocks, and multi-level layouts Deep dive into Kida's inheritance model. :::{/card} :::{card} Filters Reference :icon: filter :link: ../reference/filters :description: 60+ built-in filters Browse all available filters with examples. :::{/card} :::{/cards}