VV Web-Prog CSS1

pages/web-prog/02-CSS1/ausblick.mdx

@@ -20,5 +20,6 @@ Elemente flexibel in einem Layout zu positionieren.
 ## „Hausaufgabe“ und Projekt
 
 - Aufgabe zu CSS: etwas nachbauen (Vorschlag am Whiteboard wie z.B. Bilder mit Infos in Farben als Liste darunter: Pizza, Filme, o.a.)
-- [Basic CSS auf freeCodeCamp (erste Hälfte der Lektionen)](https://www.freecodecamp.org/learn/2022/responsive-web-design/)
+- Bei Bedarf durcharbeiten: [„Learn HTML“ auf freeCodeCamp ](https://www.freecodecamp.org/learn/2022/responsive-web-design/)
+- [Basic CSS auf freeCodeCamp (so weit wie Sie kommen…)](https://www.freecodecamp.org/learn/2022/responsive-web-design/)
 - Gruppen bilden und grobe App-Ideen diskutieren

pages/web-prog/02-CSS1/css_regeln.mdx

@@ -57,7 +57,7 @@ Farbe Rot bzw. `red`):
 color: red;
 ```
 
-<Callout type="warning">
+<Callout type="info">
 Wir besprechen nur einige beispielhafte CSS-Eigenschaften.
 Ähnlich wie bei HTML mit seinen Elementen und Attributen
 ist in CSS ein gewisses „Vokabular“ an Eigenschaften und 
@@ -88,7 +88,7 @@ in roter Schriftfarbe und unterstrichen dargestellt.
 In Codepen ein paar verschiedene Selektoren zeigen.
 ```
 
-<Callout type="warning">
+<Callout type="info">
 Wir werden heute noch in einer [späteren Lektion](selektoren) 
 genauer auf Selektoren eingehen.
 </Callout>

pages/web-prog/02-CSS1/eigenschaften.mdx

@@ -61,7 +61,7 @@ color: rgb(255, 0, 0); /* RGB-Wert für red */
 
 Mit `background-color` wird die Hintergrundfarbe gesetzt.
 
-<Callout type="warning">
+<Callout type="info">
 Aus Zeitgründen können wir nur die grundlegende 
 Verwendung von Eigenschaften besprechen. Durch das
 Web-Projekt lernen wir automatisch einige weitere
@@ -79,7 +79,8 @@ dargestellt werden soll:
 
 ```css
 .weather_location {
-  border: 2px dotted orange;
+  border: 2px solid silver; /* kombinierte Werte! */
+  border-radius: 4px;
 }
 ```
 

pages/web-prog/02-CSS1/html_css.mdx

@@ -22,7 +22,7 @@ Am Whiteboard oder online mit [Excalidraw](https://excalidraw.com)
 die Darstellung eines Ortes mit seinen Wetterdaten als eine
 Box mit runden Ecken und unterschiedlichen Schriften skizzieren.
 
-<Callout type="warning">
+<Callout type="info">
 Abstände und Layout lernen wir erst in CSS Teil 2 kennen.
 </Callout>
 
@@ -47,7 +47,7 @@ Jedes HTML-Element kann mit dem `style`-Attribut eigene
 CSS-Regeln erhalten:
 
 ```html
-<div style="border: 2px solid silver;border-radius: 4px;">
+<div style="border-width: 2px; border-style: solid; border-color: silver;border-radius: 4px;">
   Berlin 19 sonnig
 </div>
 ```
@@ -58,7 +58,7 @@ Ecken.
 <Callout type="warning">
 Inline-Styles mit `style="..."` direkt im HTML-Element sind
 nur für schnelles Ausprobieren gedacht. Empfohlen wird das
-Einbinden von separaten Stylesheet-Dateien in HTML-Dokumente.
+Einbinden von separaten Stylesheet-Dateien in HTML-Dokumente (siehe unten im folgenden Abschnitt).
 </Callout>
 
 
@@ -87,7 +87,7 @@ wir in der folgenden Lektion ein paar Selektoren
 kennengelernt haben.
 ```
 
-<Callout type="warning">
+<Callout type="info">
 Für unser kleines Projekt genügt wahrscheinlich ein
 Stylesheet. Komplexere Webanwendungen setzen häufig
 mehrere Stylesheets ein.

pages/web-prog/02-CSS1/selektoren.mdx

@@ -88,8 +88,8 @@ Haben wir also ein z.B. `button`-Element mit einem
 <button id="my_button">Suche</button>
 ```
 
-Dann dieser Button (und zwar nur genau dieser Button) 
-z.B. so eine blaue Hintergrundfarbe erhalten:
+Dann kann dieser Button (und zwar nur genau dieser Button) 
+z.B. wie folgt eine blaue Hintergrundfarbe erhalten:
 
 ```css
 #my_button {
@@ -128,7 +128,10 @@ Hierfür würde sich folgende CSS-Regel eignen:
 
 ```css
 .weather_location {
-  border: 1px solid silver;
+    border-width: 2px;
+    border-style: solid;
+    border-color: silver;
+    border-radius: 4px;
 }
 ```
 
@@ -147,7 +150,7 @@ p.note {
 }
 ```
 
-<Callout type="warning">
+<Callout type="info">
 Auch bei Selektoren gilt, dass wir in diesem
 Workshop nur einige Beispiele besprechen. 
 Im Laufe des Projekts wird ggf. die Anwendung