Add multilingual language and systems learning tracks

en/expanded-8-1/README.md

@@ -0,0 +1,9 @@
+# Web Development · 1
+
+[Agila University track](https://edu.agilaos.com/track.php?track=8&lang=en)
+
+About 15 minutes per lesson. Predict, run, change, explain, then complete the check in University.
+
+- [Lesson 1: Give a page meaning with HTML](lesson-1/lesson.html)
+- [Lesson 2: Style without breaking readability](lesson-2/lesson.html)
+- [Lesson 3: Respond to an event](lesson-3/lesson.html)

en/expanded-8-1/lesson-1/lesson.html

@@ -0,0 +1,5 @@
+<!doctype html><html lang="en"><meta charset="utf-8"><title>Give a page meaning with HTML</title><h1>Give a page meaning with HTML</h1><p>15-minute session: read for 3 minutes, trace for 3, experiment for 7, and complete the check for 2. Spend longer whenever you need.</p><p>HTML describes content. A heading labels a section; a list groups related items. Open the live preview, then replace the title and add a third task. Explain why a heading element communicates more than a large bold paragraph. Keep one clear main heading and set the document language for your audience.</p><pre><code class="language-web">&lt;!doctype html&gt;
+&lt;html lang=&quot;en&quot;&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;&gt;
+&lt;title&gt;Agila study&lt;/title&gt;
+&lt;main&gt;&lt;h1&gt;My study plan&lt;/h1&gt;&lt;p&gt;I will explain what I build.&lt;/p&gt;&lt;ul&gt;&lt;li&gt;Read&lt;/li&gt;&lt;li&gt;Test&lt;/li&gt;&lt;/ul&gt;&lt;/main&gt;
+&lt;/html&gt;</code></pre><h3>Practice and evidence</h3><p>Keep three notes: your prediction, the actual result, and why they match or differ. The completion check grades understanding; the practice task builds skill.</p></html>

en/expanded-8-1/lesson-1/main.html

@@ -0,0 +1,5 @@
+<!doctype html>
+<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Agila study</title>
+<main><h1>My study plan</h1><p>I will explain what I build.</p><ul><li>Read</li><li>Test</li></ul></main>
+</html>

en/expanded-8-1/lesson-2/lesson.html

@@ -0,0 +1,5 @@
+<!doctype html><html lang="en"><meta charset="utf-8"><title>Style without breaking readability</title><h1>Style without breaking readability</h1><p>15-minute session: read for 3 minutes, trace for 3, experiment for 7, and complete the check for 2. Spend longer whenever you need.</p><p>CSS selectors choose elements and declarations change their presentation. Predict what changing padding does to the card’s interior. Compare it with margin outside the border. Resize the preview and keep text readable without horizontal scrolling. Test keyboard focus on the button. Color alone must not communicate a pass or failure.</p><pre><code class="language-web">&lt;!doctype html&gt;
+&lt;html lang=&quot;en&quot;&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;&gt;
+&lt;title&gt;Agila study&lt;/title&gt;
+&lt;style&gt;body{font:1.1rem system-ui;margin:2rem;background:#f4f2fb;color:#21143e} main{max-width:40rem;margin:auto;padding:1.5rem;background:white;border:2px solid #56329a;border-radius:12px}button{padding:1rem}&lt;/style&gt;
+&lt;main&gt;&lt;h1&gt;My study plan&lt;/h1&gt;&lt;p&gt;Resize the preview. Keep this text readable.&lt;/p&gt;&lt;button&gt;Start&lt;/button&gt;&lt;/main&gt;&lt;/html&gt;</code></pre><h3>Practice and evidence</h3><p>Keep three notes: your prediction, the actual result, and why they match or differ. The completion check grades understanding; the practice task builds skill.</p></html>

en/expanded-8-1/lesson-2/main.html

@@ -0,0 +1,5 @@
+<!doctype html>
+<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Agila study</title>
+<style>body{font:1.1rem system-ui;margin:2rem;background:#f4f2fb;color:#21143e} main{max-width:40rem;margin:auto;padding:1.5rem;background:white;border:2px solid #56329a;border-radius:12px}button{padding:1rem}</style>
+<main><h1>My study plan</h1><p>Resize the preview. Keep this text readable.</p><button>Start</button></main></html>

en/expanded-8-1/lesson-3/lesson.html

@@ -0,0 +1,5 @@
+<!doctype html><html lang="en"><meta charset="utf-8"><title>Respond to an event</title><h1>Respond to an event</h1><p>15-minute session: read for 3 minutes, trace for 3, experiment for 7, and complete the check for 2. Spend longer whenever you need.</p><p>JavaScript changes behavior. The listener waits for a click, updates done, and renders the new text. Predict the display after three clicks. Add a reset button that updates both state and the visible count. Reload the preview: this counter is memory in a page, not a saved account record.</p><pre><code class="language-web">&lt;!doctype html&gt;
+&lt;html lang=&quot;en&quot;&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;&gt;
+&lt;title&gt;Agila study&lt;/title&gt;
+&lt;main&gt;&lt;h1&gt;Study counter&lt;/h1&gt;&lt;button id=&quot;add&quot;&gt;Complete one&lt;/button&gt;&lt;p id=&quot;count&quot; aria-live=&quot;polite&quot;&gt;0&lt;/p&gt;&lt;/main&gt;
+&lt;script&gt;let done=0;document.getElementById(&quot;add&quot;).addEventListener(&quot;click&quot;,()=&gt;{done+=1;document.getElementById(&quot;count&quot;).textContent=String(done);});&lt;/script&gt;&lt;/html&gt;</code></pre><h3>Practice and evidence</h3><p>Keep three notes: your prediction, the actual result, and why they match or differ. The completion check grades understanding; the practice task builds skill.</p></html>

en/expanded-8-1/lesson-3/main.html

@@ -0,0 +1,5 @@
+<!doctype html>
+<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Agila study</title>
+<main><h1>Study counter</h1><button id="add">Complete one</button><p id="count" aria-live="polite">0</p></main>
+<script>let done=0;document.getElementById("add").addEventListener("click",()=>{done+=1;document.getElementById("count").textContent=String(done);});</script></html>