The Intern's Chronicles:
Wie ich in meinem Gespräch mit Chris und Marcel letzte Woche besprochen hatte, würde meine achte und neunte Woche bei byte5 ganz im Zeichen von HTML und CSS stehen. Ich stürzte mich also gleich Montagmorgen, ausgerüstet mit einer Schokomilch, ins Projekt „eigene Website erstellen“!
Die Theorie konnte ich auf der Learning-Site w3schools.com lernen, die mir ja schon in Woche 2 viel geholfen hatte. Mit der Hilfe von w3schools konnte ich mir einen groben Überblick verschaffen, welche Elemente es überhaupt gibt. Danach war diesmal nicht Google meine erste Anlaufstelle, sondern YouTube. Dort habe ich nach einem Tutorial gesucht, anhand dem ich eine Site basteln könnte. Mein Ziel war es, einen Eindruck zu bekommen, wie ich vorgehen könnte und was es zu beachten gilt.
Code vom Bildschirm abfotografiert
Als ich auf eine fünfteilige Tutorial-Reihe des YouTuber Simplex stieß, wusste ich: Das ist es! Im ersten Schritt habe ich mir also die fünf Videos zu Gemüte geführt. Sie waren sehr interessant und gut gemacht. Und weil sie sehr ausführlich waren, konnte ich Schritt für Schritt den Aufbau einer Site mitverfolgen und später selbst nachbasteln.
Das war schon cool zu sehen, wie sich meine erste eigene Website schrittweise immer weiter vervollständigt. Falls ihr auch Lust habt, mit HTML5 und CSS3 eine eigene Site zu bauen und so diese beiden Sprachen kennenzulernen, kann ich euch Simplex' Tutorial-Reihe wärmstens empfehlen!
Nach und nach war also meine erste eigene Website auf Basis von HTML und CSS entstanden. Jetzt hatte mich der Ehrgeiz gepackt: Ich wollte eine weitere Site bauen, die noch umfangreicher ist. Dazu wollte ich Elemente von Bootstrap 4, einem CSS-Framework, benutzen. Und so fand ich mich auf der offiziellen Site von Bootstrap wieder, besuchte erneut w3schools und sah mir einige Tutorials zum Thema an. Dann konnte es losgehen.
Zuerst habe ich eine Navigationsbar gebastelt, welche responsiv ist. Responsiv bedeutet, dass sie auf allen Endgeräten – Smartphones, Tablets, Computer – komfortable zu nutzen ist, weil sie sich an die Eigenschaften des jeweiligen Geräts anpasst. Das nächste war ein breites, schwarzes Banner, auf dem zentriert ein Zitat angezeigt wird. Auch dieses Element ist responsiv, passt sich also ebenfalls an die jeweilige Displaygröße an. Tricky wurde es hier beim Styling. Ich musste erst herausfinden, wie ich die Navigationsbar individuell nach meinen Wünschen umstylen kann. Nicht so leicht war auch, das Banner so zu bauen, dass der Text innerhalb des Containers sowohl vertikal als auch horizontal zentriert dargestellt wird. Aber ich habe mich immer weiter an mein Ziel herangepirscht, bis ich die Lösung gefunden habe.
byte5-Praktikant Patrick Haags erste eigene Website vom Bildschirm abfotografier
Das dritte Element, das ich erstellt habe, war ein Karussell. Ein Karussell hatte ich ja in meiner zweiten Woche schon einmal gebaut, sodass ich auf mein vorhandenes Wissen zurückgreifen konnte. Als letztes habe ich dann versucht, fullpage.js zu implementieren – eine Erweiterung, die vertikales Scrollen von Site zu Site ermöglicht, sodass man gleitend zum nächsten Inhalt gelangt. Das funktioniert aber noch nicht so, wie ich es will, aber ich werde es schon zum Laufen bringen! 😉
Mit diesen Aufgaben habe ich einen guten ersten Einblick erhalten, wie ich mit den Optionen, die HTML und CSS bieten, eine eigene Seite aufbauen und stylen. Mit Bootstrap rumzuspielen hat auch richtig Spaß gemacht. Und hier das Ergebnis:
In den letzten Wochen wurde mir nicht nur die Gelegenheit gegeben, mich in Ruhe auszuprobieren und mich so richtig in die Themen der Webentwicklung einzufuchsen, sondern auch kleinere Beiträge zu einem byte5-Kundenprojekt zu entwickeln.
In dieser Woche war es dann soweit: Meine in den letzten Wochen erledigten Aufgaben für den Kunden sollten live gestellt werden. Damit nichts Defektes auf die Live-Site des Kunden gelangt, testete ich alles ein letztes Mal zur Sicherheit auf dem Staging-Server. Das passte alles. Und dann konnte mein Beitrag live gehen! Ein richtig tolles Gefühl.
Jetzt steht das Wochenende bevor und ich habe den großen Plan, einen Anime aus meiner Jugend auszugraben: One Piece! 😃 Einfach klasse, dieser Anime.
In der nächsten Woche werde ich versuchen, mein Problem mit fullpage.js zu lösen. Zudem werde ich weiter an meiner Site arbeiten, es gibt noch einiges zu tun. Mit Laura habe ich außerdem über die letzten Wochen viel gefilmt: das Sommerfest, das Bingo, die Kollegen und meine tägliche Arbeit hier. Nächste Woche filmen wir die letzten Sequenzen, sodass dann das zweite „The Intern’s Chronicles“-Video pünktlich zu meinem Praktikumsende fertig wird. So bekommt ihr auch visuelle Eindrücke von meiner Zeit bei byte5! Ihr kennt das erste Video noch nicht? Voilà:
Ich freue mich schon riesig, das zweite Video mit euch zu teilen! 😊 Bis dahin!
Euer Patrick
Aktuelle Blogposts
20.12.2024
KI, Vertrauen, Barrierefreiheit & Suche
Digitale Herausforderungen und Trends 2025
Der dänische Digitalpionier Janus Boye hat sich erneut die Zeit genommen, mit uns über Herausforderungen und Trends der Digitalbranche zu sprechen. Was hat die Branche 2024 geprägt und was erwartet uns im Jahr 2025?
10.12.2024
Was Du NICHT in Laravel tun solltest
In unserem Laravel-Meetup im November haben wir uns gemeinsam Bad Practices und Programmier-Fails in Laravel angeschaut. PHP-Entwickler Jure teilt 3 Beispiele aus dem Meetup.
05.11.2024
Zeit sparen mit Laravel
Zeit sparen mit Laravel: Livewire und Inertia im Vergleich
Livewire oder Inertia? Welche Frontend-Komponente von Laravel für welches Projekt -
01.11.2024
Einfach, sicher und benutzerfreundlich?
Die Zukunft der Krypto-Wallets
Wallets sind komplex und für Neulinge im Krypto-Bereich schwer zugänglich. Doch es gibt bereits Entwicklungen, die Wallets vereinfachen. Wir verraten mehr.
18.09.2024
Clean Coding in Laravel
Mit Clean Coding die Code-Qualität steigern! Erfahren Sie mehr über Best Practices, Tools wie Larastan und Laravel Pint, und die Vorteile von Einfachheit, klarer Benennung und Wiederverwendbarkeit im Entwicklungsprozess.
Werde Teil
des byte5-Teams
Jobs bei byte5