Webentwicklung für Anfänger: Lerne HTML, CSS und JavaScript

Question 1

Vergleiche Bootstrap und React, zwei beliebte Webentwicklungs-Frameworks. Erkläre ihre Unterschiede und gib an, wofür sie am besten geeignet sind.

Accepted Answer

Bootstrap ist ein CSS-Framework für responsive Websites, während React ein JavaScript-Framework für interaktive Benutzeroberflächen ist.

Answer

Bootstrap und React sind beide JavaScript-Frameworks für mobile Apps.

Answer

React ist ein CSS-Framework für Single-Page-Applications, während Bootstrap ein JavaScript-Framework für responsive Websites ist.

Answer

Bootstrap und React sind beide CSS-Frameworks für Desktop-Anwendungen.

Question 2

Welche HTML-Elemente werden für die Strukturierung von Inhalten wie Überschriften und Absätzen verwendet?

Accepted Answer

Answer

Answer

Question 3

Wie funktionieren CSS-Selektoren und wie werden sie verwendet, um HTML-Elemente zu gestalten?

Accepted Answer

CSS-Selektoren weisen HTML-Elementen mit bestimmten Merkmalen Formatierungsanweisungen zu.

Answer

CSS-Selektoren sind HTML-Tags, die den Inhalt einer Webseite festlegen.

Answer

CSS-Selektoren sind JavaScript-Funktionen, die die Interaktivität einer Webseite steuern.

Question 4

Wie kann man JavaScript nutzen, um den Inhalt eines HTML-Elements auf einer Webseite zu ändern? Nenne ein konkretes Beispiel.

Accepted Answer

Die Eigenschaft `innerHTML` des HTML-Elements direkt ändern

Accepted Answer

Einen Ereignis-Listener für das HTML-Element erstellen und den Inhalt im Ereignis-Handler ändern

Answer

Das HTML-Element aus dem Dokument entfernen und ein neues Element mit dem neuen Inhalt erstellen

Answer

Die CSS-Klasse des HTML-Elements ändern

Question 5

Was sind HTML-Attribute und wie werden sie verwendet, um das Verhalten von Elementen zu steuern?

Accepted Answer

HTML-Attribute sind zusätzliche Informationen, die zu HTML-Elementen hinzugefügt werden können, um ihr Aussehen, Verhalten oder ihre Daten zu ändern.

Answer

HTML-Attribute werden nur verwendet, um das Aussehen von Elementen zu ändern.

Answer

HTML-Attribute sind erforderlich, damit HTML-Elemente funktionieren.

Answer

HTML-Attribute werden in CSS definiert.

Question 6

Welches Werkzeug hilft dir, Fehler in deiner selbst erstellten Webseite zu finden?

Accepted Answer

Quelltext-Editor

Answer

Farbwähler

Answer

Bildbearbeitungsprogramm

Answer

Textverarbeitungsprogramm

Question 7

Wie funktionieren responsive Layouts in CSS und warum sind sie für die moderne Webentwicklung wichtig?

Accepted Answer

Responsive Layouts passen sich automatisch an die Größe des Browserfensters an, was die Benutzerfreundlichkeit auf allen Geräten verbessert.

Answer

Responsive Layouts funktionieren nur in modernen Browsern und erfordern zusätzliche Programmierung für ältere Browser.

Answer

Responsive Layouts werden nur für mobile Geräte verwendet, um die begrenzte Bildschirmgröße auszugleichen.

Answer

Responsive Layouts haben keine Auswirkungen auf die Ladezeit einer Webseite.

Question 8

Welche Technik wird **nicht** zur Optimierung von Webseiten für mobile Geräte verwendet?

Accepted Answer

Flash

Answer

Responsives Design

Answer

Adaptives Design

Answer

CSS-Media Queries

Question 9

Welche CSS-Eigenschaft ermöglicht es, die Farbe eines Elements über einen bestimmten Zeitraum schrittweise zu ändern?

Accepted Answer

transition

Answer

transform

Answer

animation

Answer

color

Question 10

Warum sind Webentwickler für den Datenschutz und die Barrierefreiheit von Websites verantwortlich?

Accepted Answer

Webentwickler tragen durch die Sicherstellung von Datenschutz und Barrierefreiheit dazu bei, das Internet sicherer und zugänglicher zu machen.

Answer

Webentwickler sind nur für die technische Umsetzung von Websites zuständig.

Answer

Die Verantwortung für Datenschutz und Barrierefreiheit liegt ausschließlich bei den Website-Betreibern.

Question 11

Wie gehst du am besten mit Fehlern in JavaScript um?

Accepted Answer

Fehler mit `try` und `catch` abfangen und in einer zentralen Protokolldatei protokollieren.

Answer

Fehler ignorieren, da sie selten auftreten.

Answer

Eine allgemeine Fehlermeldung ohne Details ausgeben.

Answer

Fehler mit `console.log()` ausgeben, aber nicht protokollieren.

Question 12

Wie lassen sich responsive Bilder implementieren, um auf verschiedenen Geräten und Bildschirmgrößen ein optimales Nutzererlebnis zu gewährleisten?

Accepted Answer

Das Attribut "srcset" mit verschiedenen Bildquellen verwenden

Accepted Answer

Das Attribut "sizes" mit Medienabfragen verwenden

Answer

Ein Bild in verschiedenen Größen verwenden

Answer

Keine responsiven Bilder verwenden

Question 13

Wie funktionieren WebSockets und wie ermöglichen sie Echtzeitkommunikation zwischen einem Webserver und einem Client?

Accepted Answer

WebSockets öffnen und halten bidirektionale Vollduplex-Kommunikationskanäle zwischen einem Webserver und einem Client.

Answer

WebSockets sind eine Art HTTP-Anfrage, die Daten vom Server zum Client sendet.

Answer

WebSockets werden zum Erstellen statischer Webseiten verwendet, die sich nicht ändern.

Answer

WebSockets sind unsicher und sollten nicht für die Übertragung vertraulicher Daten verwendet werden.

Question 14

Wie integrieren Webentwickler TDD in ihren Workflow und welche Vorteile hat TDD für die Qualität von Webanwendungen?

Accepted Answer

Indem sie Tests schreiben, bevor sie den Code implementieren, und den Code ständig überarbeiten, um die Tests zu bestehen.

Answer

Indem sie den Code nach der Implementierung automatisiert testen und Fehler beheben, die durch die Tests aufgedeckt werden.

Answer

Indem sie den Code manuell durch einen Tester testen lassen und dann die vom Tester gemeldeten Fehler beheben.

Answer

Indem sie ein Testautomatisierungs-Framework verwenden, das Tests für sie generiert.

Question 15

Warum ist es wichtig, dass Websites für alle zugänglich sind?

Accepted Answer

Jeder sollte Zugang zu Informationen und Diensten im Internet haben.

Answer

Nur Menschen mit Behinderungen haben Probleme im Internet.

Answer

Barrierefreiheit ist nur für große Websites wichtig.

Question 16

Wie ermöglichen Progressive Web Apps (PWAs) Webseiten, auch ohne Internetverbindung zu funktionieren?

Accepted Answer

PWAs speichern Daten wie Texte, Bilder und Skripte zwischen, sodass Webseiten auch offline teilweise oder vollständig verfügbar sind.

Answer

PWAs verhindern, dass Webseiten offline geladen werden können.

Answer

PWAs wandeln Webseiten in native Apps um, die auch offline laufen können.

Question 17

Wie können Webentwickler Responsive Design nutzen, um ihre Webseiten auf unterschiedlichen Geräten und Bildschirmgrößen optimal darzustellen?

Accepted Answer

Mit Media Queries für unterschiedliche Stile auf verschiedenen Bildschirmgrößen

Accepted Answer

Mit einem Framework wie Bootstrap für vordefinierte Stile für verschiedene Geräte

Answer

Mit absoluten Werten für Abstände und Größen

Answer

Mit JavaScript zur dynamischen Größen- und Positionsänderung von Elementen

Question 18

Wie kann man die Ladezeit von Webseiten mit Hilfe von Caching-Mechanismen verkürzen?

Accepted Answer

Indem man häufig angeforderte Daten auf dem Server speichert und sie bei erneuten Anfragen direkt zur Verfügung stellt

Answer

Indem man mehrere Elemente einer Webseite gleichzeitig lädt

Answer

Indem man die Dateigröße von Bildern und Skripten reduziert

Answer

Indem man JavaScript verwendet, um das Laden von Daten zu verzögern

Question 19

Welche Aussage zur Barrierefreiheit von Webanwendungen ist richtig?

Accepted Answer

Webentwickler können Technologien wie ARIA und barrierefreie Vorlagen nutzen, um die Barrierefreiheit zu verbessern.

Answer

Barrierefreiheit ist nur für Websites mit vielen Nutzern wichtig.

Answer

Es gibt keine einheitlichen Regeln für barrierefreie Webentwicklung.

Question 20

Wie stellen Webentwickler eine sichere und zuverlässige Verbindung zwischen dem Computer des Nutzers und dem Webserver her?

Accepted Answer

Durch Verwendung von HTTPS und TLS-Protokollen

Answer

Durch Übertragung der Daten ohne Verschlüsselung

Answer

Durch Einsatz von Firewalls und Intrusion-Detection-Systemen

Answer

Durch Verwendung schwacher Passwörter

Question 21

Wie trägt die Content Security Policy (CSP) zur Verbesserung der Sicherheit von Webanwendungen bei und wie verhindert sie Cross-Site-Scripting-Angriffe?

Accepted Answer

CSP erlaubt nur die Ausführung von Skripten aus vertrauenswürdigen Quellen und verhindert so XSS-Angriffe.

Answer

CSP blockiert alle Skripte, um XSS-Angriffe zu verhindern.

Answer

CSP ist eine Verschlüsselungstechnik, die XSS-Angriffe verhindert.

Answer

CSP spielt keine Rolle bei der Verhinderung von XSS-Angriffen.

Question 22

Was ist die Aufgabe von Cross-Origin Resource Sharing (CORS) in der Webentwicklung?

Accepted Answer

CORS ermöglicht den Datenaustausch zwischen verschiedenen Webseiten.

Answer

CORS verhindert den Datenaustausch zwischen verschiedenen Webseiten.

Answer

CORS wird nur für Bilder benötigt.

Answer

CORS hat keine Bedeutung für die Webentwicklung.

Question 23

Welches HTML-Element erzeugt eine Überschrift?

Accepted Answer

<h1>

Answer

Answer

<u>

Answer

<title>

Question 24

Welche CSS-Eigenschaft legt die Textfarbe fest?

Accepted Answer

color

Answer

font-size

Answer

text-align

Answer

margin

Question 25

Welcher JavaScript-Datentyp speichert Wahrheitswerte?

Accepted Answer

Boolean

Answer

String

Answer

Number

Answer

Array

Question 26

Mit welchem HTML-Element wird ein Link zu einer anderen Website erstellt?

Accepted Answer

<a>

Answer

<link>

Answer

<url>

Answer

<href>

Question 27

Welche JavaScript-Anweisung prüft eine Bedingung?

Accepted Answer

if

Answer

else

Answer

switch

Answer

while

Question 28

Welche HTML-Struktur erzeugt eine ungeordnete Liste?

Accepted Answer

<ul>

Answer

<list>

Answer

<li>

Answer

<menu>

Question 29

Wie nutzen Webentwickler Websockets, um Echtzeitkommunikation in Webanwendungen zu ermöglichen und welche Vorteile ergeben sich daraus?

Accepted Answer

Websockets ermöglichen die bidirektionale Kommunikation zwischen Client und Server, was Echtzeitaktualisierungen erlaubt.

Answer

Websockets werden zum Stylen und Formatieren von Webseiten verwendet.

Answer

Websockets sind nur in modernen Browsern verfügbar.

Answer

Websockets sind eine Art Datenbank.

Question 30

Welches Bildformat eignet sich am besten für die Verwendung auf Webseiten?

Accepted Answer

PNG

Answer

TIFF

Answer

BMP

Answer

RAW

Question 31

Welche Technologie ermöglicht es Webseiten, dynamische Inhalte und Interaktivität zu haben?

Accepted Answer

JavaScript

Answer

HTML

Answer

CSS

Answer

XML

Question 32

Was ist responsives Design?

Accepted Answer

Ein Design, das sich an verschiedene Bildschirmgrößen anpasst.

Answer

Ein Design, das nur auf großen Bildschirmen gut aussieht.

Answer

Ein Design, das sich je nach Tageszeit ändert.

Question 33

Welche Technik hilft Webentwicklern, die Leistung von Webanwendungen zu analysieren und zu verbessern?

Accepted Answer

Leistungsanalyse

Answer

A/B-Tests

Answer

Benutzerumfragen

Answer

Drahtmodelle

Question 34

Erläutere die Unterschiede zwischen clientseitigem und serverseitigem Rendering in Webanwendungen und gib jeweils einen Vor- und einen Nachteil an.

Accepted Answer

Clientseitig:
* Vorteil: Schnelles Laden für Nutzerinnen und Nutzer
* Nachteil: Abhängig von den Ressourcen des Geräts der Nutzerinnen und Nutzer

Accepted Answer

Serverseitig:
* Vorteil: Unabhängig von den Ressourcen des Geräts der Nutzerinnen und Nutzer
* Nachteil: Langsameres Laden für Nutzerinnen und Nutzer

Answer

Clientseitig: Langsames Laden; Serverseitig: Schnelles Laden

Answer

Clientseitig: Hohe Serverlast; Serverseitig: Keine Serverlast

Question 35

Welches HTML-Element ist für Überschriften gedacht?

Accepted Answer

<h1>

Answer

<p>

Answer

<div>

Question 36

Wie ändere ich mit CSS die Hintergrundfarbe eines Elements?

Accepted Answer

background-color

Answer

color

Answer

padding

Question 37

Welche JavaScript-Funktion zeigt den Inhalt eines HTML-Elements an?

Accepted Answer

innerHTML

Answer

document.write

Answer

console.log

Question 38

Welches HTML-Attribut ist für Links zu anderen Websites verantwortlich?

Accepted Answer

href

Answer

src

Answer

alt

Question 39

Welches HTML-Element steht für ungeordnete Listen?

Accepted Answer

<ul>

Answer

<ol>

Answer

<li>

Question 40

Mit welchem CSS-Attribut kann der Zeilenabstand vergrößert werden?

Accepted Answer

line-height

Answer

margin

Answer

padding

Question 41

Welches HTML-Element erzeugt einen horizontalen Trennstrich?

Accepted Answer

<hr>

Answer

<br>

Answer

<div>

Question 42

Welches CSS-Attribut legt die Breite eines Elements fest?

Accepted Answer

width

Answer

height

Answer

margin

Question 43

Welche JavaScript-Funktion führt eine zeitliche Verzögerung aus?

Accepted Answer

setTimeout

Answer

setInterval

Answer

clearTimeout

Question 44

Wie greifen Webentwickler mithilfe von Datenbanken auf Informationen in Webanwendungen zu?

Accepted Answer

Über Programmiersprachen wie SQL

Answer

Über eine grafische Oberfläche (GUI)

Answer

Nur zum Speichern von Benutzerdaten

Answer

Gar nicht

Question 45

Wie erstellst du eine Funktion in JavaScript?

Accepted Answer

Mit `function`

Answer

Mit `def`

Answer

Mit `var`

Answer

Mit `let`

Question 46

Welche Funktionen können Cookies in Webanwendungen erfüllen?

Accepted Answer

Speichern von Nutzerdaten wie Passwörtern

Accepted Answer

Verfolgen von besuchten Seiten für personalisierte Erlebnisse

Answer

Verbreiten von Viren und Schadsoftware

Question 47

Frage: Was ist das Test-First-Prinzip bei der testgetriebenen Entwicklung (TDD)?

Accepted Answer

Bei TDD werden zuerst Tests für eine neue Funktion geschrieben, bevor die Funktion selbst entwickelt wird.

Answer

TDD wird nur für große Softwareprojekte eingesetzt.

Answer

In der Webentwicklung sind Tests nicht erforderlich, da man die Ergebnisse direkt im Browser sieht.

Question 48

Welche drei Techniken können die Leistung von Webanwendungen verbessern?

Accepted Answer

Caching, Minifizierung, Bildoptimierung

Answer

Nur Caching

Answer

Nur Minifizierung

Question 49

Welche Vorteile bietet der Einsatz von CDNs (Content Delivery Networks) in der Webentwicklung? Erläutere dies anhand konkreter Beispiele, wie CDNs die Leistung von Webanwendungen verbessern.

Accepted Answer

Schnellere Ladezeiten durch Bereitstellung von Inhalten von Servern in der Nähe der Nutzer

Accepted Answer

Reduzierter Bandbreitenverbrauch durch Zwischenspeicherung von Inhalten auf mehreren Servern

Accepted Answer

Verbesserte Skalierbarkeit durch Verteilung des Datenverkehrs auf mehrere Server

Answer

Erhöhte Sicherheit durch Schutz vor DDoS-Angriffen

Question 50

Wie können Webentwickler*innen das Prinzip der Progressiven Verbesserung nutzen, um barrierefreie und für alle zugängliche Websites zu erstellen?

Accepted Answer

Indem sie alle Inhalte und Funktionen für Nutzer*innen mit unterschiedlichen Fähigkeiten und Geräten zugänglich machen.

Answer

Indem sie auf ihrem Gerät die neuesten Technologien nutzen, um die korrekte Darstellung der Website zu gewährleisten.

Answer

Indem sie die Website visuell ansprechend und benutzerfreundlich gestalten.

Answer

Indem sie die Website für Suchmaschinen optimieren.

Question 51

Welche Vor- und Nachteile haben JavaScript-Frameworks in der heutigen Webentwicklung?

Accepted Answer

Vorteile: Vereinfachung und Zeitersparnis

Accepted Answer

Nachteile: Einschränkungen und Abhängigkeiten

Answer

Frameworks sind für die Webentwicklung unerlässlich

Answer

JavaScript-Frameworks sind veraltet

Question 52

Welche Methode eignet sich am besten, um eine Webseite für ein internationales Publikum zu übersetzen und anzupassen?

Accepted Answer

Mehrsprachige Ressourcendateien verwenden

Answer

Browserbasierte Übersetzungsdienste nutzen

Answer

Webseiteninhalt manuell übersetzen und ersetzen

Question 53

Welcher HTML-Tag wird verwendet, um die wichtigste Überschrift einer Webseite anzuzeigen?

Accepted Answer

<h1>

Answer

<h2>

Answer

<h3>

Answer

<h4>

Question 54

Welche CSS-Eigenschaft legt die Größe des Textes fest?

Accepted Answer

font-size

Answer

text-size

Answer

size

Answer

font-magnitude

Question 55

Welcher JavaScript-Datentyp wird verwendet, um Texte zu speichern?

Accepted Answer

String

Answer

Integer

Answer

Boolean

Answer

Array

Question 56

Was bewirkt der folgende JavaScript-Code: `console.log("Hallo Welt");`?

Accepted Answer

Gibt eine Meldung in der Konsole des Browsers aus

Answer

Erstellt eine Variable mit dem Wert "Hallo Welt"

Answer

Ruft eine Funktion namens "Hallo Welt" auf

Answer

Schreibt "Hallo Welt" auf den Bildschirm

Question 57

Welche HTML-Struktur wird verwendet, um eine ungeordnete Liste zu erstellen?

Accepted Answer

<ul>

Answer

<ol>

Answer

<list>

Answer

<unordered-list>

Question 58

Welche JavaScript-Funktion wird verwendet, um auf das DOM-Element mit der ID "meinElement" zuzugreifen?

Accepted Answer

document.querySelector("#meinElement")

Answer

getElementById("meinElement")

Answer

getElementsByClassName("meinElement")

Answer

document.getElementByName("meinElement")

Question 59

Welches HTML-Element wird verwendet, um einen Link zu einer anderen Webseite oder Datei zu erstellen?

Accepted Answer

<a>

Answer

<link>

Answer

<href>

Answer

<url>

Question 60

Welche CSS-Eigenschaft wird verwendet, um die Hintergrundfarbe einer Webseite festzulegen?

Accepted Answer

background-color

Answer

color

Answer

background

Answer

bgcolor

Question 61

Welche JavaScript-Schleife wird verwendet, um jeden Eintrag in einem Array der Reihe nach auszuführen?

Accepted Answer

for

Answer

while

Answer

foreach

Answer

map

Question 62

Welches HTML-Element wird verwendet, um die Überschrift einer Webseite darzustellen?

Accepted Answer

<h1>

Answer

<p>

Answer

<u>

Answer

<head>

Question 63

Welche CSS-Eigenschaft legt die Hintergrundfarbe eines Elements fest?

Accepted Answer

background-color

Answer

color

Answer

background

Answer

fill

Question 64

Welches Skript wird in Webseiten verwendet, um interaktive Funktionen hinzuzufügen?

Accepted Answer

JavaScript

Answer

Java

Answer

Python

Answer

C++