Partage
  • Partager sur Facebook
  • Partager sur Twitter

Cours: Créez des animations CSS modernes

CSS qui ne fonctionne pas malgrès copier/coller

    12 novembre 2019 à 13:45:03

    Bonjour,

    Après avoir suivi le cours HTML5/CSS3, je suis en train de suivre le cours pour créer des animations en CSS.

    Hors quand je fais copier/coller du code ca ne marche pas.

    Il manque une grosse partie dans ce cours au niveau de la création des fichiers, ca part directement dans le vif du sujet et j'ai l'impression qu'il manque un truc.

    Voici mes codes:

    HTML:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
    	<link rel="stylesheet" href="style2.css">
        <title>Test Animation CSS</title>
    </head>
    
    <body>
        <div class="container">
            <div class="btn">
                Vois comme je grandis !
            </div>
        </div>
    </body>
    
    
    </html>
    CSS:
    $cd-btn: #011c37;
    $cd-txt: #15DEA5;
    .btn {
        background: $cd-btn;
        color: $cd-txt;
        font-size: 3rem;
        cursor: pointer;
        padding: 1.85rem 3rem;
        border-radius: 10rem;
        transform: scale(1);
        transition: transform 400ms;
        &:hover {
            transform: scale(1.15);
        }
    }
    Merci de votre aide.
    • Partager sur Facebook
    • Partager sur Twitter
      12 novembre 2019 à 14:04:21

      Bonjour,
      Il n'est normal que cela ne fonctionne pas si tu sauvegardes ton fichier en .css car le code que tu montres n'est pas du CSS. Comme précisé dès la deuxième page de la première partie, ce cours utilise le SCSS. 
      Le SCSS est un langage différent, qui ressemble au CSS tout en lui ajoutant des fonctions, une logique, des variables,... ainsi qu'une syntaxe particulière. Le SCSS doit être compilé afin d'être transformé en CSS pour être lisible par un navigateur. Il ne suffit pas de le copier-coller dans un fichier CSS. ;)
      • Partager sur Facebook
      • Partager sur Twitter
      Je ne réponds pas aux messages privés.
        12 novembre 2019 à 14:10:03

        Salut,

        peut-être que ça t'a échappé, la syntaxe n'est pas celle de CSS mais celle de SCSS.

        Bienvenue dans le monde de SASS : https://la-cascade.io/se-lancer-dans-sass/

        • Partager sur Facebook
        • Partager sur Twitter
        Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
          12 novembre 2019 à 14:55:53

          Okay, donc si on ne fait pas gaffe au lien, c'est vraiment pas clair. Ca aurait été bien d'indiquer rapidement qu'il fallait installer un compilateur, créer un fichier .SCSS et convertir ce fichier dans un compilateur pour que les données dans le fichier .CSS soient mises à jour automatiquement. Ca peut paraitre logique quand on s'y connait mais quand on commence, il vaut mieux le savoir.

          • Partager sur Facebook
          • Partager sur Twitter
            19 janvier 2020 à 11:31:59

            @MélodieP

            effectivement et pour la suite de se cours je l'aurais plutôt titré le néant des novices,

            un liens qui ma bcp aidé :D (enfin pour le démarrage)

            https://openclassrooms.com/fr/courses/3363036-maintenez-vos-feuilles-de-styles-avec-sass-et-compass/3370271-laissez-sass-generer-vos-feuilles-de-styles?status=waiting-for-publication

            • Partager sur Facebook
            • Partager sur Twitter
              11 juin 2020 à 14:02:52

              Bonjour
              Je suis tombé sur le même piège que Mélodie. Je veux dire, j'ai aussi fini le HTML5 et CSS3 sur openclassrooms et je suis passé sur les cours de Sass et là, le grand vide. ça ne marché pas!

              Merci à ceux qui ont répondu!!!  En effet ça peut être intuitif si vous connaissez, mais si non, on passe des heures à chercher l'erreur et chercher des réponses ailleurs.

              Je pense qu'une petite intro pour expliquer ce que  Mewen_bzh ou padraig11 ont répondu serait utile.

              • Partager sur Facebook
              • Partager sur Twitter
                14 juin 2020 à 20:25:25

                Alors pour l'utilisation du Scss, je conseille plutôt ce cours https://openclassrooms.com/fr/courses/6106181-simplifiez-vous-le-css-avec-sass qui est vraiment pas mal du tout :)
                • Partager sur Facebook
                • Partager sur Twitter

                Combien de développeurs faut-t-il pour remplacer une ampoule grillée ?
                Aucun, c'est un problème Hardware.

                  24 juillet 2020 à 20:27:05

                  Bonjour à tous,

                  J'essayes moi aussi de suivre le cours "Créez des animations CSS modernes" mais franchement il faut en vouloir : déjà le code donné est en Sass et ce n'est pas indiqué dans les pré-requis ! Donc je l'ai appris une fois avoir décidé de suivre ce cours, donc comme tous le monde ici j'ai galérer avec l'installation du moteur, parce que je suis sous linux depuis peu et parce que sass-ruby viens d'etre deprecated depuis peu...
                  Mais je ne me suis pas laisser abattre et j'en profite pour apprendre Sass en même temps que progresser en animation....

                  Mais la ou ça devient galère, c'est que le code donné en exemple ne fonctionne pas ! Et vas-y que j'utilise des variables sans les déclarer/initialiser !! Et pas qu'une fois : dans tout les exemples!!! Alors quand il s'agit d'un code de couleur, ça va, je peux me débrouiller, mais quand il s'agit d'une taille ?? Il faut mettre l'unité dans la variable ou pas?? Dans les 2 cas l'animation ne fonctionne pas!!!  Est-ce que l'erreur est ailleurs?? Est-ce que je perd encore du temps a chercher d'ou elle vient?? 

                  Franchement je suis déçue!! Je n’étais pas habituée a ce genre de je-m'en-foutisme de la part du site du zéro! Le pire c'est quand je vois que le cours a soit disant été mis à jours il y a à peine 2 mois!! Hors tous vos messages sont bien plus vieux que ça et donc ça n'a jamais été corrigé!!! 

                  Ce manque de professionnalisme m'atterre!

                  • Partager sur Facebook
                  • Partager sur Twitter
                    19 décembre 2020 à 12:14:40

                    salut. je suis dans le même cas que vous et un peu énervé aussi. Je suis logiquement le cours html/CSS avec Mathieu Nebra et nickel, c'est clair limpide bien organisé, ça marche...et tout et tout. MAIS.

                    je décide ensuite d'aller plus loin et donc de suivre le cours avec le titre alléchant "créez des animations CSS modernes". Or ce n'est pas du CSS enfin oui mais non.... donc pas clair du tout quand vous êtes débutant !

                    Après je vais sur le lien sass car j'ai bien saisi que ça ne marchera pas tout seul puisque dans le code donné déjà il n'y a pas de "border" et autre donc forcément ça donne pas du tout le même résultat. (d'ailleurs donner en exemple dès la première page un exemple avec 8000 lignes de code CSS c'est un peu décourageant, faut dire tout de suite, alors voilà ce que vous ne ferez pas tout de suite, voire pas du tout :....). Et en effet on saute direct dans le vif du sujet et, non, on a pas "réussi notre première animation CSS". I y a des choses dès les premières lignes qu'on a jamais vu dans les cours html/CSS, exemple :

                    $cd-btn: #011c37;

                    $cd-txt: #15DEA5;

                    j'ai deviné comment ça marchait mais c'est pas clair. Il faudrait vraiment vous caler ensemble quand ce sont des cours qui se complètent. Qui a fait quoi et avec quels outils ? (on utilisait sublime text avec Mathieu Nebra et là ?)

                    Exemple je veux voir le javascript : on me conseille de voir d'abord les algorithmes. ok je me lance et... arrivé à 80% du cours on me dit bon là il faut connaitre python pour continuer..... heeeeeu. donc je suis bloqué.

                    Ici c'est pareil, on te met un lien " si tu veux en savoir plus sur le sass". Or on DOIT en savoir plus sur le sass si on veut faire ne serait ce que le début. Je clique sur le lien et on me dit que non c'est pas du CSS mais c'est du SCSS. par contre il faut connaitre Ruby et/ou C+. et faut installer ça ou ceci ou cela ou encore ça.... etc. Bref je comprends plus ce que je dois installer ou non. En plus les liens renvoient vers des forums de 2014 qui sont totalement obsolètes.

                    Est ce que quelqu'un pourrait faire quelque chose de clair et net : Que doit-on installer et comment pour pouvoir suivre le cours ? Et quand vous faites un cours qui en suit un autre, renseignez vous svp de ce qui a été fait précisément ou pas, ça évite de se répéter voire se contredire.

                    Merci

                    • Partager sur Facebook
                    • Partager sur Twitter
                      23 décembre 2020 à 14:52:30

                      Va voir le cours de Kassandre Pedro sur le préprocesseurs Sass et après tu comprendras le cours des animations CSS :)
                      • Partager sur Facebook
                      • Partager sur Twitter

                      Combien de développeurs faut-t-il pour remplacer une ampoule grillée ?
                      Aucun, c'est un problème Hardware.

                        25 décembre 2020 à 8:02:07

                        j'y suis. en effet, il faut prendre dans l'ordre.... et tout devient clair et limpide ! merci kassandre.
                        • Partager sur Facebook
                        • Partager sur Twitter
                          25 décembre 2020 à 22:48:42

                          Salut, 

                          Perso sur cet vidéo j'ai tout compris et ça marche parfaitement ! Il explique très bien :

                          https://www.youtube.com/watch?v=DwOGURu-6cs

                          • Partager sur Facebook
                          • Partager sur Twitter
                            12 septembre 2022 à 16:07:41

                            Je suis d'accord avec vous le cours est vraiment brouillon, les exemples donnés, si on les copie colle même en ayant Sass je précise ca ne fonctionne pas car il manque des informations de styles sur les boutons/divs  , des classes n'ont pas eue leurs valeurs definies dans le css, comme les carrés (coucou la classe boxes__base , la classe box, etc) , du coup sans les informations css entieres cela ne fonctionne pas. C'est vraiment pas sérieux ce cours (et dire que c'est la même personne qui fait le cours React, je ne me languis pas).

                            Pas pro du tout, je vais me tourner vers les vidéos YT...

                            • Partager sur Facebook
                            • Partager sur Twitter
                              12 septembre 2022 à 16:41:30

                              Je suis en train de lire le cours, et j'avoue ne pas comprendre le problème (mais je survole, honnêtement). AngieP, peux-tu dire sur quelle partie du cours (avec un lien, si possible vers le bloc concerné, via le bouton "#" sur la gauche de chaque bloc) tu vois qu'il manque la classe boxes__base par exemple ?
                              • Partager sur Facebook
                              • Partager sur Twitter

                              Pas d'aide concernant le code par MP, le forum est là pour ça :)

                                12 septembre 2022 à 18:09:44

                                Il y a la partie faites pivoter avec rotate par exemple :
                                 https://openclassrooms.com/fr/courses/5919246-creez-des-animations-css-modernes/6340919-creez-des-animations-fluides-avec-la-propriete-css-transform#/id/r-6427401
                                b
                                oxes__base n'est defini nul part
                                Pour refaire la barre de chargement pour la partie transform-origin :
                                https://openclassrooms.com/fr/courses/5919246-creez-des-animations-css-modernes/6340920-modifiez-le-point-d-ancrage-d-un-element-grace-a-transform-origin#/id/r-6427568

                                Pareil ici aucune info sur le style de la class .bnt, et de la barre de chargement vide , je n'arrive pas a les reproduire.

                                Du coup je survole les cours et je regarde des videos youtubes qui expliquent mieux...

                                -
                                Edité par AngieP 12 septembre 2022 à 18:10:22

                                • Partager sur Facebook
                                • Partager sur Twitter
                                  12 septembre 2022 à 18:58:31

                                  En effet… je n'étais pas encore arrivée à ce chapitre. Je vois ce que tu veux dire. Ça vaudrait le coup d'écrire à hello@openclassrooms.com pour leur signaler (l'équipe de dev et de création de cours passe généralement peu sur le forum, hélas…).
                                  • Partager sur Facebook
                                  • Partager sur Twitter

                                  Pas d'aide concernant le code par MP, le forum est là pour ça :)

                                  Cours: Créez des animations CSS modernes

                                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                  × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                  • Editeur
                                  • Markdown