Intégration d'un blog responsive avec Bootstrap
ERROR
00:00
00:00

TUTO Intégration d'un blog responsive avec Bootstrap

Damien Gallez
22,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Voici la suite du tuto Créer le template d'un blog responsive avec Photoshop où nous allons apprendre à intégrer un template Photoshop de site Web à l'aide du framework Bootstrap ce qui vous permettra d'obtenir un blog responsive, c'est à dire qui s'adapte à la taille de l'écran sur lequel il est consulté. Depuis le 21 avril 2015, Google sanctionne en effet les sites qui ne s'adaptent pas aux résolutions d'écrans. Il est donc primordial, voire vital, d'adapter votre blog. Cette formation vous explique comment !

Programme de ce tuto Intégration d'un Blog Responsive avec Bootstrap

Voici les notions qui seront abordées dans cette formation en vidéo :

  • Convertir une police de caractère non standard en otf, woff, eot, svg...
  • Déclarer une police de caractère non standard avec @font-face
  • Créer un menu minifié sur tous les types d'écrans
  • Créer des transitions avec CSS3
  • Gérer la transparence des d'images
  • Animer des boutons au rollover (changement de couleur de fond, rotation des icônes liées aux réseaux sociaux...)
  • Utilisation du last-child
  • Utilisation des balises HTML5 (header, nav, aside, footer...)
  • Utilisation des rôles afin d'ajouter du contexte aux éléments de la sémantique
  • Utilisation des media queries pour diminuer le logo en fonction de la résolution
  • Afficher / Masquer des éléments en fonction du terminal (écrans / tablettes / mobiles...)

L'utilisation de Dreamweaver n'est pas obligatoire pour suivre ce tuto. Vous pouvez utiliser votre propre éditeur HTML.
Pour plus d'informations concernant ce cours, je vous invite à visionner l'extrait vidéo. Les fichiers sources sont fournis avec le tuto.

Bon tutoriel et à bientôt pour la suite qui portera sur l'intégration avec WordPress.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Intégration du Header - Logo & navigation
Leçon 2
Intégration du contenu - Article / Effets / Boutons de navigation
Leçon 3
Intégration de la sidebar et de ses modules
Leçon 4
Intégration du footer
Leçon 5
Déclinaison de la single

Plan détaillé du cours

Leçon 1Intégration du Header - Logo & navigation
29m09s
Leçon 2Intégration du contenu - Article / Effets / Boutons de navigation
39m53s
Leçon 3Intégration de la sidebar et de ses modules
35m55s
Leçon 4Intégration du footer
04m55s
Leçon 5Déclinaison de la single
24m34s

Aperçus

Avis des apprenants

Détail des avis
330
Apprenants
7
Commentaires
5/5
Note moyenne
5/5
7
4/5
0
3/5
0
2/5
0
1/5
0
Redouane Guechoud
Redouane Guechoud
Publié le 02/07/2016
Très bon tuto, une fois de plus. Le formateur est énergique et nous guide tout au long, pour obtenir un résultat pro qui convaincra les plus chipoteurs parmi vos connaissances.
Mathilde69
Mathilde69
Publié le 28/09/2015
Exactement ce que je recherchais! Merci, ça simplifie beaucoup ma vision de Bootstrap!
David Correia
David Correia
Publié le 17/06/2015
Excellent comme toujours avec Damien !!! J'ai particulièrement apprécié les détails donnés au sujet des classes de la navbar

Vos questions sur le cours

Avec quelles versions de logiciels ce tuto est-il compatible ?

Bootstrap 3, Dreamweaver CC, HTML 5

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Est-ce que vous allez mettre la suite pour l'intégration WordPress svp ?

Bonjour oui l'intégration avec Wordpress est prévue dans pas longtemps

Attendez ! 🤗

Accédez à plus de 1351 tutos gratuits

Notre politique de protection des données