Nützliche Tools für CSS & Co
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
atom
buchen
button
dom
editor
element
empfehlen
farbe
generator
http
index
info
paar
projekt
text
trick
url
weben
werkzeug
windows
-
Ich poste mal ein paar nützliche Websiten die das Leben einfacher machen,
und das nicht nur für n00bs
Wer weitere interessante Links zum Thema hat, kann diese gerne hier posten, sie werden nach einer Überprüfung in die Liste eingepflegt und die entsprechenden Posts danach zwecks Übersichtlichkeit gelöscht.
Webdevelopment:
http://notepad-plus-plus.org/download/v6.5.3.html
http://www.sublimetext.com/
http://bluefish.openoffice.nl/index.html
http://www.microsoft.com/web/webmatrix/
CSS Werkzeuge:
http://www.css3generator.com
http://www.colorzilla.com/gradient-editor/
http://css3please.com/
http://www.css3maker.com/
http://css3.mikeplate.com/
http://cssdesk.com/
http://cssmate.de/csseditor.html
http://playground.deaxon.com/css/ (Informationen zu CSS Funktionen, gut für Einsteiger)
http://www.red-root.com/sandbox/holmes/testsuite/testsuite.html (Beispiele)
Grid Werkzeuge:
http://www.designinfluences.com/fluid960gs/
http://gridinator.com/
https://www.pageblox.com/generate
http://builder.yaml.de/
http://www.pagecolumn.com/grid_layout_generator.htm
Code Werkzeuge:
http://meyerweb.com/eric/tools/dencoder/ (Decode/Encode von URL's)
http://www.freeformatter.com/base64-encoder.html
Menü Werkzeuge:
http://cssmenumaker.com/
http://www.cssportal.com/css-menu-generator/
http://www.cssmenubuilder.com/home
Button Werkzeuge:
http://www.cssbuttongenerator.com/
http://css3button.net/
http://css-tricks.com/examples/ButtonMaker/
Text Werkzeuge:
http://csswarp.eleqtriq.com/
http://www.themeshock.com/css-text-shadow/
Farbwerkzeuge:
http://www.w3schools.com/tags/ref_colormixer.asp
http://www.w3schools.com/tags/ref_colorpicker.asp
https://kuler.adobe.com/
http://colorschemedesigner.com/
Browsertools & Tricks:
Opera: Dragonfly (Ctrl+Shift+I)
Firefox: https://addons.mozilla.org/de/firefox/addon/firebug/
Chrome: Rechtsklick -> Element untersuchen [inspect Element]
Sicherheit:
https://addons.mozilla.org/de/firefox/addon/hackbar/
https://addons.mozilla.org/de/firefox/addon/sql-inject-me/
https://addons.mozilla.org/de/firefox/addon/live-http-headers/
Sonstiges:
http://www.colorhexa.com/ (Farbcodes in allen Variationen; nicht zu aufregend aber häufig nützlich)
Ein Dankeschön für die Einreichungen geht an:
n0tiert, other-stuff, lumix, testgamers, gymba, simon-d, shorten, tecfreak, universal-server, sfn & pc-informatik
Edit by daswing: Neue Links übernommen und Beiträge gelöscht.
Beitrag zuletzt geändert: 21.1.2014 22:55:50 von daswing -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Allgemein gute Tipps Doch muss ich feststellen das hier ein besonderer Editor nicht auf geführt wird und zwar der
Geany, Für Linux & Windows
Hier der Link http://www.geany.org/
Dieser Editor ist für webentwicklungen gerade zu Perfekt:
Auch das lästige suchen nach Farbcodes ist in diesem Editor vom Tisch den dafür stellt Geany ein eigenes Modul zur Verfügung.
Testet ihn doch einfach selber mal also ich möchte ihn nicht mehr missen wollen ;)
Beitrag zuletzt geändert: 7.2.2014 0:44:10 von break-head -
@chemiegoetter: Super Editor - da kommt auch kein Phase 5, Web Studio oder VS Express 2013 ran (lediglich Aptana hat mich für ein paar Wochen in seinen Bahn gezogen, ehe ich zu Scriptly zurück wechselte - wird aber leider seit ein paar Jahren nicht weiterentwickelt ...
@schmidtb: Danke für die Info - sieht auf dem ersten Blick (viel)versprechend aus ... -
da-button-factory ist auch noch zu erwähnen. ist eig der beste button generator.
-
Vielen Dank, fürs sammeln, aussortieren und das geordnete Bereitstellen.
Vielleicht ist da noch ein brauchbarer Vorschlag bei:
Falls man mal auf die Schnelle einen BrowserCompatibilityReport von seinem JS braucht:
http://jscc.info
http://www.javascriptlint.com/online_lint.php
ServerDiagnostics&BlacklistsCheck
http://mxtoolbox.com
https://www.ssllabs.com/ssltest/
Den svg-editor kennt natürlich auch schon jeder;)
http://svg-edit.googlecode.com/svn/branches/stable/editor/svg-editor.html
Den w3c-validator kennt natürlich jeder:
Für HTML, XHTML: http://validator.w3.org
Für CSS oder HTML mit CSS: http://jigsaw.w3.org/css-validator/
Und noch:
http://www.quirksmode.org/dom/w3c_css.html
http://www.quirksmode.org/dom/w3c_cssom.html -
Ich kann auch mal die Website makerbook.net empfehlen
Das ist vielleicht etwas für Designer. Damit findet ihr aber einiges womit ihr eure Website optisch aufpäppeln könnt -
Für CSS kann ich ganz altmodisch das Buch CSS für Kids empfehlen es ist für alle sehr verständlich und hilft echt verdammt viel
-
Openbooks:
http://chimera.labs.oreilly.com/
https://www.rheinwerk-verlag.de/openbook/
-> BSP: http://chimera.labs.oreilly.com/books/1230000000345/index.html
und...
http://docstore.mik.ua/orelly/bookshelfs.html
Beitrag zuletzt geändert: 26.8.2016 17:57:47 von bbelefant -
https://www.materialpalette.com/
Stellt automatisch eine Frabpalette auf Basis gewählter Farben zusammen. Für Material Design Junkies nur zu empfehlen.
Grüße :) -
Ich hätte noch dreii Editor hinzuzufügen.
Als erstes den kostenlosen Atom, kennen bestimmt viele, trotzdem mal genannt. Kenne einheitlich keinen besseren gratis Editor. Lässt sich auch mit vielen Plugins, wie FTP-sync, anpassen. ($Free, Linux, macOS, Windows): https://atom.io
Für alle macOS Nutzer noch zwei weitere Apps:
TextWrangler: Ist auch ein sehr leicht zu verstehender Editor und nicht so komplex wie Atom. Keine einarbeitungs Zeit, direkt Code schreiben. ($Free, macOS): http://www.barebones.com/products/textwrangler/
Und jetzt noch der beste Editor, für Webentwicklung, den ich so kenne.
Coda 2.5: Projekte können mit externen und lokalen Roots abgelegt werden die Direkt als Versions Verwaltung genutzt werde. Git integration, Integrierter FTP, SMTP Manager und SSH Konsole. Persönliches highlight: ohne weitere Einrichtung und Anpassung PHP lokal aufführen und intrigierte Webdevelopertools in der Vorschau. Einziger hacken, der Preis. ($99 = 93€ bei aktuellem Kurs, macOS): https://panic.com/coda/
$99 für einen Editor finden bestimmt sehr viele zu viel aber wer einmal mit Coda gearbeitet hat will nichts anderes mehr, nur Atom kann irgendwo noch mithalten. Würde gerne weitere Meinungen hören.
lg -
Wenn man mit regulären Ausdrücken arbeitet und diese ausprobieren will, dann ist die Seite ganz gut:
http://www.regexr.com -
Für Navigationsleisten: EasyCSSMenu https://www.easycssmenu.com/ (Auch in der Free Version ziemlich gut)
-
https://flatuicolors.com/ Wirklich großartige Farben für moderne Designs. Wird von mir in fast jedem Projekt genutzt.
-
https://www.visualstudio.com/de/ super Tool, dass ich dafür netze!
-
Hier vielleicht helfen dir die Links!
http://www.cssbuttongenerator.com/
http://www.dercssbutton.com/ -
Für Ihren Abschnitt der Code-Tools
Sie müssen dieses Tool überprüfen
https://url-decode.com/
Das bietet nicht nur die URL-Dekodierung / -Codierung, HTML-Codierung, Base64-Codierung / -Decodierung, sondern verfügt auch über mehr als 100 Webentwicklungstools. -
https://paletton.com
Ich persönlich finde dieses Tool zum Erstellen von Farbpaletten sehr nützlich -
Danke erstmal
Aber was hältst du von Visual Code als Entwicklungsumgebung.
Finde ich persönlich am besten
LG Tobi -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
