How to center a div
Suchverläufe auf Google und Co bergen wohl die grössten Geheimnisse einer Person. Zum Glück gibt es den Inkognito-Modus, dank dem wir unsere dummen Fragen einigermassen privat stellen können. Ein neues Level an Scham habe ich dieses Semester erreicht. Für mein Digezz-Projekt habe ich eine eigene Website erstellt – Oder besser gesagt: Stack Overflow hat eine für mich erstellt.
«How to center a div», «How to center a div with position absolute», «How to center a div when margin-left is already set». Dann nach gefühlt zehn Suchanfragen habe ich endlich diese eine Person gefunden, die vor zwei Jahren bereits dasselbe Problem hatte und ihr dankenswerterweise ein – für mich – Genie geholfen hat. An dieser Stelle würde ich gerne noch meinen Freunden danken, die mich tatkräftig unterstützten. Ctrl + C, Ctrl + V: Ohne euch wäre das nie möglich gewesen! Vielen Dank!
An Kreativität scheiterte es bei meinem Projekt auf jeden Fall nicht. Die täglich neuen Ideen habe ich in der Endversion nun zu einem Bruchteil umgesetzt. Ich denke, dass dies vielmehr das Problem anderer Leute ist, die nicht den gleichen Einfall hatten und die Probleme auf Stack Overflow veröffentlichten. Ausserdem finde ich es extrem spannend, wie ein Code drei Elemente exakt gleich formatieren kann und dann das vierte komplett verschwinden lassen kann.
Nun aber genug von meinem Struggle. Hier findet ihr die Endversion meines Projekts: https://digezz.ch/projekte/code-dummy/
(mou)
Entgegen der entstandenen Erwartung aus meinem vorherigen Text konnte ich tatsächlich auch gewisse Probleme selber lösen. Das Erstellen meiner ersten eigenen Website war eine Achterbahn. Geprägt von Auf und Ab, Stolz und Frustration und kompletter Anschiss bis Motivation, die ich bei mir selten gesehen habe.
Die Idee
Kürzlich hat meine Mutter eine Weiterbildung zur betrieblichen Mentorin gemacht. Um mehr Aufmerksam im «Netz» zu erhalten fragte sie mich, ob ich ihr eine Website programmieren kann. Ich wollte mich dieser Herausforderung schon immer mal annehmen und sagte natürlich zu. Bisher hatte ich noch nicht viele Erfahrungen in diesem Bereich gesammelt. Vieles ging auch bereits vergessen von den ersten 2 Semestern.
Das Konzept
Die Website sollte professionell werden, ihre Art widerspiegeln, modern wirken und einladend. Auch sollte sie das Zielpublikum anziehen, das meine Mutter sich wünscht. Nichts einfacher als das. Mir war klar, dass ich zuerst ein Design auf Adobe XD entwickeln will und die Website dann in einem zweiten Schritt umsetzen will. Ich hatte sehr viele Ideen, die sich täglich vervielfältigten. Umsetzen konnte ich leider nur einen Bruchteil.
Umsetzung und Herausforderung
Mit dem Design begann ich bereits im Sommer. Mein Ziel war es Ende Sommer fertig zu sein. Das klappte aber leider nicht, weil ich den Aufwand total unterschätzte. Design heisst auch die Texte schreiben, Bilder suchen, Illustrationen anfertigen und dann eben noch alles schön zu gestalten. Gestalten ist ehrlich gesagt nicht wirklich meine Stärke. Mein erstes Design liess auch zu wünschen übrig. Wir schauten dies dann gemeinsam an und mit dem Feedback erstellte ich das zweite finale Design. Ich holte mir hier auch sehr viele Ideen von Pinterest. Nach der Hälfte des Semesters konnte es also mit dem Programmieren losgehen. Die HTML Grundstruktur erstellte ich ohne grosse Probleme. Dann beim CSS kamen die ersten Hürden auf mich zu. Nur für den ersten Teil der Seite, den man sieht wenn man die Seite öffnet brauchte ich fast 100 Linien Code. Effektiv war mein Vorgehen wohl nicht, ABER es funktionierte. Ich musste mich bald von dem Gedanken verabschieden, dass mein Code perfekt werden würde. Google und Stack Overflow half mir bei meiner Arbeit immens. Wenn ich ein gelernt habe, dann zu Googeln. Einige Elemente konnte ich schlichtweg nicht umsetzen, weil es einfach nicht funktionierte. Ich habe nach Fehlern gesucht, aber nichts gefunden. Irgendwann verlies mich die Geduld und ich widmete mich anderen Problemen. Die Motivation kam und ging eigentlich mit den Problemen. Wenn alles rund lief war ich sehr motiviert und die Website schritt rasch voran. Bei Problemen blieb die Website manchmal mehrere Wochen auf dem gleichen Stand. Die grösste Herausforderung waren die Kreise im Hintergrund der Website. Ständig hatte ich immer andere Probleme mit ihnen. Im Entwurf auf XD hat es auch viel mehr Kreise. Doch oftmals verzogen diese meine gesamte Website oder entfernten plötzlich die gesamte Formatierung einer anderen Section. In diesen Momenten hasste ich das Programmieren. So kam es, dass ich ein paar Elemente weglassen musste.
Fazit
Obwohl ich dies tun musste, verlor die Website als gesamtes nicht gross an Wert. Dies weil ich echt viele Ideen hatte und wenn eine scheiterte wurde sie einfach durch eine andere ersetzt. Gerne hätte ich noch mehr mit Javascript gearbeitet. Ich habe noch einen Fragebogen erstellt, der mit einer Datenbank verbunden ist. Doch schlussendlich musste ich einsehen, dass dies nicht wirklich hilfreich für die Website und schweren Herzens löschte ich diesen Teil heraus. Ich bin grundsätzlich sehr zufrieden. Es nervt mich, dass ich das mit den Kreisen nicht hinbekommen habe und gewisse Elemente nicht so umsetzen konnte wie gewünscht. Auch wollte ich die Illustrationen selber machen, doch auch hier scheiterte ich gänzlich am nicht beherrschen des Programms. Ich schaute Tutorials und versuchte diese nachzumachen, aber es sah nie wirklich gut aus. Dennoch gefällt mir die Website und sie entspricht den Wünschen meiner Mutter. Es fühlt sich sehr gut an eine – wenn auch simple und vereinfachte – Website selber gemacht zu haben. Ich finde es faszinierend, etwas in Atom einzutippen und dies dann auf einer anderen Seite zu sehen.