Les Doigts dans le Web #5 : ressources HTML & CSS

Les Doigts dans le Web #5 : ressources HTML & CSS

Dans cet article, je vous partage la liste des ressources que j’utilise dans le cadre du cours HTML & CSS que je donne sur Marseille.

Le temps est une denrée de plus en plus rare! Je suis actuellement bien occupée mais je ne vous abandonne pas. C’est pourquoi j’ai eu l’idée de vous partager cette longue liste de sites web, réalisée au départ pour le cours que je donne à l’INFA.

C’est du « brut du brut », vous y trouverez pêle-mêle les liens vers la documentation officielle, des sites d’astuces et d’apprentissage, des articles de ce blog, des outils en ligne, des logiciels…

Il s’agit là de la vraie liste que je donne à mes élèves!

Prenez le temps de la survoler, je suis sûre que vous trouverez un ou deux « trucs » bien utiles.

HTML

Documentation officielle

Tutoriel très complet (+livre en téléchargement)

Infographies HTML5

Démo de toutes les fonctionnalités HTML5 (à voir!)

CSS

Documentation officielle

Support des propriétés par les navigateurs

Templates CSS

Gabarits CSS

Utiliser une police originale

Menu simple en CSS

La propriété « Display : inline-block ; »

Technique des portes coulissantes

Commentaires conditionnels

Microformats

Testez la puissance de CSS

Astuces CSS

Sites références

Divers

Testez n’importe quel CMS

Palettes graphiques

Logiciel « la boîte à couleurs » (pipette)

Outils pour convertir du pixel vers l’unité « em »

Consulter les taux de pénétration des navigateurs

Générer une carte Google Map

Comprendre les formats d’images pour le web (dernier chapitre de l’article)

astuces, CSS, HTML, infographie

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

16 commentaires

  1. Merci pour le partage! Cette liste doit être le fruit d’années de travail et d’expérience! Merci de nous en faire profiter! Je vais vite ajouter les sites à mes favoris.

    Répondre
  2. Bonjour,
    j’ai trouvé plus d’un ou deux trucs bien utiles, les liens m’intéressent beaucoup.
    merci pour cet effort et pour le paratege.
    Magalie

    Répondre
  3. Bonjour,
    merci beaucoup pour tous ces lien, ils sont tous utiles et intéressants

    Répondre
  4. Très bon article. Pas sûr la rédaction bien sûr mais plutôt sur la richesse des pages que tu nous fais partager. J’en connaissais certaines mais pas toutes et surtout je n’ai jamais eu le courage de faire la compil.

    merci

    Répondre
    • J’avoue, je n’aurais jamais fait ça si ce n’est pour mes élèves (la flegme aussi)!

      Répondre
  5. Super, tous les grands classiques regroupés sur une page…

    Je constate l’absence de référence vers developpez.com, tu ne le considère pas comme une référence?

    Répondre
    • Si si bien sûr! Il est même dans ma sidebar, mais il est un poil trop poussé pour le niveau des élèves de cette formation. Même si on y trouve des tuto abordables, la majorité est quand même à l’attention des développeurs. Et j’irais plus dessus pour PHP/MYSQL que pour HTML/CSS honnêtement.

      Répondre
      • Ah oui, je suis rassurée… Je n’avais pas vu la sidebar.

        Lorsque notre cerveau est conditionné pour ne voir que le contenu, on ne voit vraiment rien d’autre. 😉

        Et oui, je suis d’accord avec toi, pour du html / css le site du zéro et probablement une meilleure ressource.

      • Il y a quand même de bon truc sur devellopez.com pour le HTML/CSS … mais peut-être plus pour les développeurs effectivement ^^

        voici ma petite liste d’autres outils:
        > pour calculer les EM dans une page
        http://gridulator.com/ > pour la création de grille (design web)
        http://www.textfixer.com/ > outils de conversion
        http://www.cleancss.com/ > Formater/optimiser CSS
        http://infohound.net/tidy/ > nettoyer le code HTML
        http://www.iconfinder.com > Trouver des icones

        :)

      • Merci pour ce complément (j’en connais pas la moitié! oO), pas le temps de les parcourir maintenant, mais je sais où les retrouver :)

  6. Voilà une belle bibliothèue de ressources, ça me fera gagner un temps fou à chaque fois que je cherche une aide technique. Je ne savais pas qu’on pouvais insrer si simplement une carte google map, ça me donne des idées.
    Merci
    Hélène

    Répondre
  7. Un grand merci pour ce très bon article !

    Répondre
  8. Bonjour,

    Je parcours de temps en temps votre site (dès que j ai le temps), que je trouve tres bien fait regroupaant une mine d’info.

    autre site que je préconise:
    http://www.grafikart.fr

    une mine d’info aussi.

    Répondre
    • Bonjour gilles,
      wouaaa être comparé à Grafikart, c’est la classe quand même :)
      Merci de votre visite et à bientôt!

      Répondre
  9. Si je garde ma casquette de blogueur, cette très belle liste m’intéresse un peu.

    Mais si je met ma casquette de développeur web, cette magnifique liste est furieusement intéressante.

    Un grand merci !

    Répondre
    • Oui en effet, ce sont des ressources pour webmaster & dev mais pas tellement pour les blogueurs.

      Répondre

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint