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!
- 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
- Möglicherweise findet mein Sabbatical im Frühlingssemester 2027 statt (oder im Herbstsemester 2027).
Das Modul wird während des Sabbatical-Semesters nicht durchgeführt. Planen Sie einen Besuch also mit Vorteil im Herbstsemester 26 oder im Herbstsemester 27 ein. - in der Regel drei Abende (Montag, Dienstag, Mittwoch)
vor und/oder nach meinem anderen ISA-ModulDer Abend hat sich bewährt, da es dann am wenigsten Termin-Kollisionen mit Studium und Arbeit gibt. - stundenplanbedingte Anpassungen vorbehalten
Anmeldebeginn
In der Regel erster Montag im August (fürs Herbstsemester) resp. erster Montag im Januar (fürs Frühlingssemester), 9 Uhr.
Danke für Ihre Geduld!
Die Anmeldung erfolgt auf der offiziellen ISA-Seite (über die oben abgebildete Schaltfläche).
«Nicht möglich» bedeutet noch nicht möglich (vor Anmeldebeginn – s. oben) oder nicht mehr möglich (Modul überbucht).
aktuell verwendete Tools
Markdown statt HTML
Tailwind CSS (Typography plugin) statt (plain) CSS
wird zu
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.
Markdown ist viel einfacher zu lernen und zu schreiben als HTML.
Tailwind CSS (Typography Plugin) erspart Ihnen das schreiben von eigenem CSS-Code.
Vorinformationen zum Kompetenznachweis
- Besprechung Konzept
- Besprechung Zwischenstand
- Schlusspräsentation
In diesem Modul gibt es bestanden / nicht bestanden. Da die Teilnehmenden unterschiedliche Vorkenntnisse haben (gar keine Programmiererfahrung bis mehr oder weniger Erfahrung mit HTML und Co), macht es keinen Sinn, Noten zu vergeben.
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:
- Sie müssen nicht Markdown nutzen. HTML und allenfalls JS passen prima.
- Statt klassischem CSS (existiert seit 1996, mit Schwächen aus heutiger Sicht) empfehle ich Ihnen Tailwind CSS (seit 2017; Typography-Plugin seit 2020). Tailwind CSS generiert für Sie cleveren CSS-Code.Beispiele:
.my-4statt.mein-erfundener-klassenname { margin: 1rem 0; }Sie können mit Tailwind CSS sogarclass="[margin:1rem_0]"schreiben – fast wie plain CSS!.btn { @apply rounded-full }statt.btn { border-radius: 9999px; }Inputrounded-full(Tailwind CSS) wird zum CSS-Outputborder-radius: calc(infinity * 1px);class="hover:bg-cyan-500"(sehr einfache Syntax von Tailwind CSS) wird im Hintergrund automatisch zum CSS-Code&:hover { @media (hover: hover) { background-color: oklch(71.5% 0.143 215.221); } }
- Bitte beachten: Sie dürfen (plain) CSS verwenden, sofern Sie sich wirklich gut damit auskennen. Im Rahmen dieses Moduls kann ich jedoch keinen Support dazu anbieten. Ich habe schon einige Studierende gehabt, die ein CSS-Chaos produziert haben. So wird das Troubleshooting sehr schwierig.
Mit Tailwind CSS passiert Ihnen das nicht. - 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 anzeigen).
Damit die Website responsive wird, müssen Sie jedoch in Figma ein zweites Layout für kleine Bildschirme erstellen oder allenfalls mit
@mediaqueries 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 programmieren.
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 funktioniert dieser Effekt nicht.
Holz-Hochhaus im Bau (Hochschule Luzern, Departement Informatik, Rotkreuz)
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.
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.»
- «Gerne möchte ich mich auch bei dir dafür bedanken, dass du so vielfältige und spannende Module anbietest. Es hat mir sehr viel Spass gemacht, und ich habe viel Neues gelernt.»
Die Person hat beide von mir angebotenen ISA-Module abgeschlossen. - «Gefallen hat mir: Die selbständige Arbeit, das freie wählen des Themas, die konstruktiven und hilfreichen Coachings, schnelle E-Mail antworten»
- übersetzt (Original Englisch):
«Ich war beeindruckt von dem umfangreichen Wissen und all den Anleitungen, die Marc Locher vermittelt hat. Es war sehr bereichernd, dank all der Materialien, die Marc Locher den Teilnehmern zur Verfügung stellt, tatsächlich eine Website von Grund auf selbst erstellen zu können. Es ist genau so, wie der Name des Moduls schon sagt: Web-Entwicklung für alle. Mir gefällt besonders gut, dass alles gut strukturiert ist und alle Informationen jederzeit verfügbar sind. Es ist sehr einfach, einen Termin mit Marc Locher zu vereinbaren, sodass ich während des Prozesses nie ins Stocken geraten bin.
Ich möchte mich ganz herzlich für diese großartige Gelegenheit bedanken. Ich bin super zufrieden mit meiner Portfolio-Website und freue mich auf die zukünftige Weiterentwicklung meiner Website. Vielen Dank!» - «Sehr toll! Es hat Spass gemacht, eine eigene Website zu gestalten.
Marc ist ein sehr toller Dozent, ich habe mich sehr gut aufgehoben gefühlt und er hat mich motiviert dran zu bleiben.»