Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Creer une page web interactive depuis une maquette
First Section
01 - Bienvenue dans « Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS » (1:47)
02 - 1. Découvrir l'intégration web avec Photoshop
01 - Aborder cette formation (4:28)
02 - Utiliser les fichiers d'exercice (2:12)
03 - Définir les prérequis (1:57)
04 - Découvrir les outils de travail (3:04)
03 - 2. Explorer les outils de Photoshop
01 - Ouvrir le fichier Photoshop (6:06)
02 - Visualiser la maquette à réaliser (5:13)
03 - Comprendre le panneau des calques (5:38)
04 - Utiliser les compositions de calque (5:40)
05 - Se déplacer dans le fichier Photoshop (2:52)
06 - Comprendre le travail à réaliser (2:34)
04 - 3. Réaliser le code HTML5 de la maquette
01 - Créer l'arborescence du site web et le fichier HTML5 (2:39)
02 - Installer les icônes font-awesome (4:33)
03 - Intégrer les grandes zones de la mise en page (5:34)
04 - Créer le code de l'en-tête (7:14)
05 - Créer le code de la barre de navigation principale (2:47)
06 - Extraire une image JPG de la maquette (4:01)
07 - Créer le code de la zone de contenu (4:28)
08 - Extraire une image à l'aide d'Extract (4:49)
09 - Créer le code de la colonne de droite (4:47)
10 - Utiliser AddToAny (3:02)
11 - Créer le code du pied de page (3:11)
05 - 4. Préparer la feuille de style
01 - Remettre les styles CSS à zéro (7:10)
02 - Accéder aux jeux de couleurs (5:48)
03 - Importer les Google Fonts (2:48)
04 - Modifier le comportement par défaut du CSS (3:55)
06 - 5. Créer la feuille de style CSS du premier point d'arrêt
01 - Mettre en place les styles principaux (9:21)
02 - Travailler avec une grille fluide (8:05)
03 - Créer des boutons réutilisables (5:08)
04 - Travailler avec des inline-blocks (5:45)
05 - Mettre en forme la barre de navigation principale (6:54)
06 - Utiliser les positionnements relatifs et absolus (4:00)
07 - Mettre en forme la zone de contenu principale (5:48)
08 - Faire flotter les images dans le texte (2:41)
09 - Mettre en forme la barre de droite (6:01)
07 - 6. Rendre la page web entièrement responsive
01 - Mettre en place les media queries (6:01)
02 - Mettre en page son site en mode Paysage (7:28)
03 - Mettre en page au niveau du dernier point d'arrêt (2:39)
08 - 7. Finaliser l'intégration de la page web
01 - Utiliser les flexbox (4:49)
02 - Positionner le menu principal au premier point d'arrêt (4:28)
03 - Installer jQuery (1:16)
04 - Animer le menu principal (5:32)
05 - Conclure sur l'intégration web avec Photoshop (1:30)
fichiers_d_exercice_html5_css_integration_web_photoshop
fichiers_d_exercice_html5_css_integration_web_photoshop
Teach online with
01 - Remettre les styles CSS à zéro
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock