Einführung

Am Anfang des Kurses haben wir uns mit den grundlegenden Programmiersprachen für Webentwicklung beschäftigt. Jede Woche stand eine neue Sprache im Fokus. Nach jeder Einführung gab es passende Aufgaben, mit denen wir das Gelernte direkt anwenden konnten. Durch Templates und praktische Übungen konnten wir schrittweise ins Coding einsteigen und erste eigene Programmieraufgaben umsetzen.

HTML

Zuerst haben wir uns mit HTML beschäftigt und gelernt, wie eine Webseite aufgebaut ist. Wir haben verstanden, wie HTML, CSS und JavaScript zusammenarbeiten, um eine funktionierende Seite zu erstellen. Dabei haben wir uns genauer angeschaut, was HTML ist, wofür es steht und wie es funktioniert. Dabei haben wir HTML-Elemente wie divs, links, headlines und images kennengelernt und direkt angewendet, um unsere Seite Schritt für Schritt zu gestalten.

In der ersten Aufgabe ging es darum, unsere erste Webseite zu erstellen. Schritt für Schritt haben wir dort die ersten Überschriften, Texte und Bilder gesetzt und die grundlegende Struktur einer Seite aufgebaut. Wir haben auch die ersten Unterseiten erstellt und miteinander verlinkt, Texte fett, kurisv markiert und Listen erstellt.

CSS

In der nächsten Einführung ging es um CSS. Wir haben gelernt, was CSS ist, wie es funktioniert und wofür es wichtig ist. Dabei haben wir uns mit den grundlegenden Konzepten wie dem Aufbau von CSS-Dateien beschäftigt und erfahren, wie man CSS mit HTML verknüpft, damit es funktioniert.

Wir haben die verschiedenen Styling-Möglichkeiten kennengelernt, wie etwa Selektoren, Klassen und IDs, und den Unterschied zwischen diesen verstanden. Auch das Überschreiben von Stilen und das gezielte Anwenden von CSS auf HTML-Elemente haben wir gelernt. Wir haben uns mit Farben, Schriftarten, Platzierungen und dem Layout von Webseiten befasst – zum Beispiel mit Margin, Position, Flexbox, Grid und responsivem Design.

In einer praktischen Aufgabe haben wir das Gelernte angewendet, indem wir unsere HTML-Seite mit CSS gestaltet haben. Dazu gehörte das Einfärben von Texten, das Ändern der Bildplatzierung, das Hinzufügen von Hintergrundbildern, das Einbetten von Schriften und das Erstellen von Layouts mit Flexbox und Grid.

JS

Zum Schluss haben wir uns mit JavaScript beschäftigt. Wir haben gelernt, was JavaScript ist, woraus es besteht und wie es funktioniert. Dabei ging es darum, wie man JavaScript anwendet, um Interaktivität auf Webseiten zu ermöglichen.

Wir haben die Grundlagen wie Variablen, Funktionen, if-else-Anweisungen und for-Loops kennengelernt. Außerdem haben wir Methoden und Beispiele wie Buttons und Bilder eingebaut, die durch JavaScript gesteuert werden.

In einer praktischen Aufgabe sollten wir dann eine Navigationsleiste erstellen und ein Hamburger Menü bauen, um das Gelernte anzuwenden und interaktive Elemente zu entwickeln.

GIT HUB

Zum Schluss sollten wir auch uns dem Schritt der Veröffentlichung zuwenden, einschließlich der Schritte, wie wir ein GitHub-Konto erstellen, unsere erste Webseite hosten und veröffentlichen können. Wir haben uns mit GitHub Desktop vertraut gemacht, unsere Seite gepusht und das Repository unter ‚deinusername.github.io‘ veröffentlicht. Die Aufgabe bestand darin, diese Schritte selbstständig umzusetzen und die Webseite erfolgreich zu releasen.“

EINFÜHRUNG KI: EMPFFEHLUNG, TIPPS & TRICKS

Zusätzlich gab es noch eine Einführung in hilfreiche Extras, die unsere weitere Arbeit am Abschlussprojekt maßgeblich beeinflussten. Wir haben gelernt, wie man AI-Tools wie den Co-Pilot in Visual Studio optimal nutzt und installiert, um den Coding-Prozess zu erleichtern. 

Ein weiterer wichtiger Punkt war die Nutzung von ChatGPT. Wir haben gelernt, wie man ChatGPT effektiv anfragt, um spezifische Lösungen zu bekommen, und viel über gutes Prompten erfahren – zum Beispiel, wie man fragt: „You are the expert in… schreib mir den Code für einen Button.“ Zudem haben wir Quellen kennengelernt, wo man Inspirationen für coole Codes, Effekte, Hover-Effekte und Typografie finden kann, sowie wie man den Code von bestehenden Webseiten einsehen und für die eigene Arbeit nutzen kann.

PROJEKT-EIGENE WEBSITE

Dann begann unser richtiges Projekt: die erste eigene Webseite. Wir hatten völlige Freiheit bei der Wahl des Themas und der Gestaltung. Die einzige Vorgabe war, dass die Webseite auf den in den vorherigen Lektionen gelernten Grundlagen basieren sollte. Als Orientierung durften wir ein hochgeladenes Template nutzen, aber es gab keine festen Vorgaben zur Seitenanzahl. Für eine Portfolioseite sollte die Webseite mindestens eine Mainpage, eine Projektübersicht, eine About-Seite und eine Projektdetail-Seite enthalten.

Während der Arbeit daran hatten wir viel Zeit, uns mit unseren Ideen und Konzepten zu beschäftigen, aber auch vor Ort Unterstützung zu erhalten. Pascal war stets präsent, um uns mit Hilfestellungen, Inspiration und Anregungen zu geben und zu unterstützen. 

Zu Beginn sollten wir erste Ideen und Inspirationen mitbringen, um zu klären, welche Art von Webseite wir bauen möchten, und bekamen daraufhin Feedback. In den darauffolgenden Runden konnten wir unsere ersten Entwürfe und Zwischenstände zeigen, erhielten kontinuierlich Feedback und Unterstützung und konnten unsere Webseiten Schritt für Schritt weiterentwickeln.

Zwischenpräsentation

KONZEPT

Mein Konzept für die Webseite war es, eine Portfolio-Seite zu erstellen, die meine Projekte präsentiert. Ich setzte auf ein minimalistisches Design mit viel Schwarzraum, weißer Typografie und gezielten Farb- und Typografie-Highlights. Die Seite sollte professionell wirken, aber nicht langweilig sein – clean, modern und gleichzeitig spannend. Ein schwarzer Hintergrund, weiße Schrift, Farbkontraste und harmonische Bildplatzierungen sorgten für eine klare Struktur. Animationen, Hover-Effekte und interaktive Elemente brachten Dynamik und Interaktivität in das Design.

INSPIRATION

Für die Gestaltung meiner Webseite habe ich mich von Webseiten inspirieren lassen, die ein sauberes, minimalistisches Design mit modernen, aber spannenden Elementen kombinieren. Besonders gefallen haben mir Seiten, die durch interaktive Hover-Effekte, interessante Farb- und Typografie-Kontraste sowie kreative Bildlayouts Leben in ihr Design gebracht haben, ohne dabei an Klarheit zu verlieren. Schwarze Hintergründe mit weißer Typografie und gezielte Farbkontraste haben dabei für eine klare Struktur gesorgt, während die unregelmäßige Anordnung der Bilder für visuelle Spannung und Dynamik sorgte. Diese Elemente habe ich in mein eigenes Design übernommen, um eine minimalistische, aber dennoch lebendige und moderne Webseite zu schaffen.

CODE SNIPPETS

Während der Entwicklung meiner Webseite habe ich verschiedene coole Code-Snippets verwendet, die meiner Seite das gewisse Etwas verleihen. Ein Highlight war das Zick-Zack-Layout, das für meine Bildergalerie genutzt wurde um meine Projekte zu präsentieren, sowie das Masonry-Layout, das den Bildern eine interessante, unregelmäßige Anordnung verleiht. Für das visuelle Erlebnis habe ich eine coole Loading-Animation für Bilder eingebaut, die dem Nutzer eine kleine Wartezeit angenehm überbrückt.

Einen süßen eigenen Cursor mit eingebaut.

Ein weiteres spannendes Element war der Typewriter-Effekt, der mein Name auf der About me Seite animiert. Der E-Mail-Brief-Effekt/ Animation sorgt für eine spielerische Note beim ausfüllen der Contact me Seite. 

 Bei den Bildern meiner Projekte und der Typografie habe ich einen Glowing-Effekt eingebaut, der beim Hover-Effekt aufleuchtet und so visuelle Spannung erzeugt.

Für die Navigation auf meinen Projektseiten habe ich einen „Get Back“-Button mit einem flippigen Hover-Effekt und einer Typografie-Animation hinzugefügt, um dem Nutzer eine coole Rückkehr-Möglichkeit zu bieten. 

Die Unterseiten meiner Projekte habe ich mit einem Grid-Layout strukturiert, das eine saubere und moderne Präsentation ermöglicht. Für die sozialen Medien gibt es einen Hover- und Klick-Effekt, der in Neon-Gelb leuchtet, was die Interaktivität weiter steigert. 

Insgesamt sorgen diese Elemente für eine dynamische und ansprechende Benutzererfahrung auf der Seite um immer noch minimalistisch und clean zu bleiben aber trotzdem ein paar playfull effects mit rein zu bringen und nicht langweilig zu wirken.

Endpräsentation

FINALE WEBSEITE

Die Struktur der Webseite war simpel: eine Home-Seite, eine „About Me“-Seite, eine „Contact Me“-Seite und eine Seite für meine Projekte. Auf der Home-Seite stellte ich meine Arbeiten in einer Bildergalerie vor, die auf die jeweiligen Unterseiten meiner Projekte verlinkte.

Für das Design entschied ich mich für eine schwarze Hintergrundfarbe, kombiniert mit weißer Typografie, um ein klares und modernes Aussehen zu erzielen. Die Schriftarten und die Farbkontraste wählten ich bewusst so, dass sie sowohl die „Persönlichkeit“ als auch die „Professionalität“ widerspiegeln. Ein paar coole Highlights wie Hover-Effekte mit Neongelb, ein süßer Pfeil als Cursor, und einige Animationen brachten Leben in das Design, ohne es zu überladen. Die Verwendung von Grids, Hover-Effekten und einem „Glowing“-Effekt bei Bildern und Typografie brachte zusätzliche visuelle Spannung und Dynamik.

Ein weiteres cooles Feature war die Nutzung von Code-Snippets, einem Zick-Zack-Masonry-Bild-Grid, einer Ladeanimation, einer Typewriter-Animation sowie interaktive Elemente und sanfte Übergänge. Auch Links zu meinem Instagram- und LinkedIn-Profil und eine „Mail-to“-Funktion wurden eingebaut, um die Interaktivität zu erhöhen.

Ich habe bei meiner finalen Webseite auch noch am Ende „Playful Special Effects“, einen E-Mail-Schutz, eine E-Mail-Funktion, eine Privacy Policy und Imprint hinzugefügt um die Nutzererfahrung weiter zu verbessern und die Webseite funktional und sicher zu gestalten.

Mock Ups

MacBook

I Phone

PROBLEME

Ich habe viel gelernt, auch wenn es gelegentlich Herausforderungen gab. Kleine Syntaxfehler, wie Tippfehler, haben dafür gesorgt, dass der Code nicht funktionierte, und beim Debugging musste ich oft herausfinden, warum bestimmte Stile oder Skripte nicht richtig liefen. Auch das responsive Design stellte mich vor Herausforderungen, da die Darstellung auf Smartphones oft nicht wie gewünscht war, trotz korrektem Code und gründlicher Recherche. Zudem war die Arbeit mit Grids und Flexbox manchmal schwierig, besonders bei der Positionierung und dem Layout. Die richtige Nutzung von Div-Tags und Class-Attributen war ebenfalls nicht immer sofort klar. Doch trotz dieser Hürden konnte ich mit Ausdauer, Geduld und stetigem Testen die Probleme meistern und weiter daran wachsen.

LEARNINGS

Während des Kurses habe ich zum ersten Mal echten Code angewendet und meine erste Webseite erstellt. Dabei habe ich unglaublich viel gelernt, sowohl in technischer als auch in kreativer Hinsicht. Ich habe nicht nur die Grundlagen von HTML, CSS und JavaScript verstanden, sondern auch den Aufbau und die Struktur einer Webseite kennengelernt – wie die verschiedenen Programmiersprachen zusammenarbeiten und wie man sie gezielt einsetzt.

Ein ganz großes Learning war das Verständnis für die Verbindung von Funktionalität und Design. Ich habe gelernt, wie man technische Logik mit Designprinzipien wie UI  und UX kombiniert, um eine benutzerfreundliche und funktionale Webseite zu erstellen. Das hat mir ein viel tieferes Verständnis für die Bedürfnisse von Nutzern und die Bedeutung einer klaren, intuitiven Struktur gegeben.

Auch der Workflow mit GitHub im veröffentlichen und regelmäßigem pushen war ein wichtiger Aspekt, den ich während des Projekts verbessert habe. 

Hinzu kamen viele weitere technische Learnings, wie das Erstellen einer sauberen Dateistruktur und das strukturierte Arbeiten an einem Projekt.

Ein weiteres Highlight war das Erlernen von Geduld und Ausdauer. Gerade beim Debugging und der Lösung von Problemen im Code konnte ich meine Frustrationstoleranz steigern und habe gelernt, geduldig an Lösungen zu arbeiten.

Kurz gesagt: Durch die Arbeit an meiner ersten Webseite habe ich nicht nur meine Coding-Skills enorm verbessert, sondern auch ein starkes Verständnis für Benutzerfreundlichkeit, Design, Projektstrukturierung und die technische Umsetzung entwickelt.

FAZIT

Der Kurs hat mir unglaublich viel Spaß gemacht und mir gezeigt, dass Webdesign und Coding genau mein Ding sind. Ich habe mein Wissen direkt in meinem Werkstudenten-Job im Bereich Webentwicklung anwenden können, was mich beruflich enorm bestärkt hat. Natürlich gab es Herausforderungen, wie Syntaxfehler und das Lösen von Debugging-Problemen, aber diese Schwierigkeiten haben mich weitergebracht und meine Problemlösungsfähigkeiten verbessert.

Ich habe gelernt, wie wichtig es ist, technische Logik mit Design zu verbinden, wie man mit GitHub arbeitet und wie man Webseiten benutzerfreundlich gestaltet. Besonders das responsive Design und die Positionierung mit Flexbox und Grid haben mich gefordert, aber auch sehr bereichert. Ich bin definitiv motiviert, weiter in diesem Bereich zu lernen und mich zu verbessern. Es macht mir unglaublich viel Spaß, Webseiten zu gestalten, und ich kann mir gut vorstellen, meine Zukunft in diesem Bereich aufzubauen.

Pascal war während des gesamten Kurses immer super hilfsbereit und hat sich trotz der großen Gruppe viel Zeit genommen, um auf jeden individuell einzugehen. Er hat uns mit seiner Begeisterung und vielen hilfreichen Tipps motiviert und uns gezeigt, wie viel wir in so kurzer Zeit leisten können. Ich bin stolz auf das, was ich erreicht habe, und freue mich darauf, weiterhin in diesem Bereich zu lernen und mich weiterzuentwickeln.