Design Web avec CSS3 - Groupe 82712

Formation offerte en collaboration avec Services Québec

Cours WEB-EXP

Plateforme Macintosh / Windows

Durée 36 heures

Lieu

2030, boul. Pie-IX

Local

Le numéro du local sera affiché à l'entrée du campus situé au 4e étage.

Numéro de groupe

82712

Frais avant taxes

(frais de matériel didactique inclus)

Services Québec: 91,32 $ CAD

Grand public: 772,59 $ CAD

Date(s)

15, 16, 29, 30 juin et 13, 14 juillet 2019

Jour(s)

Samedi, dimanche

Horaire

9 h à 16 h

Clientèle

Services Québec
Personnes en emploi / Personnes sans emploi

Préalables

Maîtriser les notions de bases des CSS comme elles sont présentées dans l'atelier Langage HTML intermédiaire et bases CSS.

Objectifs

À la fin du cours le participant pourra utiliser les nouvelles fonctionnalités du CSS3 pour styliser sa page ou son site.

Approche pédagogique

  • Présentation des concepts et des outils CSS
  • Démonstration des concepts à l'ordinateur
  • Exercices à l'ordinateur supervisés par le formateur
  • Aide individuelle lors des exercices

Attestation délivrée en fin de cours

Une attestation de participation est remise aux personnes ayant assisté à plus de 80 % des heures de formation

Matériel pédagogique

Matériel didactique

Autres particularités

Afin d'atteindre un bon niveau de maîtrise, le participant devrait compléter le cours par la pratique personnelle

Contenu du cours

Introduction

  • Préambule
  • CSS3
  • Préfixes de moteurs de rendu
  • Exemple de règle avec préfixe
  • Outils pour mettre des préfixes
  • Philosophie de développement
  • Avantages de l'utilisation des CSS3
  • Test du support dans les navigateurs
  • Principales propriétés CSS3 utilisables aujourd'hui

Nouveaux effets visuels

  • Coins arrondis avec border-radius
  • Ombre portée pour le texte avec text-shadow
  • Superposition des ombres portées
  • Ombre portée sur un objet avec box-shadow
  • Représentation des couleurs avec RGBA et HSLA

Gradients pour le remplissage et introduction aux arrière-plans

  • Gradients
  • Introduction aux arrière-plans CSS3
  • Arrière-plans multiples et positionnement

Transitions CSS

  • Présentation des transitions CSS
  • Paramètres pour une transition
  • Options de courbes de vitesse de la transition
  • Fonction de vitesse personnalisée
  • Avertissement pour les préfixes
  • Exemple d'une transition avec plusieurs propriétés

Transformations 2D

  • Introduction aux transformations
  • Fonctions de transformations 2D (changements d’échelle, translations, rotations, obliques)
  • Mot sur les transformations 3D

Animations CSS

  • Introduction aux animations CSS
  • Propriétés pour une animation (keyframes, name, duration, delay, direction)

Sélecteurs avancés

  • Spécifications pour les sélecteurs
  • Sélecteurs : bonification pour les attributs
  • Exemple pour les sélecteurs d'attributs
  • Pseudo-classes structurelles
  • Sélecteurs structurels

Flexbox

  • Concept de flexbox
  • Propriété de flexbox (flex-direction, justify-content, etc.)

Mise en forme en colonnes

  • Motivation de la mise en colonnes
  • Règles pour la mise en colonne
  • Illustration des zones d'une mise en colonnes
  • Exemple simple de mise en colonne
  • Détails sur les implantations des multi colonnes
  • Règles toutes fraîches sorties du four

Polices téléchargeables

  • Introduction au domaine des polices téléchargeables
  • Références pour les polices téléchargeables
  • Commande @font-face
  • Support des formats de polices dans les navigateurs
  • Services de livraison de polices de caractères
  • Alternatives à @font-face
  • Syntaxe de @font-face
  • Téléchargement d’une police sur Font Squirrel
  • Utilisation d'une police téléchargeable
  • Trucs de déverminage
  • Solution au problème du FOUC (Flash of Unstyled Content)

Responsive Web

  • Techniques pour créer une grille flexible qui garde les proportions
  • Insertion d’images et de médias flexibles
  • Nouvelles unités de mesure CSS (vw, vh, vmin, vmax et rem)
  • Requêtes médias pour ajuster les règles en fonction des caractéristiques de l’appareil
  • Identification des points de rupture de résolution (resolution breakpoints)
  • Application du principe de l’amélioration progre
College de Maisonneuve | Formation continue