Le CSS Moderne
ERROR
00:00
00:00

Tuto Le CSS Moderne

Steven Sil
Promo -31% Jusqu'au 11 février, 17:23
37,00€54,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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 (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.

 
 

Cours dans ce bundle

A la découverte du Responsive Design Cours 1

A la découverte du Responsive Design

Comment fonctionne l'intégration CSS avec Flexbox ? Cours 2

Comment fonctionne l'intégration CSS avec Flexbox ?

Du CSS dopé avec Sass : Formation complète Cours 3

Du CSS dopé avec Sass : Formation complète

Plan détaillé des cours

 
Chapitre 1 : Ce qu'il faut savoir
1h43m
 
Leçon 1Introduction
Leçon 2Le responsive design
Leçon 3Le document HTML de base
Leçon 4Media types et media queries
Leçon 5Utiliser les unités relatives
Leçon 6Organiser un projet avec le mobile first
Leçon 7Gérer les textes
Leçon 8Des médias flexibles
Leçon 9Des images adaptatives
Leçon 10Initiation à Flexbox
Leçon 11Créer une grille responsive avec Flexbox
Chapitre 2 : Cas concret : Une landing page responsive
1h31s
 
Leçon 1Préparation de notre projet
Leçon 2Le header
Leçon 3Les compétences
Leçon 4Le formulaire d'abonnement à la Newsletter
Leçon 5Le footer
Leçon 6Conclusion
 
Leçon 1Introduction
01m23s
Leçon 2Créer un conteneur Flexbox
11m54s
Leçon 3Direction des éléments flexibles
06m28s
Leçon 4Alignement des éléments flexibles
12m34s
Leçon 5Les pouvoirs du margin: auto
09m19s
Leçon 6Ordre et alignement individuel des éléments flexibles
05m17s
Leçon 7Gérer la taille d'un élément flexible
12m53s
Leçon 8Conclusion
27s
 
Chapitre 1 : Les bases
58m22s
 
Leçon 1Introduction
Leçon 2Installation de Sass sur macOS et Windows (update novembre 2019)
Leçon 3Installation de Sass sur macOS et Windows
Leçon 4Compiler un fichier et découverte du projet de grille responsive
Leçon 5Inbrication de sélecteurs et de propriétés
Leçon 6Les variables
Chapitre 2 : Notions intermédiaires
1h11m
 
Leçon 1Les mixins
Leçon 2Les fonctions
Leçon 3Importation de fichiers
Leçon 4Extension de règles CSS
Leçon 5Les drapeaux
Leçon 6Les mathémathiques avec professeur Steven
Leçon 7Les structures conditionnelles et finalisation de la grille responsive
Chapitre 3 : Notions avancées
17m56s
 
Leçon 1Débogage et opérateurs booléens
Leçon 2Extensions de placeholders
Leçon 3La directive @at-root
Leçon 4Conclusion

Avis des apprenants

Détail des avis
157
Apprenants
4
Commentaires
4,8/5
Note moyenne
5/5
3
4/5
1
3/5
0
2/5
0
1/5
0
Nacer Mouterfi
Nacer Mouterfi
Publié le 31/05/2020
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
Jean-Philippe Santos De Jesus
Jean-Philippe Santos De Jesus
Publié le 27/05/2020
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)
Steven Sil
Steven Sil
Merci à vous ! :)
Linda Jannet
Linda Jannet
Publié le 15/10/2018
Excellente formation. Beaucoup de pédagogie.
Steven Sil
Steven Sil
Merci :)

Vos questions sur le cours

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

Attendez ! 🤗

Accédez à plus de 1450 tutos gratuits

Notre politique de protection des données