Ressources gratuites pour le développeur front-end
Quelques ressources utiles pour le développement web, concernant la partie front-end (HTML/CSS notamment) à destination des novices et personnes expérimentés.
137 VuesVues·2 EnregistrementsEnregistrementsOutils (English)
Colors
COLOURlovers: User created & shared color palette inspiration
ColorPicker: Online Color Picker Tool
Color Hex: A free color tool providing information about any color
Flat UI Colors: Web app helps you to copy the colors from Flat UI
Contrast Ratio: Easily calculate color contrast ratios
Color Safe: Color palettes based on WCAG Guidelines
Color Contrast Checker: Check color contrast by analyzing difference between foreground and a background color.
Colllor: Color palette generator
Paletton: Tool for creating color combinations
Colorpeek: Quickly preview, share and convert one or more CSS colors, including hex, RGB, HSL, RGBA and color keywords.
Colourcode: Online designer tool, which allows you to easily and intuitively combine colours.
Chrome Daltonize!: Daltonization is a technique of exposing details to color-blind users, allowing them to see what they otherwise would have missed.
Flat UI Color Picker: Flat Color Picker which gives you the perfect colors for flat designs.
SassMe: A Tool for Visualizing SASS Color Functions
HEX To RGB: Convert Hex color to RGB.
HSL to RGB: HSL to RGB / RGB to HSL converter.
Colour Scheme Calculator: Choose a starter color to calculate its color wheel including triad, complementary, analogous, and split complementary colours, plus saturation and lightness variations.
CSS Generators
Ultimate CSS Gradient Generator: CSS gradient generator
EnjoyCSS: All in one CSS generator
CSS MenuMaker: Create responsive website navigation
On/Off Flip switch: Generate CSS3 On/Off flip switches
CSSmatic:Gradient, border radius, box shadow & noise texture generator
CSS Triangle: CSS triangle generator
CSS Arrow Please: CSS arrow generator
Patternify: A CSS Pattern Generator
CSS3 Patterns Gallery: CSS3 patterns gallery
Critical Path CSS Generator: Speed up your page render time
Button Generator: CSS button generator
Layout Generator: Create CSS layout
Tridiv: Web-based editor for creating 3D shapes in CSS
Trianglify: Generate colorful triangle meshes that can be used as SVG images and CSS backgrounds
Delaunay Triangle: Triangle pattern maker that can be used as background
Bear CSS: Generates a CSS template containing all the HTML elements, classes & IDs defined in your markup
Stylie: A fun CSS animation tool
Calculator & Converter
PXtoEM: Convert pixels to EM
DPI Love: Find DPI/PPI of any screen
CSS Inliner:Automatically inline your email’s CSS
Code Beautify: Beautify, Validate, Minify, Analyze and Convert your JSON, XML, JavaScript, CSS, HTML, Excel
Pixel Density Converter: Tells you how to scale graphics between four density groups.
Is This Retina?: DPI/PPI Display calculator
Specificity Calculator:A visual way to understand CSS specificity
NTH-Test: nth-child and nth-of-type Tester
Typography & Font
Google Fonts: Open source web fonts
Font Squirrel: Hand picked free web fonts
Dafont: Archive of freely downloadable fonts
Font Space: Download free fonts
Type Genius: Find the perfect font combo
Golden Ratio Typography Calculator: Discover the perfect typography for your website
What Font Is: Identify font from a image
Typetester: Compare Web fonts from Adobe Edge, Google and Typekit
Tiff: Find out difference between Google fonts
Wordmark.it: Preview the output of fonts for a selected word
TypeWonder: Test web fonts on any live website
Fit Text: A jQuery plugin for inflating web type
Icons
Font Awesome: Scalable vector icons that can instantly be customized
Material Design Icons: 750 glyphs Material Design system icons pack by Google Design
Iconogen: Generate favicons, Windows 8 Tiles, Apple Touch icons, Android and iOS icons
Marka: Beautiful transformable icons
Maki: Icon set for web cartography
Fontello: Icon font generator
Fontastic: Create your own icon font
Entypo: A suite of 411 carefully crafted premium pictograms by Daniel Bruce
Typicons: Free-to-use vector icons embedded in a webfont for easy use in your user interfaces
Iconmonstr: A large collection of glyph icons from a German artist
Octicons: Icon font launched by GitHub
GlyphSearch: Search for icons from Font Awesome, Glyphicons, IcoMoon, Ionicons, and Octicons
Analyze Website Style
Stylify Me: Overview of the style guide of a site, including colors, fonts, sizing and spacing
Type-o-matic: A browser extension that finds all the fonts on a page
Editor
CodePen: Show case of advanced techniques with editable source code
JSFiddle: Test and share JavaScript, CSS, HTML or CoffeeScript online
JS Bin: A live pastebin for HTML, CSS & JavaScript and a range of processors
CSSDeck: Collection of Awesome CSS and JS Creations to help out frontend developers and designers
Dabblet: An interactive CSS playground and code sharing tool
Liveweave: Liveweave is a HTML5, CSS3 & JavaScript playground for web designers and developers
Adobe Edge Reflow: Design tool that supplements your design workflow to help you create beautiful responsive designs for all screen sizes
webflow: Drag-and-drop website builder for creating professional responsive websites
Macaw: Provides the same flexibility as your favorite image editor but also writes semantic HTML and remarkably succinct CSS
Developer Tools
Chrome DevTools: Set of web authoring and debugging tools built into Google Chrome
Grunt: The JavaScript Task Runner for automating tasks
Bower: Solution to the problem of front-end package management
Yeoman: A generator ecosystem, basically a plugin that can be run with the `yo` command to scaffold complete projects or useful parts
Can I Use: Up-to-date browser support tables for support of front-end web technologies
HTML5 Please: Look up HTML5, CSS3 & find out if they are ready for use
CSS Values: CSS Reference, Properties and Values
CSS Triggers: An invaluable reference on how CSS affects performance
Testing
W3C Markup Validation: Checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML
HTML_CodeSniffer: Checks HTML source code and detects violations of a defined coding standard
W3C CSS Validation: Check (CSS) and (X)HTML documents with style sheets
CSS Lint: Points out problems with your CSS code
JS Lint: JavaScript program that looks for problems in JavaScript programs
PhantomCSS: Visual/CSS regression testing with PhantomJS
CSS Critic: Regression testing of CSS
DiagnostiCSS: Visually detect any potentially invalid or inaccessible HTML markup
QUnit: A JavaScript Unit Testing framework
Dromaeo: JavaScript Performance Testing
Opera Mobile Classic Emulator: Use the profile selector to spawn multiple Opera Mobile Classic instances with a defined resolution, pixel density, user interface
Performance
Pingdom Website Speed Test: Test & analyze the load time of a live page
WebPagetest: Website speed test from multiple locations around the globe
PageSpeed Insights: Analyzes website and suggest ways to make it load faster
GTmetrix: Grade site’s performance and provides recommendations to fix these issues
YSlow: Analyzes & offers suggestions for improving the page’s performance
Perfmap: A performance heatmap of resources loaded in the browser
Optimization
CSSCSS: Let you know which rulesets have duplicated declarations
Helium: javascript tool to scan your site and show unused CSS
CSS Tidy: Opensource CSS parser and optimiser
CSS Compressor: Compress your CSS to increase loading speed
CSS Dig: Take a look at all your CSS properties, their frequency and variations
JavaScript Minifier: Minify your JavaScript
FF Subsetter: Reduce the font file size to optimize bandwidth usage
Compressor.io: Reduce the size of your images while maintaining a high quality
Prefix free: add the current browser’s prefix to any CSS code only when it’s needed
Sprite Cow: Generate CSS for sprite sheets
TinyPNG: Advanced lossy compression for PNG images
Adaptive Images: Detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of images
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/
Outils (French)
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/
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/
Sites pour apprendre à coder
Openclassrooms : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
Grafikart.fr: https://grafikart.fr/tutoriels/html et https://grafikart.fr/tutoriels/css
Pierre-Giraud: https://www.pierre-giraud.com/html-css-apprendre-coder-cours/
Codecademy : https://www.codecademy.com/catalog/language/html-css