https://wiki.phobos-net.fr/ 2026-05-06T21:29:27+00:00 https://wiki.phobos-net.fr/ https://wiki.phobos-net.fr/lib/tpl/dokuwiki/images/favicon.ico text/html 2025-08-17T09:45:37+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/simplifiez-vous-le-css-avec-sass/250_deployer_code_sass?rev=1755423937&do=diff cours dev developpement web css sass html Déployez votre code Sass en ligne Notes et transcriptions du cours Simplifiez vous le CSS avec Sass proposé sur la plateforme Openclassrooms. Vous avez réussi ! Félicitations ! 🎉 YOU DID IT ! Vous avez fini ce cours. Avant de vous laisser partir et voler vers d’autres horizons, il nous reste quelques notions à aborder afin que vous puissiez être en totale autonomie. text/html 2025-08-15T12:53:42+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/simplifiez-vous-le-css-avec-sass/120_definir_les_priorites?rev=1755262422&do=diff cours dev developpement web css sass html Définissez des priorités Notes et transcriptions du cours Simplifiez vous le CSS avec Sass proposé sur la plateforme Openclassrooms. Pour pouvoir charger une page sur le web, les navigateurs respectent un ordre bien précis : en premier le HTML, qui va déterminer les fondations de votre page web, puis le text/html 2024-10-21T21:01:20+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/creez_votre_site_web_avec_html5_et_css3/230_ajouter_couleur_de_fond?rev=1729544480&do=diff dev web html css Ajoutez de la couleur et un fond Notes et transcriptions du cours Créez votre site web avec HTML5 et CSS3 proposé sur la plateforme Openclassrooms. Changez la couleur du texte avec color La propriété CSS qui permet de modifier la couleur du texte, c'est color. h1 { color: blue; } De nombreux text/html 2024-10-22T18:22:34+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/creez_votre_site_web_avec_html5_et_css3/250_creer_apparences_dynamiques?rev=1729621354&do=diff dev web html css Créez des apparences dynamiques Notes et transcriptions du cours Créez votre site web avec HTML5 et CSS3 proposé sur la plateforme Openclassrooms. Le CSS nous permet aussi de modifier l'apparence des éléments de façon dynamique, c'est-à-dire que des éléments peuvent changer de forme une fois que la page a été chargée ; et tout cela grâce aux text/html 2024-10-27T12:49:34+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/creez_votre_site_web_avec_html5_et_css3/425_aller_plus_loin?rev=1730033374&do=diff dev web html css Allez plus loin Notes et transcriptions du cours Créez votre site web avec HTML5 et CSS3 proposé sur la plateforme Openclassrooms. Apprenez à créer un site web interactif avec Javascript C'est probablement l'un des premiers langages que vous voudrez apprendre, maintenant que vous avez des connaissances en text/html 2024-10-21T21:26:20+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/creez_votre_site_web_avec_html5_et_css3/240_creer_bordures_et_ombres?rev=1729545980&do=diff dev web html css Créez des bordures et des ombres Notes et transcriptions du cours Créez votre site web avec HTML5 et CSS3 proposé sur la plateforme Openclassrooms. Créez des bordures avec la propriété CSS border Le CSS offre un large choix de bordures : border-width, border-color, border-style… Pour aller à l'essentiel, je vous propose ici d'utiliser directement la super-propriété border qui regroupe l'ensemble de ces propriétés. Vous vous souvenez de la super-propriété text/html 2025-08-16T10:18:24+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/simplifiez-vous-le-css-avec-sass/140_utiliser_sass?rev=1755339504&do=diff cours dev developpement web css sass html Passez au niveau supérieur avec Sass Notes et transcriptions du cours Simplifiez vous le CSS avec Sass proposé sur la plateforme Openclassrooms. Comparez CSS et Sass Sass est un préprocesseur CSS. C’est un outil qui vous permet d’écrire du CSS, avec une syntaxe différente. Prenons ce code text/html 2024-10-23T10:50:40+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/creez_votre_site_web_avec_html5_et_css3/320_bases_de_css_grids?rev=1729680640&do=diff dev web html css Découvrez les bases de CSS Grids Notes et transcriptions du cours Créez votre site web avec HTML5 et CSS3 proposé sur la plateforme Openclassrooms. Définissez une grid avec la propriété CSS display: grid; De la même manière que pour Flexbox, lorsque vous utilisez CSS Grids, vous pouvez imaginer un conteneur, une sorte de text/html 2025-08-17T09:17:00+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/simplifiez-vous-le-css-avec-sass/240_adapter_code_a_tout_support?rev=1755422220&do=diff cours dev developpement web css sass html Adaptez votre code sur tous supports Notes et transcriptions du cours Simplifiez vous le CSS avec Sass proposé sur la plateforme Openclassrooms. Pour le moment, tout a l’air parfait quand on regarde notre page sur un navigateur d’ordinateur. Sauf que sur mobile… Une mise en page typique du design non responsive sur mobile text/html 2024-10-21T20:27:45+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/creez_votre_site_web_avec_html5_et_css3/220_changer_apparence_du_texte?rev=1729542465&do=diff dev web html css Changez l'apparence du texte Notes et transcriptions du cours Créez votre site web avec HTML5 et CSS3 proposé sur la plateforme Openclassrooms. Changez la taille du texte avec la propriété CSS font-size Pour modifier la taille du texte, on utilise la propriété CSS font-size avec une valeur absolue text/html 2024-10-23T18:44:28+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/creez_votre_site_web_avec_html5_et_css3/325_autres_techniques_de_mise_en_page?rev=1729709068&do=diff dev web html css Abordez d'autres techniques de mise en page Notes et transcriptions du cours Créez votre site web avec HTML5 et CSS3 proposé sur la plateforme Openclassrooms. Transformez vos éléments avec display La propriété CSS display permet de transformer n'importe quel élément de votre page, d'un type vers un autre. Avec cette propriété, on peut par exemple imposer à des liens (originellement de type text/html 2025-08-17T08:27:05+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/simplifiez-vous-le-css-avec-sass/230_ameliorer_mixins_via_fonctions?rev=1755419225&do=diff cours dev developpement web css sass html Améliorez vos mixins grâce aux fonctions Notes et transcriptions du cours Simplifiez vous le CSS avec Sass proposé sur la plateforme Openclassrooms. Vous avez créé un mixin pour incorporer une bordure sur le titre du portfolio de Robbie. Sauf que, changement de programme, la couleur de l’ombre ne plaît plus du tout. On vous envoie un nouveau visuel : text/html 2024-10-22T22:10:40+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/creez_votre_site_web_avec_html5_et_css3/315_mise_en_page_via_flexbox?rev=1729635040&do=diff dev web html css Faites votre mise en page avec Flexbox Notes et transcriptions du cours Créez votre site web avec HTML5 et CSS3 proposé sur la plateforme Openclassrooms. Comprenez la logique : un conteneur, des éléments Pour faire de la mise en page avec Flexbox, il faut : * Définir un conteneur ; * Placer à l'intérieur plusieurs éléments. text/html 2024-10-26T12:28:10+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/creez_votre_site_web_avec_html5_et_css3/410_creer_des_formulaires?rev=1729945690&do=diff dev web html css Créez des formulaires Notes et transcriptions du cours Créez votre site web avec HTML5 et CSS3 proposé sur la plateforme Openclassrooms. Pour créer un formulaire, vous aurez besoin de la balise HTML <form></form>, elle permet d'indiquer le début et la fin du formulaire. Voici les deux attributs indispensables pour construire un formulaire fonctionnel : text/html 2024-10-26T12:59:38+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/creez_votre_site_web_avec_html5_et_css3/415_finaliser_un_formulaire?rev=1729947578&do=diff dev web html css Finalisez un formulaire et ajoutez un bouton d'envoi Notes et transcriptions du cours Créez votre site web avec HTML5 et CSS3 proposé sur la plateforme Openclassrooms. Regroupez des champs avec la balise <fieldset> Si votre formulaire grossit et comporte beaucoup de champs, il peut être utile de les regrouper au sein de plusieurs balises text/html 2025-08-15T11:58:27+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/simplifiez-vous-le-css-avec-sass/110_simplifier_votre_code?rev=1755259107&do=diff cours dev developpement web css sass html Simplifiez votre code Notes et transcriptions du cours Simplifiez vous le CSS avec Sass proposé sur la plateforme Openclassrooms. Trouvez les répétitions Peu importe le langage que vous utilisez, écrire du code, rajouter des lignes, créer un immense plat de spaghettis sans prendre en compte la structure et sans l’organiser proprement ? Tout le monde le fait. text/html 2025-08-16T11:52:41+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/simplifiez-vous-le-css-avec-sass/210_optimiser_la_lecture_du_code?rev=1755345161&do=diff cours dev developpement web css sass html Optimisez la lecture du code Notes et transcriptions du cours Simplifiez vous le CSS avec Sass proposé sur la plateforme Openclassrooms. La syntaxe est importante et nous permet d’écrire du code plus organisé, certes ; mais seule, elle n’est pas très efficace et on ne comprend pas trop l’intérêt d’écrire du text/html 2025-08-17T10:16:59+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/simplifiez-vous-le-css-avec-sass/260_quiz_optimiser_css_avec_sass?rev=1755425819&do=diff cours dev developpement web css sass html Quiz : Optimiser son CSS avec Sass Notes et transcriptions du cours Simplifiez vous le CSS avec Sass proposé sur la plateforme Openclassrooms. Question 1 Dans Sass, lorsque vous utilisez &, sous quelle forme se compile le symbole esperluette (&) ? * L’esperluette (&) * Le combinateur adjacent text/html 2024-10-22T18:39:28+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/creez_votre_site_web_avec_html5_et_css3/000_start?rev=1729622368&do=diff dev web html css Créez votre site web avec HTML5 et CSS3 Notes et transcriptions du cours Créez votre site web avec HTML5 et CSS3 proposé sur la plateforme Openclassrooms. Maitriser les bases de HTML 5 * Comprenez la différence entre HTML et CSS * Créez votre première page web en HTML * Organisez votre texte text/html 2024-10-21T19:36:21+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/creez_votre_site_web_avec_html5_et_css3/210_integrer_le_css_dans_la_page_html?rev=1729539381&do=diff dev web html css Intégrez le CSS dans la page HTML Notes et transcriptions du cours Créez votre site web avec HTML5 et CSS3 proposé sur la plateforme Openclassrooms. Liez le fichier CSS au fichier HTML Les éléments de mise en forme sont définis dans le fichier CSS ou feuille de style (stylesheet). Pour que qu'ils puissent s'appliquer il faut les associer au document text/html 2024-10-22T18:28:57+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/creez_votre_site_web_avec_html5_et_css3/260_quiz_mise_en_forme_via_css?rev=1729621737&do=diff dev web html css :TODO_DOCUPDATE: Quiz : Mettre en forme des pages web avec CSS3 Notes et transcriptions du cours Créez votre site web avec HTML5 et CSS3 proposé sur la plateforme Openclassrooms. ◁ Précédent | ⌂ Retour au sommaire | Suivant ▷ text/html 2024-10-22T20:15:31+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/creez_votre_site_web_avec_html5_et_css3/305_structurer_la_page?rev=1729628131&do=diff dev web html css Structurez votre page Notes et transcriptions du cours Créez votre site web avec HTML5 et CSS3 proposé sur la plateforme Openclassrooms. Utilisez la balise <header> pour l'en-tête La plupart des sites web possèdent un <header>(en-tête, en français). On y trouve le plus souvent, à minima, un logo. On le place, pour des raisons de cohérence, en tête du code, donc au début de la balise text/html 2024-10-22T21:15:43+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/creez_votre_site_web_avec_html5_et_css3/310_decouvrir_modele_des_boites?rev=1729631743&do=diff dev web html css Découvrez le modèle des boîtes Notes et transcriptions du cours Créez votre site web avec HTML5 et CSS3 proposé sur la plateforme Openclassrooms. Différencier les balises de type block et de type inline En HTML, la plupart des balises peuvent se ranger dans l'une ou l'autre de ces deux catégories : text/html 2024-10-22T19:03:39+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/creez_votre_site_web_avec_html5_et_css3/330_quiz_agencer_page_web?rev=1729623819&do=diff dev web html css :TODO_DOCUPDATE: Quiz : Agencer le contenu de pages web Notes et transcriptions du cours Créez votre site web avec HTML5 et CSS3 proposé sur la plateforme Openclassrooms. ◁ Précédent | ⌂ Retour au sommaire | Suivant ▷ text/html 2024-10-23T19:55:27+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/creez_votre_site_web_avec_html5_et_css3/405_ajouter_des_tableaux?rev=1729713327&do=diff dev web html css Ajoutez des tableaux Notes et transcriptions du cours Créez votre site web avec HTML5 et CSS3 proposé sur la plateforme Openclassrooms. Créez un tableau en HTML et CSS La balise en paire <table></table> indique le début et la fin d'un tableau. Cette balise est de type block, on va donc la placer en dehors d'un paragraphe ou d'une text/html 2024-10-26T14:31:11+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/creez_votre_site_web_avec_html5_et_css3/420_responsive_design_et_media_queries?rev=1729953071&do=diff dev web html css Utilisez le responsive design avec les Media Queries Notes et transcriptions du cours Créez votre site web avec HTML5 et CSS3 proposé sur la plateforme Openclassrooms. Appliquez une media query avec @media Les media queries sont des règles qui indiquent quand on doit appliquer des propriétés CSS text/html 2024-10-22T19:13:34+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/creez_votre_site_web_avec_html5_et_css3/430_quiz_fonctionnalites_avancees_html_et_css?rev=1729624414&do=diff dev web html css :TODO_DOCUPDATE: Quiz : Utiliser des fonctionnalités avancées de HTML et CSS Notes et transcriptions du cours Créez votre site web avec HTML5 et CSS3 proposé sur la plateforme Openclassrooms. ◁ Précédent | ⌂ Retour au sommaire text/html 2025-08-15T10:32:43+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/simplifiez-vous-le-css-avec-sass/000_start?rev=1755253963&do=diff cours dev developpement web css sass html Simplifiez vous le CSS avec Sass Notes et transcriptions du cours Simplifiez vous le CSS avec Sass proposé sur la plateforme Openclassrooms. Prérequis : voir le cours Créez votre site web avec HTML5 et CSS3. Avec le temps, vos projets grossissent, tout s’entasse et un beau jour on regrette amèrement de ne pas avoir pris le temps de réfléchir à l'organisation et la structure des fichiers text/html 2025-08-15T14:28:47+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/simplifiez-vous-le-css-avec-sass/130_clarifier_html_via_bem?rev=1755268127&do=diff cours dev developpement web css sass html Clarifiez votre HTML avec BEM Notes et transcriptions du cours Simplifiez vous le CSS avec Sass proposé sur la plateforme Openclassrooms. Soyons honnêtes, vous passerez plus de temps à lire votre code qu’à l’écrire. Que ce soit parcourir votre code à la recherche d’un élément à modifier, ou juste pour vous rappeler comment fonctionne tel ou tel élément. D’où l’importance de bien nommer vos sélecteurs. text/html 2025-08-16T10:50:31+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/simplifiez-vous-le-css-avec-sass/150_quiz_structurer_son_code?rev=1755341431&do=diff cours dev developpement web css sass html Quiz : Structurer son code Notes et transcriptions du cours Simplifiez vous le CSS avec Sass proposé sur la plateforme Openclassrooms. Question 1 La méthode DRY est un des concepts fondamentaux lorsqu’on souhaite simplifier notre CSS ; cette méthode consiste à : * répéter les sections les plus utilisées ; text/html 2025-08-16T13:49:42+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.phobos-net.fr/doku.php/cours/informatique/dev/web/simplifiez-vous-le-css-avec-sass/220_utiliser_variables_et_mixins?rev=1755352182&do=diff cours dev developpement web css sass html Utilisez les variables et mixins Notes et transcriptions du cours Simplifiez vous le CSS avec Sass proposé sur la plateforme Openclassrooms. Initiez-vous aux variables Pour le moment, le site de Robbie Lens ne comporte pas beaucoup de couleurs, mais nous les utilisons sans arrêt. Entre nous, je suis incapable de retenir les couleurs par leur