--- title: 'Baukastensysteme für HTML und CSS' date: 2020-06-28T03:50:13.000Z draft: false type: book weight: 600 LastModifierDisplayName: Axel Dürkop LastModifierEmail: axel.duerkop@tuhh.de --- ## Einführung Wie Sie wahrscheinlich schon festgestellt haben, macht es viel Arbeit, eine Website von Grund auf mit HTML, CSS und ggf. noch mit JavaScript zu entwickeln. Am Anfang muss man einmal da durch, sonst bleiben die Zusammenhänge im Verborgenen, und Sie können keine Erfahrung sammeln. Aber irgendwann, besonders in der professionellen Arbeit von Mediengestalter_innen und Webdesigner_innen, braucht es dann Ansätze, um sich schnell mit Kund_innen über eine Projektidee zu verständigen und eine Website online zu bekommen. Weil viele Websites aus ähnlichen Elementen bestehen, haben sich sogenannte HTML/CSS-Frameworks entwickelt. Zwei der größeren und bekannteren sind [Foundation](https://get.foundation/index.html) und [Bootstrap](https://getbootstrap.com/). Letzteres gibt es schon seit 2011. Es wurde ursprünglich im Hause Twitter entwickelt und dort für interne Tools verwendet. In dieser Veranstaltung setzen wir uns exemplarisch mit Bootstrap auseinander. {{< figure src="../img/frameworks/ashkan-forouzani-m0l9NBCivuk-unsplash.jpg" title="Eine Website mit Frameworks zusammensetzen. Foto von Ashkan Forouzani auf Unsplash" >}} ## Aufgabenstellungen ### Aufgabenstellung 1: Bootstrap kennenlernen 1. Rufen Sie [die Homepage von Bootstrap](https://getbootstrap.com/) auf, und sehen Sie sich um. 1. Halten Sie für Ihre Projektgruppe in einem gemeinsamen Pad alle Begriffe fest, die Sie noch nicht kennen (wird im Chat bekanntgegeben). Versuchen Sie, sich diese Begriffe gemeinsam zu erschließen. Schreiben Sie Ihre Antworten in das Pad, am besten mit einem Link zu einer Seite, die den Begriff erklärt (nicht nur Wikipedia!). 1. Nutzen Sie [DeepL](https://www.deepl.com/) oder Google Translate, um die englischen Texte zu übersetzen. ### Aufgabenstellung 2: Bootstrap einrichten 1. Rufen Sie die Seite [Getting started](https://getbootstrap.com/docs/4.5/getting-started/introduction/) auf. 2. Lesen Sie bis zum Abschnitt [Starter Template](https://getbootstrap.com/docs/4.5/getting-started/introduction/#starter-template) einschließlich. 3. Bereiten Sie einen Ordner `bootstrap` auf Ihrem Rechner vor. 1. Legen Sie darin eine `index.html` an. 2. Kopieren Sie das Markup für das Starter Template hinein. Beachten Sie, dass die drei `