Zusammenfassung
Hi zusammen,
wir haben heute gelernt, wie wir CSS Regeln für schmale Bildschirme einsetzen können. S.g. *responsive Design* bedeutet, dass eine Webseite anders auf Bildschirmen verschiedenen Breiten dargestellt wird.
Mit dem Selector @media (max-width: 600px;) {} können wir Styling für z.B. Smartphones einstellen. So haben wir die Darstellung von einer Bildergalerie responsive gemacht.
Danach haben Kinder ChatGPT gebettet, für HTML Kärtchen Code entsprechende CSS zu generieren, so dass die Kärtchen schön aussehen. Mit wenigen Rückfragen und kleinen Anpassungen haben alle gute Ergebnisse bekommen. 👍💪
Nach der Pause haben Kinder weiter eigene Projekte entwickelt. Zum Schluss haben wir drei Vorträge gehört.
LG Ivan
wir haben heute gelernt, wie wir CSS Regeln für schmale Bildschirme einsetzen können. S.g. *responsive Design* bedeutet, dass eine Webseite anders auf Bildschirmen verschiedenen Breiten dargestellt wird.
Mit dem Selector @media (max-width: 600px;) {} können wir Styling für z.B. Smartphones einstellen. So haben wir die Darstellung von einer Bildergalerie responsive gemacht.
Danach haben Kinder ChatGPT gebettet, für HTML Kärtchen Code entsprechende CSS zu generieren, so dass die Kärtchen schön aussehen. Mit wenigen Rückfragen und kleinen Anpassungen haben alle gute Ergebnisse bekommen. 👍💪
Nach der Pause haben Kinder weiter eigene Projekte entwickelt. Zum Schluss haben wir drei Vorträge gehört.
LG Ivan
Hausaufgabe