Frontend Development

# Section About Styles

Das Markup (HTML) deiner “About”-section steht bereits. Nun kannst du dieses mit CSS stylen. Öffne dazu im Code-Editor deine style.css Datei und füge folgende Inhalte ein.

# Resets & Generelle Einstellungen Aufgabe

Verschiedene Browser haben verschiedene Grundeinstellungen. So kann es beispielsweise sein, dass Elemente auf einer Website in Safari etwas anders aussehen als in Chrome. Als Programmierer willst du dies aber in den seltensten Fällen. Um dies zu verhindern musst du gewisse Grundeinstellungen in CSS festlegen.

/* 
--------------------------------
Resets & Generelle Einstellungen
--------------------------------
*/

* {
  box-sizing: border-box; /* Kontur immer zur Breite eines Elementes hinzuzählen. */
}

html, body {
  margin: 0; /* Aussenabstände zurücksetzen */
  padding: 0; /* Innenabstände zurücksezen */
}

a {
  text-decoration: none; /* Link-Styling zurücksetzen */
  color: #02365E; /* Linkfarbe festlegen */
}

img, video {
  display: block; /* Bilder und Videos können Abstände haben (Dieses Prinzip heisst box-modell, später mehr dazu) */
  max-width: 100%; /* Bilder und Videos sollen niemals breiter als ihr Parent sein dürfen */
}

header, footer {
  padding-left: 7vw; /* Innenabstand links 7% der Bildschirmbreite (vw = viewport width, später mehr dazu) */
  padding-right: 7vw; /* Innenabstand rechts 7% der Bildschirmbreite */
}

input, textarea, button {
  -webkit-appearance: none; /* Formular-Styling von Chrome & Safari zurücksetzen */
  -moz-appearance: none; /* Formular-Styling von Firefox zurücksetzen */
  appearance: none; /* Formular-Styling generell zurücksetzen */
  border: none; /* Kontur zurücksetzen */
  box-shadow: none; /* Schlagschatten zurücksetzen */
  font-family: inherit; /* Formular-Elemente sollen die von dir gewählte Schriftart verwenden (inherit = geerbt, später mehr dazu) */
  font-size: inherit; /* Formular-Elemente sollen von dir gewählte Schritgrösse verwenden */
}

# Typografie Aufgabe

Der Begriff Typografie umfasst alles, was in Bezug zu geschriebener Schrift steht. Also die Schriftart, Schriftgrösse, Zeichen- und Zeilenabstand etc. für Texte, Listen, Titel und so weiter. In CSS stehen dir viele Befehle zur Verfügung, um mit Typografie umzugehen.

Damit deine Website später auf vielen unterschiedlichen Bildschirmgrössen gut aussieht, ist insbesondere eine responsive Schriftgrösse wichtig. Das bedeutet, dass sich die Schriftgrösse anhand der Bildschirmgrösse verändern kann. In den meisten Fällen soll eine Schrift eine Mindest- und Maximalgrösse haben, um immer optimal lesbar zu sein. Dazwischen soll sie sich am verfügbaren Platz richten.

In CSS kannst du mit min() und max() exakt dieses Verhalten erreichen. Du wählst mit min() eine Mindest- und mit max() eine Maximalschriftgrösse. Dazwischen kannst du bestimmen, wie viele Prozent der Bildschirmbreite für die Schriftgrösse verwendet werden soll. Wie dies in CSS deklariert (geschrieben) werden muss, siehst du im folgenden Codeblock.

/* 
--------------------------------
Typografie
--------------------------------
*/

html {
  font-size: min(max(16px, 1vw), 22px); /* Generelle Einstellung zur Schriftgrösse, mindestens 16px und maximal 22px. Dazwischen 1% von der Bildschirmbreite */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif; /* Schriftfamilie/Schriftart entsprechend dem Betriebssystem deiner Websitebesucher */
  font-weight: normal; /* Schriftdicke auf normal zurücksetzen */
  line-height: 1.5; /* Zeilenabstand generell etwas erhöhen */
  color: #02365E; /* Schriftfarbe generell auf diesen Farbwert festlegen */
}

h1, h3 {
  line-height: 1; /* Grössere Titel benötigen meistens eine geringere Zeilenhöhe als die zuvor geschriebene Einstellung 1.5 */
  margin: 0; /* Aussenabstände zurücksetzen */
  color: #02365E; /* Titelfarbe festlegen */
}

h1 {
  font-size: min(max(2.5rem, 4vw), 5rem); /* Responsive Schriftgrösse für H1-Titel (rem = root equal measurement, später mehr dazu) */
}

h2 {
  font-size: min(max(1.5rem, 3vw), 3rem); /* Responsive Schriftgrösse für H2-Titel */
  font-weight: normal; /* Schriftdicke zurücksetzen */
  margin-top: 0.25em; /* Aussenabstand oben festlegen */
  margin-bottom: 0.25em; /* Aussenabstand unten festlegen */
}

h3 {
  font-size: min(max(1.5rem, 3vw), 2.5rem); /* Responsive Schriftgrösse für H3-Titel */
}

h4 {
  font-size: min(max(1.25rem, 3vw), 1.5rem); /* Responsive Schriftgrösse für H4-Titel */
  margin: 0; /* Aussenabstände zurücksetzen */
}

h5 {
  font-size: min(max(1rem, 3vw), 1.15rem); /* Responsive Schriftgrösse für H5-Titel */
  margin: 0; /* Aussenabstände zurücksetzen */
}

p, a, span, blockquote {
  letter-spacing: 0.025rem; /* Zeichenabstand erhöhen */
  color: #02365E; /* Schriftfarbe festlegen */
}

# Header & Navigation Aufgabe

Nachdem du nun viele Grundeinstellungen vorgenommen hast, kannst du nun dein erstes Element stylen. Das ist der header mit der darin enthaltenen nav.

/* 
--------------------------------
<header> Bereich mit Navigation
--------------------------------
*/

header {
  text-transform: uppercase; /* Alles im header grossschreiben */
  overflow-x: auto; /* Navigation soll auf kleineren Bildschirmen horizontal scrollbar sein */
  -webkit-overflow-scrolling: touch; /* Verhindert ruckliges scrolling auf einem iPhone / iPad */
}

nav {
  display: flex; /* Logo und Navigation nebeneinander (Das Prinzip heisst flexbox, später mehr dazu) */
  margin-top: 0; /* Aussenabstand oben zurücksetzen */
  margin-bottom: 0; /* Aussenabstand unten zurücksetzen */
  margin-left: -2vw; /* Aussenabstand links um 2% der Bildschirmbreite verringern */
  margin-right: -2vw; /* Aussenabstand rechts um 2% der Bildschirmbreite verringern */
  /* Die beiden Minuswerte brauchst du hier, damit die Navigation später vertikal bündig mit anderen Elementen dargestellt wird */
}

nav ul {
  display: flex; /* Alle Navigationslinks nebeneinander */
  flex-wrap: nowrap; /* Navigation niemals auf eine neue Zeile umbrechen (Prinzip heisst flexbox, später mehr dazu) */
  justify-content: center; /* Navigation mittig zentrieren (Prinzip heisst flexbox, später mehr dazu) */
  flex-grow: 1; /* Navigation kann bis zum verfügbaren Platz innerhalb des headers "anwachsen" /* (Prinzip heisst flexbox, später mehr dazu) */
  margin: 0; /* Aussenabstände zurücksetzen */
  padding: 0; /* Innenabstände zurücksetzen */
  list-style: none; /* keine Aufzählungszeichen anzeigen */
}

nav a {
  padding: 1.5rem 2vw; /* Innenabstand festlegen (rem = root equal measurement, vw = viewport width, später mehr dazu) */
  display: inline-block; /* Alle Links in der Navigation können Abstände haben, sind aber nebeneinander (Prinzip box-modell, später mehr dazu)*/
  color: #02365E; /* Schriftfare festlegen */
}

Hinweis

Du kannst alle vier Abstände einzeln regeln:

padding-top: 1.5rem;
padding-right: 2rem;
padding-bottom: 1.5rem;
padding-left: 2rem;

oder als kürzere Schreibweise (Shorthand) mit vier Werten:
padding: oben rechts unten links

  padding: 1.5rem 2rem 1.5rem 2rem;

oder kombiniert padding: oben&unten links&rechts

  padding: 1.5rem 2rem;

oder, wenn alle 4 Werte gleich sind, padding: oben&unten&links&rechts

  padding: 1.5rem;

# Main Aufgabe

Als nächstes kümmerst du dich um den Hauptbereich main deiner Seite. Im HTML befinden sich innerhalb des main-Tags alle section-Bereiche. Die erste Section deiner Seite heisst about, wie zuvor in der Navigation beschrieben. Doch bevor du dich um die about-Section kümmerst, gibt es noch ein paar generelle Einstellungen die für alle Sections gültig sein werden.

/* 
--------------------------------
<main> Bereich
--------------------------------
*/

section {
  padding: 7vh 7vw 0 7vw; /* Im Uhrzeigersinn: Alle sections haben oben, rechts und links 7% Bildschirmbreite Abstand, unten hat es keinen Abstand */
}

.section_title {
  text-align: center; /* Alle Section Titel sollen mittig zentriert sein */
  padding: calc(3vh + 3vw); /* Mit calc() kannst du zwei Werte zusammenrechnen. Hier also 3% Bildschirmbreite + 3% Bildschirmhöhe.*/
}

.section_subtitle {
  margin-top: 0.25rem; /* Aussenabstand oben festlegen */
  text-transform: uppercase; /* Alle Section Untertitel sollen grossgeschrieben werden */
}

# About Aufgabe

Um about fertigzustellen, brauchst du noch die passenden Styles für diese Section.

/* 
--------------------------------
About section
--------------------------------
*/

#about { /* Achtung! Der Hash # bedeutet, wir haben im HTML eine ID definiert und nicht eine Class */
  padding: 0; /* Innenabstände zurücksetzen */
  display: flex; /* Alle direkt untergeordneten Elemente nebeneinander darstellen (Prinzip parent & child + flexbox, später mehr dazu) */
}

.about_image {
  overflow: hidden; /* Kein scrolling falls das Bild grösser als der verfügbare Platz ist */
  border-radius: 2vw 0 0 2vw; /* Abgerundete Ecken im Uhrzeigersinn, oben-links, oben-rechts, unten-rechts, unten links. */
  max-height: 80vh; /* Maximalhöhe 80% der Bildschirmhöhe (vh = viewport height, später mehr dazu) */
}

.about_image img {
  height: 100%; /* Bildhöhe 100% des verfügbaren Platz */
  min-height: 600px; /* Höhe auf eigenes Bild einstellen. Momentan ist Bildhöhe mind. 600px */
  width: 100%; /* Bildbreite 100% des verfügbaren Platz */
  object-fit: cover; /* Bild nicht verziehen sondern croppen falls nötig */
  object-position: 0 25%; /* Bild auf der Y-Achse um 25% nach unten verschieben */
}

.about_content {
  flex-grow: 1; /* Dieses Element kann bis zum verfügbaren Platzes anwachsen */
  flex-shrink: 0; /* Dieses Element kann nicht kleiner als der Platzes werden den es mindestens braucht, um seinen eigenen Inhalt normal anzuzeigen */
  flex-basis: 50%; /* Dieses Element verwendet wenn immer möglich 50% des verfügbaren Platzes */
  /* Du kannst flex-grow, flex-shrink und flex-basis auch zusammenfassen. Shorthand wir so eine Verkürzung genannt und sieht folgendermassen aus:*/
  /* flex: 1 0 50%; */
  display: flex;
  flex-direction: column; /* Untergeordnete Elemente sollen sich in Spalten statt Zeilen ausrichten (Prinzip flexbox, später mehr dazu )*/
  padding: 0 7vw; /* Innenabstand festlegen */
}

.about_text {
  flex-grow: 1; /* Dieses Element kann bis zum verfügbaren Platzes anwachsen */
  display: flex; /* Alle direkt untergeordneten Elemente nebeneinander darstellen */
  flex-direction: column; /* Untergeordnete Elemente sollen sich in Spalten statt Zeilen ausrichten. Hier wird also das Standard-Verhalten von der Zeile oberhalb überschrieben */
  justify-content: center; /* Untergeordnete Elemente sollen sich mittig ausrichten */
  max-width: 32rem; /* Maximale Breite die dem 32fachen der globalen Schriftgrösse entspricht (Prinzip Responsive Design, später mehr dazu) */
}

.about_social {
  display: flex; /* Alle direkt untergeordneten Elemente nebeneinander darstellen */
  margin-top: 2rem; /* Aussenabstand oben 2fach zur globalen Schriftgrösse */
}

.about_social a {
  margin-right: 2rem; /* Aussenabstand oben 2fach zur globalen Schriftgrösse*/
}

.about_social img {
  max-width: 2.5rem; /* Limitiert die breite der Icons, muss möglicherweise individuell angepasst werden, je nach Icon */
}

# Überprüfen im Browser Aufgabe

Überprüfe nun im Browser, ob deine Seite der Vorlage entspricht und (falls du etwas eigenes gemacht hast) richtig dargestellt wird. Wenn du alles richtig gemacht hast, sollte dein Portfolio nun etwa so aussehen:

About mit Styles

Passende Challenges

#1 Sticky Header (Fixiere den Header, sodass er beim scrollen sichtbar bleibt)
#2 Alternative About Layout (Baue dein eigenes About Layout)
#3 Branding (Füge dein eigenes Logo im Header ein)

← CSS Layout →