Lebenslauf mit Styling

[p-runge]

Strukturell soll der unten gezeigte Lebenslauf möglichst detailgetreu nachgebaut werden.

Dafür werden voraussichtlich folgende Bausteine benötigt:

HTML:

• img
• h1
• p
• ul, li
• div

CSS:

• font-family
• font-weight
• font-size
• color
• background-color
• border
• border-radius
• padding
• margin
• text-align
• text-transform

Außerdem wird für die Positionierung von Elementen die display Property einzelner Elemente überschrieben. display definiert quasi das "Layout", in dem dieses Element dargestellt und alle direkten Child-Elemente innerhalb dieses Containers angeordnet werden. Die meisten Elemente in HTML haben als Default Wert display: block und sind sog. "Block Elemente". Das bedeutet, dass sie die komplette Breite, die ihnen zur Verfügung steht, ausnutzen, und sie somit untereinander gestapelt werden. <p>, <div> oder <h1> sind z.B. solche Elemente. Manchmal will man aber Dinge auch nebeneinander darstellen. Die einfachste Möglichkeit dafür ist display: flex.

W3Schools hat für display: flex (auch Flexbox genannt) eine eigene Sektion: https://www.w3schools.com/css/css3_flexbox.asp

Eine weitere super Ressource dazu ist folgende Seite, die das Prinzip recht spielerisch vermittelt: https://flexboxfroggy.com/

[p-runge]

Erster Entwurf sieht strukturell schon ganz gut aus. Ein paar Optimierungen sind aber noch drin:

• Nicht jeder Wrapper muss eine Flexbox sein. Es reicht gerade in vertikal angeordneten Blöcken auch display: block, also der Standardwert.
• Abstände sollten explizit mit Padding und / oder Margin gesetzt werden. Nicht mit Fixen Höhen an den Containern.
• Gerne die Farben, Schriftgrößen, etc. mit anpassen.