$ 8.00

Tuto Intégration responsive d'une maquette Photoshop avec Bootstrap avec Bootstrap, CSS, HTML, Dreamweaver

$ 8.00

  • Une formation vidéo de 1h38m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

Voici la suite du tuto Photoshop créer un Webdesign en mobile first.

Dans ce nouveau tuto dédié à l'intégration d'un site pensé en Mobile First, c'est à dire en Responsive Webdesign, qui s'adaptera à la taille de l'écran surlquel il est consulté. Nous allons apprendre à intégrer la maquette Photoshop à l'aide du framework de Bootstrap. Bootstrap est collection de briques de code HTML / CSS et Javascript structurée qui va faciliter l'intégration d'un site Internet. 

Cette formation est destinée uniquement aux débutants qui n'ont aucune base et jamais utilisé Bootstrap.

Au programme de ce tuto Bootstrap nous allons :

  • Intégrer notre page d'accueil.
  • Créer notre menu de navigation.
  • Intégrer une phrase d'accroche.
  • Intégrer un carousel d'images.
  • Apprendre et comprendre le système de grille du framework.
  • Intégrer les prestations et gérer leurs affichages en responsive en fonction des terminaux.
  • Intégrer un bloc pour mettre en avant un service ou une prestation.
  • Intégrer notre footer.

Les fichiers sources de la première partie de ce tuto sont également disponibles avec cette formation.

Table des matières de cette formation Bootstrap, CSS, HTML, Dreamweaver (durée : 1h38m)

    • Présentation 00:04:17
    • Création de l'index.html 00:11:48
    • Création du menu partie 01 00:16:22
    • Création du menu partie 02 00:16:13
    • Création du slider partie 01 00:09:47
    • Création du slider partie 02 00:10:18
    • Mise en page des prestations 00:18:34
    • Mise en avant d'une prestation / d'un service 00:05:05
    • Création du footer et fin 00:05:42



Formateur : Damien Gallez

Damien Gallez a publié 112 tutoriels et obtenu une note moyenne de 4,8/5 sur 120 915 tutoriels vendus. Damien Gallez est un formateur certifié tuto.com. Voir les autres formations de Damien Gallez

4,9
note moyenne

37
avis laissés
5 étoiles
35
4 étoiles
1
3 étoiles
1
2 étoiles
0
1 étoile
0
  • 5
    avis de membre-1258-4707 laissé le 04/05/2019
    Très bon tuto, il m'a vraiment aidée. Seule remarque, la version de bootstrap utilisée est la 3 et maintenant la version 4 est sortie. Il y a donc quelques différences forcément , peut être le préciser au début du tuto...

  • 5
    avis de membre-7474-7004 laissé le 07/03/2019
    Bonjour Damien, j'ai bien apprécié ce tuto qui m'a permis de découvrir bootstrap. Concernant le tuto photoshop précédant ce tuto qui permettait de réaliser les différentes maquettes (mobile, tablette, écran); je n'ai pas bien compris l'interêt car on ne s'en sert quasiment pas en fait car tout est pré établi sur bootstrap. J'aimerai bien voir une formation plus poussée sur la personnalisation du design dans bootstrap. En attendant, je vais continuer à travailler ce cms. Merci pour votre tuto :) De plus, il serait intéressant d'avoir un petit focus à la fin du tuto pour expliquer les modalités pour la mise en ligne.
    "Hello, généralement en agence ou en indé, nous réalisons toujours une maquette photoshop ou illustrator afin de designer le site web. Cela permet de faire valider la chose auprès de son client et cela évite d'intégrer un site qui ne plairait pas à ce dernier :) Après c'est toujours utile de réaliser une maquette même pour nous, afin d'avoir une idée de l'esthétique de son futur site. C'est plus facile d'y apporter des modifs via PS ou AI. En espérant avoir répondu à votre question ! A bientôt !"

  • 3
    avis de membre-8697-9297 laissé le 20/12/2018
    Sans aucun doute un poil cher pour le contenu, quand bien même celui ci est de "qualité". Si je dis "qualité" c'est tout simplement car la vidéo est vielle et n'est plus en phase avec BS.

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    Dreamweaver CS6, Dreamweaver CS5.5, Dreamweaver CS5, Dreamweaver CS4
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
  • Que contient le fichier source ?
    Les maquettes Photoshop et les fichiers de ce tuto
accédez à plus de 1147 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données