Adding JS and CSS

Front-end assets belong under public so the web server can deliver them directly. Reference them with base_url() so the application keeps working when installed in a subfolder.

Folder layout

public/assets/css/app.css
public/assets/js/app.js
public/assets/img/logo.png
public/uploads/learn/

Link a stylesheet

<link rel="stylesheet">

Add a script

<script defer></script>

defer lets the HTML parse before the script runs. Use type="module" when the file uses ES modules.

Page-specific assets

Keep shared CSS and JavaScript in the main layout, then let individual views add their own files through a layout section such as scripts. That avoids loading an editor or chart library on every page.

Cache busting

<link rel="stylesheet">

A version string based on the file modification time forces browsers to fetch the new file after a deployment.

Production tips

• Minify and combine files during the build rather than by hand.
• Compress images and prefer modern formats such as WebP.
• Serve assets with long cache headers when their names change on release.
• Do not put secrets or server-only logic in JavaScript.

Back to course overview · Previous: Benchmarking · Next: Internationalization