Giters

xFuture603 / Front-End-Checklist

🗂 The perfect Front-End Checklist for modern websites and meticulous developers

Home Page:https://frontendchecklist.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Front-End Checklist Logo

Front-End Checklist

Die Front-End Checklist ist eine gründlich erstellte liste von sämtlichen Elementen, welche du benötigst / um deine Seite/HTML Seite vor dem produktiven Start zu testen.

Join the chat at https://gitter.im/Front-End-Checklist/Lobby Front‑End_Checklist followed Backers on Open Collective Sponsors on Open Collective Contributors StackShare CC0

Diese Liste basiert auf jahrelanger Erfahrung von Front-End Entwicklern und einigen Zusätzen aus anderen Open Source Checklisten.

Inhaltsverzeichnis

  1. Head
  2. HTML
  3. Webfonts
  4. CSS
  5. Bilder
  6. JavaScript
  7. Sicherheit
  8. Leistung
  9. Zugänglichkeit
  10. 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:

  • Low bedeutet, dass es empfohlen wird, jedoch kann es in speziellen Situationen weggelassen werden.
  • Medium 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.
  • High 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: High 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: High Das charset (UTF-8) ist richtig angegeben worden.
<!-- Set character encoding for the document -->
<meta charset="utf-8">
  • X-UA-Compatible: Medium 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: High Das Ansichtsfenster ist korrekt deklariert.
<!-- Ansichtsfenster für responsives Webdesign -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  • Titel: High 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: High 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: Medium Jedes favicon wurde erstellt und korrekt angezeigt. Wenn du nur ein favicon.ico hast, 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 .ico Formatierung 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: Low 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: Low 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: Medium 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: High Das lang Attribut deiner Webseite ist spezifiziert und verbunden mit der derzeitigen Seite.
<html lang="en">
  • dir Attribut/Direction attribute: Medium 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: Low 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: Low Bedingte Kommentare sind vorfindlich für den IE, falls benötigt.

  • RSS feed: Low Wenn dein Projekt ein Blog ist, oder diverse Artikel besitzt, kann man es mit einem RSS Link ausstatten.

  • Kritischer Pfad/CSS Critical: Medium 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).

  • CSS Reihenfolge/CSS order: High 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: Low 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:width und og:image:height spezifiziert 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">
  • Twitter Card: Low
<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">

⬆ Zurück zum Anfang

HTML

Best practices/Erfolgsmethode

  • HTML5 Semantische Elemente: High Semantische Elemente in HTML5, werden passend genutzt (header, section, footer, main...).

  • Fehler Seiten/Error pages: High 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: Medium Im Falle, dass du externe Links mit target="_blank" nutzt sollte dein Link ein rel="noopener" Attribut besitzen um "tab nabbing" vorzubeugen. Solltest du ältere Versionen von Firefox supporten müssen, benutze rel="noopener noreferrer".

  • Aufräum Kommentare/Clean up comments: Low Unwichtiger Code muss entfernt werden, bevor die Seite zur Produktion übergeht.

HTML testing

  • W3C konform: High Jede Seite muss mit dem W3C Validierer getestet werden, um mögliche Fehler im HTML Code festzustellen.
  • HTML Lint: High Ich nutze Tools, welche mir helfen diverse Fehler in meinem HTML Code zu finden.
  • Link checker: High Es sind keine kaputten Links auf meiner Seite. So stelle ich sicher, dass keine 404 Errors geworden werden.
  • Adblockers Test: Medium 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).

⬆ Zurück zum Anfang

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: High WOFF, WOFF2 und TTF werden von allen modernen Browsern unterstützt.

  • Webfont Größe/webfont size: High Webfonts dürfen die Größe von 2 MB nicht überschreiten (Alle Varianten inbegriffen)

  • Webfont Lader/webfont loader: Low Kontrolliere das Ladeverhalten mit einem "webfont loader"

⬆ Zurück zum Anfang

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: High Die Webseite benutzt responsives Web Design.
  • CSS Print: Medium Es existiert ein "print stylesheet", welcher korrekt auf jeder Seite ist.
  • Präprozessor/Preprocessors: Low Dein Projekt nutzt einen CSS Präprozessor
  • Einzigartige ID's/Unique ID: High Solltest du ID's nutzen, sind diese einzigartig zur Seite
  • Reset CSS: High 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)
  • JS prefix: Low 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: High 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: High Es werden CSS-Herstellerpräfixe verwendet, die entsprechend der Kompatibilität mit Ihrem Browser generiert werden.

Performanz

  • Verknüpfung/Concatenation: High CSS Dateien sind in einer einzelnen Datei verknüpft (gilt nicht für HTTP/2).
  • Minimierungen/Minification: High Alle Dateien sind minimiert.
  • Non-blocking: Medium CSS Dateien müssen non-blocking sein, um zu verhindern das der DOM Zeit zum laden benötigt
  • Ungenutztes/Unused CSS: Low Entferne ungenutztes CSS.

CSS testing

  • Stylelint: High Alle CSS oder SCSS Dateien haben keine Fehler.

  • Responsives/Responsive web design: High 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: Medium Der CSS Code wurde getestet und alle relevanten Fehler wurden beseitigt

  • Desktop Browsers: High Alle Seiten wurden in den derzeitig aktuellen Desktop Browsern getestet (Safari, Firefox, Chrome, Safari...).
  • Mobile Browsers: High Alle Seiten wurden in den derzeitig aktuellen mobilen Browsern getestet (Native browser, Chrome, Safari...).
  • OS: High Alle Seiten wurden auf allen derzeitigen OS getestet (Windows, Android, iOS, Mac...).
  • Pixel perfect: High 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.

Pixel Perfect - Chrome Extension

  • Leserichtung/Reading direction: High Alle Seiten sollten auf LTR und RTL Sprachen getestet werden, wenn man sie unterstützen muss.

⬆ Zurück zum Anfang

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: High 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: Medium Nutze picture/srcset um das bestmöglichste Bild auf den derzeitigen "viewport" des Users anbieten zu können.
  • Retina: Low Biete dem Nutzer Layoutbilder 2x oder 3x an, welche Retina Display supporten.
  • Sprite: Medium 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: High Setze width und height Attribute in<img>, wenn die finale Größe des Bildes bekannt ist.(Kann für CSS Größenbestimmung weggelassen werden).
  • Alternativer Text/Alternative text: High Alle <img> Tags haben einen alternativen Text, welche das Bild visuell beschreiben
  • Lazy loading: Medium Bilder werden "lazyloaded" (Also erst bei konkreter Anfrage aus der Datenquelle geholt). Eine "noscript" Variante sollte stets dabei sein.

⬆ Zurück zum Anfang

JavaScript

Optimale Vorgehensweise/Best practices

  • JavaScript Inline: High Du hast keinen Javascript mit deinem HTML Code vermischt
  • Concatenation: High JavaScript Dateien sind verknüpft miteinander.
  • Minification: High JavaScript Dateien wurden minified (Du kannst den .min Suffix dafür benutzen).
  • JavaScript Sicherheit/JavaScript security: High
  • noscript tag: Medium 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: Medium JavaScript Dateien werden asynchron geladen mit async oder verzögert mit dem defer Tag.
  • Modernizr: Low Wenn du eine spezielle Funktion aufzeigen möchtest, kannst du ein benutzerdefinierten Modernizr in deinem <html> Tag benutzen.

JavaScript testen/JavaScript testing

  • ESLint: High Es werden keine Fehler von ESLint angezeigt (basierend auf deiner Konfiguration, oder deinen Standart Einstellungen).

⬆ Zurück zum Anfang

Sicherheit/Security

Scan und überprüfe deine Webseite/Scan and check your web site

Optimale Vorgehensweise/Best practices

  • HTTPS: Medium HTTPS wird auf jeder Seite genutzt, auch für allen externen Inhalt (Plugins, Bilder...).
  • HTTP/HTTP Strict Transport Security (HSTS): Medium Der HTTP Header ist auf 'Strict-Transport-Security' gesetzt.
  • Webseiten-übergreifende Anfragenfälschung/Cross Site Request Forgery (CSRF): High 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): High Deine Seite oder deine Webseite ist frei von XSS möglichen Problemen.
  • Content Type Options: Medium Beugt vor, dass bspw. Google Chrome, oder der Internet Explorer mit der MIME-Sniff Methode an unerwünschte Inhalte herankommen.
  • X-Frame-Options (XFO): Medium Schützt deine Besucher vor "clickjacking" Attacken.
  • Content Security Policy: Medium 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.

⬆ Zurück zum Anfang

Performanz/Performance

Optimale Vorgehensweise/Best practices

  • Seitengröße/Page weight: High Die Speichergröße jeder Seite liegt zwischen 0 und 500 KB.

  • Minimales HTML/Minified HTML: Medium Dein HTML Code wurde "minified".

  • Lazy loading: Medium Bilder, Skripts und CSS müssen leicht ladbar sein, um die Wartezeit der aktuellen Seite zu verkürzen.

  • Cookie size: Medium 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: Medium 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: Low 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: Low 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: Low 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: Low Resources needed in the current page (e.g. scripts placed at the end of <body>) in advance using preload.
<link rel="preload" href="app.js">

Performanz Tests/Performance testing

  • Google Seitengeschwindigkeit/Google PageSpeed: High Alle deiner Seiten wurden getestet (nicht nur die Homepage) und haben mindestens ein Ergebnis von 90/100.

⬆ Zurück zum Anfang

Erreichbarkeit/Accessibility

Information: Du kannst dir diese Playlist anschauen: A11ycasts mit Rob Dodson 📹

Optimale Vorgehensweise/Best practices

  • Andauernde Verbesserung/Progressive enhancement: Medium Hauptfunktionsbereiche wie die Hauptnavigation, oder die Suche sollten funktionieren, wenn JavaScript deaktiviert wurde.
  • Farbkontrast/Color contrast: Medium Farben sollten mindestens WCAG AA (AAA für Mobile Geräte) bestehen.

Überschriften/Headings

  • H1: High Alle Seiten haben eine H1, welche nicht der Titel der Webseite ist.
  • Überschriften/Headings: High Überschriften sollten geeignet und in der richtigen Reihenfolge genutzt werden (H1 zu H6).

Landmarks

  • Rolle Banner/Role banner: High <header> hat role="banner".
  • Rolle Navigation/Role navigation: High <nav> hat role="navigation".
  • Rolle Main/Role main: High <main> hat role="main".

Semantik/Semantics

  • Spezifische HTML5 Input Typen werden genutzt/Specific HTML5 input types are used: Medium Das ist besonders wichtig für Mobile Endgeräte, welche angepasste Keypads oder Widgets verschiedenster Arten benutzen.

Form

  • Label: High 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: High Nutze das WAVE tool um zu testen, ob deine Seite alle Standart Tests einhält.
  • Tastatursteuerung/Keyboard navigation: High Teste deine Webseite, indem du nur deine Tastatur benutzt. Es sollten alle interaktiven Elemente ansteuerbar und nutzbar sein.
  • Vorlese Anwendung/Screen-reader: Medium Alle Seiten wurden mit einer Vorlese Anwendung getestet (VoiceOver, ChromeVox, NVDA oder Lynx).
  • Focus style: High Sollte der Fokus/focus deaktiviert sein, replatziere es mit sichtbar festgelegtem CSS:

⬆ Zurück zum Anfang

SEO

  • Google Analytics: High Google Analytics wurde installiert und korrekt konfiguriert.
  • Überschriftenlogik/Headings logic: Medium Überschriftentext hilft den Kontext der aktuellen Seite besser zu verstehen.
  • sitemap.xml: High Eine sitemap.xml existiert und wurde bei Google Search Console eingereicht (früher Google Webmaster Tools).
  • robots.txt: High Die robots.txt blockiert keine Webseiten.
  • Strukturierte Daten/Structured Data: High Seiten, welche strukturierte Daten nutzen - wurden getestet und besitzen keine Fehler. Strukturierte Daten helfen "web crawlern", den Inhalt der Seite besser zu verstehen.
  • Sitemap HTML: Medium Eine HTML sidemap existiert und ist über einen Link im footer deiner Webseite erreichbar.
  • Pagination link tags: Medium Biete rel="prev" und rel="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">

⬆ Zurück zum Anfang

Übersetzungen

Die Front-End Checkliste ist auch in anderen Sprachen verfügbar! Vielen Dank an alle Übersetzer für eure fantastische Arbeit!

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.

➔ Front‑End_Checklist followed

[![Front‑End_Checklist followed](https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/)

⬆ Zurück zum Anfang

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

David Dias

Mitwirkende

Dieses Projekt existiert durch alle Mitwirkenden. Danke!. [Contribute].

Backers

Danke an all unsere backers! 🙏 [Werde ein backer]

Sponsoren

Unterstütze dieses Projekt, indem du ein Sponsor wirst. Dein Logo wird hier gezeigt mit einer Verlinkung zu deiner Webseite. [Become a sponsor]

Lizenz

CC0

⬆ Zurück zum Anfang

About

🗂 The perfect Front-End Checklist for modern websites and meticulous developers

https://frontendchecklist.io

License:Creative Commons Zero v1.0 Universal

Languages

Language:JavaScript 38.7%Language:CSS 35.9%Language:HTML 25.4%