Frontend Development

# Ende & Weiterführendes

# Präsentation

Bereite dich nun auf die Präsentation deines Portfolios vor.

Hinweis

Bitte präsentiere insbesondere die Dinge die du speziell, oder anders gelöst hast als in der Vorlage. Zeig uns auch das responsive Verhalten deiner Seite.

  • Was war schwierig und was einfach?
  • Was hat dir Spass gemacht, was weniger?
  • Auf welche Challenge, oder welches Detail bist du besonders stolz?
  • Was möchtest du noch weiter vertiefen?
  • Was nimmst du aus diesem Kurs mit?

Link speichern Aufgabe

Trage den Link zu deiner Website bitte hier ein!

# Herzlichen Glückwunsch!

Du hast alle Kapitel durchgearbeitet und den Kurs erfolgreich beendet. Vielleicht hast du auch einige Challenges lösen können? Wir hoffen, der Kurs hat dir Spass gemacht und du nimmst neues Wissen mit, dass dich beruflich weiterbringt.

# Feedback

Aufgabe

Damit wir unseren Kurs und den Guide kontinuierlich anpassen und verbessern können, sind wir auf dein Feedback angewiesen. Bitte nimm dir kurz Zeit und beantworte uns anonym ein paar Fragen.

Feedback-Formular ausfüllen

Wie zu Beginn erwähnt, stehen wir dir weiterhin mit Rat und Tat zur Seite, falls du Frontend Fragen hast.

Kilian – Mail | Twitter
Marcel – Mail Fäbu – Mail | Twitter

Hinweis

Die folgende Auflistung soll dir als Nachschlagewerk zu weiteren Frontend-Themen dienen. Einen Teil davon werden die Instruktoren, je nach verfügbarer Zeit, auch während des Kurses erklären.

# Accessibility (Barrierefreiheit)

Barrierefreiheit in der Webentwicklung bedeutet, dass auch Menschen mit körperlichen Einschränkungen (z.B. einer Sehschwäche) Websites bedienen können. Im Gegensatz zu Nutzern, die sich visuell orientieren und mit der Maus oder dem Finger auf Flächen klicken, verwenden solche Nutzer meist die Tastatur in Kombination mit einem Screenreader. Das sind Programme, die Website-Inhalte vorlesen.

Mit HTML und CSS barrierefreie Websites zu erstellen ist relativ einfach sofern man ein paar Grundregeln beachtet.

# Accessibility Grundsätze

  • Seitentitel, meta-Tags und Dokumentsprache setzen
  • Semantische Tags (z.B. <footer> und <header>) statt nichtssagende <div>-Elemente verwenden
  • Ausreichende Farbkontraste und grosszügige Schriftgrössen auswählen
  • Niemals ganz den Focus-State entfernen (Die Kontur beim fokussieren von Links oder Eingabefeldern)
  • Einfache Navigation mit der Tab-Taste ermöglichen
  • Hierarchisch korrekte Überschriften (<h1>-<h6>) einsetzen
  • Grafiken mit dem alt-Attribut beschreiben und Grafiken mit Text vermeiden
  • Wo nötig mit den aria-Attributen arbeiten. Diese helfen dem Screenreader den Inhalt richtig zu deuten.

Durch das Einhalten solcher Standards wird nicht nur die Accessibility verbessert, es wird auch eine gute Grundlage für die Suchmaschinenoptimierung geschaffen.

Mehr zum Thema Accessiblity

# SEO (Suchmaschinenoptimierung)

Willst du bei Suchmaschinen wie Goolge oder DuckDuckGo gut gefunden werden, gibt es einiges zu beachten. Vieles deckt sich mit den Grundsätzen der Accessiblity. Ein paar zusätzliche Dinge gibt es aber dennoch zu beachten.

# SEO-Grundsätze

  • Richte deinen Inhalt danach aus, was Besucher in eine Suchmaschine eingeben würden
  • Schreibe aussagekräftige Titel und Meta-Beschreibungen
  • Schreibe längere, qualitative Texte
  • Vermeide duplizierte, doppelte Inhalte
  • Optimiere die Grösse deiner Bilder
  • Optimiere die Seitengeschwindigkeit
  • Sorge für eine gute User Experience (Nutzererlebnis) auf allen Bildschirmgrössen, leserliche Schriftgrössen, Links und Buttons sind einfach klickbar
  • Verwende Schlüsselwörter in der URL
  • Verwende interne Verlinkungen
  • Sorg dafür, dass andere Website auf deine verlinken (Backlinks)

Mit der Einhaltung dieser Grundregeln sollte deine Website ideal gefunden werden. Eine Garantie gibt es allerdings nicht. Auf die Ergebnispriorisierung deiner Website auf Suchmaschinen hast du keinen direkten Einfluss.

Mehr zum Thema SEO

# Coding Workflow

Je professioneller du als Developer wirst, desto mehr wirst du dich mit deiner Arbeitsweise auseinandersetzen. Es gibt viele kleine Tools (Werkzeuge) und Helfer, die dir das Coding erleichtern.

# Editor-Plugins

Die folgenden Plugins kannst du für Visual Studio Code installieren, einer der aktuell populärsten Code-Editoren. Natürlich gibt es die selben und ähnliche Plugins auch für andere Editoren.

Passende Links

# Build-Tools

Build-Tools sind Werkzeuge, die deine Website (oder Teile davon) in eine bestimmte Form für die Ausgabe umwandeln. So kannst du etwa deine Website in kleine, übersichtliche Module zerteilen und dann mit einem Buildtool automatisiert wieder zusammenfügen. Insbesondere bei grossen, komplexen Projekten ist dies unerlässlich. Auch dieser Guide verwendet ein Build-Tool. Ansonsten hätten sämtliche Inhalte in HTML-Dateien geschrieben werden, und die Navigation auf jeder dieser Seite angepasst werden müssen.

Passende Links

  • Webpack (Bundler, Zusammenführen & Optimieren)
  • NPM (Package Manager, Libraries & Snippets integrieren)
  • Yarn (Gleiches Konzept wie NPM, nur etwas besser)

# Git (Versionierung)

Mit Git kannst du deine Website versionieren. Du kannst sie also jederzeit auf einen älteren Stand zurücksetzen, falls das beispielsweise durch einen Fehler nötig sein sollte. Auch wenn mehrere Developer zusammen an einem Projekt arbeiten ist Git ein wichtiges Tool, um sich nicht gegenseitig den Entwicklungsfortschritt zu überschreiben. Git erkennt, ob an der selben Datei Änderungen vorgenommen wurden und warnt entsprechend beim Zusammenführen von mehreren parallelen Entwicklungsarbeiten. Auch dieser Guide ist mit einem Git-Workflow aufgebaut worden.

Passende Links

  • Git (Offizielle Git Website)
  • Github (Weltgrösste Coding-Plattform auf Basis von Git)
  • Gitlab (Gleiches Konzept wie Github, anderer Anbieter)
  • Bitbucket (Gleiches Konzept wie Github, anderer Anbieter)

# Frameworks

Es ist nicht immer nötig, das Rad neu zu erfinden und alles von Grund auf neu zu schreiben. Ein Framework ist eine Art Bibliothek mit vorgefertigten Elementen und Funktionen, auf die du zurückgreifen kannst.

Passende Links

# Ressourcen

# Code-Beispiele & Inspiration

# Coding-Hilfe

# Magazine & Blogs

# YouTube Channels

# Lernen & Tutorials

Passende Challenges

  • #26 Modularize (Zerteile dein Portfolio in Module, sodass du z.B. Header und Footer global ändern kannst, statt wiederholend auf jeder Seite einzeln)
  • #28 Content Management (Integriere ein CMS deiner Wahl, damit du Texte und Bilder auch ausserhalb der Code-Ansicht verwalten kannst)

←