CodeUtility
Mach dir das Coderleben leicht!
CSS and design

CSS Flexbox Generator

Play with every flexbox property and see the layout change instantly, then copy the code.

  • Runs in your browser
  • Instant results
  • Free, no sign-up
Loading the tool…

How to use the Flexbox Generator

  1. Set the container properties at the top.
  2. Click an item in the preview to change its own flex properties.
  3. Copy the generated CSS and HTML.

Frequently asked questions

What is the difference between justify-content and align-items?

justify-content places items along the main axis (the direction); align-items places them across it.

What does flex: 1 mean?

flex-grow: 1, flex-shrink: 1 and flex-basis: 0%, so items share the free space equally.

When should I use grid instead?

Use flexbox for one-dimensional rows or columns, and CSS grid when you need rows and columns at the same time.

CSS Grid GeneratorCreate CSS grid layouts visually: set columns, rows and gaps, drag across cells to place items, and copy the CSS and HTML. Box Shadow GeneratorCreate CSS box-shadow effects with multiple layers, inset shadows, blur, spread and opacity. See a live preview and copy the CSS. PX to REM ConverterConvert px to rem and rem to px with any root font size. Includes a table of common sizes and bulk conversion of whole CSS files.

Übe Python mit Coding Challenges

Löse praktische Aufgaben direkt im Editor: Führe die Beispieltests aus, reiche ein und erhalte ein KI-Code-Review.

Alle Python-Challenges
Einfach

Average of Three

Average three whole numbers.

Du lernst ArithmetikDivision
BeginnerLearning-pathVariables
Python C++ C#
1 gelöst
Lösungen anzeigen (1)
Einfach

Rechteck-Umfang

Berechne den Umfang eines Rechtecks anhand seiner Seiten.

Du lernst ArithmetikRückgabewerte
BeginnerLearning-pathVariables
Python C++ C#
1 gelöst
Lösungen anzeigen (1)
Mittel

Eine Generation eines genetischen Algorithmus

Züchte die nächste Generation von Bitstrings mit Turnierselektion, Einpunkt-Crossover und Mutation.

Du lernst Genetische AlgorithmenEvolutionäre Suche
OptimizationSimulationai
Python C++ C#
0 gelöst
Noch keine Lösungen
Einfach

Epsilon-Greedy-Multi-Armed-Bandit

Balanciere Erkundung und Ausnutzung bei einem Multi-Armed-Bandit mit Epsilon-Greedy-Aktionsauswahl.

Du lernst Erkunden vs. AusnutzenBandits
Bestärkendes Lernenaimaschinelles Lernen
Python C++ C#
0 gelöst
Noch keine Lösungen
Einfach

Zustandsverteilung einer Markov-Kette

Führe eine Wahrscheinlichkeitsverteilung über eine Anzahl von Schritten durch die Übergangsmatrix einer Markov-Kette.

Du lernst Markov-KettenWahrscheinlichkeit
Simulationaimath
Python C++ C#
0 gelöst
Noch keine Lösungen
Mittel

Wertiteration

Berechne, wie wertvoll jeder Zustand eines Markov-Entscheidungsprozesses ist, indem du wiederholt das Bellman-Optimalitäts-Update anwendest.

Du lernst Bellman-GleichungMDPs
Bestärkendes Lernenaimaschinelles Lernen
Python C++ C#
0 gelöst
Noch keine Lösungen
Mittel

Q-Learning-Updates

Wende das Q-Learning-Update auf einen Strom von Erfahrungen an und sieh zu, wie Belohnungen zu früheren Zuständen zurückfließen.

Du lernst Q-LearningDiskontierte Belohnungen
Bestärkendes Lernenaimaschinelles Lernen
Python C++ C#
0 gelöst
Noch keine Lösungen
Mittel

Alpha-Beta-Pruning

Bewerte einen Spielbaum mit Minimax und Alpha-Beta-Pruning und zähle, wie viele Blätter die Suche tatsächlich ansieht.

Du lernst Alpha-Beta-PruningSpielsuche
RecursionTreesai
Python C++ C#
0 gelöst
Noch keine Lösungen
Mittel

Minimax-Tic-Tac-Toe

Wähle den perfekten Tic-Tac-Toe-Zug, indem du den ganzen Spielbaum mit Minimax durchsuchst.

Du lernst MinimaxSpielbäume
Recursionai
Python C++ C#
0 gelöst
Noch keine Lösungen
Mittel

A*-Suche auf einem gewichteten Gitter

Finde mit A*, dem Suchalgorithmus hinter der Wegfindung in Spielen und Robotern, den günstigsten Weg durch ein Gitter aus Geländekosten.

Du lernst A*-SucheHeuristiken
GraphsGridsShortest-pathai
Python C++ C#
0 gelöst
Noch keine Lösungen
Mittel

Temperatur- und Top-K-Sampling

Wähle das nächste Token wie ein Sprachmodell: Behalte die k höchsten Logits, wende die Temperatur an und ziehe eine Stichprobe.

Du lernst TextgenerierungSampling
aimaschinelles Lernen
Python C++ C#
0 gelöst
Noch keine Lösungen
Schwierig

Multi-Head-Self-Attention

Projiziere die Eingabe in Queries, Keys und Values, führe Attention in mehreren Heads parallel aus und kombiniere sie.

Du lernst Multi-Head-AttentionMatrixprojektionen
aimaschinelles Lernen
Python C++ C#
0 gelöst
Noch keine Lösungen