🚀 Mes p'tits (ou gros) trucs pour gagner du temps by Olivier Céréssia https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y en-us 2025-04-14 11:28:11 UTC 2025-04-18 13:39:05 UTC hello@padlet.com Observation & comparaison ohmygoodweb https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y/wish/3412373997 Quand je travaille sur un nouveau projet, je prends vraiment du temps pour observer et regarder ce qui est commun et, avec l'expérience, je sais déjà de quel genre de structure HTML je vais avoir besoin pour chaque bloc. Je sais aussi identifier les choses qui pourraient me poser des problèmes.

]]> 2025-04-16 11:56:42 UTC https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y/wish/3412373997 La Dactylo, les raccourcis clavier, Emmet ohmygoodweb https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y/wish/3412375085 C'est con comme la pluie mais ça m'aide tellement de connaître mon clavier et de taper sans le regarder. A côté de ça, Emmet et les raccourcis clavier liés à VsCode sont des game-changer aussi je pense

]]> 2025-04-16 11:57:46 UTC https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y/wish/3412375085 width: fit-content duplouisharald10 https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y/wish/3412388773 La propriété width: fit-content permet à un élément d’adapter automatiquement sa largeur en fonction de la taille de son contenu, sans l’étendre inutilement. Cela signifie que l’élément prendra juste la place nécessaire pour afficher son contenu.


En pratique :

Si l’on crée un élément destiné à être utilisé dans plusieurs contextes différents, et que l’on souhaite qu’il conserve une largeur adaptée uniquement à son contenu, on peut utiliser width: fit-content pour éviter qu’il s’adapte à la taille de son conteneur.

]]> 2025-04-16 12:12:31 UTC https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y/wish/3412388773 BEM https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y/wish/3412398570 Utiliser la méthodologie B.E.M. ou autre, du moment que l'on garde une structure claire et réutilisable/modifiable facilement partout pour tous projets.

]]> 2025-04-16 12:21:55 UTC https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y/wish/3412398570 Bonne structuration malakimalachie https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y/wish/3412404023 Je prends d'abord le temps pour une structuration générale du HTML, du header au footer, en suite je cible tous les éléments ayant une structure commune du coté CSS et je finis par le CSS.

]]> 2025-04-16 12:27:43 UTC https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y/wish/3412404023 Balises sémantiques et de segmentation https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y/wish/3412426045 J'utilise un maximum les balises sémantiques qui me permettent de directement structurer mon code.

Les balises de segmentation : header, main, footer, section, etc.

Et les balises liées à un usage : figure/figcaption, article, address, button, etc.

]]> 2025-04-16 12:48:40 UTC https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y/wish/3412426045 Snippet https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y/wish/3412428670 Se créer des snippets, permet d'avoir des blocs structurels en place. Par exemple pour les média screen :


"Media queries medium size": {

        "prefix": "mqmd",

        "body": [

            "@media screen and (min-width:576px) and (max-width:960px) {}"

        ],

        "description": "screen medium size - config media "

    },


    "Media queries large size": {

        "prefix": "mqlg",

        "body": [

            "@media screen and (min-width:960px) {}"

        ],

        "description": "screen large size - config media "

    }


]]> 2025-04-16 12:50:56 UTC https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y/wish/3412428670 Usage de classes multiples https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y/wish/3412432090 L'usage de plusieurs classes me permet de mettre une configuration par défaut sur la première classe, et puis de jouer sur les autres classes pour apporter des modifications spécifiques.

A connecter avec BEM

]]> 2025-04-16 12:54:11 UTC https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y/wish/3412432090 Snippets + Emmet https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y/wish/3412444607 Ne pas hésiter à se créer des snippets pour les éléments qu'on utilise souvent (ex : pour les ::before/::after , les overlays, les éléments en position absolute etc..)

]]> 2025-04-16 13:05:29 UTC https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y/wish/3412444607 Faire sa propre librairie https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y/wish/3412448481 Se faire un dossier avec des démos sur les spécificités permet aussi de garder des exemples concrets dont on peut s'inspirer.


Librairie de bouton, démo sur comment retirer les bullets des ul>li, rendre un <a> téléchargeable, card flip, faire tourner un cube, etc.

]]> 2025-04-16 13:08:43 UTC https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y/wish/3412448481 ne pas écrire les doublons dans l'HTML https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y/wish/3412475972 Par exemple si il y a 8 cards consécutive qui sont toutes très similaires. Il vaut mieux d'abord faire le css de la plus complexe, puis la dupliquer au niveau de l'HTML.

Cela Ă©vite d'Ă©ventuelle modification sur tous les doublons.

]]> 2025-04-16 13:29:49 UTC https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y/wish/3412475972 Mixins & variables ohmygoodweb https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y/wish/3415122853 Ne pas hésiter à utiliser les variables & les mixins dans Sass :

]]> 2025-04-18 13:32:41 UTC https://padlet.com/ohmygoodweb/ajs01j9ba1gu4z8y/wish/3415122853