Voici un bundle de 3 formations complètes CSS qui ont pour but de vous faire progresser dans vos intégrations avec CSS en plus de 6 heures de vidéos.
Si vous êtes un débutant avec le langage CSS ou que vous souhaitez tout simplement améliorer vos compétences, ce pack vous ait spécialement dédié puisqu’il ne faut connaître que les bases du langage pour assimiler parfaitement le contenu de ces 3 formations.
Au programme de cette formation CSS approche moderne
Ce pack comprend donc les 3 formations suivantes à un prix plus intéressant :
- A la découverte du Responsive Design
- Du CSS dopé avec Sass : Formation complète
- Comment fonctionne l'intégration CSS avec Flexbox ?
A 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.
Du CSS dopé avec Sass : Formation complète (2h25)
Vos documents CSS vous paraissent difficilement maintenables avec leurs centaines (milliers?) de lignes ? Vous voulez améliorer les capacités du langage CSS en y ajoutant des variables, des fonctions, un héritage des classes ... ?
Cette formation Sass en vidéo répondra à toutes vos questions (et même plus encore).
Un projet concret : Nous réaliserons une grille responsive complète que vous pourrez utiliser pour l’intégration de tous vos futurs projets Web.
L’objectif de ce bundle est de vous permettre de passer à un niveau supérieur en CSS pour vos futures intégrations. Entre l’apprentissage du responsive design et de Flexbox ainsi que l’utilisation du préprocesseur Sass, vous n’aurez plus l’impression de travailler avec le même langage qu’auparavant.
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
Du CSS dopé avec Sass : Formation complète (voir la fiche produit)
Les bases
- Introduction gratuit00:02:00
- Installation de Sass sur macOS et Windows (update novembre 2019) 00:01:23
- Installation de Sass sur macOS et Windows 00:04:48
- Compiler un fichier et découverte du projet de grille responsive 00:27:56
- Inbrication de sélecteurs et de propriétés 00:10:06
- Les variables 00:12:09
Notions intermédiaires
- Les mixins 00:13:42
- Les fonctions 00:07:41
- Importation de fichiers 00:05:50
- Extension de règles CSS 00:02:56
- Les drapeaux 00:06:44
- Les mathémathiques avec professeur Steven 00:07:11
- Les structures conditionnelles et finalisation de la grille responsive 00:26:57
Notions avancées
- Débogage et opérateurs booléens 00:11:02
- Extensions de placeholders 00:02:26
- La directive @at-root 00:03:33
- Conclusion 00:00:55
Formateur : Steven Sil
-
Bonjour Steven, Une parfaite formation riche surtout très bien expliquée. Toutefois, la partie Flexbox intitulée ''Créer une grille responsive avec Flexbox'' ne devrait-elle pas être mise à jour avec le CSS Grid ? Selon ton expression le Css Grid est le Css de demain. A moins qu'il y a quelque chose qui m'échappe sur le plus commercial.... Personnellement, j'aurai aimé pour ce genre de belles formations dans les technos évoluent vite à ce qu'elles soient mises à jour de sorte à donner un plus aux personnes en désir de formations de Web ou autres. Cela dit, malheureusement, plusieurs formations sans grandes utilités sont encore en ligne sur le site tuto.com. Oui le nom de la formation est nommée CSS MODERNE mais elle ne l'est plus complètement . Juste un point qui me taraude sur tuto.com. Désolé sinon Steve. Mes amitiés
-
Super Tuto, encore merci.
Par contre, je viens de terminer le module Sass, il aurait été bien que celui-ci soit a jour avec les dernières évolutions de Sass : les commandes ne sont les plus mêmes (ex : commande de style ou de sourceMap) , et la doc est complètement différentes (celle-ci sont maintenant disposées par module) -
Excellente formation. Beaucoup de pédagogie.
-
Avec quelles versions de logiciels ce tuto est-il compatible ?CSS 3, HTML 5
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés