https://github.com/oelna/hsma-html
Kursmaterialien für meinen Kurs Offenes Projekt: HTML aka. "VSTG" an der Hochschule Mannheim
https://github.com/oelna/hsma-html
assignments css html javascript teaching-materials
Last synced: 6 months ago
JSON representation
Kursmaterialien für meinen Kurs Offenes Projekt: HTML aka. "VSTG" an der Hochschule Mannheim
- Host: GitHub
- URL: https://github.com/oelna/hsma-html
- Owner: oelna
- Created: 2019-11-14T08:13:47.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-06T15:12:28.000Z (almost 3 years ago)
- Last Synced: 2024-05-02T01:58:26.934Z (about 2 years ago)
- Topics: assignments, css, html, javascript, teaching-materials
- Homepage:
- Size: 101 KB
- Stars: 7
- Watchers: 6
- Forks: 0
- Open Issues: 100
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Aufgaben
Kursaufgaben für meinen Kurs `Offenes Projekt: HTML` an der [Hochschule Mannheim](http://www.gestaltung.hs-mannheim.de)
Der Kurs vermittelt sowohl fortgeschrittene Inhalte in HTML und CSS, als auch einen Einsteig in Programmierung mit Javascript. Die Kurszeit ist in der Regel aufgeteilt in zwei Hälften; die erste behandelt HTML, CSS und verschiedene verwandte Themen, die zweite, nach einer kurzen Pause, immer bestimmte Aspekte von Javascript. Manchmal gibt es zur Übung eine, manchmal zwei verschiedene Aufgaben.
- [Stunde 1a: HTML- und CSS-Vorlagen umsetzen](uebung_01a.md)
- [Stunde 1b: Tage bis Weihnachten berechnen](uebung_01b.md)
- [Stunde 2a: Rasterplakat](uebung_02a.md)
- [Stunde 2b: Spielautomat](uebung_02b.md)
- Stunde 3a: Media Queries (Keine Aufgabe)
- [Stunde 3b: Zufällige Buchstaben](uebung_03b.md)
- [Stunde 4: Videoplayer](uebung_04.md)
- [Stunde 5: SVG Bedienelemente](uebung_05.md)
- Stunde 6: [Git](https://github.com/oelna/hsma-html/issues/54) (Keine Aufgabe)
- [Stunde 6: Slideshow](uebung_06.md)
- Stunde 7: Keine Aufgabe
- [Stunde 8: Responsive Images](uebung_08.md)
- Stunde 9: RSS (Keine Aufgabe)
- Stunde 9: Semesteraufgabe - [Adventure Game](uebung_09.md) / [Online-Galerie](uebung_09b.md)
### Voraussetzung
Der Kurs baut nahezu lückenlos auf die Inhalte meines Erstsemesterkurses ["INT: Internet-Technik"](https://github.com/oelna/hsma-int) auf. Um teilzunehmen sind einigermaßen solide Grundkenntnisse in HTML und CSS erforderlich. Diese müssen nicht in INT erworben worden sein, sondern können zB. auch aus den unten genannten Büchern stammen, oder anhand der [Aufgaben und Materialien vom ersten Semester](https://github.com/oelna/hsma-int) wiederholt werden.
### Evaluation
https://forms.gle/kF8nX6a3RrC7hog48 (SS 23)
Bitte nehmt euch kurz Zeit für die Kursevaluation. Euer Feedback hilft mir, die Veranstaltungen zu verbessern.
Bitte denkt daran, ein VPN bei der Eingabe der Daten zu verwenden und ein Inkognito-Browserfenster, bei dem ihr nicht in euren Google-Account eingeloggt seid, um die Anonymität zu gewährleisten. Alternativ geht natürlich auch die Abgabe der Papierformulare im Sekretariat.
### Praktisches Wissen in kompakter Form
- [Zusammenfassung der Inhalte aus INT](https://github.com/oelna/hsma-int/blob/master/test-vorbereitung.md)
- [Javascript Crash-Course](https://gist.github.com/oelna/5b7fa9f53331130ba4281d23532f3dff)
- [#100DaysOfVanillaJS](https://dev.to/search?q=100DaysOfVanillaJS) von Tae'lur Alexis (Mehrteiliger JS-Kurs, englisch, super!)
- [Merkblatt zu Dateikompression](https://gist.github.com/oelna/828e5b9c5702b635b56fd1a1d463943c)
- [Liste aller wichtigen Metadaten im ``](https://gist.github.com/oelna/192663f21e81e5467658332259b90a09)
### Eigene Domain registrieren
- [porkbun.com](https://porkbun.com)
- [inwx.de](https://www.inwx.com/de/)
### Apps und Programme
- [Sublime Text](https://www.sublimetext.com) (Code Editor, $80)
- [CodeRunner](https://coderunnerapp.com) (IDE, $25)
- [Transmit](https://panic.com/transmit/) (FTP Client, $45)
- [Nova](https://panic.com/nova/) (IDE, $99)
### Angebot: GitHub Student Developer Pack
Das [GitHub Student Developer Pack](https://education.github.com/pack) ist eine Sammlung **kostenloser** Software- und Onlinedienst-Angebote, die Studierenden, die einen Github-Account [besitzen](https://education.github.com/benefits) ([oder erstellen!](https://github.com/join)) kostenlos zur Verfügung gestellt wird.
(Man sollte dann seine @stud.hs-mannheim.de Adresse verwenden oder zumindest im Account zusätzlich verlinken, dass klar ist, dass man von einer Hochschule kommt, dann hat man weniger Stress, das später nachzuweisen.)
Es beinhaltet unter anderen auch einen kostenlosen Domainnamen über [name.com](https://name.com/), sowie kostenlos-für-1-Jahr Domains von namecheap und .tech-domains. Ebenfalls enthalten sind viele Online-Kurse für `HTML`, `CSS`, `Javascript` und mehr.
[Die Registrierung](https://education.github.com/pack) ist kostenlos und es gibt keinen Haken. Nebenbei erhält man nach der Verifikation einen Github Pro Account (normalerweise $85/Jahr) mit unbegrenzten öffentlichen und privaten Repositories.
### Bücher zum Thema
Die genannten Bücher sind in keinster Weise für die Teilnahme am Kurs erforderlich, sind aber von mir auf Seriosität geprüft und funktionieren gut ergänzend zum Kurs. Eventuell lohnt sich vor der Anschaffung auch zu prüfen, ob spätere Semester eventuell Exemplare gebraucht verkaufen möchten (nachdem Sie die Inhalte gemeistert haben?)
- [HTML & CSS](https://amzn.to/2TEietP) (deutsch, €40, auch im [OPAC](https://bsz.ibs-bw.de/opac24) ausleihbar)
- [HTML & CSS](https://amzn.to/38Hd1pz) (englisch, €22)
- [Javascript & jQuery](https://amzn.to/334TuhJ) (deutsch, €45)
- [Javascript & jQuery](https://amzn.to/2wJ72mQ) (englisch, €30)
(Amazon Affiliate Links)
Ehrlich gesagt ist auch die komplette (englische) "A Book Apart"-Reihe richtig gut und kurzweilig zu lesen, aber wenn man nur die für den Kurs wichtigsten Bände lesen will:
- [HTML5 for Web Designers](https://abookapart.com/products/html5-for-web-designers)
- [CSS3 for Web Designers](https://abookapart.com/products/css3-for-web-designers)
- [Javascript for Web Designers](https://abookapart.com/products/javascript-for-web-designers)
- [Responsive Web Design](https://abookapart.com/products/responsive-web-design)
- [Mobile First](https://abookapart.com/products/mobile-first)
Und weiterführend
- [Git for Humans](https://abookapart.com/products/git-for-humans)
- [Practical SVG](https://abookapart.com/products/practical-svg)
- [The New CSS Layout](https://abookapart.com/products/the-new-css-layout)
Viele davon sind auch mit je einem Exemplar in der Bibliothek vetreten, online auffindbar im [OPAC](https://bsz.ibs-bw.de/opac24).