Réviser ses connaissances en HTML et CSS

L’apprentissage de la programmation informatique ne devrait pas être considérée comme une activité difficile réservée à quelques génies.

Il en va de même pour le développement Web qui ne devrait effrayer personne. Le tout, quand on débute, est de trouver de bons contenus didactiques pour se mettre le pied à l’étrier. Il existe bien entendu de nombreux tutoriels sur le Web pour tout apprendre des technologies Web, mais malheureusement les contenus proposés sont souvent si abscons, qu’ils découragent les meilleures volontés.

Ce n’est pas le cas avec Codecademy dont j’ai souvent parlé ici qui a le mérite d’être une plateforme d’apprentissage gratuite pour apprendre à coder de façon interactive à l’aide de courtes leçons et d’exercices à réaliser en ligne sur les sujets abordés.

Le site Interneting is hard part du constat que la programmation ne devrait pas être compliquée et propose de le démontrer via une série de tutoriels, réservés aux parfaits débutants, pour se familiariser avec les langages HTML et CSS qui sont au cœur du fonctionnement des sites Internet.

internet-is-hard

La plateforme en anglais est intégralement gratuite et au-delà de l’apprentissage, le contenu très complet est aussi conçu pour rafraîchir ses connaissances dans ces matières quand elles sont un peu oubliées.

Pour le moment, 14 chapitres accompagnés de près de 300 exemples de programmation sont à lire. D’autres chapitres sont en préparation.

Le style des explications est à la fois clair tout en étant complet, sans tomber dans une simplification extrême ni être ennuyeux. Les illustrations et les animations qui accompagnent les textes sont particulièrement explicites et aident à bien comprendre les notions les plus délicates, notamment quand il est question des sélecteurs en CSS.

Le programme d’étude est le suivant.

  • Introduction générale : rôle des langages HTML, CSS et JavaScript.
  • Pages Web élémentaires : squelette de base commun à toutes les pages Web ; balises HTML de base…
  • Liens et Images : ajout de liens vers d’autres pages Web ; ajout d’images…
  • Faire connaissance avec le langage CSS : mise en forme du contenu HTML ; feuille de style ; propriétés CSS…
  • Le modèle des boîtes en CSS : types de blocs ; dimensions ; marges ; bordures…
  • Sélecteurs CSS : classes et pseudo classes, ID…
  • Positionnement : mise en page des éléments…
  • Flexbox : introduction au positionnement avec les containers Flex…
  • Positionnement niveau 2 : positionnement statique, relatif, absolu et fixe ; menus déroulants…
  • Responsive design : utilisation des media queries pour apprendre à adapter l’affichage à la taille de l’écran…
  • Responsive Images : optimisation des images en fonction de l’affichage…
  • Sémantique HTML : rôle et importance des balises sémantiques introduites par HTML 5.
  • Formulaires : création de formulaires en HTML…
  • Typographie : polices de caractères ; alignement du texte…

Comme on le constate, le contenu est riche et devrait être mis à jour régulièrement. Il aussi le mérite de prendre en compte les technologies les plus actuelles.

En s’abonnant à la newsletter de Interneting is hard, on se tient informé des nouveautés qui ne manqueront pas d’être publiées dans les prochaines semaines sur le site.