CSS

Bienvenue sur la section CSS

Apprentissage

Mozilla Developer Network : MDN est une ressource en ligne populaire et fiable qui fournit une documentation complète sur les technologies web. MDN offre des guides détaillés, des références complètes, des exemples de code et des tutoriels couvrant un large éventail de sujets liés au développement web, tels que HTML, CSS, JavaScript, APIs web, accessibilité, performance web, sécurité et bien plus encore.

W3Schools Online Web : W3Schools est un site web populaire qui propose des ressources d’apprentissage en ligne pour le développement web. Il offre des tutoriels, des exemples de code, des références et des exercices pratiques pour différents langages et technologies web.

Grafikart.fr : Grafikart est un site web francophone axé sur l’apprentissage et la formation en développement web et en design graphique. Il propose des tutoriels, des cours vidéo, des articles de blog et des ressources pour les développeurs et les designers.

OpenClassrooms : OpenClassrooms est une plateforme d’apprentissage en ligne qui propose des cours et des parcours de formation dans divers domaines, notamment la programmation, le développement web, la data science, le marketing numérique, la gestion de projet et bien plus encore.

Learn CSS : Ce cours décompose les principes fondamentaux du CSS en éléments digestes et faciles à comprendre. Au cours des prochains modules, vous apprendrez comment fonctionnent les aspects fondamentaux de CSS et comment les utiliser efficacement dans vos projets.

exercism : Plateforme d’apprentissage avec la pratique vous apprenez un langage tout en réfléchissant a des algo ‘simple’ et permet d’être mieux préparé aux tests techniques.

Exercices

Flebox Froggy : Flexbox Froggy est un jeu interactif en ligne qui permet d’apprendre les bases du positionnement des éléments HTML à l’aide de la propriété CSS Flexbox. Il propose une approche ludique et pratique pour comprendre et maîtriser Flexbox, qui est une technique très utile pour créer des mises en page flexibles et réactives.

CSS Diner : Flukeout (CSS Diner) est un jeu interactif en ligne conçu pour aider les développeurs à apprendre et à maîtriser les sélecteurs CSS. Il propose une approche ludique et pratique pour comprendre et utiliser efficacement les sélecteurs CSS afin de cibler et de styliser les éléments HTML.

Flexbox Defense : Flexbox Defense est un jeu en ligne interactif conçu pour aider les développeurs à apprendre et à pratiquer les concepts de base du Flexbox en CSS. Il propose un environnement de jeu ludique où les joueurs doivent utiliser les propriétés et les valeurs du Flexbox pour positionner et aligner des éléments de défense afin de protéger leur château des envahisseurs.

Grid Garden : CSS Grid Garden est un jeu interactif en ligne qui permet d’apprendre et de pratiquer les bases du CSS Grid, une puissante fonctionnalité de mise en page introduite dans CSS3.

Cours SASS - Pierre Giraud : Le cours est divisé en différentes sections, couvrant des sujets tels que les variables, les sélecteurs imbriqués, les mixins, les fonctions, les boucles et les conditions. Chaque section est accompagnée de code d’exemple et d’explications détaillées pour vous aider à comprendre et à utiliser efficacement Sass.

Perfectionnement

Variables de couleur SCSS : Mots d’explication sur les variables de couleurs SCSS/SASS

Les spécificités CSS : Comprendre la spécificité en CSS - FR

Les spécificités CSS : Comprendre la spécificité en CSS - EN

Css Protips : Liste de trucs & astuces pour améliorer ses compétences en CSS.

Astuces thème sombre : Articles donnant des conseils pour la réalisation et mise en place d’un thème sombre from scratch.

Outils

Gradient Generator : Gradient Generator de Josh Comeau est un outil en ligne qui permet de créer facilement des dégradés CSS personnalisés. C’est un outil pratique pour les développeurs et les concepteurs qui souhaitent expérimenter et générer des dégradés visuellement attrayants pour leurs projets.

Charts.css : Charts.css est une bibliothèque légère et simple qui permet de créer des graphiques et des diagrammes attrayants en utilisant uniquement des styles CSS.

Animista : Animista propose une large gamme d’animations CSS que vous pouvez utiliser pour donner vie à vos projets web. Ces animations couvrent divers effets tels que les transitions, les rotations, les mouvements, les défilements, les rebonds, les clignotements, les effets de texte, les effets de survol et bien plus encore.

Missing.css : WIP

Tailwind CSS : Tailwind CSS est une bibliothèque de classes utilitaires CSS hautement personnalisable et basée sur les classes. Elle offre une approche différente de la création d’interfaces utilisateur par rapport aux frameworks CSS traditionnels tels que Bootstrap.

Animate.css : Animate.style est une bibliothèque CSS qui propose une collection de animations pré-conçues prêtes à être utilisées dans vos projets web. Elle simplifie le processus d’ajout d’animations à vos éléments HTML en vous permettant d’appliquer des classes CSS spécifiques pour déclencher différentes animations.

Keyframes : En résumé, Keyframes.app est un outil en ligne pratique pour créer des animations CSS personnalisées. Il offre une interface visuelle conviviale, une prévisualisation en temps réel, la génération de code CSS et d’autres fonctionnalités qui simplifient le processus de création d’animations CSS attrayantes et interactives pour votre site web.

CSS Grid Generator : En résumé, CSS Grid Generator est un outil en ligne pratique pour générer du code CSS pour des mises en page basées sur CSS Grid. Il vous permet de définir facilement les dimensions, les marges et les espacements de votre grille, et génère automatiquement le code CSS correspondant. Cela vous aide à créer des mises en page flexibles et réactives sans avoir à écrire manuellement tout le code CSS.

Smooth Shadow : En résumé, Shadows.brumm.af est un outil pratique pour créer des ombres CSS personnalisées. Il offre une interface visuelle conviviale où vous pouvez ajuster les paramètres de l’ombre et prévisualiser les résultats en temps réel. Une fois satisfait, vous pouvez générer le code CSS correspondant et l’intégrer dans votre projet web.

pattern.css : En résumé, pattern.css est un site qui propose une collection de motifs CSS pré-conçus et prêts à l’emploi pour ajouter des styles visuels à vos projets web. Ces motifs CSS peuvent être utilisés pour créer des arrière-plans, des bordures, des motifs de texte et bien d’autres éléments graphiques.

VS Code Live SASS Compiler : L’extension “vscode-live-sass-compiler” est un outil pratique pour les développeurs qui utilisent Sass dans leurs projets. Elle accélère le processus de développement en éliminant la nécessité de compiler manuellement les fichiers Sass à chaque modification. Cela permet de gagner du temps et d’améliorer l’efficacité du flux de travail de développement front-end.

CSS Layout : Site qui regroupe des layout et pattern à copie/coller dans nos projets.

css3generator.com : WIP

grid.layoutit.com : WIP

webcode.tools : WIP

cssgenerator.org : WIP

html-css-js.com : WIP

cssgradient.io : WIP

neumorphism.io : WIP

Clippy : Clippy, pour créer des masques de formes sur vos divs ou images facilement.

Shape Divider : Shape Divider, pour faire des séparations stylées sur vos sites.

Fancy Border Radius : Fancy Border Radius, pour réaliser des formes avec border radius.

Haikei : Haikei, permet de générer des patterns, formes, background en SVG.

Smooth Shadow : Pour faire des ombres assez réalistes.

Cubic Bezier : Cubic Bezier, le fameux pour générer des transitions facilement.

CSS Glass: Pour tester le glassmorphisme.

Mesher : Mesher pour générer des gradient complexes.

Bulma UI : Bulma est un framework open source gratuit qui fournit des composants frontaux prêts à l’emploi que vous pouvez facilement combiner pour créer des interfaces Web responsive.

CSS Portal : Loader CSS

SmolCSS : Minimal snippets for modern CSS layouts and components

PureCSS : A set of small, responsive CSS modules that you can use in every web project.

Panda-CSS : Panda is a universal styling solution for the modern web — build time, type safe, and scalable CSS-in-JS.

Free Frontend : Ressourceries de snippets (forms, button, etc)

Cheatsheet

CSS Cheatsheet : est un site web qui fournit une feuille de triche (cheatsheet) pratique et complète pour le langage CSS.

Defensive CSS : Denfensive CSS est un site web qui met l’accent sur les techniques et les conseils pour écrire du CSS défensif. Il fournit des astuces pratiques, des exemples concrets et des ressources complémentaires pour vous aider à améliorer la qualité et la stabilité de votre code CSS.

CSS-Tricks : CSS-Tricks est un site web populaire qui fournit des ressources, des tutoriels et des astuces sur le développement web, en mettant particulièrement l’accent sur les techniques CSS.

CSS-Tricks Flexbox : L’article “A Guide to Flexbox” de CSS-Tricks est une ressource précieuse pour les développeurs web qui souhaitent maîtriser Flexbox et utiliser cette technique de mise en page puissante dans leurs projets. Que tu sois débutant ou expérimenté en CSS, cet article te donnera une compréhension approfondie de Flexbox et t’aidera à créer des mises en page flexibles et responsives avec facilité.

Flexbox - Ultimate cheatsheet : freeCodeCamp propose un article, une cheatsheet sur CSS Flex