Giters

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

Das Front-End Checklist ist eine vollständige Liste aller wichtigen Elemente, die Sie für die Erstellung Ihrer Website / HTML-Seite benötigen.

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 der jahrelangen Erfahrung aus Frontend-Entwicklung, wobei die Ergänzungen aus einigen anderen Open-Source Checklisten stammen.

Sponsor

Inhaltsverzeichnis

  1. Head
  2. HTML
  3. Webfonts
  4. CSS
  5. Images
  6. JavaScript
  7. Security
  8. Performance
  9. Accessibility
  10. SEO
  11. Translations

Wie nutze ich die Checkliste?

Alle Elemente in der Front-End-Checkliste werden für die meisten Projekte benötigt, aber einige Elemente können weggelassen werden oder sind nicht zwingend erforderlich (im Falle einer Administrations-Webanwendung benötigen Sie z.B. keinen RSS-Feed). Wir entschieden uns für 3 Flexibilitätsstufen:

  • Low Niedrig bedeutet, dass der Artikel empfohlen ist, aber in bestimmten Situationen weggelassen werden kann..
  • Medium Mittel bedeutet, dass der Artikel hoch empfohlen ist und in einigen wirklich besonderen Fällen eventuell weggelassen werden kann. Einige Elemente, wenn sie weggelassen werden, können sich negativ auf die Performance oder SEO auswirken.
  • High Hoch bedeutet, dass das Element aus einem bestimmten Grund nicht weggelassen werden kann. Sie können eine Funktionsstörung auf Ihrer Seite verursachen oder Probleme mit der Erreichbarkeit oder der Suchmaschinenoptimierung bewirken. Die Priorität beim testen muss sich zunächst auf diese Elemente beziehen.

Für einige Ressourcen benutzen wir folgende Emoticon:

  • 📖: Dokumentation oder Artikel
  • 🛠: Online-/ Test-Hilfen
  • 📹: Medien oder Video Inhalte

You can contribute to the Front-End Checklist App reading the README_APP file which explain everything about the project.

Head

Anmerkung: Hier finden Sie eine Liste von allem, die Sie im <head> eines HTML-Dokuments finden können.

Meta tag

  • Doctype: High In HTML5 ist der Doctype eine erforderliche Präambel und steht ganz oben auf allen Ihren HTML-Seiten.
<!doctype html> <!-- HTML5 -->

Die nächsten 3 Meta-Tags (Charset, X-UA Compatible und Viewport) müssen an erster Stelle im Head stehen.

  • Charset: High Der Zeichensatz (UTF-8) ist korrekt deklariert.
<!-- Set character encoding for the document -->
<meta charset="utf-8">
  • X-UA-Compatible: Medium Das X-UA-kompatible Meta-Tag ist vorhanden.
<!-- Instruct Internet Explorer to use its latest rendering engine -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
  • Viewport: High Das Viewport ist korrekt deklariert.
<!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  • Titel: High Ein Titel wird auf allen Seiten verwendet (SEO: Google berechnet die Pixelbreite der im Titel verwendeten Zeichen und schneidet zwischen 472 und 482 Pixel ab. Das durchschnittliche Zeichenlimit liegt bei ca. 55 Zeichen).
<!-- Document Title -->
<title>Seitentitel sollte e´weniger als 55 Zeichen haben</title>
  • Beschreibung: High Eine Meta-Beschreibung wird mitgeliefert, ist eindeutig und hat nicht mehr als 150 Zeichen.
<!-- Meta Description -->
<meta name="description" content="Beschreibung der Seite mit weniger als 150 Zeichen.">
  • Favicons: Medium Jedes Favicon wurde erstellt und wird korrekt angezeigt. Wenn Sie nur ein favicon.ico haben, legen Sie es unter das Hauptverzeichnis Ihrer Website an. Normalerweise brauchen Sie kein Markup zu verwenden. Es ist jedoch immer noch eine gute Praxis, einen Link mit dem untenstehenden Beispiel zu erstellen. Heute wird das **PNG-Format gegenüber dem `.ico'-Format (Abmessungen: 32x32px) empfohlen.
<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Recommended 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 (at least 200x200px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">

<!-- To run web application in full-screen -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Status Bar Style (see Supported Meta Tags below for available values) -->
<!-- Has no effect unless you have the previous meta tag -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
  • Windows Tiles: Low Windows tiles sind vorhanden und verlinkt.
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />

Die minimal erforderliche XML-Markup für die Datei browserconfig.xml ist 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>
  • Canonical: Medium Verwenden Sie rel="canonical" um doppelte Inhalte zu vermeiden.
<!-- Hilft um doppelte Inhalte zu vermeiden -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">

HTML tags

  • Sprachattribute: High Das lang Attribut Ihrer Website ist spezifiziert und bezieht sich auf die Sprache der aktuellen Seite.
<html lang="en">
  • Richtungsattribut: Medium Die Richtung der Lesung wird auf dem HTML-Tag angegeben (es kann auch auf einem anderen HTML-Tag verwendet werden).
<html dir="rtl">
  • Alternative Sprache: Low Das Sprach-Tag Ihrer Website ist spezifiziert und bezieht sich auf die Sprache der aktuellen Seite.
<link rel="alternate" href="https://es.example.com/" hreflang="es">
  • Bedingte Kommentare: Low Bedingte Kommentare sind für IE (Internet Explorer) vorhanden, falls Sie es benötigen.

  • RSS feed: Low Wenn es sich bei Ihrem Projekt um einen Blog oder Artikel handelt, wurde ein RSS-Link bereitgestellt.

  • Inline kritisches CSS: Medium CSS, das Inhalte formatiert, die während des Seitenaufrufs sofort sichtbar sind ("above the fold content"), wird als " kritisches CSS " bezeichnet. Es ist eingebettet vor dem eigentlichen CSS-Aufruf und zwischen <style></style></style> in einer einzigen Zeile (minified).

  • CSS Reihenfolge: High Alle CSS-Dateien werden vor allen JavaScript-Dateien im <head> geladen. (Ausgenommen ist der Fall, dass manchmal JS-Dateien asynchron am Anfang der Seite geladen werden).

Soziale Meta

Die beiden Facebook OG und Twitter Cards sind für jede Website sehr empfehlenswert. Die anderen Social-Media-Tags können in Betracht gezogen werden, wenn Sie eine bestimmte Präsenz gezielt ansprechen und die Anzeige sicherstellen wollen.

  • Facebook Open Graph: Low Alle Facebook Open Graph (OG) sind getestet und beinhalten keine fehlenden oder falschen Informationen. Bilder müssen mindestens 600 x 315 Pixel groß sein, jedoch wird die Größe 1200 x 630 Pixel empfohlen.

Anmerkung: Durch die Verwendung von og:image:width und og:image:height werden die Bildabmessungen an den Crawler übergeben, so dass er das Bild sofort rendern kann, ohne es asynchron herunterladen und verarbeiten zu müssen.

<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">
<!-- Next tags are optional but recommended -->
<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">

⬆ back to top

HTML

Empfohlene Vorgehensweise

  • HTML5 Semantische Elemente: High HTML5 Semantische Elemente werden entsprechend verwendet (Header, Section, Footer, Main...).

  • Fehlerseiten: High Es existieren 404 und 5xx Fehlerseiten. Denken Sie daran, dass die 5xx-Fehlerseiten ihr CSS integriert haben müssen (kein externer Aufruf auf dem aktuellen Server).

  • Noopener: Medium Falls Sie externe Links mit target="_blank"verwenden, sollte Ihr Link ein rel="noopener"-Attribut haben, um Tabulatoren zu verhindern. Wenn Sie ältere Versionen von Firefox unterstützen müssen, verwenden Sie rel="noopener noreferrer".

  • Kommentare bereinigen: Low Unnötiger Code muss entfernt werden, bevor die Seite an die Online gestellt wird / in die Produktion geht.

HTML testing

  • W3C konform: High Alle Seiten müssen mit dem W3C-Validator getestet werden, um mögliche Probleme im HTML-Code zu identifizieren.
  • HTML Lint: High Ich benutze Tools, die mir helfen, Probleme mit meinem HTML-Code zu analysieren.
  • Link überprüfen: High Es gibt keine defekten Links auf meiner Seite, vergewissern Sie sich, dass Sie keinen 404-Fehler haben.
  • Adblockers test: Medium Ihre Website zeigt Ihren Inhalt korrekt mit aktivierten Adblockern an (Sie können eine Nachricht senden, die Leute dazu anregt, ihren Adblocker zu deaktivieren.

⬆ back to top

Webfonts

Anmerkung: Die Verwendung von Webfonts kann dazu führen, dass folgendes Problem auftauchT: Flash Of Unstyled Text/Flash Of Invisible Text - erwägen Sie, Fallback-Fonts und/oder Webfont-Loader zu verwenden, um das Problem zu vermeiden.

  • Webfont Formate: High WOFF, WOFF2 und TTF werden von allen modernen Browsern unterstützt.

  • Webfont Größe: High Die Größe der Webfonts überschreiten nicht 2 MB (inklusiver aller Varianten).

  • Webfont Loader: Low Kontrollieren Sie das Ladeverhalten von Webfonts mit einem Webfont Loader.

⬆ back to top

CSS

Anmerkung: Werfen Sie einen Blick auf CSS-Richtlinien und Sass-Richtlinien, welches von den meisten Frontend Entwicklern genutzt wird. Wenn Sie nicht sicher über CSS-Eigenschaften sind, können Sie auch [CSS-Referenz] (http://cssreference.io/) besuchen. Es gibt auch einen kurzen [Code Guide] (http://codeguide.co/) über Konsistenz.

  • Responsive Web Design: High Die Website verwendet responsive Webdesign.
  • CSS Print: Medium Ein Druck-Stylesheet wird mitgeliefert und ist auf jeder Seite korrekt.
  • Preprocessors: Low Ihr Projekt verwendet einen CSS-Präprozessor.
  • Unique ID: High Wenn IDs verwendet werden, sind sie eindeutig für eine Seite.
  • Reset CSS: High Ein CSS-Reset (Reset, Normalize oder Reboot) wird verwendet und ist aktuell. (Wenn Sie ein CSS-Framework wie Bootstrap oder Foundation verwenden, ist eine Normalisierung bereits enthalten.)
  • JS prefix: Low Alle Klassen (oder id-, die in JavaScript-Dateien verwendet werden) beginnen mit js- und werden nicht in die CSS-Dateien gestylt.
<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">
  • Eingebettet oder Inline-CSS: High Vermeiden Sie unbedingt die Einbettung von CSS in <style>-Tags oder die Verwendung von Inline-CSS: Verwenden Sie CSS nur aus triftigen Gründen (z.B. Hintergrundbild für Slider, kritisches CSS).
  • Vendor prefixes: High Es werden CSS-Herstellerpräfixe verwendet, die entsprechend der Kompatibilität mit Ihrem Browser generiert werden.

Performance

  • Concatenation: High CSS-Dateien werden in einer einzigen Datei zusammengefasst (Not for HTTP/2).
  • Minification: High Alle CSS Dateien sind minified.
  • Non-blocking: Medium CSS-Dateien müssen nicht blockiert werden, um zu verhindern, dass das DOM Zeit zum Laden benötigt.
  • Nicht genutztes CSS: Low Entfernen Sie nicht genutztes CSS.

CSS testen

  • Stylelint: High Alle CSS- oder SCSS-Dateien sind fehlerfrei.

  • Responsive web design: High Alle Seiten wurden an den folgenden Breakpoints getestet: 320px, 768px, 1024px (kann je nach Analyse mehr / anders sein).

  • CSS Validator: Medium Das CSS wurde getestet und entsprechende Fehler wurden korrigiert.

  • Desktop Browsers: High Alle Seiten wurden mit allen gängigen Desktop-Browsern (Safari, Firefox, Chrome, Internet Explorer, EDGE...) getestet.
  • Mobile Browsers: High Safari...) getestet.
  • [ [ � [ ª OS: ! !Alle Seiten wurden auf allen gängigen Betriebssystemen (Windows, Android, iOS, Mac...) getestet.
  • Pixel perfect: High Die Seiten sind nahezu pixelgenau. Abhängig von der Qualität der Kreativen, können Sie nicht 100% genau sein, sollten jedoch der Vorgabe sehr nahe liegen.

Pixel Perfect - Chrome Extension

  • Leserichtung: High Alle Seiten müssen auf LTR- und RTL-Sprachen getestet werden, wenn sie unterstützt werden sollen.

⬆ back to top

Images

Anmerkung: Für ein vollständiges Verständnis der Bildoptimierung, überprüfen Sie das kostenlose eBook Essential Image Optimization von Addy Osmani.

Empfohlene Vorgehensweise

  • Optimierung: High All images are optimized to be rendered in the browser. WebP format could be used for critical pages (like Homepage).
  • 🛠 Imagemin
  • 🛠 Use ImageOptim to optimise your images for free.
  • 🛠 Use Kraken.io awesome alternative for both png and jpg optimization. Up to 1mb per files on free plan.
  • 🛠 TinyPNG losslessly optimise png, apng (animated png) and jpg images. Free and paid version available.
  • 🛠 ZorroSVG jpg-like compression for transparent images using svg masking.
  • 🛠 SVGO a Nodejs-based tool for optimizing SVG vector graphics files.
  • 🛠 SVGOMG a web-based GUI version of SVGO for optimising your svgs online.
  • Picture/Srcset: Medium Sie verwenden picture/srcset, um das am besten geeignete Bild für das aktuelle Ansichtsfenster des Benutzers bereitzustellen.
  • Retina: Low Sie stellen Layoutbilder 2x oder 3x zur Verfügung, unterstützen Retina-Darstellung.
  • Sprite: Medium Kleine Bilder befinden sich in einer Sprite-Datei (im Falle von Icons können sie in einem SVG-Sprite-Bild sein).
  • Breite und Höhe: High Setzen Sie die Attribute width und height auf <img>, wenn die endgültige Größe des gerenderten Bildes bekannt ist (kann bei der CSS-Größe weggelassen werden).
  • Alternativer Text: High Alle <img> haben einen alternativen Text, der das Bild visuell beschreibt.
  • Lazy loading: Medium Bilder sind lazyloaded (Ein noscript Fallback wird immer zur Verfügung gestellt).

⬆ back to top

JavaScript

Empfohlene Vorgehensweise

  • JavaScript Inline: High Sie haben keinen JavaScript-Code inline (gemischt mit Ihrem HTML-Code).
  • Concatenation: High JavaScript-Dateien werden zusammengefügt.
  • Minification: High JavaScript-Dateien werden verkleinert (Sie können das Suffix .min hinzufügen).
  • JavaScript Security: High
  • noscript tag: Medium Verwenden Sie den <noscript>-Tag im HTML-Body, wenn ein Skripttyp auf der Seite nicht unterstützt wird oder wenn das Skripting im Browser deaktiviert ist. Dies ist hilfreich beim Rendern schwerer Anwendungen wie React.js auf der Client-Seite, siehe Beispiele.
<noscript>
  Sie müssen JavaScript aktivieren um diese Seite anzeigen zu lassen.
</noscript>
  • Non-blocking: Medium JavaScript-Dateien werden asynchron mit async oder verzögert mit defer-Attribut geladen.
  • Modernizr: Low Wenn Sie einige spezifische Funktionen benötigen, können Sie ein benutzerdefiniertes Modernizr verwenden, um Klassen in Ihrem <html>-Tag hinzuzufügen.

JavaScript testen

  • ESLint: High ESLint kennzeichnet keine Fehler (basierend auf Ihren Konfigurations- oder Standardregeln).

⬆ back to top

Security

Scanne und überprüfe deine Webseite

Empfohlene Vorgehensweise

  • HTTPS: Medium HTTPS wird auf allen Seiten und für alle externen Inhalte (Plugins, Bilder...) verwendet.
  • HTTP Strict Transport Security (HSTS): Medium Der HTTP-Header ist auf 'Strict-Transport-Security' gesetzt.
  • Cross Site Request Forgery (CSRF): High Sie stellen sicher, dass die Anfragen an Ihre Server-Seite legitim sind und von Ihrer Website / App stammen, um CSRF-Angriffe zu verhindern.
  • Cross Site Scripting (XSS): High Ihre Seite oder Website ist frei von XSS möglichen Problemen.
  • Content Type Optionen: Medium Verhindert, dass Google Chrome und Internet Explorer versuchen, den Content-Type einer Antwort außerhalb des vom Server deklarierten Content-Typs zu mimen.
  • X-Frame-Options (XFO): Medium Schützt Ihre Besucher vor Clickjacking-Angriffen.
  • Content Security Policy: Medium Definiert, wie Inhalte auf Ihrer Website geladen werden und von wo aus sie geladen werden dürfen. Kann auch zum Schutz vor Clickjacking-Angriffen verwendet werden.

⬆ back to top

Performance

Empfohlene Vorgehensweise

  • Seitengröße: High Die Größe der Seite liegt zwischen 0 und 500 KB.

  • Minified HTML: Medium Ihr HTML ist verkleinert.

  • Lazy loading: Medium Bilder, Skripte und CSS müssen nachträglich geladen werden, um die Antwortzeit der aktuellen Seite zu verbessern (siehe Details in den jeweiligen Abschnitten).

  • Cookiegröße: Medium Wenn Sie Cookies verwenden, stellen Sie sicher, dass jedes Cookie nicht mehr als 4096 Bytes und Ihr Domainname nicht mehr als 20 Cookies enthält.

  • Komponenten von Drittanbietern: Medium iFrames von Drittanbietern oder Komponenten, die auf externe JS (wie z.B. Freigabeschaltflächen) angewiesen sind, werden nach Möglichkeit durch statische Komponenten ersetzt, wodurch Aufrufe an externe APIs eingeschränkt werden und die Aktivitäten Ihrer Benutzer privat bleiben.

Vorbereitung anstehender Anfragen

  • DNS Resolution: Low DNS-Dienste von Drittanbietern, die eventuell benötigt werden, werden vorab während der Leerlaufzeit mit Hilfe von dns-prefetch aufgelöst.
<link rel="dns-prefetch" href="https://example.com">
  • Preconnection: Low DNS-Lookup, TCP-Handshake und TLS-Verhandlungen mit Diensten, die bald benötigt werden, werden im Voraus während der Leerlaufzeit mit preconnect durchgeführt.
<link rel="preconnect" href="https://example.com">
  • Prefetching: Low Ressourcen, die demnächst benötigt werden (z.B. Bilder mit langer Ladezeit), werden vorab während der Leerlaufzeit mit prefetch angefordert.
<link rel="prefetch" href="image.png">
  • Preloading: Low Ressourcen, die in der aktuellen Seite benötigt werden (z.B. Skripte, die am Ende von <body> platziert werden), werden vorab mit preload geladen.
<link rel="preload" href="app.js">

Performance testen

  • Google PageSpeed: High Alle Ihre Seiten wurden getestet (nicht nur die Homepage) und haben eine Punktzahl von mindestens 90/100.

⬆ back to top

Zugänglichkeit

Anmerkung: Sie können folgende Playlist sich anschauen: A11ycasts with Rob Dodson 📹

Empfohlene Vorgehensweise

  • Progressive Verbesserung: Medium Wichtige Funktionen wie Hauptnavigation und Suche sollten ohne aktiviertes JavaScript funktionieren.
  • Farbkontrast: Medium Der Farbkontrast sollte mindestens WCAG AA (AAA für Mobiltelefone) passieren.

Überschriften

  • H1: High Alle Seiten haben eine H1, die nicht der Titel der Webseite ist.
  • Überschriften: High Überschriften sollten richtig und in der richtigen Reihenfolge (H1 bis H6) verwendet werden.

Landmarks

  • Role banner: High <header> has role="banner".
  • Role navigation: High <nav> has role="navigation".
  • Role main: High <main> has role="main".

Semantik

  • Es werden spezifische HTML5-Eingabetypen verwendet: Medium Dies ist besonders wichtig für mobile Geräte, die kundenspezifische Tastaturen und Widgets für verschiedene Typen anzeigen.

Formulare

  • Label: High Jedem Eingabeformular-Element ist ein Label zugeordnet. Falls ein Label nicht angezeigt werden kann, verwenden Sie stattdessen aria-label.

Zugänglichkeit testen

  • Accessibility standards testing: High Verwenden Sie das WAVE-Tool, um zu testen, ob Ihre Seite die Standards für Zugänglichkeit erfüllt.
  • Keyboard Navigation: High Testen Sie Ihre Website mit nur Ihrer Tastatur in keiner festen Reihenfolge. Alle interaktiven Elemente sind erreichbar und nutzbar.
  • Screen-reader: Medium Alle Seiten wurden in einem Screenreader (VoiceOver, ChromeVox, NVDA oder Lynx) getestet.
  • Focus style: High Wenn der Fokus deaktiviert ist, wird er durch den sichtbaren Zustand in CSS ersetzt.

⬆ back to top

SEO

  • Google Analytics: High Google Analytics ist installiert und korrekt konfiguriert.
  • Logik der Überschriften: Medium Überschriftentext hilft, den Inhalt der aktuellen Seite zu verstehen.
  • sitemap.xml: High Es existiert eine Sitemap.xml, die an die Google Search Console (früher Google Webmaster Tools) übermittelt wurde.
  • robots.txt: High Robots.txt blockiert nicht die Webseite.
  • Strukturierte Daten: High Seiten mit strukturierten Daten werden getestet und sind fehlerfrei. Strukturierte Daten helfen Crawlern, den Inhalt der aktuellen Seite zu verstehen.
  • Sitemap HTML: Medium Eine HTML-Sitemap wird mitgeliefert und ist über einen Link in der Fußzeile Ihrer Website zugänglich.
  • Seitenumbruch-Link-Tags: Medium Geben Sie rel="prev" und rel="next" an, um paginierte Inhalte anzuzeigen.
<!-- Example: Pagination link tags for page 2 of a paginated list -->
<link rel="prev" href="https://example.com/?page=1">
<link rel="next" href="https://example.com/?page=3">

⬆ back to top

Übersetzungen

Die Frontend-Checkliste ist auch in anderen Sprachen verfügbar. Vielen Dank für alle Übersetzer und ihre großartige Arbeit!

Front-End Checklist Badge

Wenn du zeigen willst, dass du die Regeln der Front-End-Checkliste befolgst, dann trage diesen Badge in deine README-Datei ein!

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

⬆ back to top

Contributing

Open an issue or a pull request to suggest changes or additions.

Guide

The Front-End Checklist repository consists of two branches:

1. master

This branch consists of the README.md file that is automatically reflected on the Front-End Checklist website.

2. develop

This branch will be used to make some significant changes to the structure, content if needed. It is preferable to use the master branch to fix small errors or add a new item.

Support

If you have any question or suggestion, don't hesitate to use Gitter or Twitter:

Author

David Dias

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

License

CC0

⬆ back to top

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 39.2%Language:CSS 36.6%Language:HTML 24.1%