[S1L1] User Interfaces 1

Question 1

Ist Semantic Markup === Meaningful Code?

Answer 1

• Ja, weil:
• Lesbarkeit für Maschinen und Menschen
• Neue Developer müssen deinen Code lesen können
• SEO

Question 2

Wie viele h1 Tags sollten auf einer Website sein?

Answer 2

-Nur einer, damit der Browser weiß, dass es das wichtigste ist.

Question 3

Möchte man die meisten Tags oder die wenigsten Tags in semnatic Markup nutzen?

Answer 3

-Die kleinste Anzahl an Tags

Question 4

Was ist ein Placeholdersymbol für einen href in HTML?

Answer 4

-Das Hashtag #

Question 5

Was können Tags?

Answer 5

-Untereinander neben einem tag stehen

Question 6

Sollte man Double oder Single Quotes benutzen?

Answer 6

-Nicht wichtig, aber man sollte sich für eine Variante entscheiden

Question 7

Dürfen h2, h3 etc mehrmals auftauchen in HMTL?

Answer 7

Ja

Question 8

Was bedeutet * {
color: red;
}

Answer 8

Alle Elemente des HTML werden rot gefärbt.

Question 9

Wie gibt man an, dass alle h1 Tags rot sein sollen?

Answer 9

h1 {
color: red;
}

Question 10

Wie kann man angeben, dass nur ein h1 in einem header rot sein soll?

Answer 10

header h1 {
color: red;
}

Question 11

Wie werden die Tag Einschränkungen definiert?

Answer 11

• Sequentiell bei header h1 {} werden zuerst die header gesucht und dann die h1 darin
• Wenn man die Reihenfolge vertauscht funktioniert dies nicht mehr

Question 12

Was ist sans-serif and serif Font?

Answer 12

• Sans bedeutet ohne Serifen

- Serifen ist mit Serifen

Question 13

Was ist der Unterschied zwischen Font und font-family?

Answer 13

-font-family kann z.B. sans-serif und serif definieren

Question 14

Wann sollten Fonts gequoted werden?

Answer 14

Wenn sie spaces im Namen haben:

-font-family: ‘Comic Sans MS’;

Question 15

Wie kann man Fonts priorisieren?

Answer 15

• Mit Kommas trennen, aber der letzte Eintrag sollte ein Browser erkennbarer Font sein
• font-family: ‘Comic Sans MS’, ‘Open Sans’, sans-serif;

Question 16

Sollte man floats benutzen in CSS?

Answer 16

Nein, es ist ein schlechter Layout-Stil.

-Lieber text-align: right;

Question 17

Wird in CSS ein Element geändert, wenn es allgemein oder spezifisch angesprochen wird?

Answer 17

-Immer die spezifischste Regel eines Elementes wird angewandt und als wichtigest angesehen.

Question 18

Wie ist die Reihenfolge der Priorisierung in HTML/CSS?

Answer 18

Universal * -> Elements -> Classes -> ID -> Embedded -> Inline -> !important

Question 19

Was ist der Unterschied zwischen .intro p und p.intro und p .intro?

Answer 19

p .-intro bedeutet es wird ein intro class Element in einem P gesucht <p class="intro">

p.intro bedeutet es wird nur ein Identifier genutzt</p>

Question 20

Was ist der Unterschied zwischen head und header Tag?

Answer 20

• ist für Dokumenten Styling und Links

- ist für den header wie in einer Zeitschrift

Question 21

Was kann man mit CSS text-decoration: erreichen?

Answer 21

-Text verzieren mit Unterstrichen oder Überstrichen

Question 22

Was bedeutet CSS display: flex;

Answer 22

-Positioniert Elemente in Zeilen bzw. Spalten und verteilt den freien Raum mit justify um alles gleichmäßig anzuordnen

Question 23

Was bedeutet Semantisch in Bezug auf HTML?

Answer 23

• Einem Inhalt semantische Bedeutung geben

- Maschinen und Menschen die Bedeutung des Codes definieren

Question 24

Wofür ist das section Tag gut?

Answer 24

-Um andere Tags und Elemente darin einzuschließen und ihnen die semantische Bedeutung einer zusamenhängenden Sektion zu geben

Question 25

Wofür steht h1?

Answer 25

• Für einen Header, also eine Hauptüberschrift auf einer HTML Seite
• Es sollte nur einen davon geben
• Sehr großer Font

Question 26

Wofür steht das header Tag ?

Answer 26

• Für einen Header wie oben als Hauptüberschrift auf einer Zeitung.
• Hier können Logos, Navigation und Button genutzt werden

Question 27

Was ist der Eric-Meyer-Reset?

Answer 27

-Ein quelloffenes Tool/CSS code, welcher den Browser zu einem CSS-Reset zwingt

Question 28

Kann man sich in HTML Custom Tags erstellen wie lambdaSchool?

Answer 28

-Ja, aber es wird empfohlen HTML5 Tags zu nutzen um mehr semantische Bedeutung zu geben.

Question 29

Was bedeutet semantisch?

Answer 29

-Das etwas Bedeutung hat

Question 30

Was ist an einem HTML Tag semantisch?

Answer 30

-Durch die Bennenuing des Tags weiß man sofort wofür es verwendet werden soll.

Question 31

Was wäre ein nicht-semantischer Anatz an HTML Tags?

Answer 31

-Einfach viele divs benutzen und jeweils eine Klasse zuordnen.

Question 32

Was sind die Nachteile, wenn man keine semantischen Tags nutzt?

Answer 32

• Wenig Klarheit
• Suchmaschinen ranken die Seite schlechter im SEO
• Namenskonventionen der div Klassen ist wahllos
• Behinderte Menschen können die Website nicht benutzen

Question 33

Wann sollte man divs benutzen anstatt semantischen HTML?

Answer 33

-Wenn man nicht Bedeutung verliehen möchte, sondern z.B: Platz oder Positionierung schaffen möchte

Question 34

Wozu kann das section Tag genutzt werden?

Answer 34

• Um einer Sektion semantischen Ausdruck zu verleihen
• Man kann z.B: zwei divs zum Trennen, in eine section tun
• Section Tag splitted den Inhalt der divs in zwei Hälften

Question 35

Wofür stehet CSS?

Answer 35

-Cascading Style Sheets

Question 36

Was für Elemente gibt es in CSS?

Answer 36

• Universal Selectors
• Elements
• IDs
• Classes

Question 37

Was ist der Universal/Wildcard Selector?

Answer 37

• { color: red; }
• Betrifft jedes Element
• Ist der am wenigsten wichtigste Selector und wird von jedem spezifischerem Selector überschrieben

Question 38

Was ist der Element Selector?

Answer 38

h1 { color: blue; }

• Betrifft alle Elemente mit dem Namen
• Spezifischer als Universal aber weniger Spezifisch als Klasse oder ID

Question 39

Was ist der Klassen Selector?

Answer 39

.example-class { color: red; }

• Betrifft alle Elemente die die Klasse besitzen
• Ist spezifischer als ein Element Selector
• Kann viele Elemente mit den Klassen betreffen

Question 40

Wie kann man einem HTML Element mehrere Klassen zuweisen?

Answer 40

h1 class=”a b huhn ei”
-Dabei wird die unterste kaskardierende Regel im CSS auf das Element angewandt
.a { color: red; }

Question 41

Was sind in CSS Pseudo-Klassen?

Answer 41

• z.B. wenn man nur das letzte Element anspricht mit
  h1: last-child { color: red; }
• Spezifischer als Klassen oder Element Selectoren

Question 42

Wan benutzt man Pseudoi-Klassen?

Answer 42

• Wenn die Anzahl der Elemente die man mit CSS ansprechen will unbekannt ist
• z.B. Javascript entfernt und fügt Elemente hinzu,. daher sind die Elemente dynamisch anzusprechen

Question 43

Was ist der ID Selector?

Answer 43

example-id { color: red;}

• Sollte nur ein spezifisches Element betreffen
• Wenn man Klassen nicht nutzen kann sollte man dies nutzen
• Werden für das Ansprechen in Javascript benutzt
• Spezifischer als Klassen, Pseudo oder Element Selectors

Question 44

Was sind inline-Styles eines HTML Elementes?

Answer 44

h1 stryle=”color: red”

• Sollte vermieden werden außer innerhalb von Javascript libraries
• Ist spezifischer alls alle Selectoren außer !important

Question 45

Was ist ein embedded style in HTML?

Answer 45

style
h1 { color: red;}
/style
-Sollte nicht unbedingt verwendet werden
-Benötigt kein externe css Dokument mehr
-Weniger spezifisch als inline styles und !important
-Performant und kann SEO Vorteile bringen

Question 46

Was ist das spezifischste/wichtigste CSS Elemente?

Answer 46

!important

Question 47

Was sind die Nachteile von embedded style in HTML?

Answer 47

• Durch das Verwenden des style Tags im HTML sehr hohe Kopplung
• Wenig Wiederbenutzbarkeit und Wartbarkeit des Codes