Dans ce tuto vidéo nous allons aborder l'intégration HTML / CSS via le framework Boostrap 3 d'une landing page en flat design.
Nous apprendrons dans un premier temps à rapidement découper les éléments du fichier PSD de départ (inclus dans le fichier source) pour ensuite passer à l'intégration Boostrap 3. Enfin, nous utiliserons les media queries et les différentes fonctions responsives de Boostrap 3 pour adapter l'intégration sur des tablettes et smartphones.
Ce tutoriel requiert un niveau averti en HTML/CSS ainsi que des connaissances basiques sur Bootstrap. Vous pouvez améliorer ces compétences via mes tutoriels :
Sommaire des techniques utilisées pour ce tuto pratique Bootstrap 3 :
- HTML5/CSS3
- Découpe Photoshop (PSD)
- Media queries (CSS3)
- Navbar (bootstrap)
- Système de grid (bootstrap)
- Responsive (bootstrap)
- Hidden & Visible (bootstrap)
- Panel (bootstrap)
- List-group (boostrap)
- Toggle (bootstrap)
Fichiers sources inclus.
Table des matières de cette formation Bootstrap, Photoshop, CSS (durée : 2h20m)
-
- Introduction 00:04:18
- Découpe 00:09:18
- Intégration de la navbar et du logo 00:16:55
- Intégration Row 1 00:08:51
- Intégration Row 2 00:08:15
- Intégration Row 3 00:12:39
- Intégration Row 4 00:10:11
- Stylisation du menu 00:17:31
- Feuille de Style 00:15:32
- Responsive 00:37:17
- Fichiers sourcestélécharger
- Certificat
Formateur : Benoît Philibert
-
Très bon tuto ! de très bonnes explications ! c'est quand les prochains tuto !!!!!!
-
Très bon tuto, par contre la seconde partie du Responsive est un peu brouillone par moment ! Mais bon formateur dans l'Ensemble ! Merci
-
Bon tuto et très belle approche du responsive avec bs3 ! Merci
-
Avec quelle version de logiciel ce tuto est-il compatible ?Photoshop CC, Photoshop CS, Photoshop CS5.5, Photoshop CS5
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
note moyenne
avis laissés