Apprendre CSS3 – Les fondamentaux et perfectionnements

Apprendre CSS3 – Les fondamentaux et perfectionnements

ISO | Français | 14 H 25 Min | 9.8 Go

Dans ce tutoriel, je vous propose de découvrir le langage CSS3. Cette formation est destinée à ceux qui souhaitent avoir un aperçu global de ce qu’apporte le CSS3. Vous y découvrirez un ensemble conséquent de nouveautés, comment utiliser les préfixes propriétaires, de mettre en pratique toutes les notions abordées, découvrir les propriétés CSS3, d’aller plus loin avec les propriétés CSS3 sur les bases du CSS3 etc…

Partie 01 :
• Installer les pré-requits (navigateur et editeur notepad++)
• Installer des plugin a Notepad++ dont Emmet
• Appliquer une règle de style sur une balise HTML5
• Appliquer plusieurs règles de style sur une même balise HTML5
• Créer une balise HTML5 de style pour y placer toutes nos règles CSS
• Apprendre les sélecteurs fondammental en CSS soit une balise, un id et une class
• Quelque notion sur le poids des règles CSS
• Externalisé nos règles CSS dans une feuille de style soit un fichier css
• Enfin lier une feuille de style css à notre page web HTML5

Partie 02 :
• Comprendre la notion de poids
• Utiliser Emmet pour coder du CSS3
• Bien comprendre le système de couleur en CSS3
• Débugger un code CSS avec le navigateur Chrome (ou autre)
• Exploration de quelques attribut de texte
• Changer la mise en forme d’un lien et d’une liste
• Utiliser le site W3Schools pour nous aider (_https://www.w3schools.com/cssref/)
• Externalisé nos règles CSS dans une feuille de style soit un fichier css
• Enfin lier une feuille de style css à notre page web HTML5

Partie 03 :
• Configurer Aptana Studio 3
• Le principe de flottaison
• Les positionnements
• Les propriétés de dimmensionnement
• Appliquer une bordure

Partie 04 :
• Le chargement des régles css et leur poids
• Les sélecteurs
• La propriété display

Partie 05 :
• La sélection par filtre d’attribut
• La sélection par le fitrage par les valeurs d’attributs
• La sélection par filtrage multiple
• La sélection par speudo class

Partie 06 :
• L’alignement d’une image dans un bloc de paragraphe
• La différence entre les margin et padding
• Centré un bloc de paragraphe sans centré son contenu
• Voir une petite différence entre les unitées comme le %, em et px
• Création d’une page HTML puis la stylisé en CSS
• Mettre une image en arrière plan
• Créer un calque de transparence

Partie 07 :
• Utiliser des propriétés CSS3
• Mettre un fond et un texte transparent
• Comprendre la différence entre la propriété opacity par rapport a l’alpha
• Créer des dégradées de couleur
• Ajouter des ombres sur un block ou du texte
• Appliquer des transformations d’échelle, de translation et rotation
• Utiliser LiveReload et des générateurs de code CSS

Partie 08 :
• Utiliser des propriétés CSS3
• Utiliser les transformations
• Utiliser les transitions
• Utiliser les animations
• Mettre en place des images pour nos menus
• Utiliser le programme Inkscape
• Utiliser des générateurs de code CSS

Partie 09 :
• Optimiser nos images de menu
• Utiliser les sprites
• Bien comprendre le background-position
• Créer des sprites a partir de nos icones
• Générer automatiquement nos sprites et le code css
• Utiliser le system d’icone du Bootstrap version 2
• Utiliser le nouveau system d’icone du Bootstrap version 3
• Utiliser Inkspace et Gimp pour nos images

Partie 10 :
• Personnaliser ses menus horizontaux ou verticaux
• Utiliser la navigation des pills du bootstrap 2
• Principe d’un site avec positionnement fixe en pixel
• Principe d’un site avec redimmensionnement en pourcentage
• Principe d’un site responsive et redistribuable avec les media queries
• Adapter la fenêtre de son navigateur pour simuler l’écran d’un périphèrique
• Utiliser le system de grille fluide du Bootstrap 2