HTML Skills
Sauberes, semantisches HTML5
Struktur, SEO und Zugänglichkeit im Fokus - robuste Markup-Architektur für performante Webapps.
- Semantische Elemente (header, main, section, article)
- SEO & strukturierte Daten (JSON-LD)
- Barrierefreiheit (WAI-ARIA, Landmark Roles)
- Performance (lazy, decoding, prefetch)
<article itemscope itemtype="schema.org/BlogPosting">
<header>
<h1 itemprop="headline">Titel</h1>
<p><time itemprop="datePublished">26.10</time></p>
</header>
<main itemprop="articleBody">…</main>
</article><img src="hero.jpg" alt="Produkt" loading="lazy">
<link rel="preconnect" href="https://cdn.example.com">
<nav aria-label="Hauptnavigation">…</nav>
CSS Skills
Responsive CSS, Utility-First
Von Tailwind bis SCSS - skalierbare Styles, konsistente Design-Systeme und flüssige Animationen.
- Tailwind CSS, SCSS, BEM
- CSS Grid / Flexbox Mastery
- Bootstrap5 Framework
- Animations (transition, keyframes)
.btn { @apply px-4 py-2 rounded
bg-blue-600; }
.card { @apply rounded-xl shadow-lg
ring-1; }.layout {
display: grid;
grid-template-columns: 1fr 320px;
}
.hero { display: flex; }<!-- Bootstrap5 -->
<button class="btn btn-primary
btn-lg">Aktion</button>
<div class="container mt-5">
<div class="row">...</div>
</div>
JavaScript • Vue 3 • React • AngularJS
Moderne Frontend-Architektur
Robuste SPAs mit TypeScript, State-Management und Best Practices - performant und wartbar.
- ES6+, TypeScript, Tooling (Vite)
- Vue 3 (Composition API, Pinia)
- React (Hooks, Context, Redux)
- AngularJS Legacy Pflege & Migration
// JavaScript
const fetchJSON =
async (url) => {
const res =
await fetch(url);
return
await res.json();
}<!-- Vue 3 -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button
@click="count++">
{{ count }}
</button>// React
import { useState }
from 'react'
export function Counter() {
const [c, setC] =
useState(0)
return (
<button onClick={() =>
setC(c + 1)}>
{c}
</button>
)<!-- AngularJS -->
<div ng-app="app"
ng-controller
="Ctrl as vm">
<button
ng-click="vm.inc()">
{{ vm.count }}
</button>
</div>
HTML Skills
CSS Skills
Frontend-Architektur
