HTML, CSS and JavaScript fundamentals

Enough HTML, CSS and modern JavaScript to read and adjust QWeb templates, website pages and simple OWL components.

In this lesson

HTML and Bootstrap in Odoo
CSS and asset bundles
Modern JavaScript and where OWL fits

Key points

QWeb = HTML + t- directives; Bootstrap utility classes
SCSS in manifest asset bundles: web.assets_backend, web.assets_frontend
ES modules, classes, arrow functions, async/await
Read the browser console; ?debug=assets for unminified code

Real-world example

An invoice's totals block wrapped onto a second page awkwardly. Adding a CSS class to avoid page breaks inside the totals table (page-break-inside: avoid) and keeping the block in one Bootstrap row fixed it for every invoice length.

Questions and answers

Which URL parameter loads unminified assets?

?debug=assets

Name two Bootstrap utility classes used in Odoo reports.

text-end, fw-bold (also row, col-6, mt-3, d-none).

Read the full lesson, worked example and quiz