Front-End-Entwicklung
Hallo
Dies ist ein Open-Source-Repository für alle, die Front-End-Entwicklung lernen möchten.
Front-End-Entwicklung
Front-End-Webentwicklung ist die Praxis, Daten mithilfe von HTML, CSS und JavaScript in eine grafische Schnittstelle zu konvertieren, damit Benutzer diese Daten anzeigen und interagieren können.
Stellen Sie sicher, dass Sie Ihre Unterstützung durch Star Mark & Teilen des Repositorys zeigen
Eine Liste nützlicher Ressourcen für Entwickler an Frontends
Inhaltsverzeichnis
- Front-End-Entwicklung
- Hallo
- Eine Liste nützlicher Ressourcen für Entwickler an Frontends
- Inhaltsverzeichnis
- Roadmap
- Nützlich
- Lernen
- A11y
- YouTube -Kanäle
- Blogs
- Podcasts
- Code -Redakteure
- Visual Studio -Code -Erweiterungen
- Werkzeuge
- CSS -Frameworks
- Ikonen
- Farben
- Typografie
- Design -Inspiration
- Animations -Frameworks
- Aktienressourcen
- Geolokalisierung
- Apis
- Modell
- Bücher
- Herausforderungen / Spiele
- Kostenlose Tools für Schüler
- YouTube -Videos
- Testen
Roadmap
- Roadmap-Für eine gut beschriebene Schritt-für-Schritt-Roadmap für Front-End-Entwickler.
Nützlich
- BGJAR - Kostenloser SVG -Hintergrundgenerator für Ihre Websites, Blogs und App.
- Überprüfen - Inspizieren und Ihre mobilen Web -Apps und Websites auf iOS -Geräten direkt von Mac oder Windows abstellen.
Lernen
- Eine vollständige Anleitung zu Flexbox | CSS -Tricks - Eine umfassende Anleitung zum Flexbox -Layout.
- Ein vollständiger Leitfaden zum Netz | CSS -Tricks - Eine umfassende Anleitung zum Netzlayout.
- Befehlszeile Power User - Eine Videoserie für Webentwickler zum Erlernen eines modernen Befehlszeilen -Workflows mit ZSH, Z und zugehörigen Tools.
- CSS Grid - Vollständiger Videokurs über CSS Grid
- Best Of JS Eine Site, um die besten Github -Repos für Ihren Lieblings -JS -Framework zu überprüfen
- Codecademy - Eine Reihe interaktiver Kurse, die der Welt mitbringen, wie man codiert. Angebot kostenloser und bezahlter Abonnements in einer Vielzahl von Sprachen.
- Codementor - Ein Tool, um auf Ihrer Lernreise Hilfe von erfahrenen Entwicklern in verschiedenen Codierungssprachen zu erhalten.
- Scaler -Themen - eine Plattform, um Programmiersprachen wie HTML, Java, JavaScript, Python usw. zu lernen.
- Eroberung ansprechende Layouts - Hergestellt von Kevin Powell (https://twitter.com/kevinjpowell). Dieser Kurs führt Sie durch alles, was Sie wissen müssen, um in seinem brillanten 21-Tage-Kurs reaktionsschnelle Layouts zu erstellen.
- Coursera - Eine Auswahl an Kursen von hoch angesehenen Schulen wie Stanford und Yale.
- CSS Almanac | CSS -Tricks - Eine schnelle Referenzhandbuch für viele Funktionen von CSS.
- CSS Grid Playground - Ein vom Mozilla -Team kuratierter visueller Leitfaden, mit dem Sie das CSS -Gitterlayout -Funktionen mit vielen Code -Beispielen und Demos erlernen können.
- Designressourcen - Entwurfsressourcen von Skullface.
- Dev.to - Wo Programmierer Ideen teilen und sich gegenseitig helfen, zu wachsen.
- DevProjects - Eine freie Gemeinschaft besteht aus kuratierten Projekten von hochrangigen Entwicklern, die Ihnen helfen, die Lücke zwischen Theorie und Praxis zu schließen. !
- Dicoding Academy - wo jeder Programme aus den Grundlagen lernen kann ( nur in Bahasa Indonesien erhältlich ).
- EDX - Eine Reihe von Kursen auf Universitätsebene aus Harvard, MIT, Wharton und mehr.
- Egghead - Webentwicklung Video -Tutorials in "Bite -Size" -Segmenten. Hat sowohl kostenlose als auch "pro" (bezahlte) Mitgliedschaften.
- Enboard | Frontendressourcen - Organisierte Ressourcen zur Entwicklung der Frontend.
- Flexbox - Stufen Sie Ihr Flexbox -Wissen auf - ein Online -Kurs mit Zombie -zentrierter Story.
- FREECODECAMP - Eine kostenlose Ressource, die Programmierprojekte und Vorbereitungen für Entwicklerjobs einbezieht.
- Frontend Masters - Webentwicklung Video -Tutorials von Branchenführern (häufig aktualisiert). Hat sowohl kostenlos (begrenzte Zeit) als auch bezahlte Mitgliedschaften.
- Full Stack Open - Kurs auf Full Stack Web Development von der University of Helsinski. Lernen Sie React, Redux, Node.js, MongoDB, GraphQL und TypeScript auf einmal! In diesem Kurs werden Sie in die moderne JavaScript-basierte Webentwicklung vorgestellt. Das Hauptaugenmerk liegt auf dem Erstellen von Einzelseiten -Anwendungen mit ReactJs, die REST -APIs verwenden, die mit Node.js. erstellt wurden.
- Geeksforgeeks - Ein Informatikportal für Geeks.
- Khan Academy - Eine universelle Online -Lernplattform, die auch die wichtigen Kurse für Entwickler bietet.
- Learnanything - Suchen Sie interaktive Gedankenkarten, um etwas zu lernen.
- JavaScript lernen - JavaScript in einer interaktiven Umgebung lernen. Lesen Sie kurze Lektionen, machen Sie sich Notizen und machen Sie sich direkt in Ihrem Browser.
- Mastering -Markdown - Eine Mini -Serie, die Ihre Dokumentation verändert.
- Mozilla Developer Network - Die neuesten Informationen zu offenen Web -Technologien.
- Komplette Webentwicklungs -Tutorials -lyty.dev Komplette Webentwicklungs -Tutorials mit gut erklärten Beispielen kostenlos.
- Pluralsight - Unbegrenzte Online -Entwicklerausbildung von Branchenexperten.
- Saylor - Eine offene Online -Lernlösung, die College -Kreditmöglichkeiten für Studenten anbietet.
- SCRIMBA-Code-Screencast-basiertes Lernen in einer Vielzahl von Sprachen.
- Scotch - Viele Webentwicklungskurse. Hat sowohl kostenlose als auch "Premium" (bezahlte) Mitgliedschaften.
- Suchkurse - Eine Auswahl an Trendkursen und Tutorials.
- Sololearn- Ein kostenloses Portal zum Lernen von Webentwicklung.
- Team Treehouse - Selbsterregte Lernen in verschiedenen Sprachen und Fächern.
- Das moderne JavaScript -Tutorial - Alles über die JavaScript -Sprache.
- Das ODIN -Projekt - ein Open -Source -Lehrplan für das Lernen von Webentwicklung
- Tutorials Punkt - Tutorials für viele verschiedene Sprachen mit interaktiven Code -Beispielen.
- Udacity - Lernen Sie online etwas - tiefes Lernen, maschinelles Lernen, Front -End -Sprachen.
- Udemy - Ein Online -Lern- und Lehrmarkt.
- Beobachten und Code - die Informatikschule für Schüler, die intellektuelle Strenge und Tiefe fordern.
- W3school - Webentwicklungsreferenzbibliothek. Deckt HTML, CSS, JavaScript (JQuery, Ajax und More) sowie einige serverseitige Sprachen ab. Enthält Beschreibungen und interaktive Beispiele.
- Web -Apis | MDN - Alles, was ein Anfänger über Web -APIs wissen muss.
- Webdesign in 4 Minuten von Jeremy Thomas Schöpfer von Bulma CSS und Marksheet.io.
- Wesbos - Kostenlose und Premium -Kurse in der Webentwicklung
- Web Dev Tricks - Alle Ihre CSS-, JS-, JQuery -Trendcodes mit Quellcodes an einem Ort. Ihr praktischer Partner für alle Arten von modernen Webentwicklung und -design.
- Web.dev - Führer und Ressourcen für moderne schnelle Websites durch Google -Entwickler.
- Werden Sie ein Front -End -Webentwickler - Entwickeln Sie Kompetenz mit HTML, CSS, JavaScript und JQuery.
- Webglossary.info - Glossar für Webentwicklung und -design mit mehr als 3.500 Einträgen (gemäß August 2023)
- Webfähigkeiten - Ein visueller Überblick über nützliche Fähigkeiten als Webentwickler.
- Die App Brewery - alles in einer Plattform, um Ihre Webentwicklungsfähigkeiten zu behandeln
- Full Stack Open 2021 - Dieser Kurs dient als Einführung in die moderne Webanwendungsentwicklung mit JavaScript.
- Devtools Tech - Eine kostenlose Plattform für die Vorbereitung von Interviews für Frontend -Ingenieure, die sich auf qualitativ hochwertige Programmierfragen in der realen Welt konzentrieren.
⬆ Zurück nach oben
A11y
- A11Y Style Guide - Ein Leitfaden für den Lebensstil oder eine Musterbibliothek, die aus kSS -dokumentierten Stilen erzeugt wird ... mit einer Zugänglichkeitswendung.
- AX - Barrierefreiheitstest -Toolkit.
- Farbkontrastanalysator - CCA hilft Ihnen, die Lesbarkeit des Textes und den Kontrast von visuellen Elementen wie grafische Steuerelemente und visuelle Indikatoren zu bestimmen.
- Deque University - Online -Kurse in Web- und Mobile Barrierefreiheit.
- W3C Intro in die Web -Barrierefreiheit - Strategien, Standards und Ressourcen, um das Web für Menschen mit Behinderungen zugänglich zu machen.
⬆ Zurück nach oben
YouTube -Kanäle
- APNA College-Tutorials für HTML, CSS, Bootstrap, JavaScript, Git, Github, SQL
- Adrian Twarog-Tutorials für HTML, CSS, Bootstrap, JavaScript, React, React, React
Native, UI/UX und cooles Design -Sachen - 1stwebdesigner - Tutorials auf WordPress, PSD bis HTML
- Brad Hussey - Tutorials für Bootstrap, Sass, JQuery, Php, freiberuflich tätiger
- CSS -Tricks - YouTube -Kanal des bekannten Webdesign- und Entwicklungsblogs CSS -Tricks von Chris Coyier.
- CSS -Tutorials - Tutorials in Hindi von Husain Sir über alle Grundlagen von CSS.
- Codiererhandbuch - Tutorials zu HTML, CSS, JavaScript, Bootstrap
- Codevolution - Tutorials zu React, Vue, Angular, MongoDB, JavaScript, Mittelstapel, HTML, CSS.
- Cleverer Programmierer - Tutorials zu React, MongoDB, JavaScript, Mern Stack, HTML, CSS, React Native.
- Derek Banas - Tutorials zu C#, Visual Basic, Django, Python, Nodejs, Angularjs, MongoDB, Jquery, JavaScript, CSS, Ruby on Rails, Java, Sqlite, Android, HTML, Php, objektive C.
- DevTips - Tutorials zu HTML5, CSS, Sass, Bootstrap, Foundation, JQuery, Ruby on Rails, Github.
- Designcours - Tutorials zu UI/UX -Design oder HTML5, CSS, SASS, Animationsbibliothek.
- Dennis Ivy - Tutorials für Django & Flask Full -Stack -Webentwicklungsprojekte
- Elzero Web School - nur Arabisch
- Freecodecamp - Tutorials für Jquery, JavaScript, React, Mathematik, Naturwissenschaften, Software -Engineering, Open -Source -Software
- Fun Fun Function - Tutorials zu JavaScript, React, funktionaler Programmierung, GraphQL, Leben als Entwickler
- Google Chrome -Entwickler - Neueste und größte Gespräche über die moderne Webentwicklung mit Pro -Tipps, Erkenntnissen und Techniken, mit denen Sie Ihre Webentwicklungsfähigkeiten verbessern können.
- Kevin Powell - Tutorials zu HTML, CSS, die dazu beitragen, CSS auf einfache Weise besser zu verstehen
- Learncode.academy - Tutorials zu HTML, CSS, JQuery, JavaScript, React JS / Redux, Knoten JS
- Leveluptuts - Tutorials zu HTML, CSS, Sass, WordPress, Magento, Drupal, React, Meteor
- Mackenzie Child - Design to Code Challenge - Tutorials zu Benutzeroberfläche, So entwerfen und codieren Sie mehrere Arten von Websites.
- Der Coding Train - Tutorials für JavaScript, Knoten, maschinelles Lernen, neuronale Netzwerke, Algorithmen
- Die Net Ninja - Tutorials zu HTML, CSS, JQuery, JavaScript, Git und Github, Bootstrap, MangoDB, PSD an WordPress, PSD zu HTML und vielen anderen.
- Thedigicraft - Tutorials für HTML, CSS, JQuery, Php, Ajax, Bootstrap, MySQL.
- Thenewboston - Tutorials zu ECMascript 6, React JS / Redux, Django, Angular 2, Gulp, Git, Python, Seo, Sass, Scss, Grunzen, Illustrator, MongoDB, Php, Java, Ruby, objektives C
- Traversy Media - Tutorials on HTML, CSS, jQuery, PHP, Ajax, Bootstrap, MySQL, ECMAScript 6, React JS / Redux, Django, Angular, Ionic, Gulp, Git, Python, Node JS, PHP, Laravel, Cake PHP, Symfony, CodeIgniter, Programming Tips
- CodewithHarry - Tutorials zu HTML, CSS, JavaScript, Knoten JS, MongoDB und Hosting.
- Programmierung mit MOSH - Tutorial über React, NodeJs, Python, JavaScript, Angular, TypeScipt und C#.
- Dev ED - Lernen Sie Webentwicklung, Webdesign, 3D -Modellierung, Tools wie Figma und More
- Web Dev Simplified - Lernen Sie Website -Entwicklungen mit HTML, JavaScript, CSS und anderen Frameworks mit denselben Projekten und mehr
- Mozilla Developer - Videos, mit denen Sie bei Ihrer Arbeit als Webdesigner, Webentwickler oder Person helfen, Websites oder Web -Apps zu erstellen
- Akademind - Es gibt immer etwas zu lernen. Egal, ob Sie sich Angular -Tutorials oder -anleitungen, Vue.js, andere Frontend -Entwicklungsinhalte oder Data Science -Themen oder irgendetwas anderes ansehen möchten - Sie haben wahrscheinlich Recht
- Sonny Sangha -Projekt -Tutorials für React, Redux, Nächstes JS & React Native
- WB Web Development - Tutorials zu HTML, CSS, Bootstrap, Sass, JavaScript, Git und Github, MongoDB, Nodejs, Reactjs
- Online-Tutorials- Top-Class-Inhalt in der Webentwicklung vorne. Hat exklusive Tutorials zu HTML, CSS und JavaScript mit erstaunlichen Effekten. Ein Muss für alle Front -End -Entwickler
- Akshay Saini-Videos über Frontend-Interview-Tipps, Interviewerlebnisse und speziell zentrale Konzepte von JavaScript.
- Devtools Tech-Videos zu erweiterten Frontend-Konzepten, Interviewfragen und -erlebnissen und konzentrieren sich auf Intermediate bis hin zu erweiterten JavaScript-Konzepten.
⬆ Zurück nach oben
Blogs
- 10 Muss JavaScript -Konzeptekurse kennen - vom grundlegenden zum Förderung des JavaScript -Konzepts, das auf einfache Weise erklärt wird, dass jeder JavaScript -Entwickler wissen muss.
- 100 Möglichkeiten, kreativer zu sein - 100 Möglichkeiten, um kreativer von Shaunta Grimes zu sein.
- 2017 Design Roundup - Sammlung aller Codrops -Webentwicklungsressourcen für 2017.
- 50 Dinge, die Sie [wahrscheinlich] vergessen haben zu entwerfen - UX -Elektrowerkzeuge - mittel - 50 Dinge, die Sie wahrscheinlich vergessen haben, aus Jon Moore zu entwerfen
- ACM -Monat des Codes 2K17: Moodify bauen - ACM -Monat des Code 2K17: Moodify aus Ajay NS erstellen.
- Eine illustrierte Anleitung zum Einrichten Ihrer Website mit Github & CloudFlare - eine illustrierte Anleitung zum Einrichten Ihrer Website mit Github und CloudFlare von Karan Thakkar.
- Brad Frost Blog - Autor von Atomic Design, Building Design Systems in CSS & HTML.
- Beste kostenlose Schriftarten - 70+ Beste kostenlose Schriftarten für Designer - kostenlos für den kommerziellen Gebrauch im Jahr 2019
- CSS -Animationen gegen die Webanimationen -API: Eine Fallstudie
- CSS -Tricks - Tägliche Artikel über CSS, HTML, JavaScript und alle Dinge, die sich auf Webdesign und -entwicklung beziehen.
- Design- und Kreativitätszitate - 72 Zitate über Design und Kreativität von Margaret Kelsey.
- Designressourcen - Liste der Ressourcen für das Arbeiten und das Erlernen von Design.
- Design for Change - Artikel über regenerative und nachhaltige Gestaltung durch Viba Mohan.
- Domain Registrars DNS und Hosting - Domain Registrars, DNS und Hosting von Kirby Kohlmorge
- Anfängerleitfaden zu Gatsby - Gatsby.js: So richten und verwenden Sie den React Static Site Generator von Aman Mittal
- Beispiele für alles in ECMascript in 2016.2017, 2018
- Flavio Copes Tutorials - Tägliche Tutorials über JavaScript und Webentwicklung von Flavio Copes
- Von der URL bis zur interaktiven Erklärung, wie unser World Wide Web funktioniert.
- Frontend Dogma - Nachrichten und Werkzeuge für die Frontend -Entwicklung, normalerweise zweimal täglich aktualisiert
- Frontend Weekly - Die besten Artikel, Links und Nachrichten im Zusammenhang mit Frontend -Entwicklung, die einmal pro Woche Ihrem Posteingang geliefert werden.
- Wie ich das BitSofCode -Logo mit CSS animierte - verarbeiten Sie Artikel auf einer benutzerdefinierten CSS -Animation.
- Wie die Funktion minmax () funktioniert - Erläuterung der CSS -Funktion minmax (), die für CSS -Gitterlayouts verwendet werden kann.
- So bauen Sie ein beeindruckendes Portfolio auf, wenn Sie neu bei Tech sind - So bauen Sie ein beeindruckendes Portfolio auf, wenn Sie neu bei Tech von Randle Browning sind
- So erstellen Sie einen zufälligen Zitatgenerator mit JavaScript und HTML, für absolute Anfänger - So erstellen Sie einen zufälligen Zitatgenerator mit JavaScript und HTML für absolute Anfänger aus Sophanarith Sok.
- So erstellen Sie Ihre erste Vue -Komponente - Anfänger -Projekt -Tutorial, um eine Vue -Komponente von Sarah Dayan zu erstellen.
- Codieren wir ein neuronales Netzwerk von Grund auf - Teil 1 - Typeme - Medium - Codieren wir ein neuronales Netzwerk von Grund auf neu von Charles Fried
- Music Player Inspirations - Music Player Inspiration 2017 aus Muzli.
- Die Checkliste für Frontend - eine umfassende Liste aller Elemente, die Sie benötigen, bevor Sie Ihre Website für die Produktion starten.
- Wie es ist, einen Chatbot zu bauen und zu vermarkten, wenn Sie erst 14 Jahre alt sind - wie es ist, einen Chatbot zu bauen und zu vermarkten, wenn Sie erst 14 Jahre alt sind
- Was ist der Deal mit zusammenklappbaren Margen? - Erläuterung der CSS -Kollapsränder.
- Eine gut kuratierte Liste für UX -kuratierte Ressourcenliste für UX von Fernandocomet.
- Airbnb Open Source - Ingenieur- und Datenwissenschaft Artikel und Open Source -Projekte.
- Die Kosten von JS - So liefern Sie JavaScript effizient für wertvolle Benutzererfahrung durch Addy Osmani.
- CSS Scroll -SNAP - Tutorial zum CSS -Scroll -Snaping, mit dem Sie das Ansichtsfenster sperren können, nachdem ein Benutzer das Scrolling beendet hat.
- Vorspannung, Vorab- und Prioritäten in Chrome - Artikel darüber, wie Web -Lade -Primitive von Addy Osmani auf Chromes Neworktstack arbeiten.
- Selbst lernen - traditionelles Chinesisch
- IDES für Webentwickler - Faktoren, die bei der Auswahl einer IDE für die Webentwicklung und Beispiele für gute Optionen berücksichtigt werden müssen.
- Die Top 8 Wetter -APIs für 2020 - Top 8 Wetter -APIs für 2020 - die besten kostenlosen Wetter -APIs für Entwickler
- Tutorials für Digital Ocean Community - eine kostenlose Tutorial -Sammlung von Experten. Alle von der Digital Ocean Community beigetragen.
- Reagieren Sie für Anfänger - ein React.js -Handbuch für Entwickler Frontend - ein React.js -Handbuch für Entwickler vorne End
- Ultimate React Resources - Der Blog enthält Blog -Beiträge, kostenlose E -Books, Github -Repos mit kuratierten Listen, praktische Implementierung von React.js in der realen Welt mit Arbeitscode.
- Vollständige Einführung in CSS Grid - Ein Blog, um die Grundlagen des CSS -Netzes zu lernen, indem Sie verschiedene komplexe Layouts erstellen.
- Rado's Blog) - Ein Blog, das Artikel zu React -Abhängigkeiten und -implementierung, GraphQL und vielem mehr enthält!
- ROBLOG - Ein Anlaufpunkt für alle Dinge im Zusammenhang mit Technologie, JavaScript, Node.js und Webentwicklung.
- Monica Powell Blog - Ein großartiger Blog über JavaScript, React, Gatsby und Git.
- Devtools Tech - Sorgfältig kuratierte hochwertige Ressourcen für Frontend -Ingenieure.
Einstellung
Podcasts
- Codierungsblöcke - Softwareentwicklungs -Podcasts eines Teams professioneller Programmierer.
- Frontend Happy Hour - Frontend-, Software- und Karriereentwicklungs -Podcasts von Branchen -Diskussionsteilnehmern.
- JavaScript Jabber - Podcasts für JavaScript -Entwickler. Die Website bietet auch viele andere programmierungsbezogene Podcasts an.
- Syntax - Podcasts für Frontendentwicklung von Wes Bos und Scott Tolinski von Tuts.
⬆ Zurück nach oben
Code -Redakteure
Atom - Atom ist ein Texteditor, der modern, zugänglich und dennoch hackbar für den Kern ist. Open Source | Alle Plattformen
Brackets - Mit fokussierten visuellen Tools und Präprozessorunterstützung ist Brackets ein moderner Texteditor, der es einfach macht, im Browser zu entwerfen. Es ist von Grund auf für Webdesigner und Front-End-Entwickler hergestellt. Open Source | Alle Plattformen
Geany - Geany ist eine kleine und leichte integrierte Entwicklungsumgebung.
Intellijidea - eine universelle Ideen von Jetbrains. Es verfügt über eine Code-Abschluss-, Integrations- und Versionskontrollsystem (VCS).
Notepad ++ - Notepad ++ ist ein kostenloser (wie in "Rede Rede" und auch wie in "Free Beer") Quellcode -Editor und Notepad -Ersatz, der mehrere Sprachen unterstützt. Nur für die Python -Sprache, die nur für die Python -Sprache verwendet wird, bietet eine Codeanalyse, einen grafischen Debugger, einen integrierten Unit -Tester, die Integration in Versionskontrollsysteme und unterstützt die Webentwicklung mit Django sowie Data Science mit Anaconda. Alle Plattformen | Open Source
Sublime Text - Ein ausgefeilter Texteditor für Code, Markup und Prosa. Alle Plattformen
VIM - VIM ist ein hochkonfigurierbarer Texteditor zum effizienten Erstellen und Ändern von Text. Es ist als "VI" mit den meisten Unix -Systemen und mit Apple OS X enthalten.
Visual Studio Code - Code Bearbeitung neu definiert. Es verfügt über eine Syntax-Hervorhebung und Automobile mit IntelliSense, Git-Befehlen integriert, erweiterbar und anpassbar. Open Source | Alle Plattformen
Webstorm - Das intelligenteste JavaScript -IDE ist eine integrierte Entwicklungsumgebung für JavaScript und verwandte Technologien. Alle Plattformen
UltraEdit - UltraEdit ist ein leistungsstarker HTML- und Code -Editor für Mac, Windows und Linux. Es verfügt über ein integriertes Dateivergleichsdienstprogramm, eine automatische Vervollständigung, ein fortschrittliches Layout, ein Mehrfach-TAB, Multi-Pane-Redakteure und die Syntax-Hervorhebung für die beliebtesten Programmiersprachen.
Nano - GNU Nano ist Texteditor für UNIX -ähnliche Betriebssysteme.
STACKBLITZ - Ein Online -Open -Source -Code -Editor für JavaScript -Frameworks und Bibliotheken mit einigen großartigen Funktionen wie Github -Importen, Live -Server und direktem Commit vom Editor zum GitHub!
⬆ Zurück nach oben
Visual Studio -Code -Erweiterungen
- Automatisch umbenennen Sie Tag - Wenn Sie ein HTML/XML -Tag umbenennen, benennen Sie das gepaarte HTML/XML -Tag automatisch um.
- Bessere Kommentare - Diese Erweiterungs -Farbcodes Verschiedene Arten von Kommentaren, um ihnen unterschiedliche Bedeutung zu geben und sich vom Rest Ihres Codes abzuheben.
- Bracket -Paar -Colorizor - Farben passenden Klammern, um Ihren Code viel lesbarer zu machen - sehr hilfreich.
- CODE Zaubersprüche - Ein grundlegender Rechtschreibprüfung, der gut mit dem Camelcase -Code funktioniert.
- ES Lint - JavaScript -Linter zum Hervorheben von Codefehlern und Best Practices.
- Formatieren umschalten - Eine VS -Code -Erweiterung, mit der Sie das Formatierer (schöner, verschönern Sie,…) mit einem einfachen Klick umschalten können.
- GIT -Verlauf - Git -Protokoll, Dateiverlauf, vergleichen Sie Filialen oder Commits
- Gitlens - Superlading Die in Visual Studio Code eingebauten Git -Funktionen - visualisieren Sie die Code -Autorschaft auf einen Blick über Git -Schuld Anmerkungen und Code -Objektiv, navigieren und erkunden Sie GIT -Repositories, erhalten Sie wertvolle Einblicke über leistungsstarke Vergleichsbefehle und vieles mehr.
- JS Snippets - Diese Erweiterung enthält Code -Snippets für JavaScript in ES6 -Syntax für VS -Code -Editor (unterstützt sowohl JavaScript als auch TypeScript).
- Live -Server - Ein schneller Entwicklungsserver mit Live -Browser -Nachladen.
- Materialsymbol Thema - Google Material Themed Symbol Pack.
- Pfad Intellisense - Wenn Sie mit der Eingabe eines Weges in Zitaten beginnen, erhalten Sie Intellisense für Verzeichnisse und Dateinamen.
- PEACOCK - Ändern Sie subtil die Arbeitsbereich Farbe Ihres Arbeitsbereichs. Ideal, wenn Sie mehrere VS -Code -Instanzen haben und schnell feststellen möchten, welche welche.
- Polacode - Sie kennen diese schicken Code -Screenshots, die Sie in Artikeln und Tweets sehen? Nun, höchstwahrscheinlich kamen sie aus Polacode. Es ist super einfach zu bedienen. Kopieren Sie einen Code in Ihre Zwischenablage, öffnen Sie die Erweiterung, fügen Sie den Code ein und klicken Sie, um Ihr Bild zu speichern!
- Schöner - Formatieren Sie Ihren Code automatisch beim Speichern.
- Quokka.js - quokka.js ist ein Entwicklerproduktivitätstool für das schnelle JavaScript / TypeScript -Prototyping. Laufzeitwerte werden in Ihrer IDE neben Ihrem Code aktualisiert und angezeigt, während Sie eingeben.
- Synchronisierungseinstellungen - Einstellungen synchronisieren Sie Erweiterung Ihre Einstellung in GitHub. Dann können Sie sie mit einem Befehl in eine neue Version von VS Code laden.
⬆ Zurück nach oben
Werkzeuge
- API -Verzeichnis | Programmierbar
- Animista - CSS Animation Presets/Generator
- Bessere Code -Hub - Überprüft GitHub -Codebasis gegen Software -Engineering -Richtlinien und gibt Feedback.
- Browserling - Live Interactive Cross -Browser -Tests auf virtuellen Maschinen.
- LambDatest - Testen Sie Websites und Web -Apps auf 2000+ Browsern & OS.
- BrowsStack - Testen Sie Websites und mobile Apps auf verschiedenen Browsern und mobilen Geräten.
- Kann ich ... - Supporttabellen für HTML5, CSS3 usw. auf Desktop- und Mobile Browsern
- CheckBot - Browsererweiterung, die Websites auf SEO-, Geschwindigkeits- und Sicherheitsprobleme testet
- CodePen - Umgebung für soziale Entwicklung, in der Sie Code im Browser schreiben und die Ergebnisse beim Erstellen sehen können.
- Codeply - ein HTML-, CSS-, JavaScript -Editor -Spielplatz für Designer und Entwickler, um Frontend -Frontend -Frontworks zu vergleichen, zu prototypen und zu testen.
- Codesandbox - Instant IDE- und Prototyping -Tool für die Webentwicklung.
- Erstellen Sie eine neue Geige - JSFIDDLE - Testen Sie JS, CSS, HTML oder Coffeescript in einem Online -Code -Editor.
- Critical Path CSS -Generator - von Jonas Ohlsson - reduziert die Menge an CSS, die der Browser durchlaufen muss, um eine Webseite zu rendern.
- Cross -BrowStesting -App - Webdienst zum Ausführen funktionaler Webtests in mobilen und Desktop -Webbrowsern.
- CSS -Cheat -Blatt - Eine sehr einfach zu verwendende Einstellung für CSS -Selektoren und -eigenschaften. Es enthält auch Kategorien für Flexbox und Grid.
- CSS -Minifier - Minifieren Sie Ihre CSS -Dateien!
- CSS -Referenz - Eine kostenlose visuelle Anleitung zu CSS.
- CSS -Auslöser - sagt Ihnen, was bei der Mutation einer bestimmten CSS -Eigenschaft ausgelöst wird.
- CSS -Filter - Interaktiver CSS -Filtergenerator
- Colorlisa - Farbpalettengenerator basierend auf großartigen Künstlern
- DirtyMarkup - Tidy auf Ihren HTML-, CSS- und JavaScript -Code aufräumen.
- ExtendsClass - bietet Tools zum Hinzufügen von Funktionen, die direkt im Browser verwendet werden können.
- Favicon -Generator - Laden Sie ein Bild hoch und generieren Sie ein Favicon für Ihre Website.
- Favicon -Generator für iOS/Google Progressives Web App Manifest - Online -Tool zum Testen von Favicons auf verschiedenen Plattformen.
- Kostenlose Entwickler -Sachen - Liste der kostenlosen Dinge für Entwickler durch Entwickler. Einige Dienstleistungen sind für immer kostenlos oder haben mindestens 1 Jahr eine kostenlose Stufe.
- Kostenlos für Entwickler - Diese Website hat eine umfassende Menge an kostenlosen und bezahlten Ressourcenlisten, die nicht nur für Frontend -Entwickler, sondern auch für jede Art von Entwicklern kuratiert sind.
- Erzeugen Sie Favicon basierend auf Text - Generieren Sie ein Favicon aus Text, einem Bild oder Emojis.
- Wellen erhalten - Generieren Sie viele Arten von SVG -Wellen für die Verwendung im Webdesign.
- Glitch - Glitch ist wie zusammen in Google Docs - Multiple -Menschen können gleichzeitig an demselben Projekt arbeiten.
- Grafikgenerator - generiert Grafiken für einige gemeinsame Front -End -Anwendungen.
- Google Analytics - Webdienst, der den Website -Verkehr verfolgt und berichtet.
- Google APIS Explorer - Tool zur interaktiven Erkundung verschiedener Google -APIs.
- JavaScript -Konsole im Sublime Text - Tutorial zum Testen von JavaScript und über Build -Systeme in Sublime Text 3.
- JQuery Mega Cheat Sheet - Cheat Sheet aus JQuery Selectros, Manipulation, Ereignissen und mehr im PDF -Format.
- JS Bin - Live Pastebin für HTML, CSS und JS sowie eine Reihe von Prozessoren.
- Lighthouse - Open Source, automatisiertes Tool zur Verbesserung der Qualität der Webseiten.
- Modernes JavaScript -Cheat Sheet - Dies ist eine hervorragende Sammlung von JavaScript -Tipps und Konzept von Manuel Beaudru, die als nette Übersicht über viele der Dinge funktioniert, mit denen Sie vertraut sein müssen, wenn Sie gerade erst mit JavaScript und anderen verwandten Frameworks beginnen.
- Node Package Manager (NPM) - Paketmanager für JavaScript.
- Garn - Paketmanager für JavaScript, wie NPM.
- Antwortinterinator - Replizieren Sie, wie reaktionsschnelle Websites beliebte Geräte aussehen.
- React Cheat Sheet - Eine dokumentationsbasierte Website auch eine progressive Web -App, die auch in Offline gut funktioniert. Sie können nach Schlüsselwort suchen oder eines der vordefinierten Filter auswählen.
- Responsive Grid System - Generieren Sie flexible Netze, um eine reaktionsschnelle Website zu erstellen.
- Der regelmäßige Ausdruck (Regex) Editor - hilft, Ihre regulären Ausdrücke zu erstellen und zu überprüfen.
- Sans Francisco - Ein Werkzeug für Designer - Sammlung von Werkzeugen für Designer
- ScreenSizemap - Ein Vergleich der Bildschirmgrößen im Gerätsunabhängigen Pixel.
- Sizzy: Browser -Testwerkzeug - Tool zum Entwicklung und Testen von reaktionsschnellem Design auf mehreren Geräten gleichzeitig.
- Stack Overflow - Online -Community für Entwickler, um Fragen zu stellen und Antworten zu erhalten.
- Der W3C -Markup -Validierungsdienst - Überprüft die Markup -Gültigkeit von Webdokumenten in HTML, XHTML, SMIL, MATHML usw.
- Der W3C CSS -Validierungsdienst - prüft die Gültigkeit von CSS- und XHTML -Dokumenten mit Stilblättern.
- Time Helper - hilft, Millis in DateSetimes und umgekehrt umzuwandeln.
- Tinypng - PNG- und JPEG -Komprimierung/Optimierer
- Webentwickler -Checkliste - kategorisierte Checkliste für Dinge, die während der Webentwicklung abdecken können.
- Progressive Tools zur Optimierung Ihrer Leistung im Web - Liste der Tools, mit denen die Seitenleistung verbessert werden kann.
- Stackblitz - Online -IDE für Angular- und React -Projekte, die über Link freigegeben werden können.
- Postman (Tool zum Testen von APIs) - API -Client zum Erstellen, Teilen, Testen und Dokument -APIs.
- Kostenloser Bootstrap 5 Cheat Sheet - Es handelt sich um eine interaktive Liste von Bootstrap 5 -Klassen, Variablen und Mixins.
- JSONT - Ein Online -Tool für einfaches und leistungsstarkes JSON -Formatierungswerkzeug.
⬆ Zurück nach oben
CSS -Frameworks
- Bootstrap - Entwerfen und passen Sie verantwortungsbewusste mobile Sites an.
- Bulma CSS - Modular Open Source Framework basierend auf Flexbox.
- Karamell - Ein einfacher, moderner, reaktionsschneller Website -Framework.
- Kardinal - Modular Mobile -First Framework für Leistung und Skalierbarkeit.
- Element CSS - Vue 2.0 -basierte Komponentenbibliothek.
- Foundation CSS - Familie reaktionsschnell Front -End -Frameworks.
- Halbmoon - Vollständig anpassbares und reaktionsschnelles Front -End -Framework zum Erstellen von Dashboards und Werkzeugen.
- Jeet - Fractional Grid System für Sass und Stylus.
- Weniger - CSS -Gittersystem zum Entwerfen von adaptiven Websites.
- Materialdesign Lite - Implementierung von Materialdesignkomponenten in Vanille -CSS, JS und HTML.
- Materialisieren Sie CSS - CSS Framework, um eine einheitliche Benutzererfahrung für alle Produkte auf jeder Plattform zu ermöglichen.
- Milligramm - ein minimalistischer CSS -Rahmen.
- Ordentlich - ein leichtes und flexibles Sass -Raster.
- Petal CSS - Light CSS UI -Framework basierend auf weniger.
- Reine CSS - eine Reihe kleiner, reaktionsschneller CSS -Module.
- Semantisches UI - UI -Framework für Themen und reaktionsschnelles Design.
- Skelett CSS - Einfache, reaktionsschnelle Kesselplatte, um ein reaktionsschnelles Projekt zu starten.
- Spectre CSS - Leichtes, reaktionsschnelles und modernes CSS -Framework für eine schnellere und erweiterbare Entwicklung.
- Stillschweigend - primitiver, aber attraktiver Rahmen für Anfänger im Grafikdesign.
- Tailwindcss - Hochspannbares CSS -Framework mit niedrigem Niveau.
- UI -Kit - Leichtes und modulares Front -End -Framework für Webschnittstellen.
- Unsemantisches Flüssigkeitsnetzsystem basierend auf Prozentsätzen und nicht auf einer festgelegten Anzahl von Spalten.
- Vital CSS - Minimal invasives CSS -Framework für Webanwendungen, die mit SASS und SLIM erstellt wurden.
⬆ Zurück nach oben
Ikonen
- Brandicons - Icon -Schriftgenerator und Betrachter.
- Flat Icon - Datenbank mit freien Symbolen in den Formaten PNG, SVG, EPS, PSD und Base64.
- Schriftart Awesome - Open -Source -Symbol Set und Toolkit mit konsistenten Stilen.
- Glyphicon - Icons für die Verwendung mit Bootstrap, anderen CSS -Frameworks und allen Webprojekten.
- Google -Material -Design -Symbole - Ein Überblick über Materialsymbole und wie man sie in Projekte integriert.
- ICOMOON - ICON -Schriftgenerator und Symbolsammlung.
- ICONGRAM - Sammlung von Icon -Packs aus verschiedenen Quellen.
- ICONSVG - schnelle anpassbare Symbole für Ihre Projekte
- Icons8 - konsequent gestaltete und anpassbare Symbolpakete.
- Ionicons - Open Source -Symbole in SVG und WebFont.
- MAPICONS - ICON -Schriftart zur Verwendung mit Google Maps API und Google platziert API mit SVG -Markern und Icon -Etiketten.
- Ikone für Materialdesign - vollständige Suite von Materialdesign -Symbole für einfache SVGs auf Website oder Desktop.
- MFGLABS -ICONSET - MFG Lab's Icon Set für die Verwendung in Webfonts und CSS.
- Micon - Windows Font und CSS Toolkit.
- Das NOUN -Projekt - umfassende Icon -Sammlung.
- Octicons - Sammlung von Githubs Ikonen für Projekte.
- Öffnen Sie die Ikone, ein kostenloses und offenes Symbol - Open -Source -Symbol in SVG-, WebFont- und Raster -Formaten.
- OpenWebicons - WebFont für skalierbare Vektorsymbole und Logos.
- Reacticons -svg reagieren Ikonen beliebter Ikonenpackungen.
- Remixicon - Open Source Neutral Style Icon System.
- Form.so - anpassbare Sammlung von Symbolen und Animationen.
- Stackicons - Anpassbare Ikonen für soziale Marken.
- Typicons-frei zu bedienende Vektor-Symbole, die in eine Webfont eingebettet sind.
- Wettersymbole - Weather -Ikone -Schriftart und CSS.
- Zocial | CSS3 -Schaltfläche - Erstellen Sie soziale Schaltflächen mit CSS und rendern soziale Symbole als Schriftart.
⬆ Zurück nach oben
Farben
- Adobe Color - Farbrad, Extrahieren Sie Themen, Extrahieren Sie Gradienten, Zugänglichkeitstools und mehr
- BADA55 Farbcodes - Umwandeln Sie Leet -Wörter in CSS -Hex -Farben.
- Branition Farben - Hand kuratierte Sammlung von Farbpaletten am besten zum Branding.
- Farbjagd - Offene Sammlungen schöner Farbpaletten
- Farbtheorie von Natalya Shelburne - Praktische Farbtheorie für Menschen, die codieren: Tutorial über die Verwendung von Farbe mit Beispielen
- Farbrad | Farbschemata - Adobe Color CC - Interaktives Farbrad mit unterschiedlichen Farbregeln (mögliche Anpassungen)
- COLORREIGNER -TOORS - Der Hauptzweck dieses Tools besteht darin, beim Erstellen einer Farbpalette zu helfen und darauf basierend Tinten und Farbtöne zu erzeugen. Wählen Sie einfach eine Farbe aus und die App macht den Rest. Sie können die vorgewählten Farben oder die Farbwählerin verwenden, um mehr Kontrolle zu erhalten. Überprüfen Sie auch die anderen Tools hier
- ColorMind - Bootstrap - ColorMind ist ein Farbschema -Generator, mit dem Deep Learning die Farbpalette automatisch auf ein Live -Website -Modell anwendet.
- Coolors- Super-Fast-Farbschema-Schöpfer mit vielen Funktionen
- CSS -Gradient - kuratierte Liste von Websites, um Gradienten und Farbpaletten zu erkunden.
- Data Color Picker - Generieren Sie Farbpaletten mit visuell äquidistanten Farben. Nützlich für Datenvisualisierungen.
- Entwerfen in Farbe - Ein vollständiger Leitfaden zum Design in Farbe (Artikel über Medium)
- Flache UI -Farben - Farbwählerin für flache Designs
- Bildfarbe Picker - Bildfarbe und Palettengenerator
- Lol Farben - kuratierte Farbpalette Inspirationen
- Materialpalette - Farbpalettengenerator für Materialdesign
- Palettable - Interactive color picker: creates a color scheme based on your preferences and palettes on the Internet
- Paletton - The Color Scheme Designer - Advanced tool for creating color schemes
- Picular - Google, but for colors - Primary color generator using Google's image search.
- Pigment - Palette Generator - Generate color palettes based on lighting and pigment.
- UI Gradients - Scroll through or pick from beautiful gradients, download JPG and copy CSS Code
- W3school Color Picker - Find the perfect color from the color wheel, easy control
- UI Color Picker - Best colors in few selected shades to choose from very helpful for quickly choosing and adding color to design. ![Frei]
⬆ back to top
Typografie
- A Crash Course in Typography: The Basics of Type - First article of a series on Typography
- Circular Font Combinations | Free Alternatives | Typewolf - A great resource for everything related to Typography
- Font Pair - Helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs. - Clean web-tool on How to pair Google Fonts
- Fontspiration - An iOS app for creating custom typographic designs
- Fontsquirrel - A resource for FREE, hand-picked, high-quality, commercial-use fonts
- Google Fonts - A catalog of free & open source fonts, great details and font pair suggestions
- Just My Type - A collection of font pairings
- Table of Contents | The Elements of Typographic Style Applied to the Web - A practical guide to web typography
- Typekit - "Quality fonts from the world's best foundries"
- Typography Terms - An infographic on Typography Terms + explanations
⬆ back to top
Design -Inspiration
- Admire The Web - Admire the Web is where we showcase the very best in website design inspiration - carefully curated and organised to keep you inspired.
- Awwwards - The Website Awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world.
- Dribble - Dribbble is where designers gain inspiration, feedback, community, and jobs and is your best resource to discover and connect with designers worldwide.
- Site Inspire - siteInspire is a showcase of the finest web and interactive design.
- Web design Inspiration - Find inspiration for your next web design project. We help web designers, digital agencies and entrepreneurs to be inspired. Everyday, our team of experts hand picks the best new web designs from all over the world.
- Behance - Behance is a social media platform to showcase and discover creative work like Graphic Design, Illustration, Game Design and many more things
- Pinterest - Pinterest has a host of design inspirations in a variety of forms and styles.
- Pixpa - Pixpa features some nice modern designs and inspirations for web designers and photographers.
- Lapa Ninja - Lapa Ninja is a gallery featuring the best 4127 landing page examples, free books for designers and free UI kits from around the web.
- Landings - Find the best landing pages for your design inspiration based on your preference.
⬆ back to top
Animation Frameworks
- Animate CSS - Choose, try out and get the CSS-Code for different animation types (over 70)
- Anime JS - It's easy to use, has a small and simple API, and offers everything you could want from a modern animation engine.
- Bounce JS - Tool and JS Library, creating CSS3 powered animations(adjustments possible) & export CSS code
- Magic Animations - Showcase of different animations with link to GitHub repo
- MO JS - The library provides built-in components to start animating from scratch like HTML, shape, swirl, burst, and stagger but also brings you tools to help craft your animation in a most natural way.
- Particles JS - A lightweight JavaScript library for creating particles.
- Typed JS - A JavaScript typing animation library with a great documentation on GitHub
- Wow JS - JavaScript library: Reveal CSS animation as you scroll down a page
⬆ back to top
Stock Resources
- Burst - Free, high-resolution images. All our pictures are free to download for personal and commercial use.
- Canva - 8,000+ free templates and thousands of free photos
- Free stock images and Videos - A great collection of stock photos, videos and other resources. Most of them under the CC0-License, all of them free.
- Gratisography - Photographer Ryan McGuire provides this collection of high-resolution pictures for free. You can use them on your personal or commercial project free of copyright restrictions.
- Humaaans - Library of editable people illustrations. Free for both commercial and personal use.
- I'd Pin That! - Created to help bloggers and non-designers create high quality images like those often seen on Pinterest. I'd Pin That is more than just a source for free images — it is an image editor! Use the tools provided here to add your own text and edit the images right on the site.
- Illlustrations - 120+ Awesome free illustrations made by the artist vijay verma on a 100 days challenge.
- MakerBook - The best free resources for creatives - A directory of sites to get free resources (Photography, Mockups, Graphics, Textures, Fonts, Colours, Video, Audio & Tools).
- Morguefile - Founded in 1996 by college student Michael Connors.Photographers contribute images to Morguefile for visitors to use in their creative projects. Yes, they're all completely free. The website does ask that you credit the photographer when possible.
- Open Doodles - A Free Set of Open-Source Illustrations.
- The Open Photo Project - The Open Photo Project is a photo sharing platform created in 1998 by Michael Jastremski. Contributors have offered their images free of charge under terms of Creative Commons licensing.
- Pexels - Exclusively stock photos of high quality, great feature: Filter photos by color.
- Picalls - Free photos and wallpapers licensed under the Creative Commons CC0 license.
- Pixabay - In addition to photos, Pixabay offers video, vectors and illustrations.
- Pikwizard - Free stock photo library for commercial and editorial use. Huge library of stunning, high quality, royalty free images. No attribution required
- Public Domain Archive - “a public domain image repository” created by Matt a graphic designer, web designer and photographer.Vintage and modern images.
- StockSnap.io - High quality stock photos free to download and use. Licensed under the Creative Commons CC0 license.
- The Stocks - Another awesome directory sharing sites for resources, loading directly on the webpage
- UnDraw - "MIT licensed illustrations for every project you can imagine and create
- UnSplash - "Beautiful, Free Photos" & themed collections of photos
- 3D Bay - "Free, 3D Illustrations" A collection of High-quality 3D Illustration resources
- Design Stripe - "Create beautiful illustrations, no design skills needed
⬆ back to top
Geolocation
- Geocomplete-location autocomplete - An advanced jQuery plugin that wraps the Google Maps APIs Geocoding and Places Autocomplete services into a dropdown for an input-form.
- Google maps API | Google - Google Map APIs including documentation & learning resources - extensive
- Google maps API | Traversy - Great YouTube tutorial on using the Google Maps APIs
- OpenCage Geocoder - Free to use forward (lat/long to text) and reverse (text to lat/long) geocoding API
- GeoJS - Free to use API for geolocation lookup by IP address
⬆ back to top
APIs
- Alexa API | Codecademy - Learn to develop a custom Amazon Alexa skill that respond to the user's voice with custom messages.
- Abstract APIs - Free utility API's for compressing images, creating user avatars, validating emails, and more
- jsonplaceholder - Fake Online REST API for Testing and Prototyping
- A list of public APIs
- Lorem Picsum - Easy to use and customize placeholder photos
- OpenWeatherMap - Weather API with free and paid licenses
- Random famous quotes | Rapid APIs - Gets a random quote in JSON format.
- TMDB API - API Service for those who are interested in displaying data/images about different movies, TV Shows or actors in their application.
- Unsplash Source - API to retrieve random images from Unsplash.com
- Web APIs | MDN
- News API - Locate articles and breaking news headlines from news sources and blogs across the web with our JSON API.
- Spotify API - Spotify's Web API allows you to find music and podcasts, manage your Spotify collection, control audio playing, and do a variety of other things.
⬆ back to top
Mockups
- Am I Responsive - This is a tool to check the responsiveness of a website and take a screenshot on multiple devices in a single frame. Go to the site and enter the URL to capture the screenshot. You should have separate screen capture tool to take the proper screenshot.
- Figma - Free app with a simple to use surface for designing, prototyping and sharing your website and app ideas
- Adobe XD - One of the best tool for UI/UX Design, Wireframe, animate, prototype, collaborate, and more
- Magic Mockups - Place your product in realistic environment! Free real-life product/app mockup generator. Laptop, Phone, Tablet, Imac.
- Rotato 3D Mockup Generator - Make video 3D mockups and images. No experience required. Unlimited renders. MacOS.
- The MockUp Club - Website that offers free downloads of design mockups (mostly Photoshop format).
- MockupsJar - Build mockups with screenshots of your application or web Design for free to share with customers and clients
- MockUPhone - Free and simple screenshots device mockups generator. Wrap your design in mobile devices or Laptop/Desktop in a few clicks!
- Multi Device Website Mockup Generator - Multi device website mockup generator is free online tool to test your responsive website on apple devices including Apple iMac, MacBook, iPad and iPhone. This tool is very helpful for theme developers to mockup the web template on various apple devices with a single click. You should have a proper screen grabber tool to take the screenshot from the browser.
- Wireframe.cc - Great tool for sketching out ideas and layouts, super minimalistic
⬆ back to top
Bücher
- Ebook Foundation-free programing books: GitHub Repository - A directory of free learning resources, categorized by language
- HTML Basics - A workshop covering the basics of HTML (free pdf/18 pages)
- HTML5 for Masterminds, 2nd Edition - A complete course from Beginner to Mastermind
- HTML5 Pocket Reference (Pocket Reference (O'Reilly) - A comprehensive compact reference for HTML 5
- HTML Tutorialspoint - A thorough tutorial on HTML (free pdf/486 pages)
- Learn How To Code In HTML5 and CSS3 - A free e-book about making websites in HTML5 and CSS for absolute beginners
- Responsive Web Design with HTML5 and CSS3 - A comprehensive book about making RWD
- You don't know JS - Book series diving deep into the core mechanisms of the JavaScript language.
- Guide to Git and Github - A beginner friendly guide to using git and working with Github.
- Introduction to HTTP - Introduction to HTTP, the stateless protocol underlying all of the web.
- Introduction to the Command Line - A short and beginner friendly introduction to the command line, covering common commands that will make you immediately productive.
- HTML & CSS Books ![Free]
- Web Design Playground, Second Edition - Modern HTML, CSS, and web design standards.Paid
- Build a Frontend Web Framework (From Scratch) - Learn how a frontend web framework works by coding your own.Paid
⬆ back to top
Challenges / Games
- Ace Front End - Ace Front End has complete and practical coding challenges, with a detailed walk through of a perfect interview solution.
- Codepen Challenges - Each month has a theme and every week there is a new challenge prompt that you can use to build a project online using HTML, CSS and JavaScript. The best projects are featured on Codepen's homepage.
- Codewars - Improve your skills by training with others on real code challenges.
- CSS Battle - CSSBattle is an online CSS Code Golfing game. Here, players from all around the world try to visually replicate Targets in smallest possible CSS code and battle it out to get to the top of the leaderboard.
- CSS Diner - It's a fun game to learn and practice CSS selectors.
- CSS Zen Garden - A demonstration of what can be accomplished through CSS-based design, and a chance to do your own.
- Dev Challenges - Made by Thu Nghiem. devChallenges.io is a community driven platform for anyone who wants to solve practical tasks. It has some tricky and curated challenges.
- Flexbox Defense - It is a game that covers the flex properties align-items, justify-content, flex-direction, align-self and has 12 different levels.
- Flexbox Froggy - This game is also about Flexbox and it covers even more flex properties: align-items, justify-content, align-content, flex-direction, align-self, flex-wrap, flex-flow and has 24 different levels.
- Front End Mentor - Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs. Join 192,401 developers building projects, reviewing code, and helping each other get better.
- Grid Garden - Interactive CSS code game. Practice your CSS skills by watering your garden! It has 28 different levels to learn CSS Grid Layout.
- Hackerrank - Practice coding, prepare for interviews, and solve interview style coding challenges.
- JavaScript30 - A free challenge course, building 30 little projects with HTML, CSS and plain JavaScript.
- Leetcode - Coding problems to solve in a range of categories and difficulties
- Project Euler - Challenging computer science and mathematical problems.
- 100DaysOfCode - Regardless of your coding skills or your language of choice, this challenge invites you to code for at least 1 hour a day.
- Devtools Tech - Devtools Tech is a free platform for Frontend Engineers to practice high quality real world programming interview questions, follow curated learning paths, read blogs, and track progress across various frontend domains.
⬆ back to top
Free Tools For Students
- JetBrains Student License : Free individual licenses of the award-winning professional developer tools from JetBrains for students and faculty members.
- Student Developer Pack : The best developer tools, free for students via @githubeducation
⬆ back to top
YouTube Videos
- Flexbox in 20 minutes - Quick crash-course on the CSS Flexbox model.
- SVGs can do that ? - Sarah Drasner's talk on nontypical pratical uses of SVGs.
- CSS Grid Tutorial - Use CSS grid to structure and position websites with ease.
- Git and GitHub for Beginners - Crash Course - Ad-free tutorial by freeCodeCamp.
- 12HR Coding Bootcamp 2021! - Complete frontend bootcamp!
⬆ back to top
Testen
- Jest - JavaScript testing framework
- Mocha - JavaScript testing framework
- Karma - JavaScript test runner
- Istanbul - JavaScript test coverage tool
- TestCafe - Node.js end-to-end testing
- Cypress - JavaScript end-to-end testing framework
- Puppeteer - Google's Chrome automation tool for E2E testing.
- Playwright - Microsoft's browser automation tool for E2E testing.
- Sinon.JS - Standalone test spies, stubs and mocks for JavaScript
- Chai - Assertation library for JavaScript testing
- PactumJS - REST API Testing Tool used to automate e2e, integration, contract & component (or service level) tests
- Vitest - Vitest is a blazing fast unit test framework powered by Vite
⬆ back to top
