Dataslope

2026

Learn Python, SQL, C++ and more in the browser. Free, no sign-up.

Links
https://dataslope.comSource
About

Free courses, challenges, interview prep and playgrounds for Python, SQL, R, C, C++, Java, C# and more, with no account needed.

There are 30+ courses, 300+ challenges and 3,700+ runnable code blocks, plus interview-prep tracks. Every language runs in the reader’s own tab, so nothing runs on a server and there is no limit on runs.

RuntimesPyodide, WebR, PGlite, SQLite WASM, DuckDB-Wasm, Clang, CheerpJ, Roslyn, php-wasm
StackNext.js on Cloudflare Workers, MDX lessons, search on D1
LicenseCode MIT; lessons, illustrations and charts CC BY-NC 4.0
Everything runs in your browser: languages swap in and out around the Dataslope mark.

Courses

From Python Basics and SQL with PostgreSQL to C++, statistics, machine learning and how LLMs work, filtered by language and level.

The Dataslope mark: two mirrored strokes in #148cff that overlap at the peak.
The home page’s four cards: courses, interview prep, challenges and code blocks, each animated.
The catalog filtered to SQL, then to intermediate.

Color

Four inks, each with one job: blue for anything you can press, green for runs that pass, red for errors and yellow for highlights. The illustrations are printed in the same four.

The four inks overprinted like the risographs: where two cross, they print a third.

BlueLinks, buttons and focus

  8. Aa

GreenRun, passing tests, right answers

  9. Aa

RedErrors and wrong answers

  8. Aa

YellowHighlights and warnings

  9. Aa
Each ink is step 500 of a ramp built in OKLCH. The palette is made for the dark theme, so text on white takes the deeper step marked Aa.

Illustrations

Every course and track has an isometric illustration in one house style, cut out so it works in light and dark mode.

  • A machine shown in cross-section, its input opening, its inner works and its output chute all visible at once.
  • A machine with an empty bracket on its side, three different small tools each able to clip into that bracket.
  • A lone figure at a desktop computer in a snowy bay window, a parcel travelling along a wire to three more computers in a row.
  • Two boards of identical width stacked one directly onto the other so their columns line up into one taller board.
  • A rack of column slots each cut to a different profile, and a matching set of column blocks being lowered so each fits only its own slot.
  • A launcher lifting off from a coastal tower and tipping hard off its climb as a red burst breaks from its flank, a tracking dish watching from the ground.
  • Published drawings pinned openly on one wall while a small workshop across the way builds from them first.
  • One short strip of instructions on a bench beside a wall of interlocking frames built from many such strips.
  • A large folded paper chart opened out on a table beside a small glowing panel showing the same shape.
  • A workshop where every job arrives already boxed with its own tools, and the benches are built to take boxes.
  • The deck of a grey warship with one small file block on a console, and an empty bolted footprint where a server cabinet would have stood.
  • One block carried up onto four different steps of the same short staircase, each by its own separate ramp.
  • A page panel with a picture plate mounted in it and a small play tab on a second plate below.
  • A bench with a plotting arm on one side and a rack of statistical gauges on the other, both fed from the same tray.
  • A machine handed out freely from a counter while its mould stays bolted behind the counter.
  • A tower of hand-cut rule cards leaning and starting to slip.
  • A workbench in a research lab with statistical tools already bolted to it.
  • A figure sitting on a low couch at the left facing a teletype terminal on a small table, an empty armchair standing behind the terminal, and one plain speech bubble rising from its screen.
  • A telescope aimed across a dark band where a small rock passes, and a sheet with one smooth curve marking where the rock will reappear.
  • A vehicle body with an engine block fitted inside it, the two joined permanently.
  • A desk holding a mechanical adding machine and one guarded column of solid filled cells.
  • A sealed line of machines with all its hoses, taps and wires gathered at one end and plugged into a single marked panel.
  • A supply line run through the walls of a house, any room able to tap it without a pipe being handed down room by room.
  • An aircraft outline marked only where the returning ones were hit, the ones that never came back absent from the bench.
Lesson illustrations in a second, risograph style, cut out like the isometric ones.
The catalog on a phone in light mode.
The same scroll in dark mode.

Lessons

Every code block is an editor. Run swaps the recorded output for a live result from the tab.

Plotly Express: change the data, Run, and the chart redraws.
A multiple-choice question in an R lesson: a wrong pick, then the right one.
PostgreSQL: ORDER BY inside OVER turns totals into running totals.
R on WebR: grouping mtcars by gear with dplyr.
C compiled with Clang and run in the tab.
C# LINQ compiled with Roslyn.
A Python lesson on a phone, past two of its risograph figures.
On a phone: edit a code block, Run it in Pyodide, then Reset.
  • A plain sheet of hand-drawn marks on a bench with a working machine built directly on top of it.
  • A small personal computer showing an empty grid with one cell lit, and a row of blocks tipping into one another across the grid beside it.
  • A single counter where one slow order blocks a long queue behind it, and beside it the same counter with the slow order set aside to one side while the queue moves.
  • A long row of mail slots, a card in one slot pointing its arrow at another further down, and a figure following the arrow.
  • A parent panel handing a sealed tray down to a child panel below, the child able to read the tray but not to alter it.
  • A tray with three separate compartments beside a tray of the same size whose one compartment three parts take turns occupying.
  • A figure carrying a small sealed box out through a doorway, one block from the room still visible inside the box, the room and its shelves filling the rest of the frame.
  • A button pressed on a panel, a short cord carrying the press to a small handler box behind it.
  • An early printed chart pinned to a board with two figures pointing at different parts of the same line.
  • A rail with points and a loop, carts routed differently at each pass.
  • Chips collapsing into one summary block on one bench, and on the next the chips still standing, each with its own tag.
  • A caliper measuring a tiny gap between a mark and where a block actually sits.
  • A figure setting one block at a time onto an inked panel, a long queue of blocks still waiting in a tray beside them.
  • A wave laid over the four reference shapes, one of them matching it exactly.
  • A load taking one of two chutes at each station, the lower chute carrying the first fault straight to the end untouched.
  • A crate opened and its first rows fanned across a bench for a first look.
  • A laptop sending a folded note along a cable to a server drum, which sends a larger page back along the same cable.
  • Several scoops taken from one bin with replacement, each scoop feeding its own small machine.

Challenges

300+ graded challenges, and interview tracks from data analyst and data engineer to ML and backend engineer.

Group Anagrams: a solution submitted against six checks.
The six interview-prep tracks, each with its illustration.
  • Two boards joined where one key matches three rows on the far side, the tray between them filling with more rows than either board held.
  • A chart on a stand with a hand tracing its shape and a magnifier held over two marks that break the pattern.
  • A bin with a narrow mouth accepting a block once and rejecting an identical second.
  • A small machine inside the hopper of a larger one, making a tray of blocks that the larger machine then works on.
  • Three different machines fitted with the same front plate and handle, so one hand works all three the same way.
  • A large blue radiation therapy machine with a heavy rotating head standing over a flat empty treatment couch on the left, a stylized operator seated at a small terminal on the right, one narrow red beam falling on the couch, and a yellow safety latch lying detached on the floor between them.
  • One crate passing through three small presses that make it partial, then read-only, then narrower, each leaving a visibly changed crate.
  • A sealed cabinet with its works hidden inside and two clean handles on its face, a figure using only the handles.
  • Three sealed boxes with differently shaped tags, a sorter reading only the tag to send each down its own chute.
  • A figure at a desk facing three walls closing in, each taller than the last.
  • A wall of small drawers each with a keyhole, a key going straight to one drawer.
  • Four small panels in a row over one continuous axis rule, with a single key block at the right serving every panel.

Playgrounds

Playgrounds for code editors in nine languages, web and React sandboxes, Bash, Git, and a SQL workbench for PostgreSQL, SQLite and DuckDB.

A marmot on a blue slide, a fox and a penguin on a green seesaw, and a yellow climbing block on a pale platform
The playgrounds’ illustration: a marmot on the slide, a fox and penguin on the seesaw.
The playground index.
The playground index.
The PostgreSQL workbench: schema tree, a query and its result grid.
The PostgreSQL playground on a phone: a join, its result grid, then the schema.
The Python playground on a phone: Run, and the output tab opens.
The DuckDB workbench: a query, then its ER diagram.
The Git playground: stage, commit and read the log as the graph updates.
  • Four small tools hanging above a bench, each one shown taking a different bite out of the same awkward slab.
  • A sealed drum with one crank and one chute, handing out a single block per turn.
  • A board passed under a lamp that lights only the covered cells, leaving the filled ones dark.
  • A plain bound paper open on a workbench with a half-built machine taking shape beside it.
  • A wall assembled from interchangeable panels, one panel lifted out and a differently shaped one dropped into the gap.
  • A row of chips of different heights fed into a machine that hands back a spinner with wedges of matching sizes.
  • A stack of four plates, the boldest mark on top and the faintest ornament at the bottom.
  • A scatter of mixed blocks being raked into three neat piles, and one tall summary block standing beside each pile.
  • Three stencils hanging above a board of mixed shapes, each cut to catch a different kind.
  • One standard fitting and one standard crank shown together on the front of several different containers.
  • Three benches side by side, each one quickest at a different stage of the same job.
  • A flat card tilting up on one edge as a hand passes over it, its footprint on the page unchanged.
  • A scoop taken from a large bin, the scoop's chips poured into bins that build a small mound.
  • A large clock face on the left whose hand has slipped just past its mark, a round radar screen in the middle showing a single blip, and a track passing wide of that blip on the right.
  • One panel drawn alone on a bench, and a whole grid of such panels built in one stroke beside it.
  • Three bins filled from a single pile, each bin handing one summary card up to the rail above it.
  • A smooth unbroken ramp lying over a rail, its height varying with no steps or gaps along its length.
  • An inner ring holding the rules with every outside connection plugged into its rim rather than reaching through it.
The home page, the catalog, interview prep, a Python lesson and a Postgres query.
Ctrl+K search, an FTS5 index on D1, opening a lesson with the word highlighted.
Light and dark: the chart switches palette in place.
The header’s theme switch turns the whole home page dark, then light again.
  • A figure holding a lamp to a machine that has stopped, the lamp lighting one jammed part rather than the whole machine.
  • A whole chain of joined machines lifted as one piece and set into a larger machine's slot.
  • The same awkward shape of hand-built machinery repeated on four benches, each built slightly differently.
  • A workbench carrying three finished machines in a row, each built by the same hand and clearly related.
  • A block dropped into a mixing machine whose chute swings to one of several bins.
  • A block leaving a belt mid-run and falling toward a padded basket held beneath.
  • Three benches, one fitting a ramp to chips, one sorting chips into two bins, one grouping chips with no bins given.
  • Three transparent sheets held apart in a stepped stack on the right, each carrying a different mark, and a figure at the left lowering the topmost sheet onto the others.
  • Two racks of tiles of the same total height, one made of many distinct kinds and one of few repeated.
  • A hand-cut stencil beside a machine cutting its own stencil from a pile of worked examples.
  • A set of parts kept in one flat tray but grouped by color into the layers they would otherwise live in.
  • Seven cards on a table, each holding some of the knowledge and some of the work, being sorted into who does what.
  • A stack of shelves where the depth of a shelf alone says what belongs on it, with no brackets anywhere in sight.
  • A block falling past every basket on a bench and off the end onto the floor.
  • A tray handed down through five nested frames, each pair of hands only passing it on.
  • One page assembled from separate framed panels that each clip in and out, one panel lifted out to show the socket beneath.
  • A room-sized cabinet computer hung with patch cables on the left, a coarse square grid laid over a plain map of North America in the middle, and a cloud with a wind arrow standing over that grid at the right.
  • One tray of chips with four chart frames fanned above it and a hand reaching for the fitting one.
  • A counter handling one parcel at a time beside a warehouse aisle being swept end to end.
  • A heavy remote strongroom with a long pipe on one bench, and on the next a compact engine sitting right beside the workbench.
  • A board of rows passing a gate that swings open only for rows carrying a matching notch.
  • A mixed heap of chips split by a spinner rather than by hand, the two halves visibly alike.
  • A crate handed back over a counter twice, the counter clerk holding out empty hands the second time.
  • A shaped gate stopping a mismatched block before the belt has started moving.
1,800+ lesson illustrations, across 30+ courses, are drawn in this style.