Maîtrisez HTML & CSS

Une sélection des meilleurs cours et exercices




Proposer un site
S'abonner à la newsletter

1 Mise en page

Learn Layout

Ce site vise à vous apprendre les bases de CSS utilisées pour structurer n'importe quel site web.

Aller sur le site {fr}

Initiation au positionnement CSS

Découvrez deux articles pour maîtriser le positionnement CSS.

Aller sur le site {fr}

A Practical Guide to HTML & CSS

Découvrez le module de mise en page du cours de Shay Howe.

Aller sur le site {en}

SMACSS

Découvrez comment structurer votre code CSS pour qu'il reste toujours souple et facile à maintenir, au fur et à mesure que votre projet et votre équipe évoluent.

Exemples de mise en page SMACSS Aller sur le site {en}

Exercices

  1. Reproduire ces gabarits sans regarder le code source
  2. Reproduire cette fenêtre modale et centrez la dans votre page en utilisant une position fixe
  3. Faire le HTML & le CSS du thème Wordpress TwentyTwelve en vous inspirant de la méthode SMACSS

2 Responsive Webdesign

This Is Responsive

Le site qui contient toutes les ressources, exemples et actualités sur le Responsive Webdesign.

Aller sur le site {en}

A Practical Guide to HTML & CSS

Découvrez le module sur le Responsive Webdesign du cours de Shay Howe.

Aller sur le site {en}

Tutoriel vidéo

Découvrez le tutoriel vidéo pour faire un site responsive.

Aller sur le site {fr}

Media Queries

Découvrez un article complet sur les Medias Queries.

Aller sur le site {fr}

Exercice colonnes

  1. Faire un template d'une largeur de 1140px. Mettre 2 colonnes fluides de la même taille. Pour définir le point de rupture, voici la règle à suivre : en dessous de 60 caractère par ligne, transformer les 2 colonnes en une seule.
  2. Optionnel : faire le même exercice pour 3, 4 et 5 colonnes
  3. Intégrer une image dans une colonne et une vidéo dans l'autre. Il faut bien évidemment qu'ils s'adaptent aussi à la largeur de la fenêtre.
  4. Tester une grille responsive
Exemple de colonnes responsive {fr}

Exercice Menu

Faire un menu horizontal :

  1. qui se transforme en un bouton qui, au clic, re-déplie le menu en vertical (voir Bootstrap)
  2. qui se transforme en un select (voir MKPartnair)
  3. qui transforme chaque intitulé en une icône
  4. Avancé : Reproduire ce menu d'un tutoriel codrops (sans regarder le tutoriel bien sûr!)
  5. Avancé++ : reproduire le menu responsive de Mashable.

Exercice gallerie d'images

Reproduire la gallerie d'image de l'équipe de 500px et la rendre responsive.

Exercice écrans taciles

À partir de l'exercice précédent, adaptez la gallerie d'image pour les écrans taciles. Pour ce faire, il faudrait que les descriptions soient affichées par défaut. Pour détecter si vous êtes sur un écran tactile, utilisez Modernizr.

Exercice déplacement icônes

Partir de cette page carte de visite. Fais les adaptations responsive design classiques. Pour les petits écrans (< 640px), il faudrait faire en sorte d'afficher les réseaux sociaux en haut de page.

Exercice retina

Partir de cette page carte de visite et faire les adaptations nécessaires pour avoir des images de qualité pour les écrans rétina. Voici un article très complet sur le sujet pour vous aider. Faire l'exercice avec les différentes des techniques :

  1. Images à 200%
  2. Media queries
  3. Format SVG
  4. Les typographies icônes (vous pouvez utiliser Fontello & Icomoon)
  5. Les solutions JavaScript

Exercice Portfolio

Reproduire le template Vanilla ou Mason de Dunked en utilisant SMACSS. Il faut que le site soit responsive et adapté pour les écrans rétina.

Exercice Bonus

Si tu es là, c'est que tu as réussi à tout faire ! BRAVO ! Mais, voici la dernière épreuve, vas-tu réussir à la surmonter ?

Se faire sois-même en responsive en s'inspirant de Fourcht la saucisse ou comme Georges le chat. Tu peux prendre une photo de votre tête, et prendre un corps, bras et pieds que tu peux prendre sur Google Images.

3 Sélecteurs avancés

Alsacréations

Découvrez un article complet sur les sélecteurs avancés.

Aller sur le site {fr}

A Practical Guide to HTML & CSS

Découvrez le module sur les sélecteurs avancés du cours de Shay Howe.

Aller sur le site {en}

Exercices

  1. Faire un menu avec le dernier lien en rouge. Chaque lien a une marge à gauche sauf le premier.
  2. Faire un tableau avec une ligne sur 2 blanche et l'autre grise
  3. Faire le CSS de ce menu déplié (sans le javascript) en utilisant aucune classe ou id. Utiliser uniquement le sélecteur descendant (X > Y). Pas besoin de la mise en forme, il faut juste que la disposition soit bonne.
  4. Reproduire ce tableau sans utiliser de classes ni d'id

4 Performances

Mozilla Developer Network

Voici quelques astuces pour optimiser vos pages web.

Aller sur le site {fr}

Le train de 13h37

Quand on parle des performances web, on peut risquer de trop idéaliser les conseils et bonnes pratiques.

Aller sur le site {fr}

A Practical Guide to HTML & CSS

Découvrez le module qui traite des performances web du cours de Shay Howe.

Aller sur le site {en}

Exercices

Optimisez le site internet de l'IESA Multimédia. Faites en sorte que le site mette 2x moins de temps à se charger.

5 HTML5

Tutoriel complet

Quelque soit votre niveau, ce cours est fait pour vous.

Aller sur le site {fr}

HTML5 et la compatibilité avec les anciens navigateurs

Découvrez le module qui traite de la compatibilité du HTML5 avec les anciens navigateurs.

Aller sur le site {en}

Livre : HTML5 pour les webdesigners

Avec beaucoup de style et d'esprit, Jeremy Keith va droit à l'essentiel dans ce guide de l'utilisateur brillant et divertissant et répond à toutes ces questions, exemples clairs et concrets à l'appui.

Acheter le livre {fr}

Dive into HTML5

Découvrez un site complet sur le HTML5.

Aller sur le site {en}

Exercices

  1. Faire un champ de saisie de type date et le rendre compatible avec Internet Explorer 8+ à l'aide de Modernizr.

6 Accessibilité

Évaluer l’accessibilité d’un site web

Il est devenu obligatoire, dans un nombre sans cesse croissant de pays, que les sites du service public respectent les standards et les normes d'accessibilité.

Aller sur le site {fr}

Dégradation élégante & Amélioration progressive

Dégradation élégante et amélioration progressive sont les deux faces d'une même pièce. Il s'agit, dans notre cas, de rendre un site Web accessible à tous les agents utilisateurs, tout en améliorant l'esthétique et/ou l'ergonomie pour les navigateurs plus compétents.

Aller sur le site {fr}

XHTML, CSS, accessibilité : confusions et amalgames

Il ne faut pas confondre CSS, (X)HTML, Anti-Tableaux, Sémantique et Accessibilité.

Aller sur le site {fr}

A Practical Guide to HTML & CSS

Découvrez le module sur la sémantique et l'accessibilité du cours de Shay Howe.

Aller sur le site {en}

7 Évaluez vos sites

Évaluez tous les aspects de vos sites

Opquast vous génère un rapport sur l'accessibilité, la vitesse, la qualité, le référencement et l'utilisabilité de vos sites web.

Aller sur le site {fr}

Évaluez votre code

Le validateur du W3C permet de vérifier si votre code HTML & CSS est conforme aux spécifications.

Aller sur le site {en}

Évaluez la comptabilité avec les différents navigateurs

Découvrez un article de Smashing Magazine qui répertorie des outils gratuits et payants pour tester les différents navigateurs.

Aller sur le site {en}

Évaluez la comptabilité avec les tablettes et les smartphones

Voici une sélection d'outils pour testez vos sites responsives.

Aller sur le site {en}

Évaluez la performance de vos sites

L'outil de Google génère une liste de recommandations qui vous permettent d'améliorer la vitesse d'affichage de vos sites.

Aller sur le site {en}

   Ressources

Alsacreations

Communauté dédiée à la conception Web aux normes, et notamment aux standards W3C, aux feuilles de style CSS, au langage (X)HTML, ainsi qu’à l’accessibilité du Web en général.

Aller sur le site {fr}

A Practical Guide to HTML & CSS

Un cours complet pour apprendre et maîtriser HTML & CSS par Shay Howe.

Aller sur le site {en}

Pompage

Blog référence concernant l'accessibilité.

Aller sur le site {fr}

tuto.com

Découvrez les cours HTML & CSS de tuto.com.

Voir le cours de HTML {fr} Voir le cours de CSS {fr}