CSS 3, créer des colonnes de type journal
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
1h21
de formation
16
leçons vidéo
2
chapitres
Débutant
niveau requis
Carl Brison
Carl Brison
Formateur certifié

CSS 3, créer des colonnes de type journal

4.8/5 Trustpilot (1384 avis) Satisfait ou remboursé
1h21
de formation
16
leçons vidéo
2
chapitres

Dans ce tuto vidéo, je vous propose d'apprendre une nouvelle technologie 100% CSS3 : La mise en place de colonnes type journal.
Grâce à quelques propriétés CSS, il devient très facile de mettre en forme un texte afin de le faire apparaitre en différentes colonnes.

La connaissance de cette technologie va vous faire économiser du temps pour arriver à un résultat spectaculaire juste avec une seule ligne de code ! La connaissance, c'est le pouvoir ! Plus vous apprenez de nouvelles choses et plus vous arrivez à réaliser des sites Internet complexes avec peu, voire très peu de code. Ce qui est très appréciable !

Dans ce tuto CSS 3, créer des colonnes de type journal

  • Nous apprendrons toute la théorie de cette technologie, puis nous nous amuserons à réaliser un cas concret.
  • Nous ferons une page web, dans laquelle on se servira de CSS-Grid pour sa mise en page.
  • Nous ferons une table dans une base de données et nous nous ferons une requête SQL pour vous apparaitre les informations se trouvant dans la table. Ces informations seront totalement prises en charge par les propriétés CSS nouvellement apprises.

Notre exercice sera basé sur le 100% responsive.

A la fin du cous, un QCM vous sera proposé.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions.

Bon tuto !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Théorie
Chapitre 2
Exemple concret

Table des matières

Chapitre 1 : Théorie

29m41
 
Leçon 1Ranger le texte en colonne avec CSS
Leçon 2Gérer la largeur des colonnes
Leçon 3Une super propriété pour gérer les colonnes
Leçon 4Espacer les colonnes
Leçon 5Styliser les goutières entre les colonnes
Leçon 6Sortir des colonnes
Leçon 7Gestion des changements de colonnes
Leçon 8Conclusion

Chapitre 2 : Exemple concret

51m44
 
Leçon 1Mise en page avec CSS-Grid
Leçon 2Mise en place d'une table dans la base de données
Leçon 3Mise en place de la classe PDO
Leçon 4Affichage des liens de la nav
Leçon 5Affichage de l'article
Leçon 6Mise en page de l'article en colonne
Leçon 7Adaptation des colonnes sur les petits écrans
Leçon 8Conclusion

Avis des apprenants

Détail des avis
157
Apprenants
12
Commentaires
5/5
Note moyenne
5/5
12
4/5
0
3/5
0
2/5
0
1/5
0
Lionel Morlot
Lionel Morlot
Publié le 08/07/2025
Le contenu du tuto est fort intéressant. La partie centrale de l'exemple concret semble complexe, notamment pour ceux qui ne disposent pas encore de connaissances en PHP et PDO, ce qui est mon cas.
Carl Brison
Carl Brison
J'ai à votre disposition tout plein de cours sur php et pdo. Mieux encore, si vous avez un CPF et si vous êtes motivé, sachez que je serai heureux de vous suivre sur un parcours pro php. N'hésitez pas à contacter Tuto si cela vous intéresse. En attendant, Je vous remercie beaucoup pour votre commentaire ;-)
Romain Detemmerman
Romain Detemmerman
Publié le 24/08/2024
merci pour ce tuto...
Carl Brison
Carl Brison
Merci pour votre commentaire ;-)
Jean-Philippe Mouzet
Jean-Philippe Mouzet
Publié le 17/07/2024
Dans ce Tuto, la présentation de l'aspect gestion des colonnes est intéressant, mais il devient passionnant lorsque l'on va chercher les informations dans une BDD.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire ;-)

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Bonjour Carl, Les mots "bases de données" et "requête SQL" me font peur. :-) Est-il nécessaire d'avoir des notions ? Valérie

Bonjour Valérie, je m'attendais à cette question et je vous remercie de me l'avoir posée ! La première partie de ce tuto est entièrement dédiée à la découverte de cette technologie au travers d'exemples statiques. La seconde partie est une mise en situation en reprenant les 4 points classiques de la construction d'un site web : GRID pour la mise en page, PHP pour l'intéractivité avec une requête SQL simple, la technologie CSS enseignée dans ce cours et enfin les MEDIAS QUERIES. Je comprends que le 2ème point vous fait peur. Et bien même si vous ne le comprenez pas forcément, le reste est largement à votre portée et vous pouvez adapté mon exemple en remplaçant la partie PHP par une partie statique en HTML. Je pense qu'il serait vraiment domage que vous passiez à côté de cette technologie CSS3 ! Enfin, il va falloir que vous songiez à apprendre le Php. Sachez que je suis en train de préparer une série de tuto sur l'apprentissage du PHP justement pour les gens comme vous. Ces tutos seront TRES faciles d'accès pour les gens qui ne connaissent pas du tout le PHP ;-) ! A bientôt, Carl.

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
17,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
1h21 de vidéo • 2 chapitres
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 752 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1420 tutos gratuits

Notre politique de protection des données