You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<description>Todo Liste mit Angular Voraussetzungen Aktuelle Version von Visual Studio Code Projekt anlegen und starten Öffne einen Command Prompt und installiere als erstes die Angular CLI: npm install -g @angular/cli Lege einen Ordner an, in dem dein Projekt liegen soll - z.B. angular-todo-list. Führe in diesem Ordner im Command Prompt folgendes Command aus um die neue Angular Applikation anzulegen: ng new todo-list-app --strict Routing - yes Stylesheet format - SCSS Wenn das Projekt fertig angelegt ist, wechsle in den generierten Ordner todo-list-app und öffne diesen in Visual Studio Code.</description>
15
+
<description><h1 id="todo-liste-mit-angular">Todo Liste mit Angular</h1>
<h2 id="voraussetzungen">Voraussetzungen</h2>
<ul>
<li>Aktuelle Version von <a href="https://code.visualstudio.com/" target="_blank">Visual Studio Code</a></li>
</ul>
<h2 id="projekt-anlegen-und-starten">Projekt anlegen und starten</h2>
<ul>
<li>Öffne einen Command Prompt und installiere als erstes die Angular CLI: <code>npm install -g @angular/cli</code></li>
<li>Lege einen Ordner an, in dem dein Projekt liegen soll - z.B. <code>angular-todo-list</code>.</li>
<li>Führe in diesem Ordner im Command Prompt folgendes Command aus um die neue Angular Applikation anzulegen: <code>ng new todo-list-app --strict</code>
<ul>
<li>Routing - yes</li>
<li>Stylesheet format - SCSS</li>
</ul>
</li>
<li>Wenn das Projekt fertig angelegt ist, wechsle in den generierten Ordner <code>todo-list-app</code> und öffne diesen in Visual Studio Code.</li>
<li>Im Terminal von Visual Studio Code (STRG + ö) kannst du das Projekt mit folgendem Command starten: <code>ng serve</code><br>
falls die URL bei dir im Chrome nicht geöffnet werden kann, kannst du localhost auch durch 127.0.0.1 ersetzen</li>
</ul>
<p>Wenn du das Projekt erfolgreich angelegt und gestartet hast, solltest du im Browser folgende Seite sehen:</p></description>
20
16
</item>
21
-
22
17
<item>
23
18
<title>Todo Liste mit Angular und Firebase</title>
<description>Todo Liste mit Angular Voraussetzungen Aktuelle Version von Visual Studio Code Projekt anlegen und starten Öffne einen Command Prompt und installiere als erstes die Angular CLI: npm install -g @angular/cli Lege einen Ordner an, in dem dein Projekt liegen soll - z.B. angular-todo-list. Führe in diesem Ordner im Command Prompt folgendes Command aus um die neue Angular Applikation anzulegen: ng new todo-list-app --strict Routing - yes Stylesheet format - SCSS Wenn das Projekt fertig angelegt ist, wechsle in den generierten Ordner todo-list-app und öffne diesen in Visual Studio Code.</description>
22
+
<description><h1 id="todo-liste-mit-angular">Todo Liste mit Angular</h1>
<h2 id="voraussetzungen">Voraussetzungen</h2>
<ul>
<li>Aktuelle Version von <a href="https://code.visualstudio.com/" target="_blank">Visual Studio Code</a></li>
</ul>
<h2 id="projekt-anlegen-und-starten">Projekt anlegen und starten</h2>
<ul>
<li>Öffne einen Command Prompt und installiere als erstes die Angular CLI: <code>npm install -g @angular/cli</code></li>
<li>Lege einen Ordner an, in dem dein Projekt liegen soll - z.B. <code>angular-todo-list</code>.</li>
<li>Führe in diesem Ordner im Command Prompt folgendes Command aus um die neue Angular Applikation anzulegen: <code>ng new todo-list-app --strict</code>
<ul>
<li>Routing - yes</li>
<li>Stylesheet format - SCSS</li>
</ul>
</li>
<li>Wenn das Projekt fertig angelegt ist, wechsle in den generierten Ordner <code>todo-list-app</code> und öffne diesen in Visual Studio Code.</li>
<li>Im Terminal von Visual Studio Code (STRG + ö) kannst du das Projekt mit folgendem Command starten: <code>ng serve</code><br>
falls die URL bei dir im Chrome nicht geöffnet werden kann, kannst du localhost auch durch 127.0.0.1 ersetzen</li>
</ul>
<p>Wenn du das Projekt erfolgreich angelegt und gestartet hast, solltest du im Browser folgende Seite sehen:</p></description>
<description>Tetris mit Blazor Kostenlose Voraussetzungen Neueste Version von Visual Studio 2017 Community Edition mit ASP.NET and web development ASP.NET Core Blazor Language Services Projekt anlegen Visual Studio starten
20
-
File / New / Project
21
-
Neues ASP.NET Projekt anlegen:
22
-
Blazor Projekttyp auswählen:
23
-
Nach dem Anlegen des Projekt den Startmodus ändern:
24
-
Probiere, das Programm mit F5 oder Debug / Start Debugging zu starten.</description>
15
+
<description><h1 id="tetris-mit-blazor">Tetris mit Blazor</h1>
<h2 id="kostenlose-voraussetzungen">Kostenlose Voraussetzungen</h2>
<ul>
<li>Neueste Version von <a href="https://visualstudio.microsoft.com/free-developer-offers/" target="_blank">Visual Studio 2017 Community Edition</a> mit <em>ASP.NET and web development</em></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=aspnet.blazor" target="_blank">ASP.NET Core Blazor Language Services</a></li>
</ul>
<h2 id="projekt-anlegen">Projekt anlegen</h2>
<ul>
<li>
<p>Visual Studio starten</p>
</li>
<li>
<p><em>File</em> / <em>New</em> / <em>Project</em></p>
</li>
<li>
<p>Neues <em>ASP.NET</em> Projekt anlegen:<!-- raw HTML omitted -->

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 <div class="row">
 <div class="col">
 <p></p>
 </div>
 <div class="col-12 col-md-12">
 <img src="https://linz.coderdojo.net/uebungsanleitungen/programmieren/web/blazor-tetris/img/new-project.png" alt="(.Get 1)" class="mx-auto " style="display: block; width: auto" />
 </div>
 </div>
</p>
</li>
<li>
<p><em>Blazor</em> Projekttyp auswählen:<!-- raw HTML omitted -->

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 <div class="row">
 <div class="col">
 <p></p>
 </div>
 <div class="col-12 col-md-12">
 <img src="https://linz.coderdojo.net/uebungsanleitungen/programmieren/web/blazor-tetris/img/new-blazor-project.png" alt="(.Get 1)" class="mx-auto " style="display: block; width: auto" />
 </div>
 </div>
</p>
</li>
<li>
<p>Nach dem Anlegen des Projekt den Startmodus ändern:<!-- raw HTML omitted -->

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 <div class="row">
 <div class="col">
 <p></p></description>
<description>Erste Schritte mit Bootstrap Für diese Übung starten wir mit einer existierenden Webseite, die nur HTML enthält, aber noch gar keine Styles.
20
-
&lt;!DOCTYPE html&gt; &lt;html lang=&#34;en&#34;&gt; &lt;head&gt; &lt;meta charset=&#34;UTF-8&#34;&gt; &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1.0&#34;&gt; &lt;title&gt;Scratch - Fang mich&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&#34;content&#34;&gt; &lt;h1&gt;Scratch Fang-Mich &lt;span class=&#34;version&#34;&gt;Scratch 3.0&lt;/span&gt;&lt;/h1&gt; &lt;div class=&#34;intro&#34;&gt; &lt;img src=&#34;images/endgame.png&#34; alt=&#34;Endgame&#34;&gt; &lt;p&gt;In diesem Spiel bist du ein Fisch, der dem großen Haifisch entkommen muss. Schaffst du es?&lt;/p&gt; &lt;/div&gt; ... Ihr könnt das initiale Projekt mit allen Bildern aber ohne Styles hier herunterladen: Startprojekt</description>
15
+
<description><h1 id="erste-schritte-mit-bootstrap">Erste Schritte mit Bootstrap</h1>
<p>Für diese Übung starten wir mit einer existierenden Webseite, die nur HTML enthält, aber noch gar keine Styles.</p>
<div class="highlight"><pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#00f">&lt;!DOCTYPE html&gt;</span>
</span></span><span style="display:flex;"><span>&lt;html lang=<span style="color:#a31515">&#34;en&#34;</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>&lt;head&gt;
</span></span><span style="display:flex;"><span> &lt;meta charset=<span style="color:#a31515">&#34;UTF-8&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;meta name=<span style="color:#a31515">&#34;viewport&#34;</span> content=<span style="color:#a31515">&#34;width=device-width, initial-scale=1.0&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;title&gt;Scratch - Fang mich&lt;/title&gt;
</span></span><span style="display:flex;"><span>&lt;/head&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>&lt;body&gt;
</span></span><span style="display:flex;"><span> &lt;div class=<span style="color:#a31515">&#34;content&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;h1&gt;Scratch Fang-Mich &lt;span class=<span style="color:#a31515">&#34;version&#34;</span>&gt;Scratch 3.0&lt;/span&gt;&lt;/h1&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> &lt;div class=<span style="color:#a31515">&#34;intro&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;img src=<span style="color:#a31515">&#34;images/endgame.png&#34;</span> alt=<span style="color:#a31515">&#34;Endgame&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;p&gt;In diesem Spiel bist du ein Fisch, der dem großen Haifisch entkommen muss. Schaffst du es?&lt;/p&gt;
</span></span><span style="display:flex;"><span> &lt;/div&gt;
</span></span><span style="display:flex;"><span> ...
</span></span></code></pre></div><p>Ihr könnt das initiale Projekt mit allen Bildern aber ohne Styles hier herunterladen: <a href="initial-project.zip">Startprojekt</a></p></description>
0 commit comments