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>

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>

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
• jQuery (DOM, AJAX, Plugins)
• Handlebars.js (Templates, Helpers)

// 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>

// jQuery
$(document).ready(() => {
  $('#btn').on('click', 
    function() {
    $.ajax({
      url: '/api/data',
      success: (data) => 
        $('#out').html(data)
    });
  });
});

<!-- Handlebars.js -->
<script id="tpl" 
  type="text/x-handlebars">
  {{#each items}}
    <li>{{this.name}}</li>
  {{/each}}
</script>
Handlebars
  .compile(src)(data);

Enterprise CMS & Marketing

Von WordPress bis HubSpot CMS - maßgeschneiderte Content-Management-Lösungen für Marketing-Teams und Unternehmen.

• HubSpot CMS Hub (HubL, Custom Modules)
• WordPress (Elementor, Envato Kits, Gutenberg, ACF Pro)
• Marketing Automation & Lead Nurturing
• Contao, Webflow & Headless CMS

<!-- HubSpot HubL Template -->
{% module "hero" path="@hubspot/hero" 
  label="Hero Section"
  background_image="{{ module.bg_image }}"
  heading="{{ content.title }}"
  cta_button="{{ module.cta }}" %}

<!-- WordPress Gutenberg Block -->
<?php register_block_type('theme/hero', [
  'render_callback' => 'render_hero',
  'attributes' => $hero_attrs
]); ?>