image
Lucie Keller

Frontend: Eigenes Projekt mit HTML & CSS

Mockup für Macbook, iPad und iPhone zu meiner clicker-Seite

Durch dieses Projekt konnte ich meine Fähigkeiten in HTML und CSS auf ein fortgeschrittenes Niveau heben. Nun kann ich das Mobile-First-Prinzip anwenden, um eine effektive Skalierung von responsiven Seite sowie einen sauber lesbaren Code zu gewährleisten.
Als UX/UI-Designerin nutze ich diese Fähigkeit zur effektiven Kommunikation in interdisziplinären Teams, um eine realistische Umsetzbarkeit meiner Entwürfe zu erreichen.

Diesen Kurs habe ich tatsächlich zwei mal besucht. Einmal als Bachelorstudentin im Jahr 2017 und dann noch einmal als Masterstudentin, um meinen Kenntnisstand vor dem Abschluss aufzufrischen. Somit konnte ich beim zweiten Durchlauf über Grundlagen hinaus kompliziertere Funktionen ausprobieren. Wie sich herausstellte, war ich am Ende erfahren genug, um meinen Kommilitonen dabei zu helfen Fehler und Probleme in ihren eigenen Webseiten zu finden und zu beheben.

Heute würde ich sagen, dass meine Kenntnisse in HTML und CSS solide sind. Zwar würde ich die umfangreiche Arbeit eines spezialisierten Frontend-Developers nicht ersetzen wollen, allerdings kenne ich mich gut genug aus, um mich mit anderen Developern über Optimierungen einer Webseite auszutauschen.

Somit habe ich ein fundiertes technisches Verständnis von Frontend, wodurch ich die realistische Umsetzbarkeit meiner Designentwürfe einschätzen und mich danach richten kann.

Interesse geweckt? Der untere Button führt Sie zu einer Demo der Webseite! Klicken Sie sich gerne durch.

Website-Demo

Skripte zum Nachlesen

Sie können meinen Code für diese Webseite hier nachfolgend aufklappen und nachlesen. Für ein angenehmeres Format können Sie die Demo in Ihrem Browser öffnen und den Code mit den Developer-Tools Ihres Browsers betrachten. Hierfür rechtsklicken Sie bitte an einer beliebigen Stelle auf der Seite und wählen "Element untersuchen" - in den Developer-Tools wird dann der Bereich der Skripte hervorgehoben, den Sie angeklickt haben. Alternativ können Sie im Rechtsklick-Menü "Seitenquelle" auswählen, um das HTML-Skript im Vollbild zu öffnen. Das CSS-Sheet ist im <head> Bereich verlinkt.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Raleway&family=Scope+One&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="//cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css"
/>
<link rel="stylesheet" href="dist/style.css" type="text/css"/>
<title>Ninos Clickertraining</title>
</head>
<body id="top">
<div class="page">
<header class="header">
<button type="button" class="header__button js-toggle-navigation">
<i class="mdi mdi-menu"></i>
</button>

<nav class="navigation">
<button type="button" class="header__button js-toggle-navigation">
<i class="mdi mdi-close"></i>
</button>

<div class="content">
<ul class="navigation__list">
<li>
<a href="#klickern">Was ist Klickern?</a>
</li>
<li>
<a href="#wer-ist-nino">Wer ist Nino?</a>
</li>
<li>
<a href="#fotos">Fotos</a>
</li>
<li>
<a href="#equipment">Ausrüstung</a>
</li>
<li>
<a href="#videos">Klickervideos</a>
</li>
</ul>
</div>
</nav>

<a href="#top" class="scrolltotop">
<i class="mdi mdi-chevron-up"></i>
</a>
</header>

<main>
<div class="hero">
<div class="hero__title">
<h1>Nino</h1>

<span>Clicker Training Journey</span>
</div>
</div>

<div class="dark_bg_color" id="klickern">
<div class="content">
<h1>Was ist Klickern?</h1>

<p>
Unter dem Begriff versteht man eine Trainingsmethode, bei welcher
man ein Signalgeräusch verwendet, um dem zu trainierenden Tier zu
zeigen, dass es etwas richtig gemacht hat. Ein Klickgeräusch, das
von einem sogenannten Klicker ausgelöst wird, ist dabei ideal,
weil es so spezifisch ist. Dieses Geräusch taucht nicht einfach so
im Alltag auf. Viele Menschen versuchen ihre Tiere nur mit
normalem Lob zu trainieren, indem sie: "Ja" oder "Toll gemacht!"
rufen. Es wird aber unweigerlich der Moment eintreten, wo man
diese Wörter auch im Alltag verwenden wird, z.B. wenn man am
Telefon über das Tier spricht. Jedes Mal, wenn das Tier das
Signalgeräusch zufällig hört, wird es verwirrt sein und sich
fragen, was es gerade richtig gemacht haben könnte. Im schlimmsten
Fall fördert man dadurch ein Fehlverhalten. Das spezielle
Klickgeräusch wird nicht einfach so im Alltag auftreten.
</p>
<p>
Es funktioniert so gut, dass man es bei wahrscheinlich jedem
Säugetier versuchen kann. Zootiere werden sehr häufig mit einem
Klicker trainiert, damit sie Aktionen ausführen wie z.B. in eine
Transportbox zu steigen. Bei einem Tiger kann man so auf
Betäubungsmittel verzichten und man wird beim Transport dennoch
keine Pfleger gefährden.
</p>
<p>
Ein guter Start ist das Targettraining. Hier wird nach Bedarf
zuerst ein Nasentarget und dann ein Pfotentarget trainiert. Für
die Nase nimmt man eine Art Stab, dessen Spitze das Tier mit der
Nase berührt. Oft machen sie das instinktiv sowieso, weil sie an
dem fremden Objekt riechen wollen. Jedes Mal, wenn das Tier zum
Target schaut, sich hinbewegt, klickt man. Nach einigen
Wiederholungen versteht das Tier, dass es für die Berührung mit
der Nase belohnt wird.
</p>
<p>
WICHTIG: Auf jeden Klick folgt eine Belohnung! Verfressene Tiere
sind leichter zu trainieren, weil Futter eine einfache Motivation
bildet. Für viele Tiere sind Streichel- und Spieleinheiten jedoch
effektivere Belohnungen. Achtet unbedingt auf die Auswahl der
Snacks, da sie u.U. viele Kalorien haben können. Zudem dauern die
ersten Trainingseinheiten nicht länger als 5 Minuten. Zum einen
soll das Tier nicht überfordert werden, zum anderen will man es
auch nicht überfüttern und damit Übergewicht riskieren. Bei der
Auswahl der Snacks ist zu beachten, dass man für das
Klickertraining eine hohe Qualität auswählt bzw. es sollten die
Lieblingssacks des Tieres sein - so kann man "normale Snacks"
weiter im Alltag verfüttern, wenn man möchte. Die besonders
leckeren bekommt das Tier aber nur, wenn es sich diese im
Klickertraining verdient hat. Motivation und Spaß für das Tier ist
das wichtigste im Klickertraining.
</p>
</div>
</div>

<div class="container max-width">
<div class="container__thumbnails_and_text">
<img
src="/images/noun_Target_4118525.png"
alt="Eine Zielscheibe mit einem Pfeil in der Mitte"
width="100px"
title="Created by Lona Muoi from Noun Project"
/>
<h2 class="container__thumbnails_and_text__headline">Targets</h2>
<p>
Für Nasentargets sind vor allem längliche Objekte wie Stäbe
geeignet. Bei Pfotentargets verwendet man flache Flächen wie z.B.
eine Fliegenklatsche oder eine Karte, die leicht zu merken ist.
</p>
</div>

<div class="container__thumbnails_and_text">
<img
src="/images/noun_creativity_2995413.png"
alt="Ein Symbol einer leuchtenden Glühbirne"
width="100px"
title="Created by Jirapark from Noun Project"
/>
<h2 class="container__thumbnails_and_text__headline">
Kreativität
</h2>
<p>
Klickern fördert kreatives Denken, welches essentiell ist, um
komplexe Probleme zu lösen. Wird das Gehirn regelmäßig
angestrengt, bleibt der Geist fit und dies wird sich insbesondere
im Alter zeigen.
</p>
</div>

<div class="container__thumbnails_and_text">
<img
src="/images/noun_Cat_211996.png"
alt="Eine ruhig schlafende Katze"
width="100px"
title="Created by Aaz from Noun Project"
/>
<h2 class="container__thumbnails_and_text__headline">Erziehung</h2>
<p>
Ein wohlerzogenes Haustier, das selten Unsinn macht, sorgt für
Frieden im Haus und damit für weniger Stress sowohl für Mensch als
auch Tier. Üblich wären z.B.: Transportbox, Tischmanieren, etc.
</p>
</div>
</div>

<div class="bild-text bild-text--rechts max-width" id="wer-ist-nino">
<div class="bild-text__bild">
<img
src="/images/Ninochill_500x713.jpg"
alt="a black cat wrapped in a blanket"
width="500rem"
/>
</div>

<div class="bild-text__text">
<h2>Wer ist Nino?</h2>
<p>
Nino ist ein schwarzer Kater, der im September 2019 geboren wurde
und im Alter von 8 Monaten mein neuer Mitbewohner wurde. Vorher
lebte er in einem Tierheim. Ich weiß nicht viel über seine
Vergangenheit, aber habe gesagt bekommen, dass er bereits zwei Mal
zuvor wieder zurück ins Tierheim gebracht wurde, weil er "sich
immer nur versteckt hat."
</p>
<p>
Da ich eine erfahrene Katzenhalterin bin und mich schon seit
meiner Kindheit für Katzensprache interessiert hatte, nahm ich die
Herausforderung an diesen Kater zu sozialisieren und ihm so ein
möglichst stressfreies und glückliches Leben zu schenken.
</p>
<p>
Er war bei seiner Ankunft bei mir sehr scheu und kam selten aus
seinen zahlreichen Verstecken heraus. In den ersten 3 Tagen hat er
nicht mal gefressen - das machte mir schon etwas Sorgen. Ich
stellte ein Buffet mit verschiedenen Katzenfuttersorten für ihn
auf und das blieb ignoriert. Ich beschloss ihn in Ruhe zu lassen
und am 4. Tag holte er sich dann doch was zu Fressen ab. Ab da hab
ich jeden Abend mit ihm gespielt. Er hat dabei zwar Abstand zu mir
gehalten, aber es war ein Anfang. Nach 4 Wochen war es dann
endlich soweit: Er hat von sich aus angefangen sich an meine Hand
zu kuscheln. Hier begann unsere innige Freundschaft.
</p>
</div>
</div>

<div class="max-width max-width__padding" id="fotos">
<h1 class="gallery__headline">Fotos</h1>
<div class="gallery">
<div class="gallery__item">
<img
src="/images/gallery_item1.jpg"
alt="a close up of a black cat"
width=""
/>
</div>

<div class="gallery__item">
<img
src="/images/gallery_item2.jpg"
alt="a close up of a black cat"
width=""
/>
</div>

<div class="gallery__item">
<img
src="/images/gallery_item3.jpg"
alt="a close up of a black cat"
width=""
/>
</div>

<div class="gallery__item">
<img
src="/images/gallery_item4.jpg"
alt="a close up of a black cat"
width=""
/>
</div>

<div class="gallery__item">
<img
src="/images/gallery_item5.jpg"
alt="a close up of a black cat"
width=""
/>
</div>

<div class="gallery__item">
<img
src="/images/gallery_item6.jpg"
alt="a close up of a black cat"
width=""
/>
</div>

<div class="gallery__item">
<img
src="/images/gallery_item7.jpg"
alt="a close up of a black cat"
width=""
/>
</div>

<div class="gallery__item">
<img
src="/images/gallery_item8.jpg"
alt="a close up of a black cat"
width=""
/>
</div>

<div class="gallery__item">
<img
src="/images/gallery_item9.jpg"
alt="a close up of a black cat"
width=""
/>
</div>

<div class="gallery__item">
<img
src="/images/gallery_item10.jpg"
alt="a close up of a black cat"
width=""
/>
</div>

<div class="gallery__item">
<img
src="/images/gallery_item11.jpg"
alt="a close up of a black cat"
width=""
/>
</div>

<div class="gallery__item">
<img
src="/images/gallery_item12.jpg"
alt="a close up of a black cat"
width=""
/>
</div>
</div>
</div>

<div class="dark_bg_color">
<div class="content">
<h1>Wieso lernt Nino Clickertraining?</h1>

<p>
Auch wenn er nach einem Jahr ein liebevoller, kuschelsüchtiger und
verspielter Kater geworden ist, der sich mittlerweile auch vor
Besuchern kontaktfreudig zeigt, so legt er noch einige
Verhaltensweisen an den Tag, die ich als störend empfinde. So
balanciert er z.B. liebend gern auf dem Wäscheständer herum,
während dort saubere Wäsche hängt, und wirft auch mal Wäsche von
da runter. Leider frisst er auch ohne Hemmungen Papier und Schnüre
von Spielzeugen und diese Angewohnheit kann für ihn gefährlich
werden. Nun weiß der erfahrene Katzenhalter natürlich, dass Katzen
Bestrafungen nicht verstehen und es darum sinnlos ist über solche
Maßnahmen nachzudenken. Was kann man also tun?
</p>
<p>
Durch die Videos von Jackson Galaxy habe ich gelernt, dass Katzen
zu jedem No auch ein Yes brauchen. Im Beispiel des Wäscheständers
wäre ein Kompromiss einen großen Kratzbaum aufzustellen mit
herabhängendem Spielzeug, was viel attraktiver als ein wackeliger
Wäscheständer sein sollte. Bezüglich seiner Essstörung, die als
Pica-Syndrom bekannt ist, kann man nicht viel tun außer die
Schwänze von Spielzeugmäusen abzuschneiden und kein Papier
irgendwo herumliegen zu lassen. "Zum Glück" macht er das nur,
während ich schlafe, weswegen ich darauf schließen kann, dass ihm
nachts einfach nur langweilig ist, aber dass es ihm ansonsten
(tagsüber) gut geht. Nächstes Jahr ist geplant eine zweite Katze
zu adoptieren und spätestens dann sollte er diese Angewohnheit
hoffentlich ablegen.
</p>
<p>
Am 25. Juni 2021 ist aber etwas passiert, das mich wachgerüttelt
hat und mich zu der Entscheidung führte aktiver zu werden meinen
Kater zu erziehen. Als ich mit ihm in der Heimat zu Besuch war,
ist er am Morgen vom Balkon runtergesprungen und es dauerte 18
Stunden bis ich ihn wiederfand und zurück nach Hause bringen
konnte. Er ist ein ängstlicher Wohnungskater, der sich noch nicht
gut auf den Arm nehmen lässt und das hat es sehr erschwert ihn
einzufangen. Sich hochheben zu lassen ist für Katzen auch in
anderen Situationen sehr wichtig, z.B. beim Tierarzt. Auch
freiwillig in die Transportbox zu steigen würde uns beiden viel
Stress und Zeit ersparen.
</p>
<p>
Clickertraining ist die Antwort auf diese Wünsche. Auf dieser
Basis ist es möglich meinem Kater allerlei Dinge beizubringen. Auf
dieser Seite lesen Sie wie wir angefangen haben und was Nino auf
seinem Weg gelernt hat.
</p>
</div>
</div>

<div
class="bild-text bild-text__links max-width bild-text--alternative"
>
<div class="bild-text__bild" id="equipment">
<img
src="/images/klickerbox_500x713.jpg"
alt="Ein Stapel Trainingskarten und ein Klicker"
width="500rem"
/>
</div>

<div class="bild-text__text">
<h2>Ausrüstung</h2>
<p>
Online kann man viele Modelle von Klickern finden. Einige davon
sind mehr und andere weniger geeignet für Katzen. Speziell bei
kleinen Tieren mit empfindlichem Gehör sollte man auf kleine
Klicker achten, die nicht zu laut klicken. Viele Hersteller
behaupten, dass ihre Klicker sowohl für Katzen, Hunde, als auch
Pferde geeignet seien und da das schon sehr unterschiedliche Tiere
sind, würde ich von solchen Klickern abraten.
</p>
<p>
Für den Einstieg hat es mir geholfen die Katzen Clicker-Box von
Birgit Rödder zu kaufen. In dem Set liegt ein Taschenbuch bei, wo
Klickern grundsätzlich erklärt wird und man bekommt insgesamt 36
doppelseitige Karten mit verschiedenen Tricks und Erziehungszielen
mit Anweisungen, wie man diese trainiert.
</p>
<p>
Wie oben bereits erwähnt ist ein essentieller Bestandteil des
Klickerns die anschließende Belohnung. In den meisten Fällen
werden das die Lieblingssnacks der zu trainierenden Katze sein.
Diese Snacks bekommt sie NUR während des Klickerns, damit sie die
Übungen von Anfang an mit etwas positivem verbindet! Mein Kater
Nino hat schon nach 3 Tagen angefangen täglich darum zu betteln zu
klickern. Wenn die zu trainierende Katze eher nicht verfressen
ist, könnte man es auch mit einem neuen tollen Spielzeug
versuchen, das die Katze nur nach dem Klickern bekommt.
</p>
</div>
</div>

<div class="max-width max-width__padding" id="videos">
<h1 class="klickervideos__headline">Klickervideos</h1>
<div class="klickervideos">
<div class="klickervideos__item">
<video
width="320"
height="240"
alt="Katze tippt Stabspitze mit der Nase an"
controls
>
<source src="/images/nino_tipp.mp4" />
<i
>Dein Browser unterstützt die Wiedergabe dieses Videos
nicht.</i
>
</video>
<div class="klickervideos__text">
<input type="checkbox" class="read-more-state" id="post-1" />
<h2>Nasentarget: "Tipp!"</h2>
<p>
Wie bereits unter
<a href="#klickern">Was ist Klickern?</a> erklärt haben wir
als erstes das Nasentarget geübt. Stabartige Dinge sind dafür
ideal - später kann man den Stab dafür nutzen auf andere Dinge
zu tippen, damit die Katze sie mit der Nase anstubst.
</p>

<div class="moretext">
Ich wählte hierfür eine Katzenangel. Später hat er gelernt die
Spitze von meinem Zeigefinger ebenfalls mit der Nase
anzutippen.
</div>

<label for="post-1" class="read-more-trigger"></label>
</div>
</div>

<div class="klickervideos__item">
<video
width="320"
height="240"
alt="Katze berührt blaue Münze"
controls
>
<source src="/images/nino_touch_coin.mp4" />
<i
>Dein Browser unterstützt die Wiedergabe dieses Videos
nicht.</i
>
</video>
<div class="klickervideos__text">
<input type="checkbox" class="read-more-state" id="post-2" />
<h2>Pfotentarget: "Touch!"</h2>
<p>
Für das Pfotentarget eignet sich alles, was flach ist. Nino
wurde auf eine blaue Holzmünze konditioniert. Er erkennt das
Muster inzwischen von weitem und hebt als Reaktion sogar schon
bei Sichtkontakt eine Pfote.
</p>

<div class="moretext">
Deshalb kann ich die Münze auch auf andere Gegenstände legen
und nach einigen Wiederholungen versteht er dann, dass er den
neuen Gegenstand ebenfalls berühren soll (z.B. meine flache
Hand). In den meisten Guides wird die Verwendung einer
Fliegenklatsche empfohlen, aber wie gesagt: Alles was flach
ist funktioniert für den Anfang. Später kann eine Katze auch
Gegenstände mit ganz unterschiedlichen Formen auf Kommando
berühren.
</div>

<label for="post-2" class="read-more-trigger"></label>
</div>
</div>

<div class="klickervideos__item">
<video
width="320"
height="240"
alt="Katze berührt blaue Münze"
controls
>
<source src="/images/nino_highfive.mp4" />
<i
>Dein Browser unterstützt die Wiedergabe dieses Videos
nicht.</i
>
</video>
<div class="klickervideos__text">
<input type="checkbox" class="read-more-state" id="post-3" />
<h2>High Five / Pfötchen</h2>
<p>
Dieser Trick hat etwas länger gedauert als das einfache
Pfotentarget. Für Katzen ist das Zuschlagen mit der Pfote eine
aggressive Geste und da Nino mir freundlich gesinnt ist,
möchte er meine Hände natürlich nicht schlagen.
</p>

<div class="moretext">
Ich habe also damit angefangen ihm verschiedene Gegenstände
zum "antatschen" gegeben und am Anfang immer die Münze
draufgelegt, damit er das Prinzip versteht. Schließlich habe
ich die Münze auf meine Handfläche gelegt und am Anfang ist er
sehr zögerlich gewesen und versuchte stattdessen zärtlich die
Seiten meiner Finger anzustubsen. Mit viel Geduld hat er es
aber innerhalb von ungefähr einer Woche perfektioniert.

<p>
Manchmal hat er vor Aufregung unabsichtlich die Krallen
ausgefahren und mich somit leicht gekratzt. Dafür bekommt er
dann nie einen Klick und keine Belohnung. Stattdessen
quietsche ich dann: "Aua!" Dann darf er das High Five
wiederholen und bisher hatte er jeweils beim nächsten Mal
immer die Krallen eingefahren und sich seine Belohnung
verdient.
</p>
</div>

<label for="post-3" class="read-more-trigger"></label>
</div>
</div>

<div class="klickervideos__item">
<video
width="320"
height="240"
alt="Katze berührt blaue Münze"
controls
>
<source src="/images/nino_buzzer.mp4" />
<i
>Dein Browser unterstützt die Wiedergabe dieses Videos
nicht.</i
>
</video>
<div class="klickervideos__text">
<input type="checkbox" class="read-more-state" id="post-4" />
<h2>Buzzertraining</h2>
<p>
Ich hatte schon oft gesehen, dass Menschen ihre Katzen und
Hunde trainieren eine Klingel zu betätigen, wenn sie essen
wollen. In dem Rahmen hatte ich mir überlegt, dass dieses
Prinzip auch mit Buzzern funktionieren könnte.
</p>
<div class="moretext">
Auf meiner Recherche stieß ich auf viele Videos von Hunden,
die mithilfe von Buzzern kommunizieren konnten, ob sie essen,
schmusen oder spazieren wollten. Einige konnten sogar
spezifizieren wo sie spazieren gehen wollen.

<p>
Es gibt auch Videos dazu wie Leute dasselbe mit Katzen
versuchen und meistens scheitern. Mir ist dabei aufgefallen,
dass die Halter darauf vertrauen, dass ihre Katze den
richtigen Buzzer an der Farbe erkennen würden - aber das ist
nicht möglich. Katzen können nur 3 Farben sehen: Lila, blau
und grün. Alle anderen Farben erscheinen in Grautönen. Meine
bisherigen Trainingseinheiten mit Nino haben gezeigt, dass
er sich die richtige Assoziation (Bedeutung) der
Audioaufnahmen gemerkt hat, aber bevor er einen Buzzer
betätigt, scheint er nicht zu verstehen, welcher Ton da
rauskommen wird. Er kann das Aussehen der Buzzer nicht
unterscheiden. Auch die Hunde aus den o.g. Videos reagieren
verwirrt, wenn die Position ihrer Buzzer verändert wird,
weil auch sie die Farben nicht unterscheiden können.
</p>

<p>
Im Rahmen einer Hausarbeit zum Thema Semiotik habe ich mich
also dazu entschieden Symbole für die Buzzer zu designen,
die meine Katze sich merken kann. Dann werde ich das
Experiment wiederholen.
</p>

<p>
Wie im Video zu erkennen ist, drückt Nino auch noch nicht
fest genug auf die Buzzer, um die Töne selbst auszulösen.
Das liegt wahrscheinlich an der Tatsache, dass er als Katze
deutlich zärtlicher und feinmotorischer mit seinen Pfoten
umgeht als Hunde es tun. Hunde drücken meistens allein schon
fest genug, weil die meisten Hunderassen einfach größer und
schwerer sind als Katzen. Bisher hat Nino manchmal richtig
mit mehr Körpergewicht auf die Buzzer gedrückt, aber er tut
es nicht immer. Dies einer Katze zu vermitteln kostet viel
Geduld.
</p>
</div>

<label for="post-4" class="read-more-trigger"></label>
</div>
</div>
</div>
</div>

<div class="dark_bg_color">
<div class="content" id="fazit">
<h2>Fazit</h2>
<p>
Ich habe am 3. Juli 2021 angefangen Nino mit einem Clicker zu
trainieren und schreibe dieses Fazit genau 4 Wochen später am 3.
August 2021. Ich bin begeistert wie schnell mein Kater gelernt hat
einfache Tricks auszuführen. Wie viele andere habe auch ich mein
Leben lang gedacht, dass Katzen schwerer zu trainieren seien als
Hunde. Nun habe ich den direkten Vergleich.
</p>

<p>
Früher in meiner späten Kindheit hatte ich mal einen Hund, dem ich
auch die typischen Tricks beigebracht wie "Sitz", "Pfötchen",
"Platz", "Rolle", "Männchen". Damals kannte ich klickern nicht und
habe ihn mit ganz normalem Lob und Leckerlis trainiert. Für einen
Hund reicht das wohl als Motivation. Es dauerte aber Jahre bis er
all das konnte - wahrscheinlich auch, weil ich das nebenbei aus
Spaß machte und nicht so zielstrebig mit Methode wie heute.
</p>

<p>
Zur selben Zeit besaß ich auch zwei Katzen, die schon älter als 10
Jahre waren und bei ihnen hat das nicht so selbstverständlich
geklappt wie mit dem Hund. Dazu muss ich aber sagen, dass zu einer
guten Haustiererziehung ja nicht nur Tricks gehören sondern auch
Sozialverhalten und ähnliches. Darin wurde mein Hund leider kaum
trainiert und als Kind war mir die Wichtigkeit dahinter auch nicht
bewusst. Auch bei einem Hund reicht Lob allein nicht aus, um ihn
zu sozialisieren oder generell zu erziehen - man muss wissen was
man tut und viele wenden sich dabei zurecht an Hundeschulen.
</p>

<p>
Bei meinem heutigen Kater Nino habe ich festgestellt, dass ich ihm
mit der richtigen Methode genauso schnell Tricks beibringen kann
wie einem Hund. Seit Nino das Targettraining verstanden hat, kann
ich ihm innerhalb weniger Tage neue Tricks beibringen. Ich bin
froh es ausprobiert zu haben und freue mich schon darauf zu sehen,
was er in Zukunft alles können wird.
</p>

<p>
Eine zukünftige Herausforderung wird vor allem der
Erziehungsaspekt des Trainings sein, denn in den nächsten Jahren
wird Nino lernen müssen auch Gäste und andere Katzen in meiner
Wohnung zu akzeptieren. Nino ist als Angstkatze aufgewachsen und
ich wünsche mir ihm mit der Zeit genug Selbstvertrauen zu
schenken, damit er ein entspannteres Leben mit mir führen kann.
</p>
</div>
</div>
</main>

<footer>
<div class="footcontainer">
<div class="footlinks">
<a href="../imprint.html">Impressum</a>
</div>
</div>
</footer>
</div>

<script src="dist/script.dev.js"></script>
</body>
</html>

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --content-width: 800px;
  --radius: 0.4rem;
  --spacing: 1rem;
  --color-text: #2d2e30;
  --color-page: #141516;
  --color-content: #eceff1;
  --font-family: "Raleway", sans-serif;
  --font-family--headline: "Scope One", serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-page);
  color: var(--color-text);
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 11pt;
}

main {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-family--headline);
  font-weight: 500;
  margin: 0.5rem 0 0 0;
}

h4 {
  font-family: var(--font-family--headline);
  font-weight: 700;
  margin: var(--spacing) 0 0.2rem 0;
}

b,
strong {
  font-weight: 600;
}

.page {
  background-color: var(--color-content);
}

.hero {
  position: relative;
  z-index: 3;
  background-image: url(../images/Ninovoid_9-16.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
}
.hero__title {
  position: absolute;
  bottom: 4rem;
  width: 100%;
  margin: auto;
  text-align: center;
  color: #e4e6d4;
}
.hero__title h1 {
  font-size: 2.4rem;
  margin: 0;
}
.hero__title span {
  display: block;
  font-size: 0.8rem;
}
@media (min-width: 750px) {
  .hero {
    background-image: url(../images/Ninovoid_4-3.jpg);
  }
}
@media (min-width: 1200px) {
  .hero {
    background-image: url(../images/Ninovoid_16_9_small.jpg);
  }
}

.header {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
}
.header__content {
  width: 100%;
  height: 100%;
}
.header__button {
  position: absolute;
  top: 0;
  right: 0;
  width: 3.75rem;
  height: 3.75rem;
  padding: 0;
  background-color: transparent;
  border: 0;
  color: #fff;
  font-size: 1.5rem;
}
.with-opened-navigation .header__button {
  display: none;
}
@media (min-width: 750px) {
  .header {
    position: relative;
  }
  .header__button {
    display: none;
  }
}

.navigation {
  position: fixed;
  top: 0;
  right: 0;
  width: 15rem;
  height: 35%;
  z-index: 3;
  transform: translateX(120%);
  opacity: 0;
  transition: all 120ms cubic-bezier(0, 1, 1, 0);
  padding: 3rem 0 0 0;
  background-color: black;
}
.navigation .header__button {
  display: none;
}
.navigation__list {
  padding: 0;
}
.navigation__list li {
  list-style: none;
}
.navigation__list a {
  display: block;
  padding: 0.5em 5em;
  color: #fff;
  text-decoration: none;
}
.with-opened-navigation .navigation {
  transform: translateX(0);
  opacity: 1;
}
.with-opened-navigation .navigation .header__button {
  display: block;
}
@media (min-width: 750px) {
  .navigation {
    position: absolute;
    width: 100%;
    height: auto;
    padding: 0;
    transform: unset;
    opacity: 1;
  }
  .navigation__list {
    display: flex;
    margin: 0;
    justify-content: space-around;
  }
  .navigation__list a {
    border-bottom: 1px solid transparent;
    padding: 1em 0.1em 0.5em;
    transition: border 120ms ease-in;
  }
  .navigation__list a:hover {
    border-bottom-color: #fff;
  }
}

@media (min-width: 750px) {
  .mdi-close {
    display: none;
  }
}

.scrolltotop {
  position: fixed;
  bottom: 0.7rem;
  right: 0.7rem;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: white;
  background-color: rgba(0, 0, 0, 0.9);
  font-size: 20pt;
  border-radius: 50%;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.5);
  transition: all 0.1s ease-in-out;
}
.scrolltotop:hover {
  box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.7);
  transform: scale(1.1);
}

.content {
  max-width: 50rem;
  margin: 0 auto;
}

.dark_bg_color {
  background-color: #d9dde0;
  padding: 3rem 1rem 4rem 1rem;
}
.dark_bg_color a {
  text-decoration: none;
  color: #67a503;
}
@media (min-width: 500px) {
  .dark_bg_color a {
    border-bottom: 1px solid transparent;
    transition: border 120ms ease-in;
  }
  .dark_bg_color a:hover {
    border-bottom-color: #87a503;
  }
}

.max-width {
  max-width: 52rem;
  margin: 10rem auto;
}
.max-width__padding {
  padding: 0 1em 0 1em;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.container__thumbnails_and_text {
  text-align: center;
  padding: 0 1rem 2rem 1rem;
}
.container__thumbnails_and_text__headline {
  border-bottom: 1.5px solid #191a1d;
  padding: 1rem 0.1rem 0.5rem;
  margin: 0 0 1em;
}
.container__image {
  display: block;
  width: 100%;
  height: auto;
}
.container__text {
  max-width: 50rem;
  margin: 0 auto;
}

.bild-text img {
  display: block;
  width: 100%;
  height: auto;
}
.bild-text__text {
  padding: var(--spacing);
  margin: 0;
}
@media (min-width: 3000px) {
  .bild-text__left {
    display: flex;
  }
  .bild-text__left__bild {
    flex: 1 1 62%;
  }
  .bild-text__left__text {
    flex: 1 1 33.3333333333%;
    padding: 0 1rem 0 1rem;
  }
}
@media (min-width: 700px) {
  .bild-text {
    display: flex;
  }
  .bild-text__bild {
    flex: 1 1 62%;
  }
  .bild-text__text {
    flex: 1 1 33.3333333333%;
    padding: 0 1rem 0 1rem;
  }
  .bild-text--alternative .bild-text__bild {
    order: 2;
  }
  .bild-text--alternative .bild-text__text {
    order: 1;
  }
}

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing);
  background-color: #fff;
  color: #000;
  padding: var(--spacing);
}
.gallery__headline {
  margin: 0 0 var(--spacing) 0;
}
.gallery img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 500px) {
  .gallery {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 700px) {
  .gallery {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.klickervideos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing);
  background-color: #fff;
  color: #000;
  padding: var(--spacing);
}
.klickervideos__headline {
  margin: 0 0 var(--spacing) 0;
}
.klickervideos__item h2 {
  margin: var(--spacing) 0 0 0;
}
.klickervideos video {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 700px) {
  .klickervideos {
    grid-template-columns: 1fr 1fr;
  }
}

.moretext {
  max-height: 0rem;
  overflow: hidden;
  transition: all 0.5s ease;
}

.read-more-state {
  display: none;
}

.read-more-state:checked ~ .moretext {
  max-height: 50rem;
  transition: all 0.7s ease-in-out;
}

.read-more-state ~ .read-more-trigger:before {
  content: "Weiterlesen";
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: "Zuklappen";
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  margin: 1rem 0 0.5rem 0;
  padding: 0 0.5rem;
  color: #444446;
  font-size: 0.9rem;
  line-height: 2;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
}

footer {
  padding: 1.5rem var(--spacing) 0 var(--spacing);
  background-color: var(--color-page);
}

.footcontainer {
  position: relative;
  height: 10rem;
  max-width: 52rem;
  margin: auto;
}

.footlinks {
  position: absolute;
  right: 0;
}
.footlinks a {
  display: block;
  color: #c3c4c9;
  text-decoration: none;
}
@media (min-width: 500px) {
  .footlinks a {
    border-bottom: 1px solid transparent;
    transition: border 120ms ease-in;
  }
  .footlinks a:hover {
    border-bottom-color: #fff;
  }
}

.seminardaten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
  gap: var(--spacing);
  max-width: 50rem;
  margin: auto;
  padding: var(--spacing) 0 0 0;
}
.seminardaten__item {
  margin: 0 0 1rem 0;
}
@media (min-width: 500px) {
  .seminardaten__item {
    grid-template-columns: 1fr 1fr;
  }
}

Hier zu sehen ist eine manuell gebaute und gestaltete responsive Webseite, die ich im Rahmen eines Webdesign-Kurses im Masterstudium im Jahr 2020 angefertigt habe. Sowohl HTML- als auch CSS-Skripte stammen von mir.