---
title: Your first page
description: "Build a task list with a Django view and labb components. Render server-side data, compose a styled page, and use icons."
keywords: "labb first page, django labb tutorial, labb getting started, django component page, labb example view"
---
Build a small task list with the Django patterns you already use: a view prepares context and a template renders it. labb supplies the page’s components and styles; Django renders the finished HTML on the server.
This is what you are building:
## Add the view
Create a view that passes tasks and their open count to a template. labb does not change how views, queries, or template context work.
```python
from django.shortcuts import render
TASKS = [
{"title": "Install labb", "done": True},
{"title": "Write a view", "done": False},
{"title": "Render a page", "done": False},
]
def today(request):
return render(request, "tasks/today.html", {
"tasks": TASKS,
"open_count": sum(1 for task in TASKS if not task["done"]),
})
```
Map the site root to that view:
```python
from django.urls import path
from tasks import views
urlpatterns = [
path("", views.today, name="today"),
]
```
## Build the template
Create `tasks/today.html`. The example extends the `base.html` you set up during [installation](/docs/guide/getting-started/installation/); it needs `` in its `` so the compiled CSS loads.
Use labb components as tags. Nest them in the same structure you would use for HTML:
```html
{% extends "base.html" %}
{% block content %}
Today{{ open_count }} open
{% for task in tasks %}
{% if task.done %}
{{ task.title }}
{% else %}
{{ task.title }}
{% endif %}
{% endfor %}
Add task
{% endblock %}
```
## Read the component structure
`` contains `` and ``. The dot identifies a component within the card family. Each piece has a focused responsibility, so you can arrange the card’s title, content, and actions without a long list of layout props.
The `{% for %}` loop and `{% if %}` branch remain ordinary Django template code. Components accept the surrounding content as a slot, so you can put loops, conditions, and variables inside them.
The `icon="rmx.add"` prop renders the button icon. The standalone `` tags render the status icons in each row. Search the icon catalogue before adding a name: an invalid name produces no icon and no template error.
```bash
labb icons search "checkbox"
```
## Start the page
Run the CSS watcher and Django server in separate terminals:
```bash
labb dev # terminal 1
python manage.py runserver # terminal 2
```
Open [http://localhost:8000](http://localhost:8000). If the page renders without styles, check that `labb dev` is running. It scans your templates for the utility classes it needs to compile.
## Next steps
You now have the basic labb workflow: keep your Django view, compose the template from components, and run the CSS watcher during development. Browse the component docs to expand the page, or extract repeated markup into a component of your own.
## Related