ISA-Modul Web-Entwicklung für alle
Gestalten Sie Ihre eigene Website!
Bei stark nachgefragten Modulen melden Sie sich mit Vorteil kurz nach Anmeldebeginn an, da diese Module schnell ausgebucht sein können.
Dieses Modul beinhaltet sehr viel 1:1-Coaching. Daher ist die Kapazität beschränkt. Danke für Ihr Verständnis!
- Hinweis fürs Herbstsemester 2025
- Aufgrund der Umstellung von Bootstrap / W3.CSS auf Tailwind CSS in der verbesserten Version 4 (erschienen Ende Januar 2025), können wir im Herbstsemester 2025 ausnahmsweise weniger Studierende als üblich aufnehmen (sog. early adopters, die gerne Neues ausprobieren). So bleibt mir Zeit, parallel zum Modul die eigenen Materialien zur Unterstützung auf- und auszubauen.
- Die Inputs erhalten Sie digital und können diese studieren, wann und wo es Ihnen am besten passt.Das individuelle Coaching findet über Zoom statt. Die Coaching-Termine können vorgängig gebucht werden.
- voraussichtliche zukünftige Coaching-Zeiten gemäss aktuellem Planungsstand
- mindestens zwei Abende (zwischen Montag und Donnerstag), üblicherweise ab 19:20 (abhängig von vorangehendem Unterricht)
- stundenplanbedingte Anpassungen vorbehalten
Bitte beachten Sie den Anmeldebeginn:
üblicherweise erster Montag im August (fürs Herbstsemester) resp. erster Montag im Januar (fürs Frühlingssemester)
meistens ab 9 Uhr
Danke für Ihre Geduld!
Die Anmeldung erfolgt auf der offiziellen ISA-Seite (über die hier abgebildete Schaltfläche).
«Nicht möglich» bedeutet noch nicht möglich (vor Anmeldebeginn – s. oben) oder nicht mehr möglich (Modul überbucht).
Ein paar zusätzliche Informationen
Sie entwickeln in diesem Modul (mit Unterstützung) Ihren eigenen Webauftritt (beispielsweise Lebenslauf, Portfolio) oder eine Website über etwas, das Sie interessiert (Verein, Hobby, …). Der Internetauftritt muss nicht über Suchmaschinen auffindbar sein.
Wir arbeiten ohne «Baukästen».
Weshalb?
Dazu meine persönliche Geschichte:
Ich habe zu Beginn auch Website-Baukästen evaluiert und einen davon verwendet. Plötzlich hat der Betreiber ohne Vorankündigung von einem Tag auf den anderen die vorher sehr dezente Werbung (Grautöne, nur ganz unten auf der Seite sichtbar) auf blau und permanent sichtbar (sticky) geändert. Wenn die Seite beispielsweise in warmen Tönen gehalten ist, passt das kühle Blau gar nicht zur Seite. Und – das ist eben das Problem bei den Baukästen – man kann die Farbe der Werbung nicht ändern.
Anstatt die Werbung «wegzukaufen» ist das mein Anreiz gewesen, HTML, CSS und JS zu lernen, um alles selber verwalten zu können. Damit Sie sich nicht auch alle Kenntnisse selbstständig aneignen müssen, gibt es neu dieses Modul. Das Internet ist natürlich auch in diesem Bereich hilfreich. Es gibt jedoch für eine konkrete Herausforderung auch viele schlechte Lösungen im Netz. Da ist es hilfreich, wenn jemand vorfiltert und gut programmierte Lösungen vorschlagen kann.
Sie können direkt mit Pug einsteigen, was einfacher ist als HTML.
Die Klassen von Tailwind CSS ersparen Ihnen das Erstellen von eigenem CSS-Code.
Informationen für einzelne Personengruppen
Studierende des Departements Informatik (HSLU I)
Grundsätzlich gilt: Studiengänge mit eigenem Modul zur Web-Entwicklung vergeben keine ECTS für dieses ISA-Modul (z.B. Bachelor WI).
Studiengänge ohne eigenes Modul zur Web-Entwicklung können das Modul anrechnen, sofern die Studiengangleitung einverstanden ist (Bachelor IMTEC, Master WI und auf Anfrage bei der Studiengangleitung ggf. weitere).
Studierende mit Vorkenntnissen
(nicht verlangt)
Dieses Modul richtet sich primär an Studierende, die keine oder wenig Vorkenntnisse haben.
Studierende mit Vorkenntnissen (HTML, CSS, JS und/oder Programmiersprachen) sind zugelassen.
Bitte beachten Sie folgende Hinweise:
- Ich verwende WebStorm. Sie können jedoch auch Visual Studio Code benutzen, wenn Sie sich das gewohnt sind.
- Sie müssen nicht mit Pug arbeiten. HTML und allenfalls JS passen prima.
- Statt klassischem CSS (seit 1996, mit Schwächen aus heutiger Sicht) empfehle ich Ihnen Tailwind CSS (seit 2017). Tailwind CSS generiert für Sie cleveren CSS-Code.Beispiele:
.m-4im Pug statt.mein-erfundener-klassenname { margin: 1rem; }im CSS.btn { @apply rounded-full }statt.btn { border-radius: 9999px; }im CSSin Tailwind CSS wird der Inputrounded-fullzum Outputborder-radius: calc(infinity * 1px);class=":hover.bg-cyan-500"im HTML macht Tailwind CSS clever zum CSS-Output&:hover { @media (hover: hover) { background-color: oklch(71.5% 0.143 215.221); } }
- Das Coaching ist auf Studierende ausgerichtet, die keine oder wenig Vorkenntnisse haben.Studierende mit Vorkenntnissen, die mit HTML und JS programmieren, sollten Herausforderungen primär mit Websites wie Stack Overflow oder KI meistern können. Bei zusätzlichen Fragen dürfen Sie sich natürlich jederzeit an mich wenden.
- Sie dürfen in anderen Modulen oder privat erstellte Seiten weiterentwickeln. Auch Relaunches sind denkbar.
- Für ein 3-ECTS-Modul wird offiziell mit gesamthaft 75 bis 90 Arbeitsstunden (pro Person) gerechnet.
Falls Sie die ISA-Blockwoche «Webdesign» (findet vor Beginn des Frühlingssemesters statt) absolviert haben
Ich habe schon einige Studierende gehabt, die nach der ISA-Blockwoche «Webdesign» mein ISA-Modul «Web-Entwicklung für alle» besucht haben.
Nach der Blockwoche haben Sie eine gute Basis, um in meinem Modul Ihre Website ohne «Baukasten» zu gestalten.
Sie können mein Modul nahtlos anschliessend im Frühlingssemester besuchen oder auch im Herbstsemester.
Falls Sie die vorlesungsfreie Zeit im Sommer für die Web-Entwicklung nutzen wollen
Das ist ein Vorteil dieses asynchronen Moduls:
Wenn Sie sich das selbstständige Studium der digitalen Unterlagen zutrauen (eher für Studierende mit Vorkenntnissen geeignet), können Sie im Sommer mit der Erstellung Ihrer Website beginnen. Bei allfälligen Fragen können Sie sich auch während der vorlesungsfreien Zeit an mich wenden. (Dann antworte ich allenfalls etwas weniger zügig als während des Semesters.)
Falls Sie an dieser Möglichkeit interessiert sind, schicken Sie mir bitte ein E-Mail, damit wir die Details klären können.
Administrativ sind Sie fürs Herbstsemester ins Modul eingeschrieben. Den Kompetenznachweis können Sie jedoch bereits zu Beginn des Herbstsemesters erbringen.
Studierende der PH Luzern
Studierende der PH Luzern erhalten für ISA-Module nur 2 ECTS, was gemäss offizieller Rechnung total 50 bis 60 Arbeitsstunden entspricht (pro Person). Es liegt also (im Rahmen des Moduls) nur ein kleineres Projekt drin, ausser Sie betrachten «Überstunden» als Freizeit-Projekt.
Falls Sie Figma verwenden
Figma darf benutzt werden (Tailwind-Code für einzelne Elemente übernehmen).
Damit die Website responsive wird, müssen Sie jedoch in Figma ein zweites Layout für kleine Bildschirme erstellen oder mit
@media queries die (waagrechte) Platzierung für kleine Bildschirme überschreiben: position: static;Falls Sie bereits mit «Baukasten-Systemen» oder Web-CMS gearbeitet haben
(beispielsweise Jimdo, Wix, WordPress, Joomla)
Auch wenn Sie dort HTML, CSS und JS einfügen können: Wir programmieren in diesem Modul selber. Sie müssten Ihren Entwurf komplett neu codieren.
Für Backend-Entwickler/innen
Bei der Web-Entwicklung ist das Frontend sehr wichtig. Sie dürfen auch ein Backend-Projekt verfolgen, müssen jedoch genug Zeit für ein tolles Frontend einplanen.
Hinweis für Studierende, die ausschliesslich an zwei Wochentagen Unterricht an der HSLU haben
Ich versuche, Ihnen im Rahmen meiner Verfügbarkeit eine möglichst vielfältige Auswahl an Coaching-Terminen anzubieten. Es kann jedoch vorkommen, dass Ihre und meine Verfügbarkeit nicht übereinstimmen, und das Coaching an einem für Sie üblicherweise unterrichtsfreien Tag stattfindet. Danke für Ihr Verständnis und Ihre Flexibilität!
Demonstration Parallax-Effekt
einfach scrollen und Bild betrachten
Hinweis: Auf gewissen (mobilen) Browsern ist dieser Effekt etwas wacklig oder funktioniert gar nicht.
Holz-Hochhaus im Bau (Hochschule Luzern, Departement Informatik, Rotkreuz)
oder eine andere Lösung mit anderen Einstellungen:
Wir programmieren selber. Möglichst einfach. Puristisches Design.
Wir konzentrieren uns auf den Inhalt. Verständliche, klare Sprache. Wichtige Informationen werden schnell gefunden.
Für Seiten mit Plugins wie Web-Shop usw. sind Sie andernorts besser bedient. (Einfache manuelle Bezahlmöglichkeiten können Sie hingegen im Rahmen des Moduls gut umsetzen.)
Suchmaschinen-Optimierung (SEO) müssten Sie bei Bedarf selbstständig anschauen, da dies praktisch nie gewünscht wird.
Beispiel Kontaktformular
Oder per E-Mail (nicht direkt angegeben, um Spam zu vermeiden).
Kurzvideo
Stimmen von Studierenden zu diesem Modul
«Ich finde das Modul sehr spannend.»
«Das Modul bietet die Möglichkeit ein sehr relevantes Tool zu erlernen. Ich habe das selbstständige Erlernen mit Hilfe der bereitgestellten Modul-Website als sehr hilfreich empfunden. Die Coachings haben die weiteren Fragen geklärt. Das Modul macht Spass :)»
«Vielen Dank nochmals für das Coaching vorhin und allgemein für deine Unterstützung unter dem Semester. Das Modul war sehr spannend und hat uns viel Freude gemacht.»
«Danke dir für deine Hilfe und das spannende Modul. Es hat mir wirklich sehr Spass gemacht.»
«Vielen Dank für die hervorragende Unterstützung»
«Vielen Dank für das prompte Feedback & deine Hilfe! Das Modul war sehr lehrreich und ich danke dir für die Flexibilität und das super Coaching – hat wirklich Spass gemacht.»