Allgemein
ist ein Frontend-Framework, mit dem du Websites gestalten kannst. Es werden HTML- und CSS-Vorlagen bereitgestellt um unterschiedlichste Website-Elemente darzustellen. Dazu gehören Formulare, Buttons, Tabellen, Navigation sowie ein Grid-System für Layouts. Darüber hinaus ist es durch JavaScript-Module möglich, Interaktionen (z. B. eine Bilder-Slideshow, Tabs und Dialogboxen) in die Website einzubinden. Zudem bietet Bootstrap alle Voraussetzungen um responsive Webdesigns zu gestalten, die dann auch auf Smartphones oder Tablets optimal dargestellt werden.
Ein Framework ist nicht nur in CSS, sondern in der Softwareentwicklung
allgemein ein wiederverwendbarer Rahmen für deine Arbeit. Dadurch unterscheidet es sich von anderen Arten von Softwarebibliotheken: Ein Framework stellt den großen Rahmen zur Verfügung, in den du deine Arbeit einbettest. Bei anderen Bibliotheken – ich zeige dir gleich einige in JavaScript – baust du den großen Rahmen, und du rufst die Bibliotheken auf, um bestimmte Aufgaben zu erledigen.
CSS
Hypens
:first-letter
h2:nth-of-type(3)
Viewport Height
viewport Weight
Die CSS-Spezifität beschreibt die unterschiedliche Gewichtung von CSS-Selektoren und hilft euch dabei zu verstehen welchen Selektor der Browser interpretiert.
cover füllt das Element aus und beschneidet dafür eventuell das Bild.
contain ist das ganze Bild zu sehen, es bleiben Ränder stehen.
Mit der CSS-Eigenschaft box-sizing: border-box; kann das Box Model verändert werden. Die Breite des Elements wird dann anhand der „Border Box“ berechnet.
Das sog. »CSS Box Model« beschreibt wie Block-Elemente in CSS vom Browser dargestellt werden.
Mit dem »Multi Column Layout« von CSS lassen sich Inhalte in mehreren Spalten anzeigen. Das CSS-Feature bietet sich besonders gut für Fließtexte an, kann aber auch für andere Darstellungen sinnvoll eingesetzt werden.
CSS Media Queries und Verwendung der vw-Einheit zur Gestaltung von Schriftgrößen
CSS Grids arbeiten mit einem Elternelement, in dem das Raster definiert wird und mit darin enthaltenen Kind-Elementen, die im Raster positioniert werden. Dem Elternelement wird mit Hilfe der Angabe
display:grid; mitgeteilt, dass CSS Grids genutzt werden sollen. Mit Hilfe der Eigenschaften grid-template-columns und grid-template-rows werden Rasterlinien gezeichnet.
word-wrap: break-word;
JavaScript
Die Webseite kann weiter benutzt werden, während im Hintergrund Daten geladen werden.
Abkürzung für
Document Object Model. Das DOM ist die Repräsentation eines
HTML-Dokuments für JavaScript und andere Programmiersprachen. Es
erlaubt dir, den gesamten Inhalt des Dokuments durch entsprechende
Objekte zu lesen und zu manipulieren.
Wenn ein String zwischen Anführungszeichen im Code steht, nennt man das ein Stringliteral.
Sie wandeln Strings in ganze Zahlen oder einen Float-Wert um
Du kannst mit der Eigenschaft innerHTML auch neuen Text an den vorhandenen anhängen
Referenzen werden auch manchmal als Zeiger
bezeichnet: Sie enthalten nicht das Objekt
selbst, sondern nur die Speicheradresse, an der
das Objekt steht.
Mit dem Schlüsselwort const deklarierst du eine Konstante. Konstanten ähneln den Variablen, können aber später nicht mehr verändert werden. Sie helfen dabei, deinen Code lesbar zu machen
Browser, Element untersuchen, Konsole
PHP
Der Browser schickt den Request zum Server, der Server antwotet mit einem Response und der Brwoser zeigt den Inhalt der Response als neue Seite an
Asynchronous JavaScript and XML
Es gibt ein javaScript- Objekt, das Requests versenden kann, dann auf die Antwort wartet und die darin enthaltenen Informationen verarbeitet, zum Beispiel indem es den Seiteninhalt per DOM-Manipulation aktualisiert
Design
Flexible Gestaltungsraster
flexible Medieninhalte (Bild, Videos, etc.)
Media Queries
- responsive = reaktionsfähig
- adaptive = anpassungsfähig
Responsive Web Design (RWD)
Überbegriff für verschiedene Techniken und Herangehensweisen. Dieser Begriff wurde von Ethan Marcotte in seinem Artikel »Responsive Web Design« geschaffen.
Responsive Layout
Dieser Begriff beschreibt ausschließlich, wie das Layout einer Website aufgebaut ist.
Adaptive Web Design (AWD)
AWD ist ebenfalls ein Überbegriff für verschiedene Techniken und Herangehensweisen. Der Begriff wurde von Aaron Gustafson in seinem eBook »Adaptive Web Design« geschaffen.
Adaptive Layout
Auch dieser Begriff beschreibt nur wie das Layout einer Website funktioniert.
- direkt von einer Lichtquelle
- von einem Objekt reflektiert.
Dies führt zu 2 Arten, wie Farbe gemischt wird – zum additiven Farbsystem (RGB) und zum subtraktiven Farbsystem (CMYK).
Additives Farbsystem: hier wird rotes, grünes und blaues Licht in verschiedenen Kombinationen gemischt, um neue Farben zu „erzeugen“.
Jedes Hinzufügen einer Lichtquelle resultiert in einem helleren Ergebnis und bewegt sich näher zu Weiß.
Real-Life-Example: so wie ein Display/ Bildschirm Farben mischt. RGB -> sind für uns relevant im Web-Bereich
Subtraktives Farbsystem: im subtraktiven Farbsystem werden Farben teilweise absorbiert (verschluckt).
Sie beginnen mit Weiß und übernehmen die Farbtöne, die untergemischt werden bis zu Schwarz.
Real-Life-Example: so wie ein Drucker Farbe mischt (Patronen mit Cyan, Magenta, Yellow und Schwarz(Key)) CMYK -> sind vor Allem im Druck wichtig!
- Fixed Layout (starres Layout)
- Fluid Layout (flüssiges Layout)
- Elastic Layout (elastisches Layout)
- Mischformen
Masonry
Programmierung
Arrays geben dir eine zusätzliche Dimension, du kannst Objekte damit stapeln
und (fast) beliebig viele in eine Variable packen.