Start

Willkommen im ersten überbetrieblichen Kurs deiner IMD Ausbildung zum Thema Frontend Development (Programmieren mit Webtechnologien).

Designer die beispielsweise Bücher, Plakate oder Magazine gestalten benötigen ein Grundwissen über Papier und Drucktechnologien. Ohne dieses Wissen wäre es ihnen kaum möglich, Aufträge einzuschätzen, richtige Entscheidungen zu treffen und am Ende ein qualitativ hochstehendes Endprodukt abzuliefern.

Dasselbe gilt natürlich auch für dich als Designer im digitalen Umfeld. Du brauchst ein grundlegendes technisches Wissen und Verständnis darüber, wie interaktive Medien funktionieren, damit du dafür professionell gestalten kannst.

Um dieses Wissen aufzubauen widmet sich jeder ÜK deiner Ausbildung einem bestimmten Thema. In diesem Kurs dreht sich alles um das Programmieren einer persönlichen Portfolio-Website auf der du deine Fähigkeiten, Arbeiten und Kontaktdaten präsentieren kannst.

Kursziel

Das Programmieren einer Portfolio Website, wie dieser, ist dein Kursziel.

Bild scrollen, oder gesamte Seite auf Invision ansehen

Erwartungen

Da es in diesem Kurs weniger um den Gestaltungsprozess, sondern viel mehr um die technische Umsetzung geht, stellen wir dir diese Vorlage zur Verfügung. Sie dient dir als roter Faden und liefert viele Beispiele, um zügig voranzukommen. Wir möchten von dir aber keine 1:1 Kopie davon sehen. Es ist dein Portfolio, also personalisiere es entsprechend. Weiche beispielsweise von der Vorlage ab, probier Dinge aus, löse Challenges und nutze eigene Inhalte etc.

Aufbau dieses Guides

Dieser Guide / dieses Dokument begleitet dich während der gesamten Kursdauer. Im Bereich Guide findest du alle Themen und Aufgaben. Am Seitenende kannst du jeweils zum nächsten oder letzten Kapitel gelangen. Die Suche oben rechts hilft dir Seiten und Themen schnell zu finden. Der Bereich Challenges fordert dich mit zusätzlichen, nicht-dokumentierten Aufgaben heraus dein Wissen zu überprüfen und dein Portfolio zu individualisieren.

Codeblocks

Dieser Guide stellt Code visuell anders dar, als normalen Text. Dies hilft dir beides leichter voneinander zu unterscheiden. Bitte beachte, dass die Farben hier womöglich nicht mit den Farben in deinem eigenen Code-Editor übereinstimmen.

<!-- so sieht HTML in unserem Guide aus -->
<div class="imd">
    <p>Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.</p>
</div>

/* so sieht CSS in unserem Guide aus. */
.imd {
    color: white;
}

/* So sieht Javascript in unserem Guide aus */
document.querySelector('.imd');

Hinweise

Links

Diesen Hinweis nutzen wir, um weiterführende Themen zu verlinken. Bitte teile uns mit, falls ein Link nicht funktioniert.
Link

Hinweise

Diesen Hinweis nutzen wir, wenn es etwas Wichtiges zu bedenken oder zu beachten gibt.

Warnung

Diesen Hinweis nutzen wir bei kritischen Aktionen, die die Funktionalität deiner Website gefährden oder beeinträchtigen könnten.

Challenge

Diesen Hinweis nutzen wir, um dich bei vielen Themen und Aufgaben auf passende Challenges aufmerksam zu machen.

Badges

Badges benutzen wir im Text, um zwischen Informationen und Aufgaben zu unterscheiden. Dadurch siehst du bei jedem Kapitel immer sofort, welche Teile zur Erstellung des Portfolios benötigt werden.

So sieht ein Badge aus:

Aufgabe