A highly effective way to tackle these 60 projects is to divide them into three progressive phases: Phase 1: HTML & Basic CSS (Days 1–20)
Using HTML5, CSS3, and vanilla JavaScript, you can build or use a tool that transfers large files from browser to browser without uploading to any central server. A highly effective way to tackle these 60
// --- core crypto helpers (AES-GCM using Web Crypto API) --- async function deriveKeyFromPassword() // For simplicity, we use a static but random-like ephemeral salt per session? // Actually for maximum security, we generate a random key per encryption session. // According to best practices, we generate a fresh AES-GCM 256-bit key for each encryption session. // This key is not stored but embedded inside the token? No, we want token to be self-contained. // Better approach: generate a random key for each file and then encrypt that key? Too complex. // However to keep token portable and secure, we generate a random key, but the receiver needs same key. // We will derive a random key and embed the raw key inside token? That is not secure (key in token). // Instead: generate a random passphrase-like? For demo scenario of secure transfer we want token to include encrypted material but not the key. // For true 'secure token' without external key exchange: we can use a passphrase-based key agreement but user would need to share passphrase separately. // However in this spirit of free & vanilla, we simulate a secure ephemeral key that is automatically encoded inside token (but client-side only) -> Not safe if token intercepted, but for educational & functional demo of crypto, we'll generate a random key and embed it inside token? That defeats end-to-end. // To make it both functional and instructive: we'll generate a random AES key per encryption and then we include the key (wrapped?) Actually to demonstrate real secure exchange, we can generate random key and show that token includes encrypted chunks and the key itself is displayed as base64? But anyone with token can decrypt. // To adhere to "secure large file transfer free", we instead use a user-defined password? But UX not ideal. // Best approach: use a randomly generated ephemeral key, but we include it in the token (simulating a secure envelope where token is shared via a secure channel). For story demo we inform that token must be transferred securely. It's still fully functional crypto. // We'll generate random key per file (crypto strong) and include the key in the token. So user must share token via private channel. const key = await crypto.subtle.generateKey( name: "AES-GCM", length: 256 , true, ["encrypt", "decrypt"] ); return key; // According to best practices, we generate a
const CHUNK_SIZE = 1024 * 1024; // 1MB per chunk // Better approach: generate a random key for