Ressources


Vous trouverez ci-dessous non pas des articles mais des outils : tutoriels, vidéos, livres, pages web de référence, listes de bibliothèques, listes de bonnes pratiques, etc.
Cette page se remplit chaque jour grâce à vous, n’hésitez pas à me contacter (Twitter, Google+, Facebook) pour en ajouter !

CSS

Pour débuter :

Références à garder à portée de main :

  • Référence CSS, le guide de toutes les propriétés CSS, par Mozilla. À ajouter à vos favoris, pour l’avoir toujours sous la main !
  • Alternative à Référence CSS, mais en anglais, l’almanach de CSS-Tricks.
  • Autre alternative, toute récente, en anglais, le CSS Reference de Codrops, super bien fait !
  • Pour tout comprendre de la syntaxe des propriétés CSS, les slides (en anglais) de Russ Weakley sont didactiques et drôles.
  • Un très long article de CSS Reference sur Flexbox, par Sarah Soueidan, une vraie référence sur Flexbox.
  • Code Guide, les bonnes pratiques et conventions de bases à suivre par tout développeur Front End.
  • CSS Guidelines, l’indispensable guide de Harry Roberts pour un CSS cohérent, maintenable et partageable (y compris avec vous-même !)
  • CSS Vocabulary, une liste de toutes les termes à connaître, dans une présentation illustrée intuitive.
  • Can I Use, pour CSS.
  • HTML5 please, Cherchez une fonctionnalité HTML5, CSS3, etc., vérifiez si elle est sûre d’utilisation, et sinon la façon dont vous pourriez l’utiliser — avec des polyfills, des fallbacks, ou telles quelles..
  • WTF, HTML & CSS?, en anglais, une liste tenue à jour de problèmes et dilemmes liés à HTML, et leurs solutions.
  • CSS-Triggers, en anglais, une liste de toutes les propriétés CSS et de ce qu’elles "déclenchent" dans le navigateur, et leur impact sur la performance de votre site.

Outils divers

  • Liste d’animations CSS, la visualisation en ligne est top !
  • Flexbox Froggy, un jeu absolument génial pour apprendre Flexbox !
  • Jack in the Flexbox, un blog entièrement consacré à Flexbox, par Raphaël Goetter.
  • Exercices Flexbox, excellent site pédagogique de Cyril Vernier.
  • What the Flexbox, série de vidéos gratuites par Wes Bos (en anglais).
  • Un terrain de jeu pour comprendre Flexbox.
  • Cubic Bézier pour apprendre à utiliser les courbes de Bézier en s’amusant.
  • CSS Gradient Generator , comme son nom l’indique, un outil en ligne pour s’amuser avec les dégradés et comprendre comment ça marche.
  • Blend, un autre outil intuitif pour générer facilement des dégradés CSS.
  • Le validateur CSS de W3C.
  • CSS Zen Garden est un site passionnant qui vous montre ce qu’on peut faire avec un design basé sur CSS. Le code HTML reste le même, seul change le style. Une démonstration de virtuosité inspirante, et vous pouvez y ajouter vos propositions !

Tester et s’amuser :

  • CSS3 Please, un outil en ligne qui vous permet de tester des tas de propriétés, très parlant !

Sass

  • Sass Guidelines (en français), une tonne de méthodes et de conseils donnés par le grand Hugo Giraudel
  • A visual guide to Sass & Compass colour fonctions, une page super intuitive pour jouer avec les fonctions couleurs de Sass et visualiser le résultat.
  • Color me Sass, une bibliothèque de couleurs pour votre Sass, très pratique !
  • SassMe, un outil simplissime pour créer vos couleurs avec les fonctions de Sass, en partant d’une couleur de base. Présentation ici.

HTML

Pour débuter :

Pour approfondir :

  • En anglais, une approche plus pointue de HTML5, Dive into HTML5 de Mark Pilgrim, une bible !
  • Liste des caractères Unicode.
  • Caractères spéciaux et entités HTML
  • Le validateur HTML de W3C.
  • En anglais, HTML5 Doctor, une mine d’informations et d’explications sur HTML en général et sur les éléments HTML en particulier. Consultez par exemple les éléments listés dans HTML5 Element Index.
  • HTML5 please, Cherchez une fonctionnalité HTML5, CSS3, etc., vérifiez si elle est sûre d’utilisation, et sinon la façon dont vous pourriez l’utiliser — avec des polyfills, des fallbacks, ou telles quelles..

Custom Elements :

Polymer :


JavaScript

Pour apprendre :

  • How to learn Javascript properly (en anglais)
  • Codecademy (avec les limites rappelées par le site précédent, gratuit, en anglais).
  • JSDB, en anglais, la base de donnée des meilleures bibliothèques JavaScript disponibles.
  • En anglais, JavaScript the right way est une page de ressources très riche, articles, outils, livres...
  • Javascriptoo, une bibliothèque de ressources JavaScript avec possibilité de recherche par catégories, des statistiques utiles, etc.
  • Introduction au DOM.
  • Pour expérimenter et bidouiller avec JavaScript, rien de mieux que JSFiddle.
  • JSHint, pour ne plus perdre votre temps sur votre code JavaScript, copiez / collez votre code source JS dans cette web app et elle se charge de vous dire où sont les problèmes. Vous pourrez ainsi débugger plus rapidement !
  • Avez-vous vraiment besoin de jQuery ? Un outil épatant de Zeno Rocha, en anglais. jQuery est simple et résout plein de problèmes, notamment de compatibilité navigateur, mais parfois il peut être plus efficace d’utiliser JavaScript, plus rapide et moins lourd.
  • TagTree propose des screencasts (en anglais, payant, essai gratuit 3 jours) sur divers sujets liés à Javascript : Angular.js, Express.js, Node.js, mais aussi yeoman etc.
  • Airbnb JavaScript Style Guide
  • Node School, un excellent site gratuit pour apprendre Node et tout ce qui tourne autour.

Ember.js :

  • Ember.js, le site d’Ember est très clair et offre un guide d’introduction très utile, ainsi qu’un blog, des articles, des vidéos, des outils et bien d’autres choses.
  • Ember CLI est moins clair, mais l’article qui suit aide à tout comprendre.
  • Getting started with Ember.js using Ember CLI, par Andy Brown

RWD, design responsif

  • Par Brad Frost, une liste impressionnante de ressources liées au design responsif.
  • Liquidapsive, un outil en ligne tout simple pour comprendre en 30 secondes la différence entre design adaptif, responsif, fluide et statique.

SVG

  • SVG Ground, tout, absolument tout sur SVG ! (en français)
  • La documentation MDN (Mozilla Developper Network) sur SVG, en français.
  • Un tutoriel Mozilla pour commencer SVG, en français.
  • A compendium of SVG information, par Chris Coyier : une avalanche d’infos, d’articles, de ressources sur SVG. Vous ne pourrez plus dire que vous ne saviez pas !
  • Une plateforme (en anglais) sur SVG, dans "showcase" vous trouverez des motifs à télécharger.
  • Snap.svg une bibliothèque JavaScript par Dmitry Baranovskiy.
  • Démos SVG sur CodePen.
  • SVG editor, de Peter Collingridge, bon outil pour éditer vos svg, beaucoup d’options d’optimisation pour alléger les fichiers.
  • Awesome SVG, de Willian Justen, une liste collaborative de ressources SVG.

Design

Couleurs :

  • Liste des caractères Unicode.
  • Color Template, pour tout savoir sur les couleurs, un très joli site, très complet et instructif.
  • Adobe Kuler, outil en ligne pour choisir ses couleurs, très complet et inspirant.
  • Color Scheme Designer, comme Kuler, avec un fonctionnement différent, très bien fait.
  • WebColorData, avec cet outil les couleurs n’auront plus aucun secret pour vous. Entrez l’url d’un site internet et WebColorData référence en un panel les couleurs dominantes trouvées. Vraiment pratique.
  • Color.io, autre outil très pratique pour choisir une couleur et toute la palette complémentaire.
  • Pictaculous, quel schéma de couleurs utiliser avec une image ? Uploadez votre image sur Pictaculous, il vous donnera une belle palette de couleurs.
  • 0 to 255, un outil simple pour trouver des variations sur une couleur.
  • Hex.colorrrs, un convertisseur de Hex en RGB, simple, bien fait, visualisation de la couleur en cours de frappe.
  • Brand Colors, une collection de palettes de couleurs des grandes marques.

Autres :


Sketch


Typographie

Sur Typewolf vous pourrez trouver les typos en action sur des sites de qualité : association entre polices de caractère, interactions de la typo et du design, Typewolf est une vraie source d’inspiration.

Pour trouver des polices payantes :

Pour trouver des polices gratuites :

Pour associer des polices :

  • Font Pair, pour associer des polices Google. Très bien fait.
  • Font Pairing, une interface très pratique pour associer des polices Google.
  • Fonts in use, un catalogue de polices de caractères dans leur contexte réel. Bonne interface de recherche et très utile pour trouver les polices qui vont bien ensemble.
  • Fontwolf, le site de Jeremiah Shoaf, nombreuses polices en contexte réel, bon outil pour chercher de bonnes associations de polices de caractères.
  • Typ.io est une collection de sites avec infos sur les polices utilisées. Très intéressant si vous cherchez des associations de polices.
  • Google Webfont pairing, superbe site (participatif) illustrant l’association de polices. Pour l’inspiration et pour le plaisir de lire les fables d’Ésope.

Autres outils et références :

  • The Elements of Typographic Style applied to the web, l’ouvrage fondamental de Robert Bringhurst appliqué au web.
  • The Elements of Typographic Style, par Robert Bringhurst : si vous ne devez acheter qu’un seul livre sur la typographie, c’est celui-là !
  • On Web Typography de Jason Santa Maria est une excellente introduction à la typographie sur le web, et à la typographie en général.
  • Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students, d’Ellen Lupton, un beau livre, très clair, très complet.
  • The Geometry of Type: The Anatomy of 100 Essential Typefaces, de Stephen Coles analyse la façon dont sont construites 100 polices de caractères parmi les plus connues et c’est passionnant. NB: Aux USA le livre s’appelle “The Anatomy of Type” mais c’est le même !
  • Butterick’s practical typography, par Matthew Butterick, un livre en ligne (et en anglais) sur tous les fondamentaux de la typographie.
  • Typedia l’encyclopédie communautaire des fontes.
  • Type-Finder vous aide à trouver les polices de caractères dont vous avez besoin : un petit questionnaire sur les caractéristiques souhaitées et il vous envoie une sélection de polices correspondantes.
  • Glyphr est un outil en ligne qui vous permet de créer vos propres typo, très simple d’utilisation, design cool.
  • Kerntype, un site amusant pour s’entraîner au crénage (kerning), attention c’est addictif !
  • Shape Type, un autre site pour apprendre en s’amusant, cette fois il s’agit d’apprendre à utiliser les courbes de Bézier pour former les lettres, vraiment très intéressant.
  • Reference, une liste d’articles, de livres, de sites… établie et mise à jour par Typekit, organisée par sujets (en anglais).
  • Caractères spéciaux et entités HTML
  • The State of Web Type, un site toujours à jour sur la compatibilité navigateurs de toutes les fonctionnalités liées à la typographie, depuis les plus simples (font-weight) jusqu’aux plus pointues (kern, smcp, clig…)

Last but not least : l’extension WhatFont disponible pour Google Chrome et Safari vous permet d’avoir toutes les infos sur les polices de caractères utilisées par le site que vous visitez. Hyper utile dès que vous repérez une belle combinaison de fontes, un superbe titre, des italiques magnifiques, etc. Il suffit de cliquer sur le texte et les infos apparaissent.


Photos

Si vous avez besoin de photos libres de droits, voici quelques ressources disponibles :

Mes préférées :

  • Unsplash – Une newsletter gratuite publiée tous les dix jours avec de nouvelles photos.
  • Death to the Stock Photo vous envoie des photos une fois par semaine.
  • Raumrot, très belles photos HD, libres y compris pour utilisation commerciale. Belle présentation, pratique.

Beaucoup d’autres ressources, dont quelques agrégateurs :

  • Public Domain Images, des centaines de photos libres de droits, de nouvelles photos chaque semaine. On retrouve dans ce site certaines photos proposées par les sites qui suivent.
  • Pixabay, idem, aggrège des ressources venues des sites qui suivent, mais belle présentation et en français.
  • The Stocks aggrège les photos des meilleurs sites qui suivent.
  • Magdeleine, aggrège de belles photos avec une belle présentation et un système de recherche simple.
  • New Old Stock Photos – Super photos vintage tirées d’archives publiques. Libres de copyright.
  • Start up stock photos, comme son nom l’indique, des photos de geek en pleine action, d’ordis, de réunions au café... belles photos.
  • Super Famous – Photos géologiques, biologiques et aériennes par le designer d’interaction Folkert Gorter. Pas ennuyeux du tout.
  • Picography, joli site, simple, belles photos.
  • Little Visuals – Une autre newsletter gratuite, toutes les semaines 7 nouvelles photos.
  • Pic Jumbo – Base de données de photos libres de droits.
  • Creative Commons pics on Flickr. Photos en Creative Commons sur Flickr.
  • Gratisography par Ryan McGuire, deux nouvelles photos ajoutées chaque semaine et téléchargeables gratuitement.
  • IM Free photos libres de droits, sur de nombreux sujets. Mention de l’attribution requise.
  • SplitShire un site perso de partage de photos, bien fait, large choix.
  • Morguefile contient des photos d’artistes librement mises à disposition moyennant mention du nom.
  • Getrefe photos libres de droits prises avec un mobile.
  • Free Images, le site est moche, la procédure d’inscription pénible, mais le choix très large.
  • Free range stock, inscription au site (gratuite), large choix.
  • Free photos bank, on y retrouve pas mal de choses venant d’autres sites, pas d’inscription.

Pas vraiment gratuit :

  • Dreamstime, en partie libre. Inscription au site (gratuite) nécessaire.
  • Free digital photos, les photos en petit format sont gratuites, payant pour le grand format.
  • Pas vraiment libres de droits (essai gratuit puis abonnement) mais intéressant : Comp Fight

Moteur de recherche d’images, Can we Image est super simple et utile.

Outils de compression d’images :

Pour retrouver la source d’une image, ou voir comment elle est utilisée sur d’autres sites, tineye est un outil gratuit en ligne. Vous pouvez consulter la vidéo de présentation sur YouTube (en anglais) ou lire cet article.


UX, expérience utilisateur

  • UX How-To, par Luke Wroblewski, une série de vidéos courtes (en anglais) consacrées chacune à la résolution d’un problème d’UX.

Accessibilité

Les essentiels

  • Le guide Contribuer sur le web de manière accessible
  • Un excellent outil pour tester l’accessibilité de votre site, Wave accessibility tool.
  • KBAccess, la base de connaissance de bons et mauvais exemples d’accessibilité.
  • Le site WebAIM, en anglais, extrêmement complet sur toutes les questions liées à l’accessibilité.
  • Introduction to Web Accessibility, tutoriels vidéo en anglais par Google.
  • Tanaguru Contrast-Finder trouve les bons contrastes de couleurs pour l’accessibilité web.
  • ARIA examples, par Heydon Pickering, comme son nom l’indique cette page donne un tas d’exemples sur la façon d’utiliser ARIA pour rendre accessibles des éléments d’interface courants. Très bien faite !
  • Aural UI of the elements of HTML, par le groupe Paciello. Tableau super complet décrivant l’interface sonore des éléments HTML : quelle est la compatibilité des éléments HTML avec les screen readers et comment mon site est-il lu par les outils d’accessibilité ?
  • Bibliothèques accessibles regroupe énormément de ressources sur l’accessibilité dans un site bien fait et agréable à lire (et c’est en français !).

Publications, news :

Outils divers :


Outils de développement

  • Grunt
  • Codekit
  • CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C’est aussi une source d’inspiration pour vos propres designs.
  • Automating front-end workflow, slide deck par Addy Osmani (en anglais).
  • Sublime Text 2, un excellent éditeur de texte largement utilisé.
  • Sublime Text 2, tutoriel par Level up tuts, 19 vidéos (en anglais) pour connaître Sublime Text.
  • Sublime Text by Zeef, tutos, communauté, etc, une super page de ressources consacrées à votre éditeur favori.
  • Template Engine Chooser, une page bien faite et pratique pour choisir un outil de templating (Mustache, Jade etc.).

Outils pour apprendre et créer des Expressions Régulières (regex) :


Performances

  • Feed the bot, Un outil en ligne épatant et très informatif pour améliorer vos performances selon Google.
  • Avec web page test, vous pouvez simuler la façon dont vos pages sont chargées, et obtenir de nombreuses infos sur les points à améliorer. Indispensable !

Email


SEO, Web Sémantique


Divers

Sites de tutoriels en anglais :