Front End
What the user actually sees: the web platform itself, the JavaScript ecosystem on top of it, and the Python shortcuts for when you do not want any of that.
There are two routes to a user interface here, and the site covers both without pretending one is correct.
The first is the real one: HTML, CSS, JavaScript, then a framework, a bundler, a linter, and a build step. The second is to skip it, and let a Python library generate the interface. That is the right answer more often than front-end developers like to admit, particularly for a dashboard or a model demo, which is most of what gets built in this collection.
Nearly every page assumes a Django REST Framework backend, because that is what these interfaces are put in front of. See Back End for that half.
Skipping the Front End
Python libraries that generate the interface, ordered by how much control they give up.
| Page | Covers |
|---|---|
| Streamlit | The most detailed of these. A script becomes a web app, which is why it wins for internal tools |
| Gradio | The same idea aimed at model demos, an input, an output, and a shareable link |
| Plotly Dash | Flask, Plotly.js, and React underneath, exposed as Python. More work than Streamlit, more control in return |
| fastHTML | HTML generated from Python, without the JavaScript layer |
| Grafana | Not a framework at all. Point it at a time-series source and you have dashboards without writing an interface |
The Web Platform
| Page | Covers |
|---|---|
| HTML | The markup itself |
| CSS | Styling |
| Bootstrap | The CSS and JavaScript component framework that saves writing most of it |
| SVG | Vector graphics in the browser, at length |
| Markdown | The lightweight markup behind most documentation, including this site |
| HTTP Headers | Message headers, how Nginx sets them, and CORS, which is the one that breaks a front end against an API |
JavaScript and Its Toolchain
| Page | Covers |
|---|---|
| JavaScript | Writing the front end against a DRF API |
| Fetch API | Promise-based HTTP requests, replacing XMLHttpRequest |
| jQuery | The older way, still met in existing code |
| TypeScript | Optional static typing over JavaScript, compiling back down to it |
| Node | JavaScript on the server, its core concepts and ecosystem |
| npm | Dependency management for all of the above |
| Webpack | Bundling code, styles, and assets into what the browser actually loads |
| Prettier | Opinionated formatting across JS, TS, HTML, CSS, and JSON |
| ESLint | Linting, for the errors formatting cannot catch |
| Highcharts | Charting driven from a DRF endpoint |
| DataTables | Sortable, searchable tables |
| SurveyJS | The JSON format for defining forms and surveys |
React
| Page | Covers |
|---|---|
| React Overview | Fundamentals through to modern patterns and ecosystem tooling |
| React Setup | Getting a project running |
| React Init | The initial scaffold |
| React Libraries | The npm add-ons worth knowing, grouped by what they do |
| React and Django | The full-stack pairing: project structure, how the two halves communicate, deployment, and practice |
| React with Docker | A production setup for Django, DRF, React, and PostgreSQL together, using multi-stage builds, Nginx for static files, and Compose to orchestrate it |
Flutter
The mobile and desktop route, where one codebase targets Android, iOS, Linux, Windows, and macOS.
| Page | Covers |
|---|---|
| Flutter Setup | Getting the toolchain working |
| Widgets | The framework’s whole model is that everything is a widget |
| Dart | The language underneath |
| Riverpod | State management |
Being Found and Measured
| Page | Covers |
|---|---|
| SEO | Split into three layers, of which a full-stack developer owns one completely, shares one, and should refuse the third |
| Website Metrics | Tracking traffic and behaviour through analytics, heatmaps, and log analysis |
| Google Analytics | Wiring GA into a Django project |
Not Covered Yet
- No Vue, Svelte, or Angular. React is the only JavaScript framework covered.
- Nothing on accessibility, which is the omission that matters most in a front-end reference.
- No testing. Neither component testing nor browser automation appears anywhere.
- Nothing on state management in React specifically. Riverpod covers it for Flutter, but Redux, Zustand, and the modern alternatives are absent.
- No responsive or mobile-web design page, despite Bootstrap being covered.
- Four stubs at two to three cells: React Init, Fetch API, jQuery, and Google Analytics.
- Web performance, bundle size, and Core Web Vitals go unmentioned even though Webpack and metrics both have pages.