Appearance
Kapitel 2: Frontend-Grundlagen
📘 Lernziel: HTML, CSS und JavaScript Grundlagen für Vue 3 auffrischen!
2.1 HTML-Grundlagen
Was ist HTML?
- HyperText Markup Language
- Strukturierung von Webseiten
- Grundgerüst jeder Webseite
Wichtige HTML-Tags:
html
<!-- Grundgerüst -->
<!DOCTYPE html>
<html>
<head>
<title>Titel</title>
</head>
<body>
<h1>Überschrift</h1>
<p>Absatz</p>
<div>Container</div>
</body>
</html>Für Vue wichtig:
<div id="app">(Mount-Point)- Attribute (
:src,@clickspäter) - Semantische Tags
2.2 CSS-Grundlagen
Was ist CSS?
- Cascading Style Sheets
- Gestaltung von Webseiten
- Layout, Farben, Animationen
Wichtige CSS-Konzepte:
css
/* Selektoren */
.class { color: red; }
#id { font-size: 16px; }
/* Flexbox */
.container {
display: flex;
justify-content: center;
}
/* Responsive */
@media (max-width: 768px) {
.container { flex-direction: column; }
}Für Vue wichtig:
- Scoped Styles (
<style scoped>) - CSS Modules
- Tailwind CSS (oft mit Vue genutzt)
2.3 JavaScript-Grundlagen
Was ist JavaScript?
- Programmiersprache des Webbrowsers
- Interaktivität auf Webseiten
- Basis für Vue 3
Wichtige JS-Konzepte:
Variablen
javascript
// Modern (ES6+)
const name = 'Vue 3'
let count = 0Funktionen
javascript
// Pfeilfunktionen (wichtig für Vue)
const increment = () => {
count++
}Objekte und Arrays
javascript
const person = {
name: 'Max',
age: 25
}
const numbers = [1, 2, 3, 4, 5]Destrukturierung
javascript
const { name, age } = personModule (import/export)
javascript
// utils.js
export const sum = (a, b) => a + b
// main.js
import { sum } from './utils.js'Für Vue wichtig:
- Arrow Functions
- Destructuring
- Template Literals
- Promises / Async-Await
- ES6 Module
2.4 Übung: HTML + CSS + JS Kombination
Aufgabe: Erstelle eine einfache Seite mit Button und Zähler.
Lösung:
html
<!DOCTYPE html>
<html>
<head>
<style>
.counter {
text-align: center;
margin-top: 50px;
}
button {
padding: 10px 20px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="counter">
<h1 id="count">0</h1>
<button onclick="increment()">Klick mich!</button>
</div>
<script>
let count = 0
const increment = () => {
count++
document.getElementById('count').textContent = count
}
</script>
</body>
</html>Dies ist die "Vanilla JS" Version. Mit Vue wird es viel einfacher!
✅ Zusammenfassung
In diesem Kapitel hast du gelernt:
- ✅ HTML-Grundlagen
- ✅ CSS-Grundlagen
- ✅ JavaScript-Grundlagen (ES6+)
- ✅ Warum diese Grundlagen für Vue wichtig sind
🎯 Nächster Schritt: In Kapitel 3 lernst du die Entwicklungsumgebung einrichten!
← Zurück zu Kapitel 1: Was ist Vue 3?Weiter zu Kapitel 3: Entwicklungsumgebung →