Quantum Computing Fundamentals

From Qubits to Basic Algorithms for Beginners

beginner26 min13 cards

Explain why quantum computers can outperform classical ones for specific tasks
Describe qubits, superposition, and entanglement
Construct and simulate basic quantum circuits
Understand introductory quantum algorithms

Swipe up to begin ↑

ConceptWhy Quantum Computing?

Classical Limitations

Why some problems are hard

Classical computers process bits sequentially. Certain tasks, such as factoring large integers or simulating quantum molecules, require exploring an exponentially growing number of possibilities (2ⁿ for n bits).

Factoring a 2048-bit number can take longer than the age of the universe on today’s fastest machines.
Optimization problems (e.g., traveling salesman with 50+ cities) also scale exponentially.

CheckWhy Quantum Computing?

Check: Hard Problems

Which problem becomes intractable for classical computers as input size grows?

Try itWhy Quantum Computing?

Bits vs Qubits Explorer

Create a slider (1–10) that shows two side-by-side panels. Left panel: classical bits — display the exact 2^n possible states but note they must be checked one-by-one. Right panel: qubits — display a single state vector that represents all 2^n possibilities simultaneously via superposition. Update both panels live as the slider moves and show the count of representable states.

```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Qubit vs Classical Slider</title> <style> body { font-family: system-ui, sans-serif; margin: 20px; background: #0a0a0a; color: #eee; } .container { display: flex; gap: 20px; max-width: 1200px; margin: 0 auto; } .panel { flex: 1; border: 1px solid #333; border-radius: 8px; padding: 16px; background: #111; } h2 { margin: 0 0 12px; font-size: 1.1rem; } .slider-container { text-align: center; margin-bottom: 20px; } input[type=range] { width: 300px; } .count { font-weight: bold; color: #0af; } .classical-list { font-family: monospace; font-size: 0.85rem; max-height: 300px; overflow-y: auto; white-space: pre; line-height: 1.3; } .qubit-vector { font-family: monospace; font-size: 0.9rem; background: #1a1a1a; padding: 12px; border-radius: 4px; } .note { font-size: 0.8rem; color: #888; margin-top: 8px; } </style> </head> <body> <div class="slider-container"> <label for="nSlider">Number of bits/qubits: <span id="nValue">1</span></label><br> <input type="range" id="nSlider" min="1" max="10" value="1" step="1"> <div>Representable states: <span id="stateCount" class="count">2</span></div> </div> <div class="container"> <div class="panel"> <h2>Classical bits</h2> <div id="classical" class="classical-list"></div> <div class="note">Must be checked one-by-one</div> </div> <div class="panel"> <h2>Qubits</h2> <div id="qubit" class="qubit-vector"></div> <div class="note">All states simultaneously via superposition</div> </div> </div> <script> const slider = document.getElementById('nSlider'); const nValue = document.getElementById('nValue'); const stateCount = document.getElementById('stateCount'); const classicalDiv = document.getElementById('classical'); const qubitDiv = document.getElementById('qubit'); function update(n) { nValue.textContent = n; const total = Math.pow(2, n); stateCount.textContent = total.toLocaleString(); // Classical panel let classicalHTML = ''; for (let i = 0; i < total; i++) { const bin = i.toString(2).padStart(n, '0'); classicalHTML += bin + '\n'; if (i > 200) { classicalHTML += '... (' + (total - 201) + ' more)'; break; } } classicalDiv.innerHTML = classicalHTML || '0'; // Qubit panel qubitDiv.innerHTML = `|ψ⟩ = 1/√${total} ∑<sub>x=0</sub><sup>${total-1}</sup> |x⟩<br><br>Single state vector of dimension ${total} representing all possibilities at once`; } slider.oninput = () => update(parseInt(slider.value)); update(1); </script> </body> </html> ```

RecallWhy Quantum Computing?

How many states can 3 qubits represent at once?

ConceptQubits and Quantum Phenomena

Qubit State in Dirac Notation

Single-Qubit State

A qubit state is written |ψ⟩ = α|0⟩ + β|1⟩, where α and β are complex numbers called amplitudes.

Normalization requires |α|² + |β|² = 1.

ConceptQubits and Quantum Phenomena

Superposition

Until measured, the qubit exists in both |0⟩ and |1⟩ simultaneously, weighted by α and β. This is superposition.

CheckQubits and Quantum Phenomena

Measurement Probabilities

If |ψ⟩ = (1/√2)|0⟩ + (1/√2)|1⟩, what are the probabilities of measuring 0 or 1?

Try itQubits and Quantum Phenomena

Qubit Measurement Simulator

Build a simple calculator: user enters real values for α and β (assume normalized), then on button click display the two possible measurement outcomes and their probabilities |α|² and |β|² as percentages. Show a random measurement result when the user clicks 'Measure'.

<input id="a" placeholder="α (real)"> <input id="b" placeholder="β (real)"> <button onclick="calc()">Calc</button> <div id="r"></div> <button onclick="meas()">Measure</button> <div id="o"></div> <script> function calc(){let a=+document.getElementById('a').value,b=+document.getElementById('b').value,p0=(a*a*100).toFixed(1),p1=(b*b*100).toFixed(1);document.getElementById('r').innerHTML='|0⟩: '+p0+'% |1⟩: '+p1+'%'} function meas(){let a=+document.getElementById('a').value,b=+document.getElementById('b').value,r=Math.random()<a*a?'|0⟩':'|1⟩';document.getElementById('o').innerHTML=r} </script>

RecallQubits and Quantum Phenomena

What does measuring a qubit in superposition do?

ConceptIntroductory Quantum Algorithms

Deutsch's Algorithm

Determines if a boolean function f:{0,1}→{0,1} is constant or balanced. Classically needs up to 2 queries; quantum version solves it with one query to the oracle using superposition and interference.

CheckIntroductory Quantum Algorithms

Speedup Understanding

How many oracle queries does Deutsch's algorithm require?

Try itIntroductory Quantum Algorithms

Deutsch Simulator

Interactive circuit simulator: select constant or balanced oracle, apply Hadamard gates and oracle, measure the first qubit. Display input state, circuit diagram, and final probability of |0⟩ vs |1⟩ to confirm constant (0) or balanced (1) result.

{"constant":{"input":"|0⟩","afterH1":"|+⟩","afterOracle":"|+⟩","afterH2":"|0⟩","prob0":1,"prob1":0},"balanced":{"input":"|0⟩","afterH1":"|+⟩","afterOracle":"|-⟩","afterH2":"|1⟩","prob0":0,"prob1":1}}

RecallIntroductory Quantum Algorithms

What is the key advantage of Deutsch's algorithm?