Fallback Image
Fallback Image

The Intern's Chronicles:

Meine 8. Praktikumswoche

Man nehme eine große Portion HTML, viel CSS und eine Prise Bootstrap – et voilà: die erste eigene Website. Patricks 8. Praktikumswoche bei byte5.

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“!

Meine Theorie

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

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!

Meine Praxis

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

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:

Mein Beitrag

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.

Mein Endspurt

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à: 

Fallback Image

Ich freue mich schon riesig, das zweite Video mit euch zu teilen! 😊 Bis dahin!

 

Euer Patrick

Werde Teil

des byte5-Teams

Jobs bei byte5