
Eine Liste der Open-Source-Front-End-Tools und -Ressourcen für Webdesigner und Entwickler.
| Name | Beschreibung |
|---|---|
| W3C -Standards | W3C -Standards definieren eine offene Webplattform für die Anwendungsentwicklung, die das beispiellose Potenzial hat, Entwicklern es zu ermöglichen, umfangreiche interaktive Erlebnisse aufzubauen, die von riesigen Datenspeichern aufgeteilt werden, die auf jedem Gerät verfügbar sind. |
| CSSDB | Eine umfassende Liste von CSS -Funktionen und ihre Positionen, um implementierte Webstandards zu werden. |
| MDN Web Docs | Ressourcen für Entwickler von Entwicklern. |
| Google -Webentwickler | Erstellen Sie die nächste Generation von Weberlebnissen. |
| W3schools | Online -Web -Tutorials. |
| CSS-Tricks | Tägliche Artikel über CSS, HTML, JavaScript und alle Dinge, die sich auf Webdesign und -entwicklung beziehen. |
| Smashing Magazine | Für Webdesigner und Entwickler. |
| Webglossary.info | Umfangreiches Glossar der Webentwicklung und der Designbegriffe. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| HTML5 -Kesselplatte | Die beliebteste Front-End-Vorlage des Webs. |
| Bootstrap | Bootstrap ist das beliebteste HTML-, CSS- und JS -Framework für die Entwicklung reaktionsschneller, mobiler erstes Projekt im Web. |
| Stiftung | Der fortschrittlichste reaktionsschnelle Front-End-Rahmen der Welt. |
| - - | - - |
| Base | Ein solides, reaktionsschnelles HTML/CSS -Framework. |
| Basscss | Low-Level-CSS-Toolkit. |
| Bulma | Ein modernes CSS -Framework basierend auf Flexbox. |
| Prägnanter Rahmen | Ein leichtes Front-End-Framework, das eine Reihe großartiger Funktionen ohne Aufblähen bietet. |
| Kardinal | Kardinal ist ein modulares CSS-Framework "Mobile" CSS, das unter Berücksichtigung von Leistung und Skalierbarkeit erstellt wurde. |
| Furtive CSS | Eine zukunftsorientierte CSS-Mikro-Framework. |
| Entsaftet | Ein Flexbox CSS -Framework. |
| Materialdesign Lite | Eine Implementierung von Materialdesignkomponenten in Vanille -CSS, JS und HTML |
| Materialisieren | Ein modernes reaktionsschnelles Front-End-Framework, das auf Materialdesign basiert. |
| Photon | Der schnellste Weg, um wunderschöne Elektronen -Apps mit einfachem HTML und CSS zu erstellen. |
| Primer CSS | Das Team von GitHub Design Systems baut und unterhält die Primer. |
| Rein | Eine Reihe kleiner, reaktionsschneller CSS -Module, die Sie in jedem Webprojekt verwenden können. |
| Reaktionsschnell | Ein leistungsstarker, zugänglicher, Entwicklerfreundlicher Rahmen für den Aufbau reaktionsschneller Websites. |
| Semantische UI | Ein Entwicklungsrahmen, das hilft, schöne, reaktionsschnelle Layouts mit menschlich-freundlicher HTML zu schaffen. |
| Skel | Ein leichtes Reaktionsgerüst für den WWW. |
| Skeleton | Eine tote einfache, reaktionsschnelle Kesselplatte. |
| Rückenwind -CSS | Ein Utility-First CSS-Framework zum schneller Aufbau von kundenspezifischen Designs. |
| Uikit | Ein leichtes und modulares Front-End-Framework zur Entwicklung schneller und leistungsstarker Webschnittstellen. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Onsen UI | Der schönste und effizienteste Weg, um HTML5 -Hybrid- und Mobile -Web -Apps zu entwickeln. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Formstein | Formstone ist eine Sammlung von Front -End -Komponenten. |
| Le Wagon UI -Komponenten | - - |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Bootstrap Starter | Kostenlose Bootstrap -Starter -Themen und Vorlagen, um Ihr Projekt zu starten. |
| HTML5 Blank WordPress -Thema | Das beste HTML5 -WordPress -Boilerplate -Thema, das von Adobe, Smashing Mag, .NET Mag. |
| Html5 up! | Responsive HTML5- und CSS3 -Standortvorlagen. |
| Start Bootstrap | Eine Bibliothek mit kostenlos zum Herunterladen von Bootstrap -Themen und Vorlagen. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Haml | HTML -Abstraktions -Markup -Sprache |
| Markdown | Ein Text-zu-HTML-Conversion-Tool für Webautoren. |
| Schlank | Ein leichtem Vorlagenmotor. |
| Jade | Knotenvorlage Engine. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| WENIGER | Node CSS Pre-Processor |
| Scss / sass | Die reifere, stabilste und leistungsstärkste CSS -Erweiterungssprache der Professional Grade Grade der Welt. |
| Stift | Ausdrucksstarker, dynamischer, robuster, merkmalreicher CSS-Präprozessor. |
| Postcss | Ein Werkzeug zur Transformation von CSS mit JavaScript. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Coffeescript | Eine kleine Sprache, die in JavaScript kompiliert. |
| Livescript | Eine Sprache, die JavaScript kompiliert. |
| Typoskript | JavaScript, der skaliert. |
| Babel | Der Compiler für das Schreiben der nächsten Generation JavaScript. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Bourbon | Eine einfache und leichte Mixinbibliothek für Sass. |
| Kompass | Ein Open-Source-CSS-Autorierungsrahmen. |
| Susy | Benutzerdefinierte Layout -Engine für SASS. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| NPM | Der Paketmanager für JavaScript. |
| - - | - - |
| Browserify | Die Browser-Seite require() den Knotenweg |
| Grunzen | Der JavaScript -Task -Läufer |
| Schluck | Das Streaming -Build -System |
| Paket | Blasing schnell, Null -Konfiguration Webanwendungsbundler. |
| Rollup | ES Modul Bundler der nächsten Generation. |
| Webpack | Ein Bundler für JavaScript und Freunde. |
| - - | - - |
| Eslint | Finden und beheben Sie Probleme in Ihrem JavaScript -Code. |
| Hübscher | Schöner ist ein merkwürdiger Codeformatierer. |
| Stiftung | Ein mächtiger, moderner Linter, der Ihnen hilft, Fehler zu vermeiden und Konventionen in Ihren Stilen durchzusetzen. |
| Commitlint | ? Lint begehen Nachrichten |
| Linkinator | Eine super einfache Site -Crawler und ein gebrochener Link -Checker. |
| - - | - - |
| Browsersync | Halten Sie beim Erstellen von Websites mehrere Browser und Geräte synchronisiert. |
| http-server | Ein einfacher HTTP-Server mit Nullkonfiguration. |
| Aufschlag | Statische Datei Serving- und Verzeichnisliste. |
| server.js | Einfacher und leistungsstarker Server für node.js |
| - - | - - |
| Chokidar | Ein effizienter Wrapper um node.js fs.watch / fs.watchfile / fSevents. |
| Nodemon | Überwachen Sie alle Änderungen in Ihrer Node.js -Anwendung und starten Sie den Server automatisch neu - perfekt für die Entwicklung. |
| aufchange | Verwenden Sie Glob -Muster, um Dateisätze anzuschauen, und führen Sie einen Befehl aus, wenn etwas hinzugefügt, geändert oder gelöscht wird. |
| - - | - - |
| Gleichzeitig | Befehle gleichzeitig ausführen. Wie npm run watch-js & npm run watch-less aber besser. |
| NPM-RUN-ALL | Ein CLI-Tool zum Ausführen mehrerer NPM-Skripte parallel oder sequentiell. |
| Parallelschale | Ein super einfaches NPM -Modul, um Shell -Befehle parallel auszuführen. |
| - - | - - |
| Concat | Verkettet mehrere Dateien. |
| CPY-Cli | Dateien für den Knoten kopieren. |
| del | Löschen Sie Dateien und Verzeichnisse mit GLIPS. |
| äußern | Schneller, nicht oparierter, minimalistischer Web -Framework für Knoten. |
| Knotensagel | Sie können mit unglaublicher Geschwindigkeit und automatisch über eine Verbindung Middleware. SCSS -Dateien mit unglaublicher Geschwindigkeit zu CSS kompilieren. |
| NPM-Check-Updates | Upgrades Ihr Paket.json -Abhängigkeiten auf die neuesten Versionen und ignoriert bestimmte Versionen. |
| Purgecss | Purgecss ist ein Werkzeug zum Entfernen von nicht verwendeten CSS. |
| rimraf | Der UNIX -Befehl rm -rf für Knoten. |
| - - | - - |
| Bower [ abgeschrieben ] | Ein Paketmanager für das Web. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| JQuery | Das Schreiben weniger, mehr tun, JavaScript Library. |
| Modernizr | Modernizr erzählt Ihnen, was HTML, CSS und JavaScript den Browser des Benutzers zu bieten haben. |
| - - | - - |
| Bliss.js | Möchten Sie Vanille -Js verwenden, aber native APIs etwas unhandlich finden? Glückseligkeit ist für dich. |
| Regenschirm JS | ☔ Leichte JavaScript -Bibliothek für DOM -Manipulation und -veranstaltungen. |
| Zepto JS | Zepto ist eine minimalistische JavaScript-Bibliothek für moderne Browser mit einer weitgehend jQuery-kompatiblen API. |
| Cash JS | Eine absurd kleine JQuery -Alternative für moderne Browser. |
| Chibi JS | Ein winziger JavaScript-Mikro-Bibliothek |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Anchor.js | Fügen Sie Ihren Dokumenten tiefe Ankerlinks hinzu. |
| Anime.js | Anime.js (/ˈæn.ə.meɪ/) ist eine leichte JavaScript -Animationsbibliothek mit einer einfachen, aber leistungsstarken API. Es funktioniert mit CSS -Eigenschaften, SVG, DOM -Attributen und JavaScript -Objekten. |
| Diagramm.js | Einfache, saubere und ansprechende Diagramme für Designer und Entwickler. |
| Chartist.js | Einfache reaktionsschnelle Diagramme. |
| (a) darkmode.js (b) Dark -Modusschalter | ? Fügen Sie Ihrer Website in wenigen Sekunden einen Dark-Mode / Night-Mode hinzu |
| Velocity.js | Beschleunigte JavaScript -Animation. |
| Favico.js | Verwenden Sie Ihr Favicon mit Abzeichen, Bildern oder Videos. |
| Fluidvids.js | Flüssigkeitsbreite (reaktionsschnell) Videosmodul, 1 KB, benutzerdefinierte Spieler, dynamische Elemente/XHR -Unterstützung. |
| Highlight.js | Highlight.js ist ein in javaScript geschriebener Syntax Highlighter. |
| Headroom.js | Verstecke deinen Kopfball, bis du ihn brauchst. |
| Holder.js | Client Side Image -Platzhalter. |
| lazysize.js | Hochleistungs und SEO -freundlicher fauler Lader für Bilder (reaktionsschnell und normal), iframes und mehr. |
| Littlefoot.js | Littlefoot ist eine leichte JavaScript -Bibliothek, die außergewöhnliche Fußnoten erstellt. |
| lunr.js | Einfache Volltext-Suche in Ihrem Browser. |
| NProgress.js | Eine nanoskopische Fortschrittsbalken. |
| Pace.js | Eine automatische Webseiten -Fortschrittsleiste. |
| Prism.js | Prism ist eine leichte, robuste, elegante Syntax -Bibliothek. |
| React-Burger-Menu | Eine Off-Canvas-Sidebar-Reaktionskomponente mit einer Sammlung von Effekten und Stilen unter Verwendung von CSS-Übergängen und SVG-Pfadanimationen. |
| Responsive NAV | Responsive Navigation Plugin ohne Bibliotheksabhängigkeiten und mit schnellem Touchscreen -Unterstützung. |
| Slideout.js | Ein Touch -Slideout -Navigationsmenü für Ihre mobilen Web -Apps. |
| SmartCrop.js | Inhaltsbewusstes Image Cropping. |
| Tabella.js | Reaktionstabelle. |
| Tether | Eine JavaScript -Bibliothek zum effizienten Erstellen eines absolut positionierten Elements bleibt neben einem anderen Element auf der Seite. |
| Tippy.js | Eine leichte Vanille -JavaScript -Tooltip -Bibliothek. |
| Tooltip.js | Tooltip.js ist eine JavaScript- und CSS -Bibliothek zum Erstellen von stilbaren Tooltips. |
| Turbrolinks | Turbrolinks® macht die Navigation in Ihrer Webanwendung schneller. |
| Setzen | Ein typografischer Pre-Processor für Ihr HTML, der Zero Client-Side-JavaScript verwendet. |
| Zeroclipboard.js | Eine einfache Möglichkeit, Text in die Zwischenablage zu kopieren. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Formstone - Hintergrund | Ein JQuery-Plugin für Bild- und Video-Hintergründe mit Vollbild. |
| Bigfoot.js | Ein JQuery -Plugin zur Stärkung von Fußnoten. |
| Bigslide.js | Eine winzige Dia -Panel -Navigation JQuery Plugin mit großen Träumen. |
| Fitvids.js | Ein leichtes, benutzerfreundliches JQuery-Plugin für Flüssigkeitsbreiten-Video-Einbettungen. |
| fullpage.js | Eine Seite Scroll -Abschnitte Site -Plugin. |
| Faule Last | Lazy Last ist die Verzögerungen des Ladens von Bildern auf langen Webseiten. |
| LITY | Ein ultra-leuchtendes, zugängliches und reaktionsschnelles Lightbox-Plugin, das Bilder, Iframes und Inline-Inhalte unterstützt. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Ruck | ? JavaScript -Parser, Mangler und Kompressor -Toolkit für ES6+ |
| Uglifyjs | Uglifyjs ist ein JavaScript -Parser, ein Minifier, Kompressor und Verschönerungs -Toolkit. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Animate.css | Eine Cross-Browser-Bibliothek von CSS-Animationen. |
| CSSGram | Eine winzige (<1kb gzipped!) Bibliothek zur Nachbildung von Instagram -Filtern mit CSS -Filtern und Mischmodi. |
| CSS -Filterspielplatz | Spielen Sie mit den neuen CSS3 -Filtereffekten. |
| EQCSS | Eine Spezifikation für eine Abfragesyntax im Container-Stil in CSS. |
| Flex Grid | Ein Netzsystem basierend auf der Flex Display -Eigenschaft. |
Beherrschen des :nth-child | CSS3 Pseudo-Klassen und: N-Kind-Bereiche. |
| Eric Meyer CSS zurücksetzen | Eric Meyer CSS zurücksetzen |
| Graaf | Reine CSS -Gitterüberlagerungen für das Design. |
| Hamburger | Leckere CSS-animierte Hamburger. |
| Mueller Grid System | Ein modulares Gittersystem für reaktionsschnelle/adaptive und nicht reagierende Layouts basierend auf Kompass. |
| Normalisieren.css | Eine moderne HTML5-fähige Alternative zum CSS-Zurücksetzen. |
| RTLCSS | Framework für die Konvertierung von links nach rechts (LTR) Cascading Style Sheets (CSS) in rechts nach links (RTL). |
| Toast | Wahnsinnig, No-Nonsense CSS-Gitter. |
| CSSWAND | Es ist wirklich nur eine Handvoll einfacher, reiner CSS-basierter Animationsbibliothek |
| Water.css | Sammlung von Stilen, um einfache Websites zu erstellen |
| Rosinen -CSS | Ein Versorgungsbibliothek. |
| Spektrum -CSS | Standard -CSS -Implementierung der Spektrum -Designsprache für interne und dritte Partei |
| Box-Shadows.css | Mianly basierend auf Boxschatten |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Wie man mit SVG -Ikonen arbeitet | - - |
| Richten Sie SVG -Symbole aus, um eine SMS zu schreiben und sich von Schriftzusammenstellungen zu verabschieden | - - |
| - - | - - |
| Bootstrap -Symbole | Bootstrap -Symbole sind SVGs, sodass sie schnell und einfach skalieren und mit CSS gestylt werden können. Während sie für Bootstrap gebaut sind, arbeiten sie in jedem Projekt. |
| Creative Commons -Lizenzikonen | Laden Sie SVG-, EPS- und PNG Creative Commons -Lizenzsymbole herunter, die auf Ihrer Website verwendet werden können. |
| Flatikon | Die größte Datenbank mit kostenlosen Symbolen in PNG-, SVG-, EPS-, PSD- und Basis -64 -Formaten. |
| Feder | Feather ist eine Sammlung einfach schöner Open -Source -Ikonen. |
| Schriftart großartig | Die legendäre Schriftart und das CSS -Toolkit. |
| Schriftfont-awesome-svg-png | Schriftart fantastischer Aufteilung in einzelne SVG- und PNG -Dateien verschiedener Größen sowie node.js -basierten Generator. |
| Schriftart | Ein kostenloser und Open -Source -Schriftsteller hat Ihnen von einer Community von Liebenden mit anderen Typen zu Ihnen gebracht. |
| Fontello | Eine einfache Möglichkeit, eine benutzerdefinierte Symbolschrift für Ihre Website zu erstellen. Wählen Sie Bilder aus unserer großen Sammlung aus und erstellen Sie ein WebFont -Paket mit einem Klick. |
| IComoon | ICOMOON bietet ein Paket von Vektorsymbolen sowie eine kostenlose HTML5 -App zum Erstellen von benutzerdefinierten Symbolschriften oder SVG -Sprites. Durchsuchen Sie zwischen Tausenden von Pixel -Perfektionikonen oder importieren Sie Ihre eigenen Vektoren. |
| Ionicons | Die Premium -Ikonen -Schriftart für Ionengerüst. |
| Materialdesign -Symbole | Sehen Sie sich alle Materialdesign -Symbole und mehr von der Community an. |
| Die große Liste der flachen Symbole und Symbolschriften von CSS-Triiks | Es gibt viele solcher Roundups. Dieser gehört mir. |
| Substantivprojekt - Symbole für alles | Fast eine Million kuratierte Ikonen, die von einer globalen Gemeinschaft geschaffen wurden. |
| Okticons | Ein skalierbares Symbol Schriftart mit <3 von GitHub handgefertigt. |
| Perfekte Ikonen | Der einfachste Weg, um unabhängige soziale Ikonen auf Lösungen zu schaffen. |
| Einfache Ikonen | Kostenlose SVG -Symbole für beliebte Marken. |
| SVG-ICON | Eine ultimative SVG -Icons -Sammlung, die richtig gemacht wurde. |
| SVG -Symbole | Bereit, SVG -Symbole für das Web zu verwenden. |
| Vektorikons Roundup | Ein Nebenseitigkeitsvergleich zwischen beliebten Icon-Schriftarten. |
| Wir lieben Icon -Schriftarten | Ein kostenloser und ein Open -Source -Symbol für die Hosting -Dienst für Testzwecke. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Tinyjpg | Smart WebP, JPEG und PNG -Komprimierung |
| Kompress png | - - |
| Kompress JPEG | - - |
| Kompress GIF | - - |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| ChartSpree | Machen Sie Diagramme in Sekunden. |
| Förderung | Funktionelle HTML -Formen für statische Stellen. |
| GridSpree | Zeigen Sie Ihre Tabellenkalkulationsdaten an, die Ihnen jedoch mit Google -Tabelle direkt auf Ihrer statischen Site mögen. |
| Jotform | Formbauer |
| WTF, Formen? | Freundlicheres HTML -Formular steuert mit etwas CSS -Magie. Entworfen für IE9+sowie für das neueste Chrom, Safari und Firefox. |
| Wufoo | Online -Formular Builder mit Cloud -Speicherdatenbank. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Abstrakte APIs | Eine Reihe einfacher, aber leistungsstarker Utility -APIs für Entwickler wie E -Mail -Validierung, Benutzer -Avatar -Generator, Bildkomprimierung und vieles mehr. Alle APIs haben eine kostenlose Version. |
| Autodraw | Schnelles Zeichnen für alle. Autodraw kombiniert maschinelles Lernen mit Zeichnungen talentierter Künstler, die Ihnen helfen, Sachen schnell zu zeichnen. |
| Binärer Übersetzer | Kostenloser binärer Codeübersetzer, binärer Code in Text übersetzen. |
| Basis16 | Eine Architektur zum Aufbau von Themen, die auf sorgfältig ausgewählter Syntax -Hervorhebung unter Verwendung einer Basis von sechzehn Farben basieren. |
| Bootstrap 5 Cheat Sheet | Eine interaktive Liste von Bootstrap 5 -Klassen, Variablen und Mixins. |
| Farben.css | Bessere Standardfarben für das Web. Eine Sammlung von Hautklassen für schnellere Prototypen und schönere Sites. |
| Farbstofffarbcodes | Color-Hex enthält Informationen zu Farben, einschließlich Farbmodellen (RGB, HSL, HSV und CMYK), triadischen Farben, monochromatischen Farben und analogen Farben, die auf der Farbseite berechnet wurden. |
| Farbjagd | Kuratierte Sammlung schöner Farben, täglich aktualisiert. |
| CSS3 -Generator | CSS3 -Klassiker |
| CSSMATIC | Die ultimativen CSS -Tools für Webdesigner. |
| Draw.io | Draw.io ist kostenlose Online -Diagrammsoftware für die Erstellung von Flussdiagrammen, Prozessdiagrammen, ORG -Diagrammen, UML-, ER- und Netzwerkdiagrammen. |
| Flache Farben | Durchsuchen Sie über 11.000 flache Farben in über 2.300 flachen Farbpaletten. Kopieren Sie sie oder laden Sie die .ACO -Datei für die Verwendung in Photoshop herunter. |
| Frontend Dogma Frontend Development Tools | Kuratierte webbasierte Tools für Website-Entwickler und -besitzer zur Analyse und Erkundung. |
| Gradientenhintergrund | Als kuratierte Liste der besten Gradientenwebsites im Internet ermöglichen Sie den Gradientenhintergrund, aus Hunderten von wunderschönen Mischfarbpaletten auszuwählen. |
| Styling Assistent: Google Maps APIs | Passen Sie Farben, Straßen, Etiketten und mehr an. Verwenden Sie dann Ihren benutzerdefinierten Stil in Ihrem Projekt von Google Maps Platform. |
| Snazzige Karten | Ein Repository verschiedener Stile für Google Maps, das auf Webdesigner und Entwickler abzielt. |
| Solarisierte - Präzisionsfarben für Maschinen und Menschen | Solarisiert ist eine sechzehn Farbpalette (acht Monotone, acht Akzentfarben) für die Verwendung mit Terminal- und GUI -Anwendungen. |
| Sri Hash Generator | Die Verwendung von SRI wird als Best-Praction empfohlen, wenn Bibliotheken aus einer Quelle von Drittanbietern geladen werden. |
| Superdomain | Überprüfen Sie die Verfügbarkeit der Domänen. |
| Erstellen Sie Latextabellen online | Erstellen Sie schnell auch komplexe Latextabellen mit Online -Generator - Zellen, die zusammen mit der Bearbeitung von Grenzen unterstützt werden. |
| Uigraderients | Eine handverlesene Sammlung wunderschöner Farbverlauf für Designer und Entwickler. |
| Unbeschreiblich | Kostenloses Online -Tool zum Entfassen (Auspacken, Deobfuscate) JavaScript, CSS und HTML -Code, wodurch es lesbar und hübsch ist. |
| Webcode -Tools | CSS3-, HTML5-, Microdata-, Open -Graph- und Twitter -Karten -Generatoren |
| Was ist meine Bildschirmauflösung | Ein Online -Tool zur Überprüfung der Bildschirmauflösung eines beliebigen Anzeigegeräts. |
| Webgradienten | Kostenlose Sammlung von Hintergrundgradienten, die Sie in einem Teil Ihrer Website als Inhalts -Hintergrund verwenden können. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Bootstrapcdn | Das empfohlene CDN für Bootstrap, Font Awesome und Bootswatch. |
| CDNJS | Die kostenlose und Open -Source -CDN für Webbibliotheken, um Ihre Website zu beschleunigen! |
| Coralcdn | Ein kostenloses und offenes Inhaltsverteilungsnetzwerk, das auf Peer-to-Peer-Technologien basiert und aus einem weltweiten Netzwerk von Web-Proxys und -Servers besteht. |
| Fontcdn | Ein Suchstool für Google Web -Schriftarten. |
| Google -Schriftarten | Hunderte von freien Open-Source-Schriftarten für das Web optimiert. |
| Google gehostete Bibliotheken | Ein stabiles, zuverlässiges, hochgeschwindiges, weltweit verfügbares Inhaltsverteilungsnetzwerk für die beliebtesten Open-Source-JavaScript-Bibliotheken. |
| Jsdelivr | Ein kostenloser superschneller CDN für Entwickler und Webmaster. |
| Microsoft Ajax CDN | Beliebte JavaScript -Bibliotheken von Drittanbietern wie JQuery und ermöglicht es Ihnen, sie einfach zu Ihren Webanwendungen hinzuzufügen. |
| Open Source -Software CDN | Open -Source -Software CDN von maxcdn. |
| Yandex cdn | Service hostet JavaScript-Bibliotheken, die Site-Entwicklern den Zugriff auf die Yandex-Inhaltszustellung (CDN) ermöglichen und eine Vielzahl von Open-Source-JavaScript-Frameworks und Bibliotheken von Yandex-Servern verarbeiten können. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Kann ich verwenden? | Überprüfen Sie die Browserkompatibilität von CSS3- und HTML5 -Eigenschaften. |
| Sollte ich Präfix | Zeigen Sie einfach, welche Präfixe für eine neuere CSS -Eigenschaft benötigt werden. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Reagiere ich? | Sehen Sie, wie Ihre Website auf Desktop, Laptop, iPad und iPhone aussieht. |
| Sträuber | Verwenden Sie den Browser -Gerätetester und laden Sie Internet Explorer -Bilder für Ihre VM herunter. |
| Geräteponsive | Zeigen Sie eine kurze Vorschau auf die Reaktion auf verschiedene Geräteauflösungen wie MacBook, iPad oder iPhone. Teilen Sie diese Vorschau mit Ihrem Kunden. |
| Reaktionsbedingte App | Ein Must-Have Devtool für Webentwickler für schnellere reaktionsschnelle Webentwicklung. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Google PageSpeed Tools | Die PageSpeed -Tools analysieren und optimieren Ihre Website nach Best Practices von Web. |
| Webpagetest | Führen Sie einen kostenlosen Website -Geschwindigkeitstest von mehreren Standorten auf der ganzen Welt mit echten Browsern und realen Verbraucherverbindungsgeschwindigkeiten durch. |
| Website -Geschwindigkeitstest | Verwenden Sie diesen kostenlosen Website -Geschwindigkeitstest, um die Lastgeschwindigkeit Ihrer Websites zu analysieren und zu erfahren, wie Sie sie schneller machen. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| JSONPLAPHURDER | Gefälschte Online -Ruhe -API zum Testen und Prototypen |
| Lorem Ipsum | LOREM IPSUM ist einfach Dummy -Text der Druck- und Artenset -Industrie. |
| Lorempixel | Platzhalterbilder für jeden Fall. |
| Platzhalte.it | Ein schneller und einfacher Image -Platzhalterservice. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Placeit | Das Beste, um Ihr Projekt in jedem Gerätekontext fallen zu lassen. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Favicon -Generator | Online -Favicon -Generator. Wirklich. |
| Bauen Sie meine festgespannte Website auf | Online -Tool zum Erstellen eines benutzerdefinierten Windows -Startbildschirmfliesens für Ihre Website in weniger als einer Minute. |
| Stiftte Site -Verbesserungen unter Windows / Erstellen benutzerdefinierter Kacheln für IE11 -Websites | Live -Fliesen und Benachrichtigungen für Windows einrichten |
| Konfigurieren von Webanwendungen für Apple | Konzeptionelle Informationen und Techniken zum Erstellen effektiver Webinhalte für Safari und Webkit mithilfe von HTML und CSS. |
| Installierbare Web -Apps mit der Web -App manifestiert in Chrome für Android / Manifest -Dateiformat | Verwenden Sie das Web -App -Manifest, um zu steuern, wie Ihre Web -App gestartet wird. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Codemyui | Handverlesene Code -Snippets, die Sie in Ihren Webprojekten verwenden können. Finden Sie Webdesign -Inspiration mit Code -Beispiele. |
| Codyhouse | Eine kostenlose Bibliothek von HTML, CSS, JS Nuggets. |
| Codrops | CODROPS ist ein Webdesign- und Entwicklungsblog, in dem Artikel und Tutorials zu den neuesten Web -Trends, -techniken und neuen Möglichkeiten veröffentlicht werden. |
| Wechsel zu HTTPS | Migrieren Sie mit Leichtigkeit von HTTP zu HTTPS. |
| Navnav | Eine Tonne CSS-, JQuery- und JavaScript -Navigationsbeispiele, Demos und Tutorials aus dem gesamten Web. |
| PaperSizes.io - Die beste Ressource für Papiergrößen | Eine einfache, kostenlose Ressource, um die internationalen Standards für Papiergrößen in Metrik und Imperial zu finden. |
| PDF -Süßigkeiten | Bearbeiten Sie PDF -Dateien mit PDF Candy - einem kostenlosen Online -PDF -Editor. PDF in Word, PDF in JPG konvertieren, PDF zusammenführen, PDF spalten, PDF komprimieren usw. |
| Scotch | Ein Webentwicklungsblog, in dem alle Dinge Programmierung, Entwicklung, Web und Leben diskutiert werden. |
| Smashing Magazine | Ein Online -Magazin für professionelle Webdesigner und Entwickler mit Schwerpunkt auf nützlichen Techniken, Best Practices und wertvollen Ressourcen. |
| W3Schools Online -Web -Tutorials | Die weltweit größte Webentwickler -Website. |
↥ Zurück nach oben
| Name |
|---|
| Mozilla Web Docs |
| CSS Dev Docs |
| CSS Properties Index |
| CSS -Referenz |
| CSS -Referenz - Codrops |
| Layout : |
| Flexbox - CSS -Tricks |
| CSS Grid - CSS -Tricks |
| CSS Flexbox -Spielplatz von Gabi |
| Flexbox Froggy |
| CSS -Gittergarten |
| CSS -Animationen : |
| Verwenden von CSS -Animation - MDN |
| Animation - CSS -Tricks |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Browser -Safe -Schriftarten | Häufige Schriftarten für alle Versionen von Windows & Mac -Äquivalenten. |
| CSS -Schriftstapel | Eine vollständige Sammlung von Web -Safe -CSS -Schriftstapeln. |
| CSS -Umriss Eigenschaft - Umriss: Keine und Umriss: 0 | Die CSS -Übersichtseigenschaft ist eine Zugänglichkeitsanforderung, die jedoch oft von vielen Webdesignern missbraucht wird. Warum tun sie das? |
| CSS -Auswahlreferenz | In CSS sind Selektoren Muster, mit denen die Elemente, die Sie stylen möchten, ausgewählt werden. |
| CSS -Spezifität | CSS -Spezifität. Die CSS -Spezifität weist eine numerische Darstellung eines Selektors zu, um zu vergleichen, falls es Stilkonflikte gibt. Das Web -Poster zeigt die CSS -Spezifität mit Ikonen aus Stanley Kubricks 'The Shining' Film an. |
| Gitter mit gutem Beispielsweise | Alles, was Sie brauchen, um CSS -Gitterlayout zu lernen. |
| Gittergarten | Ein Spiel zum Erlernen von CSS -Netz. |
| Ritter | Lernen Sie das CSS -Netz! |
| Hash -Tag -Links, die das Browserfenster nicht steuern | CSS-Tricks Post von Chris Coyier. |
| Lernen Sie CSS Grid | Ein Leitfaden zum Erlernen von CSS -Gitter. |
| Lernen Sie CSS Grid | Viele fantastische Ressourcen von Jen Simmons. |
| Lernen Sie CSS -Layout | Diese Website lehrt die CSS -Grundlagen, die im Layout einer Website verwendet werden. |
| Überschreiben Sie die Standard -Textauswahlfarbe mit CSS | CSS-Tricks Post von Chris Coyier. |
| Intelligenterer Link unterstreicht für jede Website | Post von Adam Schwartz. |
| Was ist die Browser-Default-Hintergrundfarbe bei der Auswahl von Text? | Antwort auf den Stapelüberlauf |
| Warum habe ich von weniger zu Sass gewechselt? | Post von Hugo Giraudel. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Home Office Poster | Home Office -Repository von Postern, die verschiedene Themen abdecken - Forschung, Zugangsanforderungen, Zugänglichkeit, Design. |
↥ Zurück nach oben
| Name |
|---|
| Bewundern das Web |
| Awwwards |
| Behance |
| Beste Website -Galerie |
| Codepen |
| CSS -Galerie |
| CSS -Gewinner |
| Kühlschrank für Design |
| Deviantart |
| Dribbeln |
| Lieblings -Website -Auszeichnungen (FWA) |
| Goodui |
| Google -Design |
| HTML Inspiration |
| Inspiration für Such -UI -Effekte |
| Eine Seite Liebe |
| Schön, dass ich mag |
| Siiimple |
| Die besten Designs |
| Sehr schöne Sehenswürdigkeiten |
| Webdesign -Inspirationen |
| Webdesign - Tumblr -Suche |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Erforschung reaktionsschneller Skalen erforschen | Suche |
| Schriftart Paar | Schriftart Paar hilft Desigern, Google -Schriftarten zusammenzubilden. Schöne Google -Schriftkombinationen und -paare. |
| Generieren Sie Typen Skalen mit Stackswell | Sparen Sie Zeit mit der neuesten Version von Stackswell und erstellen Sie in Sekundenschnelle Typsysteme! |
| Systementwurfstypsystem | Verwenden Sie die Typografie, um Ihr Design und Inhalt so klar und effizient wie möglich zu präsentieren. |
| Modulare Skala | Berechnen, visualisieren und lernen Sie modulare Skalen. |
| Geben Sie die Verbindung ein | Die Typ -Verbindung ist ein Spiel, mit dem Sie lernen, wie man Schriften kombiniert. |
| Typografie für Entwickler | Dies ist als praktischer Leitfaden für Entwickler gedacht, um Web -Typografie zu lernen. |
| Schreibwolf | Was ist im Typ Trend? |
| Typ Skala - Ein visueller Rechner | Vorschau und wählen Sie die richtige Typ -Skala für Ihr Projekt. Experimentieren Sie mit Schriftgröße, Skalierung und verschiedenen Webfonts. |
| Whatfont - Chrome -Erweiterung | Der einfachste Weg, Schriftarten auf Webseiten zu identifizieren. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Schema.org | Eine kollaborative, Community -Aktivität mit der Aufgabe, Schemas für strukturierte Daten im Internet, auf Webseiten, in E -Mail -Nachrichten und darüber hinaus zu erstellen, zu pflegen und zu fördern. |
| Mikroformate | Der einfachste Weg, um strukturierte Informationen in HTML zu markieren. |
| Verstehen Sie, wie strukturierte Daten funktionieren | In dieser Dokumentation wird beschrieben, welche Eigenschaften für strukturierte Daten mit besonderer Bedeutung für die Google -Suche erforderlich, empfohlen oder optional sind. |
| Strukturiertes Datentest -Tool von Google | Google Structured Data Testing Tool. |
| PageSpeed -Erkenntnisse von Google | Machen Sie Ihre Webseiten auf allen Geräten schnell. |
| JSON zur Verknüpfung von Daten | Daten sind chaotisch und getrennt. JSON-LD organisiert und verbindet es und erstellt ein besseres Web. |
| JSON-LD | Wiki |
| Finder mit Breitengrad und Längengrad | Breitengrad und Längengrad sind die Einheiten, die die Koordinaten im geografischen Koordinatensystem darstellen. Um eine Suche durchzuführen, verwenden Sie den Namen eines Ortes, einer Stadt, eines Staates oder einer Adresse oder klicken Sie auf den Standort auf der Karte, um Lat Long -Koordinaten zu finden. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Liste der Softwarepaketverwaltungssysteme | Dies ist eine Liste von Softwarepaketverwaltungssystemen, die zunächst nach Paketformat (Binärer, Quellcode, Hybrid) und dann nach Betriebssystemfamilie kategorisiert sind. |
| GEEIGNET | Debian -basierter Linux -OS -Paketmanager. |
| Yum | Fedora -basierter Linux -OS -Paketmanager. |
| Homebrew | Homebrew ist ein Paketverwaltungssystem, das die Installation von Software auf dem MacOS -Betriebssystem von Apple und Linux vereinfacht. |
| Winget | Der Windows Package Manager (auch bekannt als Winget) ist ein kostenloser und Open-Source-Paket-Manager für Microsoft Windows 10. |
| Schokoladig | Schokolady ist ein Paketmanager und Installateur auf Maschinenebene für Softwarepakete, das für die Windows-Plattform erstellt wurde. |
| Goenv | Goenv zielt darauf ab, so einfach wie möglich zu sein und das bereits etablierte erfolgreiche Versionsmanagementmodell von Pyenv und RBENV zu befolgen. |
| NPM | NPM (ursprünglich kurz für Node Package Manager) ist ein Paketmanager für die JavaScript -Programmiersprache. |
| nodenv | Verwenden Sie Nodenv, um eine Knotenversion für Ihre Anwendung auszuwählen und garantieren, dass Ihre Entwicklungsumgebung der Produktion entspricht. |
| Pyenv | Mit Pyenv können Sie leicht zwischen mehreren Versionen von Python wechseln. |
| Garn | Garn ist eine Alternative zu NPM. |
| RVM | RVM ist ein Befehlszeilen-Tool, mit dem Sie mehrere Ruby-Umgebungen von Dolmetschern bis hin zu Edelsteinen einfach installieren, verwalten und arbeiten können. |
| rbenv | Verwenden Sie RBENV, um eine Ruby -Version für Ihre Anwendung auszuwählen und garantieren, dass Ihre Entwicklungsumgebung der Produktion entspricht. |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| Netlify | Bereiten Sie moderne statische Websites mit Netlify bereit. Holen Sie sich CDN, kontinuierliche Bereitstellung, 1-Klick-HTTPS und alle Dienste, die Sie benötigen. Fangen Sie kostenlos an. |
| Statisch | Top Open-Source Static Site Generatorenliste. |
| Statisch | Staticman ist eine node.js-Anwendung, die benutzergenerierte Inhalte empfängt und sie als Datendateien in ein GitHub- und/oder GitLab-Repository hochgeladen. |
| Gitalk | Eine moderne Kommentarkomponente basierend auf Github -Problem und Preact. |
| Äußerungen | Ein leichtes Kommentar -Widget, das auf Github -Problemen basiert. Verwenden Sie GitHub -Probleme für Blog -Kommentare, Wiki -Seiten und mehr! |
↥ Zurück nach oben
| Name |
|---|
| TLDR -Seiten |
| TLDR InBrowser.App |
| TLDR-book.pdf |
| Basisbefehle brauen - DevSheet |
| Cheat.sh |
| Devhints |
| Homebrew -Cheatsblatt |
| Handbuch Github Cli |
| Markdown -Cheatsblatt |
| Github-Cheat-Blatt |
| Cheatsheet.md |
| Oktonator auf Twitter: "Pibb zum Ende einer GIST -URL hinzufügen, um die HTML -Version zu erhalten |
↥ Zurück nach oben
| Name | Beschreibung |
|---|---|
| 56 einzigartige Lorem -Ipsum -Generatoren | Stücken Sie Ihren Fülltext und Ihre Entwurfsprojekte mit diesen lustigen Lorem Ipsum -Generatoren auf. |
| Zusammenfassung Handbuch zu HTTP -Statuscodes | Eine Liste und Erläuterung von HTTP -Statuscodes |
| Eindrucksvoll | Eine kuratierte Liste großartiger Listen. |
| Großartige Großartigkeit | Eine kuratierte Liste von erstaunlich fantastischen Großartigkeit. |
| Super Super | Eine kuratierte Liste der fantastischen kuratierten Listen vieler Themen. |
| Bootstrap -Ressourcen durch Start Bootstrap | Eine umfassende Liste von Bootstrap und verwandten Ressourcen. |
| Bootstrap Snippets von Start Bootstrap | Eine kuratierte Bibliothek mit Bootstrap 4 -Code -Snippets, die sich perfekt zum Einlesen in Ihr Projekt einfügt, ohne ein ganzes Thema herunterzuladen! |
| Entwurfsgrund, Github -Sammlungen | Diese Sammlung von Designbibliotheken ist die beste im Internet und wird Ihr Toolset für die Gestaltung atemberaubender Produkte abschließen. |
| Entwerfen Sie Ressourcen für Entwickler | Eine kuratierte Liste kostenloser Design- und UI -Ressourcen für Entwickler, einschließlich Stock Fotos, Vorlagen, Frameworks, UI -Kits, Online -Tools und vieles mehr. |
| Github - Open Source -Showcases | Durchsuchen Sie beliebte Repositorys, die auf dem Thema basieren, das Sie am meisten interessiert. |
| Gradientenhintergrund | Als kuratierte Liste der besten Gradientenwebsites im Internet ermöglichen Sie den Gradientenhintergrund, aus Hunderten von wunderschönen Mischfarbpaletten auszuwählen. |
| JavaScript Plugins Repository | Vanille -JS -Tools zum Schreiben leistungsstarker Webanwendungen ohne JQuery. |
| JavaScript -Territorium | Jster JavaScript -Katalog. |
| Javascripting | Die Datenbank von JavaScript -Bibliotheken, Frameworks und Plugins. |
| Bibliotheken.io | Der Open Source Discovery Service. |
| Liste der HTTP -Statuscodes | Eine Liste der HTTP -Antwortstatus -Codes (Hypertext Transfer Protocol). |
| URLs für soziale Aktien | Dieses Projekt soll Ihnen helfen, die Freigabe in sozialen Medien in Ihren Code zu integrieren. |
| Stock Fotos, die nicht saugen | Eine Liste von Orten, um die besten kostenlosen Stockfotos zu finden. |
| Textredakteure, Github -Sammlungen | Ein Schaufenster einiger unglaublicher Open -Source -Redakteure. |
| Unhöflich | Ein ordentliches Repository von JQuery -Plugins, die in Kategorien klassifiziert sind. |
↥ Zurück nach oben