QuackyardFlexbox Yard
Learn CSS flexbox by writing the declarations that move the ducks onto their ponds, judged by a real flex layout.
Level 1 of 12
The right bank
Every duck sits in a line along the main axis, which for a row runs left to right. `justify-content` places that whole line: `flex-start` at the left edge, `flex-end` at the right, `center` in the middle, and the `space-` values spread the line out. Put all three ducks on the ponds at the right edge.
The yardPonds are dashed; each one is labelled with the duck it wants.
.yard the yard.item-1 … .item-3 one duck each, numbered as they are writtenDeclarations at the top level belong to the yard too. The score counts each declaration as property: value, so short values win.
0 of 3 ducks on a pond.
- ✗Duck 1at 0, 0 · 60×60wants 140, 0 · 60×60
- ✗Duck 2at 60, 0 · 60×60wants 200, 0 · 60×60
- ✗Duck 3at 120, 0 · 60×60wants 260, 0 · 60×60
More in the yard
- ASCII TableEvery ASCII character with its decimal, hex, octal, binary and HTML code, and a lookup for any character.
- Base64 Encoder & DecoderEncode text to Base64 and decode it back, in the standard or URL-safe alphabet, without your text leaving the page.
- Bit FlipFlip bits until the board makes the target number: twelve levels from place values to hex, masks and shifts.
- Bitwise CalculatorWork out AND, OR, XOR, NOT and shifts at any width, and see every bit of both operands and the answer.
- Box Shadow GeneratorDesign CSS box shadows layer by layer, preview them, and copy the value with a matching Tailwind class.
- Case ConverterConvert text between camelCase, PascalCase, snake_case, kebab-case, Title Case and more, and make a URL slug.
- chmod CalculatorConvert Unix permissions between octal and symbolic notation, special bits included.
- CIDR & Subnet CalculatorWork out what an IPv4 or IPv6 block covers, split it into subnets, and check whether an address is inside it.
- Code TypingA typing test with real code instead of prose: ten snippets in ten languages, brackets, quotes and all.
- Color Converter & Contrast CheckerConvert a colour between HEX, RGB, HSL and OKLCH, and check two colours against WCAG.
- Color Palette GeneratorPick one colour and get its harmonies, a Tailwind-style 50-to-950 scale, contrast ratios and paste-ready CSS.
- Cron BuilderRead and write cron expressions in plain English, with the next run times in any timezone.
- CSP BuilderBuild a Content-Security-Policy header, or paste one to see what it allows and where it is weak.
- CSS FormatterFormat or minify CSS, with strings, url()s and custom properties kept exactly as written.
- CSS Gradient GeneratorBuild linear, radial and conic gradients by eye: drag the colour stops, try a preset and copy the CSS.
- CSS SelectorsWrite one CSS selector that picks exactly the elements a level highlights, in as few characters as you can.
- CSV ↔ JSON ConverterConvert between CSV and JSON: RFC 4180 quoting, an auto-detected delimiter, typed values, and a preview of the table.
- curl to Code ConverterTurn a curl command into JavaScript, Python, Go or PHP, with the request it builds and every flag left out.
- Data Size ConverterConvert bits, bytes, kB and MB against KiB, MiB and GiB exactly, and time a download.
- Date CalculatorCount the days between two dates, and add or subtract days, weeks, months and years.
- docker run to Compose ConverterTurn docker run commands into a compose.yaml service, and a Compose file back into commands, flag by flag.
- Git QuestLearn Git branching by typing real commands and watching the commit graph change until it matches the goal.
- Gitignore GeneratorBuild a .gitignore for your stack, and check whether a path would be ignored.
- Hash GeneratorHash text with MD5, SHA-1, SHA-256, SHA-384 and SHA-512 at once, and check a hash against it.
- Hex Color GameSee a colour, guess its hex code: ten levels from greys to near-miss pairs, judged by CIEDE2000.
- HMAC GeneratorSign a message with a secret key — HMAC over SHA-256, SHA-512, SHA-1 or MD5 — and check a signature against it.
- HTML Entity Encoder & DecoderEscape text into HTML entities and read them back, named where a name exists and numeric otherwise.
- HTML FormatterFormat or minify HTML, keeping script, style, pre and textarea exactly as written.
- HTTP Status CodesLook up any HTTP status code: what it means, when to use it, and what clients do with it.
- ISO 8601 Duration ConverterRead and write ISO 8601 durations like P1DT2H30M, and convert them to seconds and back.
- jq TrainerLearn jq by writing the filter that pulls the target out of a JSON document, in as few characters as you can.
- JSON DiffCompare two JSON documents by path and copy the JSON Patch that turns one into the other.
- JSON Formatter & ValidatorFormat, minify and check JSON, and see the exact line and column where it breaks.
- JSON to GoTurn a JSON sample into Go structs with json tags, ready to paste into a file.
- JSON to TypeScriptTurn a JSON sample into TypeScript interfaces or type aliases, with a Zod schema when you want one.
- JSON ↔ YAML ConverterConvert between JSON and YAML: anchors resolved, multi-document files handled, and output that round-trips.
- JSONPath TesterRun a JSONPath expression over your JSON and see every value it selects, at the path it lives at.
- JWT DecoderDecode a JSON Web Token in your browser and read its header, claims and expiry in plain words.
- JWT EncoderSign a JSON Web Token with HMAC — edit the header and the claims, pick HS256, HS384 or HS512.
- Lorem Ipsum GeneratorGenerate classic Lorem Ipsum or developer-flavoured filler, by the paragraph, sentence or word.
- Markdown Editor & PreviewWrite Markdown, see it rendered, and copy the HTML.
- Markdown Table GeneratorDraw a table in a grid, or paste CSV, TSV or a spreadsheet selection, and copy clean Markdown back out.
- MIME Type LookupLook up the MIME type for a file extension, or the extensions for a MIME type.
- Number Base ConverterConvert a number between binary, octal, decimal, hex and any base from 2 to 36, however big it is.
- Password GeneratorMake strong passwords and passphrases from your browser’s own randomness, and check how strong a password is.
- PX to REM ConverterConvert px, rem, em, pt and % in both directions, at any root font size.
- QR Code GeneratorMake a QR code for a link, Wi-Fi, an email or a phone number, and download it as SVG or PNG.
- Random String GeneratorDraw random strings, tokens and IDs in your browser: hex, base64url, NanoID, ULID, or an alphabet of your own.
- Regex CrosswordA crossword whose clues are regular expressions: fill the grid so every row and every column matches its pattern.
- Regex TrainerLearn regular expressions one level at a time: match one list, skip the other, in as few characters as you can.
- Robots.txt TesterCheck a robots.txt: would this crawler be allowed to fetch this URL, and which rule decided?
- Semver Range CheckerCheck which versions satisfy an npm semver range, and read what the range means in plain words.
- Shell PipesBuild Unix pipelines that turn a log, a CSV or a word list into the target output, in as few characters as you can.
- SQL DetectiveSolve a yard mystery with SQL: ten levels of queries against a small database, in as few characters as you can.
- SQL FormatterFormat SQL for reading, or minify it, in the dialect you use.
- String Escape & UnescapeEscape and unescape strings for JSON, JavaScript, Java, C#, Python, SQL, regex, the shell and CSV.
- SVG OptimizerStrip editor junk, round coordinates and shorten path data, and see both drawings side by side.
- Text to Binary ConverterConvert text to binary, hex, decimal or octal bytes, and back — UTF-8, UTF-16 or ASCII, without leaving the page.
- Diff CheckerCompare two texts line by line, word by word or character by character, and copy the unified diff.
- Time Zone ConverterConvert a date and time between time zones, and see it in several at once.
- TOML ↔ JSON ConverterConvert between TOML and JSON: tables, arrays of tables, dotted keys and every value kind, with errors that point.
- Unix Timestamp ConverterTurn Unix timestamps into dates and back, in any timezone.
- URL Encoder & DecoderPercent-encode text for URLs, decode it back, and take a URL apart into its pieces.
- User Agent ParserRead a User-Agent string: browser, engine, operating system, device, and whether it is a known crawler.
- UUID Generator & DecoderGenerate version 4 and 7 UUIDs, or take any UUID apart: its version, its variant, and when a time-based one was made.
- Vim MovesLearn Vim by editing: turn the buffer into the target in as few keystrokes as you can.
- Word CounterCount words, characters, sentences and paragraphs as you type, with reading and speaking time.
- XML Formatter & ValidatorFormat, minify and check XML, and point at the exact spot where it breaks.
- YAML Validator & FormatterFind the line where YAML breaks, warn about the traps that change what it means, and reformat it with comments kept.