$ 18.00

Tuto CSS 3, créer des colonnes de type journal avec CSS

$ 18.00

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

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 !

Table des matières de cette formation CSS (durée : 1h21m)

  • Théorie
    • Ranger le texte en colonne avec CSS 00:06:47
    • Gérer la largeur des colonnes 00:03:50
    • Une super propriété pour gérer les colonnes 00:02:19
    • Espacer les colonnes 00:02:38
    • Styliser les goutières entre les colonnes 00:04:14
    • Sortir des colonnes 00:03:46
    • Gestion des changements de colonnes 00:03:59
    • Conclusion 00:02:08
  • Exemple concret
    • Mise en page avec CSS-Grid 00:09:38
    • Mise en place d'une table dans la base de données 00:05:50
    • Mise en place de la classe PDO 00:04:41
    • Affichage des liens de la nav 00:11:37
    • Affichage de l'article 00:09:03
    • Mise en page de l'article en colonne 00:04:39
    • Adaptation des colonnes sur les petits écrans 00:03:27
    • Conclusion 00:02:49



Formateur : Carl Brison

Carl Brison a publié 121 tutoriels et obtenu une note moyenne de 4,9/5 sur 7 385 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

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 vinceb0 laissé le 15/05/2019
    Que dire de plus ? c'est génial d'apprendre avec Mr Brison ... Toutes les choses ne sont pas simple mais en écoutant attentivement, en pratiquant et en suivant ses conseils, cela devient instinctif et on acquière des automatismes sans s'en rendre compte. On suit une logique apprise au fil des cours et on développe une logique de programmation (ce qui est pour moi très important). La partie SQL et PHP est hard, il faut le reconnaître ... Mais avec un formateur comme Mr Brison, je vois l'avenir avec un grand A. Merci.
    "Merci à vous Vincent, c'est vraiment très gentil. Vraiment... j'adore mes apprenants ;-)"

  • 5
    avis de valerie-a77 laissé le 26/10/2018
    C'était très intéressant de découvrir ce mode d'affichage en html5/css3 qui plus est, est responsive. Certains formateurs donnent le prétexte que ce n'est pas le but de leur tuto mais je trouve que tant qu'à faire, c'est mieux de faire les choses jusqu'au bout. Grâce à ce tuto, on découvre de nouvelles propriétés css3. Et la création/utilisation d'une base de données et de PHP. Le tout parfaitement expliqué et maîtrisé. Pas du tout à l'aise avec la partie base de données et php, même carrément débutante, mais j'en suis venue à bout avec l'aide bienveillante de Carl. Merci beaucoup pour ce nouveau tuto.
    "Merci à vous Valérie, c'est un véritable plaisir que de vous aider à évoluer dans le bon sens !"

  • 5
    avis de flavinus laissé le 24/09/2018
    Très bon tuto, très bien expliqué, Le seul problème est que la propriété "column-span" ne fonctionne pas dans firefox contournable en utilisant 2 boites 1 "section" contenant le titre et une sous boite "article" (sous le titre) contenant l'article. Cordialement Daniel Gamel
    "Merci à vous Daniel ;-) Vous pouvez utilisé ceci, column-span: all; -moz-column-span: all"

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    CSS 3
  • 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.
accédez à plus de 1097 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données