$ 42.00 au lieu de $ 59.00

Tuto Le Responsive Design avec Flexbox et Bootstrap avec CSS, HTML, Bootstrap bundle -29%

$ 42.00 au lieu de $ 59.00

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

Voici un bundle de 3 formations d’une durée totale de plus de 5h20 avec lequel vous allez apprendre à maîtriser le responsive design (adaptation de votre site à toutes les tailles d’écran) avec des techniques modernes d’intégration :

  • Utilisation du module CSS3 Flexbox pour gérer la disposition de vos designs,
  • Utilisation du framework front-end le plus célèbre, Bootstrap 4 pour faciliter toutes vos futures intégrations.

Ce pack a été créé pour que vous n’ayez pas besoin d’une autre formation afin d’apprendre à maîtriser complètement le responsive design et Bootstrap 4. Ce dernier nécessitant la connaissance du responsive design et Flexbox, ce bundle prend donc tout son sens !

Pour comprendre pleinement le contenu des 3 formations, il vous suffit de connaître simplement les bases des langages HTML et CSS. Ce pack comprend donc les 3 formations suivantes à un prix plus intéressant :

 

Partez à la découverte du Responsive Design (2h43)

Actuellement, les sites Web sont consultés à plus de 50% par des téléphones mobiles, à 7% par des tablettes et à plus de 40% par des ordinateurs. Cet usage grandit au fur et à mesure des mois (+ 10% de visite via des smartphones entre janvier 2017 et décembre 2017 en France). Il est donc important pour chaque site, d’adapter son contenu et la disposition de celui-ci en fonction de la taille de l’écran qui l’affiche. C’est ce qu’on appelle le Responsive Web Design et le but de cette formation est de vous y former. Un projet concret : Nous viendrons réaliser un site onepage qui s’adaptera à toutes les tailles d’écran.
 

Comment fonctionne l'intégration CSS avec Flexbox ? (1H00)

Vous allez apprendre à utiliser le module CSS 3 Flexbox qui va vous permettre d'intégrer vos futurs sites Web avec la plus grande des facilités. Finie l'utilisation des flottants ou encore des display inline-block pour gérer l'intégration de vos designs ! Vous allez enfin avoir un ensemble de propriétés CSS pour gérer l'intégralité de la disposition de vos éléments HTML. Associée à la maîtrise du responsive design que vous aurez vu dans une des autres formations du bundle, Flexbox sera le module parfait pour gérer l'affichage de vos éléments aux différentes tailles d'écrans.
 

Intégrez vos sites Web avec Bootstrap 4 (1h40)

Dans cette formation, vous allez découvrir Bootstrap 4 pour gérer plus facilement l’intégration de tous vos futurs sites Web. Ce framework met une grille responsive à notre disposition qui nous permettra de facilement adapter nos sites Web à toutes les tailles d’écrans sans devoir passer nous-même par l’utilisation des media queries. On regardera également des classes CSS qui nous permettront de disposer nos éléments HTML avec Flexbox sans devoir directement utiliser les propriétés propres à celui-ci. Cette formation est dédiée à l’aspect responsive design de Bootstrap et non à la partie stylisation de Bootstrap.
La formation comprend également un mémento qui reprendra l'ensemble du contenu de la formation que vous pourrez imprimer et un fichier PSD qui contiendra la grille de base pour vos futurs sites Web créés avec Bootstrap.
Un projet concret sera abordé : l'intégration d’une page responsive complète à l’aide de Bootstrap.

Je reste disponible dans le salon d'entraide pour répondre à vos questions.
Tous les fichiers de travail sont fournis avec ce cours.


Tuto composant ce bundle :

  • A la découverte du Responsive Design (voir la fiche produit)


    • Ce qu'il faut savoir

      • Introduction gratuit00:04:03
      • Le responsive design 00:04:11
      • Le document HTML de base 00:03:56
      • Media types et media queries 00:08:18
      • Utiliser les unités relatives 00:06:06
      • Organiser un projet avec le mobile first 00:05:50
      • Gérer les textes 00:07:59
      • Des médias flexibles 00:04:11
      • Des images adaptatives 00:18:47
      • Initiation à Flexbox 00:08:30
      • Créer une grille responsive avec Flexbox 00:31:37

    • Cas concret : Une landing page responsive

      • Préparation de notre projet 00:08:22
      • Le header 00:23:11
      • Les compétences 00:10:39
      • Le formulaire d'abonnement à la Newsletter 00:10:51
      • Le footer 00:06:26
      • Conclusion 00:01:02
  • Comment fonctionne l'intégration CSS avec Flexbox ? (voir la fiche produit)


    • Maîtriser Flexbox en 1 heure

      • Introduction gratuit00:01:23
      • Créer un conteneur Flexbox 00:11:54
      • Direction des éléments flexibles 00:06:28
      • Alignement des éléments flexibles 00:12:34
      • Les pouvoirs du margin: auto 00:09:19
      • Ordre et alignement individuel des éléments flexibles 00:05:17
      • Gérer la taille d'un élément flexible 00:12:53
      • Conclusion 00:00:27
  • Intégrez vos sites Web avec Bootstrap 4 (voir la fiche produit)


    • Découverte de la grille Bootstrap et des classes utilitaires

      • Introduction 00:04:35
      • Le fichier grid 00:10:36
      • La grille responsive 00:27:15
      • Classes pour Flexbox 00:11:50
      • Classes pour la propriété display 00:03:31

    • Projet : Réaliser une page complète responsive avec Bootstrap

      • Bonus : Un PSD pour vos futurs projets 00:04:44
      • Le header 00:24:09
      • Le reste de la page 00:13:02
      • Conclusion 00:00:30

Formateur : Steven Sil

Steven Sil a publié 35 tutoriels et obtenu une note moyenne de 4,6/5 sur 17 297 tutoriels vendus. Steven Sil est un formateur certifié tuto.com. Voir les autres formations de Steven Sil

5,0
note moyenne

3
avis laissés
5 étoiles
3
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de davyledave laissé le 10/07/2018
    Merci, c'est super ! Envie de continuer...Bravo

  • 5
    avis de membre-8890-7322 laissé le 13/04/2018
    Merci Steven. Tes cours sont vraiment très agréables à suivre et très bien expliqués. un vrai plaisir d'apprendre.
    "Un vrai plaisir pour ma part d'avoir des apprenants comme toi :)"

  • 5
    avis de davidbento laissé le 11/04/2018
    Un tutoriel absolument parfait ! Tout est très clair, je n'ai éprouvé aucune difficulté même si j'avais déjà de bonnes bases sur les sujets. Maintenant un tutoriel ne fais pas tout, ce qu'il faut c'est ensuite s'entrainer par soi-même sur plusieurs projets pour être sûr d'avoir bien compris ;) Merci pour tes tutos de qualité Steven !

  • Avec quelles versions de logiciels ce tuto est-il compatible ?
    CSS 3, HTML 5, Bootstrap 4
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
accédez à plus de 1127 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données