🇩🇪 Deutsch in 30 Tagen – Learn German step by step
An animated, beginner-friendly website that takes you from your first „Hallo“ to relative clauses, the passive and Konjunktiv II in 30 days of 2–3 hours each.
What’s inside
| |
|---|
| 🗺️ 30-day plan | 4 weeks (A1.1 → A1.2 → A2 → B1 structures). Each day unlocks after the previous one, with a timed study plan of about 2 h 45 min. |
| 📚 Vocabulary | 790 words with article colour code (der / die / das), plurals, irregular verb forms, example sentences and audio. |
| 📘 Grammar A–Z | 62 topics with rules, tables, audio examples, tips and common mistakes – from personal pronouns to Konjunktiv I. Searchable, filterable by level. |
| 🎬 Animated dialogues | Bruno the Berlin bear plus 37 illustrated people who breathe, blink, look at whoever is speaking, change expression (smile, worry, curiosity) and lip-sync with mouth shapes that follow the audio. 33 lesson scenes. Role-play mode: you speak one character’s lines. |
| 🧩 Exercises | 532 hand-written exercises plus auto-generated ones: multiple choice, gap-fill, sentence building, translation, dictation, der/die/das, matching. Instant feedback with explanations; mistakes come back once. |
| 🎤 Speaking | Speech recognition scores your pronunciation word by word (Chrome/Edge). Free speaking tasks with model answers. Record-yourself fallback in other browsers. |
| ✍️ Writing studio | 20 writing tasks (A1–B1: emails, formal letters, stories, opinions) plus free writing, with required content points, word goal, umlaut buttons, autosave and model answers. On claude.ai the AI analysis marks every mistake in your text, explains each rule, sorts mistakes by type (cases, verbs, word order, spelling …), checks task coverage, shows the corrected text as a word-by-word diff plus a more natural version, and tracks your scores over time. Mistakes go into the mistake notebook with one click. An offline quick check finds common learner mistakes everywhere (cases after prepositions, verb position, Perfekt with sein, capitals, spelling …). Plus a writing task in every lesson. |
| 🏋️ Grammar Trainer | Unlimited generated drills: conjugation of 45 key verbs (Präsens, Perfekt, Präteritum), articles in every case (der/den/dem, ein/einen/einem, kein, mein) and adjective endings – each answer shows the full table. |
| 📖 Stories | 4 graded listening & reading stories (A1 → B1) read aloud sentence by sentence, with comprehension questions. |
| 🎤 Speak | A daily 10-minute speaking workout (sounds → shadowing → say it in German → real-life lines → answer questions), shadowing of every lesson, scene and story sentence (normal / slow / hidden text), “Say it in German” with 300+ sentences (English prompt → you speak → every wrong word and ending is marked: einen ≠ einem), a question drill, pronunciation tips for missed sounds, your tricky words, and a daily goal with streak. No speech recognition? Record yourself and compare with the model, or say it and self-check. On claude.ai: AI conversations with 8 characters, now with a hands-free 📞 call mode. |
| ✨ AI tutor (claude.ai only) | Bruno corrects your writing tasks and free-speaking answers (score, mistakes with rules, corrected version) and answers questions about any grammar topic. Hidden automatically elsewhere. |
| 🎓 Exam prep – telc & Goethe | A 12-week roadmap from zero to B1 (A1 → A2 → B1, 168 day-by-day steps, A1/A2/B1 milestones), the official exam formats explained (Goethe-Zertifikat A1/A2/B1, telc Deutsch A1/A2/B1), 49 practice tests for every exam part in the official task formats plus 4 timed mock exams (A1, A2, Goethe B1, telc B1 – 39 more parts), listening with the exam’s play limit and transcripts, 763 exam words in 18 topics with English, 70 irregular verbs, 45 verbs with prepositions, connectors, 140 useful phrases and 12 printable notes sheets. |
| 🧭 My personal plan | A 2-minute questionnaire (goal, exam, level – with a 9-question placement check –, exam date, days per week, minutes per day, weak skills) → “analysing” → a dated day-by-day plan that fits the A1→B1 roadmap exactly into the days until the exam: long lessons are split, spare days become review days, the last days are exam week, weak skills get extra practice, and it warns when the time is too short (with a better daily time or date). Re-plan from today moves missed tasks forward. |
| ✅ Offline writing coach | Checks German texts in the browser – no AI, no server: 40+ rules for typical learner mistakes (verb position, modal + infinitive, Perfekt with haben/sein, participles, separable verbs, subordinate clauses, agreement, cases, adjective endings, dative plural, kein/nicht, dass/das, du/Sie, letter format …) using a word list built from the course data; an exam-style score (task · coherence · vocabulary · structures), estimated level, task-point check, corrected text and tips. Used in the writing studio, the exam writing tasks/mocks and the daily mix. Plus 🕵️ Mistake hunt (fix one typical mistake per sentence). |
| 🎧 Listening gym | Endless numbers / prices / times / dates / phone numbers / spelling drills, dictation with course sentences (word-by-word diff), 84 everyday audio clips at A1, A2 and B1 (station, airport, voicemail, radio, doctor, offices, work, school …) with questions and transcripts, and 45 items of real spoken German (haste, ne?, Moin, Servus …) with a quiz. |
| 🗨️ Offline conversations | 30 everyday conversations (bakery, doctor’s appointment, landlord, Bürgeramt, DB ticket, calling in sick, Kita, job interview, restaurant, hairdresser, phone contract, bank account, police report, first day at work, emergency room …) and 12 exam speaking simulations (Goethe/telc A1–B1, incl. a timed presentation mode): the animated character speaks, you answer by voice or typing, keyword groups check the content, with hints and model answers. |
| 🇩🇪 Living in Germany | 12 survival topics (registering, housing, health, work, money, offices & letters, getting around, shopping, culture, family/Kita/school, emergencies, free time): practical facts, checklists, phrases, a dialogue, a real letter/form/notice to read with questions, tips – plus 12 new animated scenes (bakery, ticket inspection, broken heating, calling in sick, Kita, job centre, WG casting, coffee break, party, parents’ evening, lost property, VHS course). |
| 🎮 Games arcade | Six quick games with the course words and sentences: Der·Die·Das Dash (60 seconds, combos, 3 lives), Memory, Sentence builder, Verb blitz, Listening bubbles and Wortle, a daily 5-letter German word puzzle with a QWERTZ keyboard and a shareable result. High scores, XP, game quests and badges. |
| 📖 Reading room | 38 graded texts (12 A1, 12 A2, 14 B1) about everyday life in Germany: stories, chats, e-mails, adverts, letters, blogs, news and opinion pieces. Tap a highlighted word for its meaning and pronunciation, listen sentence by sentence, answer 5 questions, then write or speak about yourself. |
| 🏆 Rewards & daily mix | Levels with a level-up celebration, flying XP, a daily goal ring, 3 daily quests with a reward chest, 32 badges, streak flames, sparkle bursts – and a 15-minute ⚡ Daily mix (words, listening, speaking, grammar, mistake hunt, a short text checked by the coach). |
| 🎬 Real-life scenes | 22 animated situations: airport, first day at the office, Bürgeramt, restaurant, train station, hotel, supermarket, doctor & pharmacy, bank, job interview, clothes shop, post office, police (stolen bike), dinner at friends’, flat viewing, hairdresser, phone contract, emergency call 112 & emergency room, immigration office, gym, a noisy neighbour and the farmers’ market. 43 animated places with passers-by, lighting moods, a camera that follows the speaker, announcements and narration. Learn the phrases first, then say your lines out loud (speak mode) at 167 “your turn” moments – or choose them. |
| 👤 Student login & teacher portal (claude.ai) | The teacher gets a Teacher portal button and a portal card on the home page: add students to a list (name, email), follow the step-by-step sharing guide, preview the student login, and see each invited student switch from “✉️ Invited” to live progress once they log in. Students sign in with their claude.ai account (no extra password) and complete the Student login once: name, email / WhatsApp, native language, goals, level and daily time. Their progress is backed up privately to their account and restored automatically on any new device. |
| 📊 Teacher dashboard (claude.ai) | The course owner sees every student: registration details, status (active / paused / finished / archived), private teacher notes, an activity timeline – who did what and when (lessons, finished days, scenes, writing scores, speaking workouts, messages), current day, scores, XP, streak, study time (today / 7 days / total, chart per day), trainer accuracy, scenes, stories, writing and speaking stats – plus CSV export of all students and an inbox to answer questions and correct texts (with an optional AI draft). |
| 📨 My teacher (claude.ai) | Learners send questions or texts for correction (also straight from each writing task) and get the answers with an unread badge. Learners need Contributor access (or Editor by email) to save data. |
| ❗ Mistake notebook | Every exercise you get wrong is saved; practise them until the list is empty. |
| 🔁 Review | Spaced-repetition flashcards (Leitner boxes), mixed grammar quiz, searchable word list. |
| 🗣️ Pronunciation | Alphabet, every German sound with examples, and a minimal-pairs listening game. |
| ⭐ Motivation | Bruno reacts to every answer, streak combos, sound effects, keyboard shortcuts (1–4, Enter), XP, day streak, activity chart, a certificate after Day 30. Light & dark mode. |
| 📱 Made for phones | Bottom tab bar (Start · Plan · Real life · Speak · More) with a “More” sheet, sideways-scrolling tabs, compact stats, a taller scene stage, big touch targets, no zoom-in when typing, the tab bar hides while the keyboard is open, and landscape support. |
How to run it
As a public website (current setup)
The website is open for everyone: no login, no teacher portal, all 30 days, all scenes and Job German open.
Progress is saved in each visitor’s browser (Settings → Export / Import moves it to another device).
This is controlled by PUBLIC = true in js/standalone.js; set it to false to bring back the logins and the
teacher portal described below (the server code in api/v1.js is kept). Anyone who was logged in keeps their
progress – it is moved into normal browser storage automatically.
With logins and teacher portal (switched off)
The repository is ready for Vercel (free plan): static pages plus one small server function, api/v1.js.
It adds real logins – the teacher creates a username and password for each student in the teacher portal – and
stores every student’s progress, activity, messages and a private backup on the server.
- Import the repository in Vercel (no framework, no build command).
- Storage → Create → Blob (access private) and connect it to the project (sets
BLOB_READ_WRITE_TOKEN).
- Environment variables:
SESSION_SECRET – a long random string (signs the logins)TEACHER_USERNAME – optional, default teacherTEACHER_PASSWORD – the teacher’s first password (can be changed later on 👤 Account)ANTHROPIC_API_KEY – optional; turns on the AI features (writing analysis, AI conversations, AI tutor)
- Deploy, open the site, log in as the teacher → 📊 Teacher portal → ➕ Add students.
Saving is deliberately frugal (routine progress is sent every 10 minutes and when the page is closed; messages,
registrations and teacher actions immediately), so 5–10 students fit comfortably into the free Blob allowance.
Plans & payments (website version) – currently switched off
The course is free for everyone right now (ENABLED = false in js/plans.js). Set it to true to bring back
the plans, the free-trial limits and the payment tools described below.
Three monthly plans, defined in js/plans.js (names, prices, features, which pages they open):
| Plan | Price | Opens |
|---|
| 🌱 Basic | Rs 5,000 | 30 daily lessons, grammar A–Z, trainer, review, sounds |
| 🚀 Standard | Rs 7,000 | + real-life scenes, speaking practice, writing studio |
| 👑 Plus | Rs 10,000 | + messages/corrections from the teacher, AI tutor and AI writing analysis |
The teacher picks a plan when creating a login and records payments in the student’s detail view (each payment
extends the plan by one month). Students see their plan and the teacher’s payment instructions on 💳 Plans.
Three days after a missed payment, lessons pause until the next payment is recorded.
Free trial: visitors without a login and students without a plan can browse the course (30-day plan, scenes list,
grammar index, writing tasks) but only play Day 1 and the scene “Im Supermarkt”; everything else shows a lock with
the WhatsApp contact (+49 155 67783533, set in js/plans.js).
Payments themselves happen outside the site (cash, bank transfer, JazzCash / EasyPaisa).
💼 Job German – Sales Advisor (open for everyone)
Prepared for a part-time Sales Advisor job in a fashion store (e.g. H&M Osnabrück): how the application works,
16 typical interview questions with model answers (listen + speak), questions to ask, rescue phrases, tips –
and 15 days in the job, each with 10 key phrases and an animated scene where the learner is the new Sales Advisor
(first day, greeting customers, directions, sizes, fitting room, styling, backstage, till, returns, complaints,
pick-ups & phone, shift plan, Saturday rush, sale & recycling, feedback & closing). Plus an interview scene.
🎓 Exam prep – telc & Goethe, A1 → B1 in 12 weeks (#/exam)
- Roadmap: 12 weeks, about 2–3 hours a day, Monday to Saturday (Sunday: review). Each week has can-do goals,
a plan per day that links the 30 course days, grammar topics, exam words, notes sheets, scenes and exam tasks,
and checkboxes. Course days, scenes and exam tasks tick themselves when they are done. Week 4 = A1 mock,
week 8 = A2 mock, week 12 = B1 mocks. An optional exam date shows a countdown.
- Formats: Goethe and telc side by side for A1, A2 and B1 (parts, timing, points, pass marks) with strategies.
- Practice tests: 49 tasks covering every part of Start Deutsch 1 (Goethe & telc A1), Goethe A2, Goethe B1
and telc B1 (Lesen, Hören, Schreiben, Sprechen, telc Sprachbausteine). Listening is read by the browser’s voices
and can be played only as often as in the exam; the transcript appears after checking. Every answer has an
English explanation; a/b/c options appear in a fixed shuffled order. Writing tasks have a word counter, content
points, a quick check, useful phrases and a model answer; speaking tasks have cards, a preparation timer and a
model answer to listen to and repeat (with speech scoring).
- Mock exams: timed parts (e.g. Goethe B1: Lesen 65 min, Hören 40 min, Schreiben 60 min) that submit themselves
when the time is up, a score per part against the 60 % pass mark, and a results history.
- Exam words & notes: 18 topics (A1–B1) with article, plural and English, a quiz, irregular verbs, verbs with
prepositions, connectors by word order, phrases for writing and speaking, and 12 one-page notes sheets (printable).
All practice texts are original – written for this course in the official task formats, not copied from exam
papers. Exam formats follow the descriptions by Goethe-Institut and telc (2025/26); learners should check
goethe.de / telc.net before their exam and also do the free official model tests (linked in the app).
Progress is saved in Store.state.exam and travels with the progress link.
Install as an app (PWA)
The site is an installable Progressive Web App: site.webmanifest (name, icons, shortcuts, screenshots), sw.js (service worker – network first, cached copy offline) and js/pwa.js (an 📲 Install card on the home page, in Settings and in the More sheet; on iPhone it shows the “Share → Add to Home Screen” steps). After the first visit the whole course works offline. To publish it in the Google Play Store, package the live URL with PWABuilder (pwabuilder.com) as a Trusted Web Activity.
Search engines (SEO)
index.html has a keyword-focused title and description, canonical URL, Open Graph / Twitter cards (og.png), hreflang links and JSON-LD (WebSite, EducationalOrganization, Course).- Five static landing pages, readable by search engines without JavaScript, link into the app:
learn-german-pakistan.html, german-in-urdu.html, german-for-work-in-germany.html, deutsch-lernen.html (in German) and goethe-telc-exam-preparation.html. Each has its own title, description, FAQ (with FAQPage JSON-LD) and breadcrumb data. Styles: css/landing.css.
- 150 generated content pages (no JavaScript needed, so Google can index them):
/grammar (62 topics), /lessons (30 days), /vocabulary (18 word lists) and /reading (38 texts), each with its own title, description, breadcrumbs and structured data, linking back into the app. They are built from the course data by node scripts/build-seo.cjs (or npm run build:seo) – re-run it after changing content and commit the output. The script also rewrites sitemap.xml.
vercel.json uses clean URLs (/grammar/accusative instead of .html).robots.txt, sitemap.xml, site.webmanifest and the app icons are in the root.- After deploying, add the site in Google Search Console and Bing Webmaster Tools and submit
https://www.free-german.com/sitemap.xml. If the domain changes, replace www.free-german.com in these files.
As a plain static copy
Without the server function everything still works except logins, the teacher portal and AI.
Audio & microphone
- Audio uses your device’s built-in German text-to-speech voice. For the most natural sound use Chrome (“Google Deutsch”), Edge (“Microsoft Katja/Conrad Online”) or Safari (“Anna”). If you hear no German voice, add German in your operating system’s speech settings. You can choose the voice and speed in ⚙️ Settings.
- Pronunciation scoring uses the browser’s speech recognition (Chrome / Edge, internet connection needed). Allow microphone access when asked.
Your progress
Progress is stored in your browser (localStorage, one copy per login). With a login it is also backed up to the server and restored automatically on a new device. Without a login use Settings → Export / Import to move it.
Project structure
index.html app shell
api/v1.js server for the website version: logins, student accounts, saved data, AI proxy
js/standalone.js website version: login screen + connection to api/v1.js (skipped inside claude.ai)
css/style.css design, animations, light/dark themes
js/core.js helpers, progress store, text-to-speech, speech recognition, confetti
js/characters.js animated SVG characters
js/exercises.js exercise engine
js/dialogue.js dialogue scenes & role-play
js/trainer.js grammar drills & stories
js/tutor.js AI tutor & AI conversations (claude.ai)
js/speak.js speaking practice: scoring, workout, shadowing, say it in German
js/scenarios.js real-life scene player, camera & animated backgrounds
js/writing.js writing studio: AI analysis, quick check, history
js/cloud.js study-time tracking, activity log, teacher inbox, dashboard (claude.ai db)
js/accounts.js student registration, account page, cloud backup of progress
js/plans.js plans & prices, plan page, plan locks, payment tools for the teacher portal
js/app.js router and all pages
js/data/grammar*.js grammar topics (Weeks 1–2, 3–4, reference)
js/data/week1-4.js the 30 daily lessons
js/data/sounds.js pronunciation guide
js/data/practice.js verb tables, drill nouns, conversation questions, scenarios, stories
js/data/scenarios*.js the 22 real-life scenes
js/data/writing.js writing studio tasks and model answers
js/data/jobs.js Job German: Sales Advisor track – interview questions, 15 work days, 16 scenes
js/job.js Job German pages (overview, interview preparation, day pages)
js/data/exam.js Exam prep: exam formats, the 12-week roadmap, notes sheets
js/data/exam-*.js Exam prep: practice tests and mock exams (a1, a2, b1, b1-mock, telc) and exam words
js/exam.js Exam prep pages: roadmap, weeks, formats, task trainer, mock exams, words, notes
js/checker.js Offline writing coach: rules, score, coverage, corrections, mistake hunt
js/listen.js Listening gym (numbers, dictation, everyday clips, real spoken German)
js/convo.js Offline conversations & exam speaking simulator (keyword matching, presentation mode)
js/life.js Living in Germany pages
js/game.js Levels, XP animation, daily goal, quests, badges, rewards page
js/daily.js Daily mix (15-minute session)
js/planner.js Personal plan wizard and day-by-day plan
js/games.js Games arcade (Dash, Memory, Sentence builder, Verb blitz, Bubbles, Wortle)
js/reading.js Reading room (graded texts with word pop-ups, read-aloud and questions)
js/data/reading*.js Reading texts A1–B1
js/data/listening*.js Listening clips and real spoken German
js/data/convos*.js Conversation scripts and exam speaking simulations
js/data/life*.js Living in Germany topics
js/data/scenarios4/5.js 12 more real-life scenes
Adding or editing content
Each day in js/data/weekN.js is a plain object: vocab entries are [german, forms, english, example, exampleEnglish]; exercises are { t: 'mc' | 'fill' | 'order' | 'tr' | 'listen', … }. In grammar HTML, {{Deutsch|English}} renders an example with an audio button and [[Deutsch]] makes a word clickable.
A note on expectations
30 days × 2–3 hours ≈ 75–90 hours of focused study. That builds a solid A1–A2 foundation and introduces every core B1 grammar structure – you’ll understand how German sentences work and handle everyday conversations. Perfect, automatic grammar in fast speech comes from continued daily practice after the 30 days: keep using the review section, find a tandem partner and keep speaking.
Viel Erfolg! 🍀
