Awesome
Diese Liste basiert auf jahrelanger Erfahrung von Front-End Entwicklern und einigen Zusätzen aus anderen Open Source Checklisten.
Inhaltsverzeichnis
- Head
- HTML
- Webfonts
- CSS
- Bilder
- JavaScript
- Sicherheit
- Leistung
- Zugänglichkeit
- SEO/Suchmaschinenoptimierung
Wie benutzt man es?
Alle Punkte in der Front-End Checklist, werden für den Großteil von Projekten benötigt, jedoch sind manche Elemente nicht grundlegend wichtig, oder können weggelassen werden. Zum Beispiel benötigt man nicht unbedingt einen RSS Feed für eine Administrative Web App. Wir haben uns für 3 "Level" der Flexibilität entschieden:
bedeutet, dass es empfohlen wird, jedoch kann es in speziellen Situationen weggelassen werden.
bedeutet, dass es stark empfohlen wird, jedoch kann es in wirklich stark speziellen Situationen ausgelassen werden. Sollte man manche Elemente davon weglassen, kann dies schlechte Auswirkungen auf die Leistung, oder auf die Suchmaschinenoptimierung haben.
bedeutet, dass dieses "Item" nicht ausgelassen werden darf, egal aus was für einem Grund! Sonst kann es dadurch zu Fehlfunktionen der Seite, Zugriffsstörungen bei der Suchmaschinenoptimierung, oder andere Probleme geben. Die Priorität der Tests, sollte bei diesen Elementen die höchste Priorität haben.
Manche Hilfsquellen haben ein Emoticon, damit du besser verstehen kannst um welchen Inhalt es sich handelt:
- 📖: Dokumentation oder Artikel
- 🛠: Online Tool / Tool zum testen
- 📹: Media oder Videoinhalt
Head
Information: Du findest eine Liste von allem was im
<head>eines HTML Dokumentes vorkommt in diesem Link.
Meta Element
- Doctype: Der Dokumententyp ist HTML5 and ist auf all deinen HTML Seiten ganz oben eingetragen.
<!doctype html> <!-- HTML5 -->
Die nächsten 3 meta tags (Charset, X-UA Compatible and Viewport) kommen ganz nach oben im head Teil der HTML Seite.
- Charset: Das charset (UTF-8) ist richtig angegeben worden.
<!-- Set character encoding for the document -->
<meta charset="utf-8">
- X-UA-Compatible: Das X-UA-Compatible meta tag ist präsent.
<!-- Weist den Internet Explorer an, die neuste "Rendering engine" zu benutzen -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
- Ansichtsfenster/Viewport: Das Ansichtsfenster ist korrekt deklariert.
<!-- Ansichtsfenster für responsives Webdesign -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- Titel: Ein Titel wird auf allen Seiten genutzt (SEO: Google kalkuliert zum Beispiel die Pixelbreite der Zeichen, welche im Titel verwendet werden und schneidet den Titel zwischen 472 und 482 Pixel. Das Durchschnittszeichenlimit liegt bei ca. 55 Zeichen).
<!-- Dokument Titel -->
<title>Page Title less than 55 characters</title>
- Beschreibung: Eine meta Beschreibung ist vorausgesetzt, ist einzigartig und besitzt nicht mehr als 150 Zeichen.
<!-- Meta Beschreibung -->
<meta name="Beschreibung" content="Description of the page less than 150 characters">
- Favicons/Symbol: Jedes favicon wurde erstellt und korrekt angezeigt. Wenn du nur ein
favicon.icohast, setze es nach oben an den Anfang deiner Seite. Normalerweise braucht ein favicon kein spezielles Highlight mehr, jedoch ist es eine gute und saubere Arbeitsmethode, wenn man es so verlinkt wie in dem Beispiel unten drunter. Heutzutage, wird PNG Formatierung über.icoFormatierung empfohlen. (Maße: 32x32px).
<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Empfohlenes favicon Format -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
- Apple Web App Meta: Apple meta-tags sind vorhanden.
<!-- Apple Touch Icon (mindestens 200x200px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">
<!-- Um die Web Applikation im Fullscreen laufen zu lassen-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Status Bar Style (siehe die unterstützten Meta Tags unten drunter für verfügbare Werte) -->
<!-- Hat keinen Effekt, außer du hast den vorherigen Meta Tag -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
- Windows Kacheln/Tiles: Windows Kacheln sind vorhanden und verknüpft.
<!-- Microsoft Kacheln -->
<meta name="msapplication-config" content="browserconfig.xml" />
Das minimal benötigte xml markup/Auszeichnung für die Datei browserconfig.xml lautet wie folgt:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="small.png"/>
<square150x150logo src="medium.png"/>
<wide310x150logo src="wide.png"/>
<square310x310logo src="large.png"/>
</tile>
</msapplication>
</browserconfig>
- Autorisiert/Canonical: Nutze
rel="canonical"um duplizierten Inhalt zu vermeiden.
<!-- Hilft vorbeugend gegen Probleme mit dupliziertem Inhalt -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-read.html">
HTML Tags
- Sprachen Attribut: Das
langAttribut deiner Webseite ist spezifiziert und verbunden mit der derzeitigen Seite.
<html lang="en">
- dir Attribut/Direction attribute: Das Direction/Ausrichtungsattribut der Leserichtung ist spezifiziert im HTML Tag. (Es kann in einem anderen HTML Tag benutzt werden).
<html dir="rtl">
- Alternative Sprache/Alternate language: Das Sprachtag deiner Webseite ist spezifiziert und zugehörig zu der Sprache deiner derzeitigen Seite.
<link rel="alternate" href="https://es.example.com/" hreflang="es">
- Bedingte Kommentare/Conditional comments: Bedingte Kommentare sind vorfindlich für den IE, falls benötigt.
-
RSS feed:
Wenn dein Projekt ein Blog ist, oder diverse Artikel besitzt, kann man es mit einem RSS Link ausstatten. -
Kritischer Pfad/CSS Critical:
Der kritische Pfad (oder "minified CSS") sammelt all das CSS, welches benötigt wird um die Seite zu rendern. Es ist vor dem hauptsächlichen CSS eingebettet und steht zwischen <style></style>in einer Einzelzeile (minimiert).
- 🛠 Critical von Addy Osmani on GitHub automatisiert dies.
- CSS Reihenfolge/CSS order: Alle CSS Dateien, werden vor den JavaScript Dateien im Bereich
<head>geladen. (Außer im Sonderfall, wo manchmal JS Dateien asynchron am Anfang der Seite geladen werden ).
Soziales meta
Facebook OG und Twitter Cards, werden für jede Webseite empfohlen. Die anderen sozialen Medien Tags, können je nach Ziel/Zielgruppe noch hinzugefügt werden.
- Facebook Open Graph: Alle "Facebook Open Graph" (OG) wurden getestet. Keiner fehlt oder besitzt falsche Informationen. Bilder müssen mindestens 600 x 315 Pixel haben, empfohlen wird jedoch 1200 x 630.
Information: Das nutzen von
og:image:widthundog:image:heightspezifiziert die Dimension des Bildes zum Crawler, damit das Bild direkt gerendert wird, ohne asynchronen Download.
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<!-- Die nächsten Tags sind optional, werden aber empfohlen -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
- 📖 Eine Anleitung zum teilen für Webmaster
- 📖 Best Practices - Sharing
- 🛠 Teste deine Seite mit Facebook OG testing
- Twitter Card:
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
- 📖 Starte mit den cards von Twitter — Twitter Developers
- 🛠 Teste deine Seite mit Twitter card validator
HTML
Best practices/Erfolgsmethode
- HTML5 Semantische Elemente: Semantische Elemente in HTML5, werden passend genutzt (header, section, footer, main...).
-
Fehler Seiten/Error pages:
Error 404 und 5xx existieren. Denk dran, dass die 5xx Error Seiten, ihr CSS mit integriert haben müssen (also kein externer Aufruf zum momentanen Server). -
Noopener:
Im Falle, dass du externe Links mit target="_blank"nutzt sollte dein Link einrel="noopener"Attribut besitzen um "tab nabbing" vorzubeugen. Solltest du ältere Versionen von Firefox supporten müssen, benutzerel="noopener noreferrer".
- Aufräum Kommentare/Clean up comments: Unwichtiger Code muss entfernt werden, bevor die Seite zur Produktion übergeht.
HTML testing
- W3C konform: Jede Seite muss mit dem W3C Validierer getestet werden, um mögliche Fehler im HTML Code festzustellen.
- HTML Lint: Ich nutze Tools, welche mir helfen diverse Fehler in meinem HTML Code zu finden.
- Link checker: Es sind keine kaputten Links auf meiner Seite. So stelle ich sicher, dass keine 404 Errors geworden werden.
- Adblockers Test: Deine Webseite zeigt deinen Inhalt korrekt an, wenn Nutzer ihren Adblocker aktiviert haben. (Du kannst Nachrichten vorschalten, welche die Nutzer dazu auffordert, ihren Adblocker auszuschalten).
Webfonts
Information: Das nutzen von Webfonts kann zu "Flash Of Unstyled Text/Flash of Invisible Text" führen. Erwäge mit "fallback fonts" und/oder "webfont loaders" zu benutzen.
- Webfont Format: WOFF, WOFF2 und TTF werden von allen modernen Browsern unterstützt.
-
Webfont Größe/webfont size:
Webfonts dürfen die Größe von 2 MB nicht überschreiten (Alle Varianten inbegriffen) -
Webfont Lader/webfont loader:
Kontrolliere das Ladeverhalten mit einem "webfont loader"
CSS
Information: Schaue dir CSS Richtlinien und Sass Richtlinien an, welche von den meisten Front-End Entwicklern befolgt werden. Wenn du Zweifel an CSS Eigenschaften hast kannst du CSS Referenzen besuchen. Dort gibt es außerdem eine kurze Code Anleitung für Einheitlichkeit.
- Responsives Web Design: Die Webseite benutzt responsives Web Design.
- CSS Print: Es existiert ein "print stylesheet", welcher korrekt auf jeder Seite ist.
- Präprozessor/Preprocessors: Dein Projekt nutzt einen CSS Präprozessor
- Einzigartige ID's/Unique ID: Solltest du ID's nutzen, sind diese einzigartig zur Seite
- Reset CSS: Ein CSS reset (reset, normalize or reboot) ist in Benutzung und auf dem neusten Stand. (Solltest du ein CSS Framework wie Bootstrap oder Foundation nutzen, ist eine "Normalize" bereits enthalten)
- 📖 Reset.css
- 📖 Normalize.css
- 📖 Reboot
- JS prefix: oder ID's, welche in JavaScript Dateien genutzt werden, beginnen mit js- und sind nicht mit CSS Dateien vermischt.
<div id="js-slider" class="my-slider">
<!-- Oder -->
<div id="id-used-by-cms" class="js-slider my-slider">
- eingebettetes CSS/embedded or inline CSS: Vermeide es dringlichst eingebettetes CSS in
<style>Tags zu schreiben. Nutze dies nur für einen zulässigen Grund (z.B. background-image für slilder, critical CSS). - "Lieferanten Präfixe"/Vendor prefixes: Es werden CSS-Herstellerpräfixe verwendet, die entsprechend der Kompatibilität mit Ihrem Browser generiert werden.
Performanz
- Verknüpfung/Concatenation: CSS Dateien sind in einer einzelnen Datei verknüpft (gilt nicht für HTTP/2).
- Minimierungen/Minification: Alle Dateien sind minimiert.
- Non-blocking: CSS Dateien müssen non-blocking sein, um zu verhindern das der DOM Zeit zum laden benötigt
- Ungenutztes/Unused CSS: Entferne ungenutztes CSS.
CSS testing
- Stylelint: Alle CSS oder SCSS Dateien haben keine Fehler.
-
Responsives/Responsive web design:
Alle Seiten wurden an folgenden Punkten getestet: 320px, 768px, 1024px (könnte eventuell mehr/anders sein, abhängig von deinen analytics) -
CSS Validierer/CSS Validator:
Der CSS Code wurde getestet und alle relevanten Fehler wurden beseitigt
- Desktop Browsers: Alle Seiten wurden in den derzeitig aktuellen Desktop Browsern getestet (Safari, Firefox, Chrome, Safari...).
- Mobile Browsers: Alle Seiten wurden in den derzeitig aktuellen mobilen Browsern getestet (Native browser, Chrome, Safari...).
- OS: Alle Seiten wurden auf allen derzeitigen OS getestet (Windows, Android, iOS, Mac...).
- Pixel perfect: Alle Seiten sind nahe an der Perfektion. Hängt von der Kreativität der Designer ab, jedoch sollte die Seite sehr nah an dem vorgebenen Template anliegen.
- Leserichtung/Reading direction: Alle Seiten sollten auf LTR und RTL Sprachen getestet werden, wenn man sie unterstützen muss.
Bilder
Information: Um die Optimierung von Bildern komplett zu verstehen sollte man sich das eBook Essential Image Optimization von Addy Osmani anschauen.
Optimale Vorgehensweise/best practices
- Optimierung/Optimization: Alle Bilder sind optimiert, damit sie im Browser gerendert werden. Das WebP Format sollte für kritische Seiten (z.B. Homepage) genutzt werden.
- 🛠 Imagemin
- 🛠 Nutze ImageOptim um deine Bilder kostenlos zu optimieren.
- 🛠 Nutze Kraken.io fantastische Alternative für .png und .jpg Optimierung. (Bis zu 1mb pro Datei sind kostenlos bereit gestellt dort).
- Bilder&/Picture/Srcset: Nutze picture/srcset um das bestmöglichste Bild auf den derzeitigen "viewport" des Users anbieten zu können.
- Retina: Biete dem Nutzer Layoutbilder 2x oder 3x an, welche Retina Display supporten.
- Sprite: Kleine Bilder sind in einem "Sprite". (Wenn man Icons hat, können diese in einem SVP sprite image abgespeichert werden).
- Breite/Höhe/Width and Height: Setze
widthundheightAttribute in<img>, wenn die finale Größe des Bildes bekannt ist.(Kann für CSS Größenbestimmung weggelassen werden). - Alternativer Text/Alternative text: Alle
<img>Tags haben einen alternativen Text, welche das Bild visuell beschreiben
- Lazy loading: Bilder werden "lazyloaded" (Also erst bei konkreter Anfrage aus der Datenquelle geholt). Eine "noscript" Variante sollte stets dabei sein.
JavaScript
Optimale Vorgehensweise/Best practices
- JavaScript Inline: Du hast keinen Javascript mit deinem HTML Code vermischt
- Concatenation: JavaScript Dateien sind verknüpft miteinander.
- Minification: JavaScript Dateien wurden minified (Du kannst den
.minSuffix dafür benutzen).
- JavaScript Sicherheit/JavaScript security:
-
noscripttag: Nutze den <noscript>Tag im HTML body/Körper, wenn ein Scripttyp auf der Seite nicht unterstützt wird, oder wenn Scripts derzeit im Browser deaktiviert sind. Beispiele.
<noscript>
Du musst JavaScript aktivieren um diese Applikation nutzen zu können.
</noscript>
- Non-blocking: JavaScript Dateien werden asynchron geladen mit
asyncoder verzögert mit demdeferTag.
- Modernizr: Wenn du eine spezielle Funktion aufzeigen möchtest, kannst du ein benutzerdefinierten Modernizr in deinem
<html>Tag benutzen.
JavaScript testen/JavaScript testing
- ESLint: Es werden keine Fehler von ESLint angezeigt (basierend auf deiner Konfiguration, oder deinen Standart Einstellungen).
Sicherheit/Security
Scan und überprüfe deine Webseite/Scan and check your web site
Optimale Vorgehensweise/Best practices
- HTTPS: HTTPS wird auf jeder Seite genutzt, auch für allen externen Inhalt (Plugins, Bilder...).
- HTTP/HTTP Strict Transport Security (HSTS): Der HTTP Header ist auf 'Strict-Transport-Security' gesetzt.
- Webseiten-übergreifende Anfragenfälschung/Cross Site Request Forgery (CSRF): Du stellst sicher, dass Anfragen auf deinen Server, legitim sind und von deiner Webseite aus entstehen, um sie vor CSRF Attacken zu schützen.
- Webseiten-übergreifendes skripten/Cross Site Scripting (XSS): Deine Seite oder deine Webseite ist frei von XSS möglichen Problemen.
- Content Type Options: Beugt vor, dass bspw. Google Chrome, oder der Internet Explorer mit der MIME-Sniff Methode an unerwünschte Inhalte herankommen.
- X-Frame-Options (XFO): Schützt deine Besucher vor "clickjacking" Attacken.
- Content Security Policy: Definiert wie Inhalte auf deiner Seite geladen werden und von wo aus es gestattet ist, sie zu laden. Kann außerdem genutzt werden, um sich vor "clackjacking" Attacken zu schützen.
Performanz/Performance
Optimale Vorgehensweise/Best practices
- Seitengröße/Page weight: Die Speichergröße jeder Seite liegt zwischen 0 und 500 KB.
-
Minimales HTML/Minified HTML:
Dein HTML Code wurde "minified". -
Lazy loading:
Bilder, Skripts und CSS müssen leicht ladbar sein, um die Wartezeit der aktuellen Seite zu verkürzen. -
Cookie size:
Solltest du Cookies benutzen, sei dir sicher, dass die Speichergröße der Cookies nicht über 4096 bytes liegt und dass deine Domaine nicht mehr als 20 Cookies besitzt.
- Komponente von Drittanbietern/Third party components: Drittanbieter iframes oder Komponente, welche auf externen JS (z.B. sharing buttons) beruhen, wurden wenn möglich durch statische Komponente ersetzt. Das stellt sicher, dass keine externe API aufgerufen wird und hält somit deine Nutzeraktivitäten sicher.
Vorbereiten von Anfragen/Preparing upcoming requests
- DNS resolution: Drittanbieter DNS Services, welche eventuell benötigt werden, wurden bereits im Vorfeld in untätiger Zeit aufgelöst mit
dns-prefetch.
<link rel="dns-prefetch" href="https://example.com">
- Preconnection: DNS lookup, TCP handshake und TLS Übertragung mit Diensten, welche zeitnah benötigt werden, wurden bereits im Vorfeld in der untätigen Zeit aufgelöst/angefragt mit
preconnect.
<link rel="preconnect" href="https://example.com">
- Prefetching: Quellen, welche bald benötigt werden (bspw. lazy loaded Bilder), wurden bereits im Vorfeld in der untätigen Zeit aufgelöst/angefragt mit
prefetch.
<link rel="prefetch" href="image.png">
- Preloading: Resources needed in the current page (e.g. scripts placed at the end of
<body>) in advance usingpreload.
<link rel="preload" href="app.js">
Performanz Tests/Performance testing
- Google Seitengeschwindigkeit/Google PageSpeed: Alle deiner Seiten wurden getestet (nicht nur die Homepage) und haben mindestens ein Ergebnis von 90/100.
Erreichbarkeit/Accessibility
Information: Du kannst dir diese Playlist anschauen: A11ycasts mit Rob Dodson 📹
Optimale Vorgehensweise/Best practices
- Andauernde Verbesserung/Progressive enhancement: Hauptfunktionsbereiche wie die Hauptnavigation, oder die Suche sollten funktionieren, wenn JavaScript deaktiviert wurde.
- 📖 [Aktivieren / Deaktivieren von JavaScript in der GoogleChrome Konsole(https://www.youtube.com/watch?v=kBmvq2cE0D8)
- Farbkontrast/Color contrast: Farben sollten mindestens WCAG AA (AAA für Mobile Geräte) bestehen.
Überschriften/Headings
- H1: Alle Seiten haben eine H1, welche nicht der Titel der Webseite ist.
- Überschriften/Headings: Überschriften sollten geeignet und in der richtigen Reihenfolge genutzt werden (H1 zu H6).
Landmarks
- Rolle Banner/Role banner:
<header>hatrole="banner". - Rolle Navigation/Role navigation:
<nav>hatrole="navigation". - Rolle Main/Role main:
<main>hatrole="main".
Semantik/Semantics
- Spezifische HTML5 Input Typen werden genutzt/Specific HTML5 input types are used: Das ist besonders wichtig für Mobile Endgeräte, welche angepasste Keypads oder Widgets verschiedenster Arten benutzen.
Form
- Label: Ein Label ist mit jedem Eingabe form Element verbunden. Sollte es einmal der Fall sein, dass ein Label nicht angezeigt werden kann nutze dafür
aria-label.
Erreichbarkeits Tests/Accessibility testing
- Erreichbarkeitsstandart Tests/Accessibility standards testing: Nutze das WAVE tool um zu testen, ob deine Seite alle Standart Tests einhält.
- Tastatursteuerung/Keyboard navigation: Teste deine Webseite, indem du nur deine Tastatur benutzt. Es sollten alle interaktiven Elemente ansteuerbar und nutzbar sein.
- Vorlese Anwendung/Screen-reader: Alle Seiten wurden mit einer Vorlese Anwendung getestet (VoiceOver, ChromeVox, NVDA oder Lynx).
- Focus style: Sollte der Fokus/focus deaktiviert sein, replatziere es mit sichtbar festgelegtem CSS:
SEO
- Google Analytics: Google Analytics wurde installiert und korrekt konfiguriert.
- Überschriftenlogik/Headings logic: Überschriftentext hilft den Kontext der aktuellen Seite besser zu verstehen.
- sitemap.xml: Eine sitemap.xml existiert und wurde bei Google Search Console eingereicht (früher Google Webmaster Tools).
- robots.txt: Die robots.txt blockiert keine Webseiten.
- 📖 Die robots.txt Datei
- 🛠 Teste deine robots.txt mit Google Robots Testing Tool
- Strukturierte Daten/Structured Data: Seiten, welche strukturierte Daten nutzen - wurden getestet und besitzen keine Fehler. Strukturierte Daten helfen "web crawlern", den Inhalt der Seite besser zu verstehen.
- 📖 Einführung zu Strukturierten Daten - Suche - Google Developers
- 📖 RDFa - Linked Data in HTML
- 📖 JSON-LD
- 📖 Microdata
- 🛠 Teste deine Webseite mit Structured Data Testing Tool
- 🛠 Vollständige Liste von Wörterverzeichnissen, welche als strukturierte Daten genutzt werden können. Schema.org Full Hierarchy
- Sitemap HTML: Eine HTML sidemap existiert und ist über einen Link im footer deiner Webseite erreichbar.
- Pagination link tags: Biete
rel="prev"undrel="next"um auf weitere Seiten hinzuweisen.
<!-- Beispiel einer Angabe, wo darauf hingwiesen wird das mehrere Seiten existieren. -->
<link rel="prev" href="https://example.com/?page=1">
<link rel="next" href="https://example.com/?page=3">
Übersetzungen
Die Front-End Checkliste ist auch in anderen Sprachen verfügbar! Vielen Dank an alle Übersetzer für eure fantastische Arbeit!
- 🇯🇵 Japanisch: miya0001/Front-End-Checklist
- 🇪🇸 Spanisch: eoasakura/Front-End-Checklist-ES
- 🇨🇳 Chinesisch: JohnsenZhou/Front-End-Checklist
- 🇰🇷 Koreanisch: kesuskim/Front-End-Checklist
- 🇧🇷 Portugiesisch: jcezarms/Front-End-Checklist
- 🇻🇳 Vietnamesich: euclid1990/Front-End-Checklist
- 🇹🇼 Traditionales Chinesisch: EngineLin/Front-End-Checklist
- 🇫🇷 Französisch: ynizon/Front-End-Checklist
- 🇷🇺 Russisch: ungear/Front-End-Checklist
- 🇹🇷 Türkisch: eraycetinay/Front-End-Checklist
- German: xfuture603/Front-End-Checklist
Front-End Checklist Abzeichen
Wenn du zeigen möchtest, dass du den Regeln der Front-End Checklist folgst - setze dieses Abzeichen in deine README Datei.
➔
[](https://github.com/thedaviddias/Front-End-Checklist/)
Mitwirken
Eröffne ein issue oder einen pull request um auf Änderungen oder Ergänzungen hinzuweisen.
Anleitung
Das Front-End Checklist repository besteht aus zwei branches:
1. master
Dieser branch besteht aus einer README.md Datei, welche automatisch auf der Front-End Checklist Webseite reflektiert wird.
2. develop
Dieser branch wird genutzt um erhebliche Änderungen in der Struktur vorzunehmen, sollte es benötigt werden. Es wäre wünschenswert, den master branch zu nutzen um kleine Fehler zu beheben, oder ein neuen Punkt hinzuzufügen.
Unterstützung
Solltest du Fragen oder Vorschläge haben, zögere nicht Gitter oder Twitter zu nutzen.
Autoren
Mitwirkende
Dieses Projekt existiert durch alle Mitwirkenden. Danke!. [Contribute]. <a href="https://github.com/thedaviddias/Front-End-Checklist/graphs/contributors"><img src="https://opencollective.com/front-end-checklist/contributors.svg?width=890" /></a>
Backers
Danke an all unsere backers! 🙏 [Werde ein backer]
<a href="https://opencollective.com/front-end-checklist#backers" target="_blank"><img src="https://opencollective.com/front-end-checklist/backers.svg?width=890"></a>
Sponsoren
Unterstütze dieses Projekt, indem du ein Sponsor wirst. Dein Logo wird hier gezeigt mit einer Verlinkung zu deiner Webseite. [Become a sponsor]
<a href="https://opencollective.com/front-end-checklist/sponsor/0/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/0/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/1/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/1/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/2/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/2/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/3/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/3/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/4/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/4/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/5/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/5/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/6/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/6/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/7/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/7/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/8/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/8/avatar.svg"></a> <a href="https://opencollective.com/front-end-checklist/sponsor/9/website" target="_blank"><img src="https://opencollective.com/front-end-checklist/sponsor/9/avatar.svg"></a>
Lizenz
