Tutorial de plus de 10h, consacré à l'apprentissage du CSS. Il s'agit ici d'une véritable formation au CSS!

Basée sur une expérience de tous les jours en débogage d’entreprise,l’approche choisie propose un angle de vision qui s’appuie sur le fait que tout commence par une bonne structuration du contenu de nos pages web.

Pour optimiser et faciliter l’implémentation de nos CSS, il faut avant tout commencer par bien comprendre l’utilisation et le rôle du HTML.

La complexité du choix de cette approche a été de rester, durant toutes les étapes, sur une ligne d’exploration objective pour mieux comprendre les bases des principaux outils, et non de proposer des listes de trucs et astuces ou encore d’approcher les divers hacks classiques permettant de corriger ci et là des problèmes très ou trop spécifiques.

Vue d’ensemble de la formation :

  • Avant de commencer
    Avant d'aborder le sujet des CSS, il est toujours bon de faire un tour d'horizon des acteurs majeurs de ce secteur, les langages ou les technologies, ainsi que les outils nécessaires pour travailler dans de meilleures conditions.
  • Les standards et l'univers des CSS
    Prenons le temps de regarder ces standards, de comprendre qui ils sont et le rôle de chacun.
  • Les navigateurs
    Controversés pour certains, incontournables pour d'autres, les validateurs, qu'ils soient de code ou de navigateur, permettent quoiqu'il en soit de se donner une idée de la validité de nos pages ou de nos applications.
  • Document HTML - xHTML
    On entend souvent parler de HTML ou de xHTML, de transitionnal ou de strict. Qu'en est-il ? Lequel utiliser et pourquoi ?
  • DOCTYPE
    Premier élément de la page HTML : le Doctype. Il donne le tempo et la mesure.Basculons en mode Quirk ou affrontons de plein fer les standards.
  • Mise en page en tableau ou tableau en CSS ?
    Aujourd'hui la séparation contenu / contenant nous permet de libérer et d'adapter beaucoup plus facilement la créativité visuelle en adoptant les CSS.Pourtant beaucoup de sites aujourd'hui utilisent des CSS et donnent une représentation en tableau du contenu.
  • Le positionnement
    Comment positionner les éléments dans l'espace et le volume de la page ? Il existe diverses possibilités qui apportent chacune des avantages et des inconvénients. Nous allons les explorer une à une.
  • La floataison et le flux du document
    Parfois,les objectifs d'affichage sont compromis par le flux du document, il faut veiller autant que possible à ne pas tomber dans une interaction entre contenu et contenant.
  • Qu'est-ce qu'une grille ?
    Commençons par définir ce qu'est une grille, comment cela fonctionne, et quels peuvent en être les avantages et les inconvénients.
  • Modèles et Templates
    Il existe sur le web diverses sources de modèles qui nous permettent derapidement mettre en place des structures d'interface et de pouvoir ensuite décliner.
  • Les sélecteurs
    Les CSS sans les sélecteurs ne seraient qu'à moitié fonctionnels. Voyons quels sont les outils de sélection d'éléments que nous avons à disposition et qui nous permettent bien souvent d'éviter une classite importante.
  • Sémantique et micro-formats
    Sansentrer dans la véritable partie sur le web sémantique en abordant l'ontologie et des langages comme OWL, nous allons voir qu'il peut être intéressant de se poser la question sur la manière de nommer nos classes et IDs.
  • Éléments de liens et boutons
    Seules balises interactives du HTML, les liens peuvent être utilisés de manière assez optimisée pour gérer nos boutons, barres de menus et cartes interactives. Nous allons en explorer quelques applications possibles.
  • Les barres de menus
    Il est possible de n'utiliser qu'une seule image pour gérer l'ensemble de nos barres de menus ou d'autres éléments graphiques qui sont interactifs.
  • Éléments de liens et boutons
    Seules balises interactives du HTML, les liens peuvent être utilisés de manière assez optimisée pour gérer nos boutons, barres de menus et cartes interactives. Nous allons en explorer quelques applications possibles.
  • Gestion des listes, ul / li ou dt / dd ?
    Comment utiliser des listes élémentaires UL / OL-LI .zuz ? Quand faire appel à des listes de définitions DL-DT / DD ? Nous allons au cours de ce tutoriel vidéo approcher les mécaniques de chacune.
  • Conclusion
    Bien d'autres sujets restent à explorer : les formulaires, la gestion des médias, les diverses destinations des CSS, le DOM Scripting et les CSS,l'accessibilité et les CSS, le XML et XSL, des trucs et astuces ou encore des cas d'étude, et bien plus encore !
A noter, que les fichiers d'exemples sont fournis avec ce tutorial!

Notez que vous pouvez acheter à l'unité toutes les vidéos de cette formation. Pour cela, cliquez sur l'onglet "table des matières".

Jetez un oeil à ces autres tuto CSS

Apprenez les bases du CSS pour intégrer votre site webApprenez les bases du CSS…
Dans ce tuto vidéo sur les bases du CSS, nous verrons ensemble…

Changer l'apparence d'une image au passage de la sourisChanger l'apparence d'une…
Dans ce tuto CSS, vous apprendrez à créer une effet de changement…

Initiez vous à toutes les positions CSSInitiez vous à toutes les…
Dans ce tuto CSS, vous découvrirez comment utiliser les positions…

Découper et intégrer une page d'accueil de site internetDécouper et intégrer une…
Ce tutoriel est la suite du tuto créer une page d'accueil de…

Découper et intégrer une page d'accueil de site internetDécouper et intégrer une…
Ce tutoriel est la suite du tuto créer une page d'accueil de…

Créez et intégrez un menu en HTML/CSS avec une seule imageCréez et intégrez un menu…
De la création du visuel sous Photoshop à l'intégration HTML/CSS,…

Un menu complet à partir d'une seule imageUn menu complet à partir…
Dans ce tuto vous allez apprendre à créer un menu complet…

Utilisez n'importe quelle font/police dans vos pages htmlUtilisez n'importe quelle…
Dans ce tuto CSS, vous découvrirez comment utiliser facilement…

Cette formation contient 66 leçons en vidéo (que vous pouvez acheter à l'unité) pour une durée totale de 10h20.
Voici le programme complet abordé au cours de cette formation :

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto CSS de 10 heures 20 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

video2brain , Editeur pro

Producteur de formations vidéo depuis 2002, video2brain est un des leaders européens sur le marché du e-learning. video2brain propose des formations vidéo, en ligne et sur DVD, sur les logiciels et les langages de programmation. video2brain est également le fournisseur officiel de tutoriels certifiés Adobe.

En savoir plus sur video2brain


Birnou Sébarte

Birnou Sébarte, auteur dans cette formation

Birnou Sébarte découvre en 1987, aux Etats-Unis, les métiers du multimédia. Il travaille principalement au début sur des applications avec des outils comme Director. La migration vers le web se fait dès 1996, et l’utilisation des standards du web le conduit progressivement à des interfaces plus riches.



Témoignage des clients de video2brain

De nombreux tutos sur de nombreux logiciels, très bien expliqués pour ceux que j'ai vu et toujours très utiles ! merci beaucoup pour tous ce savoir !

Avec ses divers videos sur de nombreux logiciels Video2Brain m'a permi d'acquérir des connaissances accrues de ce faite j'ai pu consolider mes bases!! Merci à eux

Formations très intéressantes et complètes

Bon choix de tuto, bon professionalisme !!!!

Formation complète, ... très complète ! Tous est bien détaillé et des exemples concrets qui ne donnent qu'une envie, continuer !

Lire les autres témoignages

 

D'autres tuto de video2brain

Objectifs et présentationObjectifs et présentation
Au cours de cette étape nous définirons les objectifs de l'ensemble de ces chapitres…

Séparation de contenu, de visuel etc.Séparation de contenu, de visuel etc.
Utiliser les CSS fait partie d'un processus global de séparation de contenu, de visuel…

Les standards et l'univers des CSSLes standards et l'univers des CSS
Prenons le temps de regarder ces standards, de comprendre qui ils sont et le rôle de…

Les outils de création nécessairesLes outils de création nécessaires
Voici une présentation d'une partie des outils disponibles sur le marché. Autant du…

voir tous les tuto de video2brain

Notes attribuées par les utilisateurs (7 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (15)

par video2brain
(auteur de ce tuto - 24 mai 2012)

" @jzik : merci et bonne continuation ! Votre équipe video2brain "

par jzikà voté :
(a acheté ce tuto - 21 mai 2012)

" bonne entrée en matière, cela donne envi de coontinué "

par video2brain
(auteur de ce tuto - 27 janvier 2012)

" @Sam67 : bonjour et merci pour votre commentaire ! Nous vous souhaitons une bonne continuation avec les formations de video2brain.
Cordialement,
Votre équipe video2brain. "

par Sam67à voté :
(a acheté ce tuto - 21 janvier 2012)

" HTML, XHTML, CSS, Javascript, conflit de version et j'en passe ...
C'est Si Sophistiqué et le web si véloce que j'ai bien besoin de formation rafraichissante. "

par video2brain
(auteur de ce tuto - 25 novembre 2011)

" @tous : bonjour et merci pour vos commentaires !
Bonne continuation avec les formations de video2brain.
Cordialement,
Votre équipe video2brain. "

par francoisepà voté :
(a acheté ce tuto - 22 novembre 2011)

" super complet "

par zouzou3000à voté :
(a acheté ce tuto - 19 novembre 2011)

" super "

par video2brain
(auteur de ce tuto - 06 octobre 2011)

" @tous: bonjour et merci pour vos commentaires !
Bonne continuation avec les formations de video2brain.
Cordialement,
Votre équipe video2brain. "

par geoffrayà voté :
(a acheté ce tuto - 22 septembre 2011)

" tres bien pour comprendre les interactions entre html css et java script "

par tevakrief
(n'a pas acheté ce tuto - 17 mai 2011)

" Bonjour , je voudrais savoir si c'est pratiquement que du code qu'on écrit à la main .

merci à vous . "

par video2brain
(auteur de ce tuto - 14 mars 2011)

" Bonjour,
Ce tuto est simplement une présentation d'une formation de 10h30. Jetez un coup d'œil sur la table des matières de la formation pour obtenir une vision globale de la formation.
Cordialement,
Votre équipe video2brain. "

par video2brain
(auteur de ce tuto - 14 mars 2011)

" Bonjour,
Ce tuto est simplement une présentation d'une formation de 10h30. Jetez un coup d'œil sur la table des matières de la formation pour obtenir une vision globale de la formation.
Cordialement,
Votre équipe video2brain. "

par enigmae
(a acheté ce tuto - 07 mars 2011)

" Sympas,

Cependant le fait de couper à chaque fin de phrase ou de mot le son est génant quand on écoute au casque. Ca sonne comme un point final.
Sinon, c'est interessant.
"

par pookaà voté :
(a acheté ce tuto - 30 novembre 2009)

" Formation intéressante et détaillée mais il faut déjà avoir une base pour bien pouvoir suivre et ne pas trop être perdu. "

par jteis34
(n'a pas acheté ce tuto - 09 octobre 2009)

" Dommage, dans l'extrait, on ne "voit" rien du tout, on entend juste une personne faire une courte présentation !
Comme ça, ça ne donne pas du tout envie de l'acheter ! "

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto CSS d’une durée de 10 heures 20 minutes a été acheté 120 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 24 septembre 2009 par video2brain, éditeur professionnel, ayant reçu une note moyenne de 4,1/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto CSS Formation.

Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.

Cette formation qui se présente sous la forme de plusieurs vidéos, vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !