Ressources et outils en ligne HTML/CSS

[sandokan]

Bibliothèque d’animation CSS

animatie.css : https://animate.style/

Animista: https://animista.net/

Vivify : https://github.com/Martz90/vivify

Magic animation CSS3 : https://www.minimamente.com/project/magic/

Cssanimation: http://cssanimation.io/

Hover.css: https://ianlunn.github.io/Hover/

Wickedcss: https://kristofferandreasen.github.io/wickedCSS/

Three Dots : https://nzbin.github.io/three-dots/

Csshake: http://elrumordelaluz.github.io/csshake/

Angrytools: https://angrytools.com/

Générateur de font

Google font generator : https://fonts.google.com/#ChoosePlace:select

Dafont : https://www.dafont.com/fr/

Outils HTML


Schnaps.it : https://schnaps.it/

Scriptol : https://www.scriptol.fr/html5/

Initializr : http://www.initializr.com/

Textfixer: https://www.textfixerfr.com/html/

Générateur HTML : https://www.mesoutils.com/generateur.php

Validateur de code HTML

Validateur (X)HTML du W3C : https://validator.w3.org/

Validateur de code CSS

Validateur CSS du W3C : https://jigsaw.w3.org/css-validator/

Editeur de code

Sublimtext : https://www.sublimetext.com/

Brackets: https://brackets.io/

Visual studio code: https://code.visualstudio.com/

Atom: https://atom.io/

Live editor: http://liveditor.com/index.php

Light Table : http://lighttable.com/

Editeur de code en temps réel

Codepen.io : https://codepen.io/pen/

Squarefree: https://htmledit.squarefree.com/

HTML editor: https://html-online.com/editor/

HTML code editor: https://htmlcodeeditor.com/

Livewave : https://liveweave.com/

HTML instant: https://www.htmlinstant.com/

JS bin: http://jsbin.com/welcome/130/edit?html%2Coutput=

Dabblet : https://dabblet.com/

Site pour apprendre à coder

Openclassrooms : https://openclassrooms.com/fr/courses/1 ... l5-et-css3

Grafikart.fr: https://grafikart.fr/tutoriels/html et https://grafikart.fr/tutoriels/css

Pierre-Giraud: https://www.pierre-giraud.com/html-css- ... der-cours/

Codecademy : https://www.codecademy.com/catalog/language/html-css

Live-code: https://www.live-code.fr/view/courses/f ... -html-css/ (il faut s’inscrire)

Mamouthland : http://css.mammouthland.net/

Learn layout : https://fr.learnlayout.com/

Freecodecamp : https://www.freecodecamp.org/

Developpez. com : https://www.developpez.com/

Bitdegree : https://fr.bitdegree.org/learning

EDX : https://www.edx.org

Codingame : https://www.codingame.com/start

Dash general assembly : https://dash.generalassemb.ly/

Khanacademy: https://fr.khanacademy.org/

The odin project : https://www.theodinproject.com/

Udacity : https://www.udacity.com/

Bent.io : https://bento.io/

Upskill : https://upskillcourses.com/

W3schools : https://www.w3schools.com/

Coderbyte : https://coderbyte.com/

Stackoverflow : https://stackoverflow.com/

MDN web doc : https://developer.mozilla.org/fr/

Marksheet : https://marksheet.io/

Tuto.fr : https://fr.tuto.com/tuto/programmation/gratuit.html

Class central : https://www.classcentral.com/

01tuto.fr : https://01tuto.fr/categorie/internet/

Mymooc.com : https://www.my-mooc.com/fr/categorie/programmation

Fun Mooc : https://www.fun-mooc.fr/fr/cours/?langu ... jects=2787

Learn digital with google : https://learndigital.withgoogle.com/ateliersnumeriques/

Facebook : https://www.facebook.com/business/learn ... to?ens_rdr

Coursera : https://www.coursera.org/courses?query=free

Skillshare: https://www.skillshare.com/fr/browse/web-development

Udemy : https://www.udemy.com/courses/developme ... popularity

Flexboxfroggy : https://flexboxfroggy.com/#fr

Bootstrap

Bootstrap : https://getbootstrap.com/

Flexbox Memorandum des fonctions flexbox (pdf) : https://github.com/alsacreations/guidel ... tsheet.pdf

Grid

Memorandum des fonctions grid (pdf) : https://github.com/alsacreations/guidel ... tsheet.pdf

Interactive CSS grid generator: https://grid.layoutit.com/


Extension de navigateur

Chrome

Chrome HTML editor : https://chrome.google.com/webstore/deta ... gfof?hl=fr


Live editor for CSS : https://chrome.google.com/webstore/deta ... apol?hl=fr


Amino: CSS editor : https://chrome.google.com/webstore/deta ... eaaf?hl=fr


Live CSS editor: https://chrome.google.com/webstore/deta ... bdpg?hl=fr


Visionneuse CSS pour google chrome: https://chrome.google.com/webstore/deta ... foag?hl=fr


Debug CSS : https://chrome.google.com/webstore/deta ... jnkj?hl=fr


Gridman -CSS Grid inspector: https://chrome.google.com/webstore/deta ... picn?hl=fr


CSS selector finder for chrome: https://chrome.google.com/webstore/deta ... piml?hl=fr


CSS to SCSS or SASS converter: https://chrome.google.com/webstore/deta ... lame?hl=fr


Page manipulator : https://chrome.google.com/webstore/deta ... ekko?hl=fr


CSS color name : https://chrome.google.com/webstore/deta ... ejah?hl=fr


Code plunker (Live HTML CSS Editor) : https://chrome.google.com/webstore/deta ... kofe?hl=fr

Web developer : https://chrome.google.com/webstore/deta ... mfkcnldhhm

CSS Pepper: https://chrome.google.com/webstore/deta ... jhoofhpehk

Fonts Ninja : https://www.fonts.ninja/

Image Downloader : https://chrome.google.com/webstore/deta ... bnkjhpaldj

Firefox

Editeur HTML Webstudio : https://addons.mozilla.org/fr/firefox/a ... webstudio/


HTML validator : https://addons.mozilla.org/fr/firefox/a ... validator/


Show HTML : https://addons.mozilla.org/fr/firefox/addon/showhtml/


Single HTML downloader : https://addons.mozilla.org/fr/firefox/a ... ownloader/


Singlefile : https://addons.mozilla.org/fr/firefox/a ... ngle-file/


Edit with sublim Text : https://addons.mozilla.org/fr/firefox/a ... lime-text/


Edit with notepad++ : https://addons.mozilla.org/fr/firefox/a ... h-notepad/


Tem Ex: Template extractor: https://addons.mozilla.org/fr/firefox/a ... extractor/


CSSViewer : https://addons.mozilla.org/fr/firefox/a ... r-quantum/


CustomCSS injector: https://addons.mozilla.org/fr/firefox/a ... -injector/


CSS override: https://addons.mozilla.org/fr/firefox/a ... -override/


Oli Grid CSS : https://addons.mozilla.org/fr/firefox/a ... -grid-css/


Stylus: https://addons.mozilla.org/fr/firefox/addon/styl-us/


Stylebot: https://addons.mozilla.org/fr/firefox/a ... lebot-web/

ColorZilla : https://addons.mozilla.org/fr/firefox/addon/colorzilla/

Webdeveloper: https://addons.mozilla.org/fr/firefox/a ... developer/

Font finder : https://addons.mozilla.org/fr/firefox/a ... t-inspect/

Measure it : https://addons.mozilla.org/fr/firefox/addon/measure-it/

Windows resizer : https://addons.mozilla.org/en-US/firefo ... extension/

Code tech: https://github.com/zaach/codetch-ext

Page performance test: https://addons.mozilla.org/en-US/firefo ... ance-test/

Autres outils

Real favicon generator: https://realfavicongenerator.net/

Script HTML/CSS : http://www.outils-web.com/page-script-html-css-menu.asp

Korben : https://korben.info/category/infos/developpement