README.md

Web development 2024

Une collection de lien sur le Front-end, Back-end et Design UI/UX.

✔️ Validators

• https://www.w3.org/developers/tools/

👩🏻‍💻 Code editor and I.D.E

• EditorConfig https://editorconfig.org/
• Visual Code Studio raccourci windows https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
• Python I.D.E https://www.jetbrains.com/pycharm/
• WebStorm, Front End oriented I.D.E https://www.jetbrains.com/webstorm/
• Code Pen, code & community https://codepen.io/
• JSFiddle code editor https://jsfiddle.net/
• Code Sandbox, code editor Full Stack https://codesandbox.io

🖌 CSS

• Liste des selecteurs et des propriétés CSS https://css-tricks.com/almanac/
• CSS Battle, jeu solo ou multi : https://cssbattle.dev/
• 12 ombres de texte CSS à copier/coller https://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/
• Grid by Example https://gridbyexample.com/
• 10 projets pour débutant: https://www.geeksforgeeks.org/top-10-projects-for-beginners-to-practice-html-and-css-skills/

🔎 PHOTO BANK

• un
• https://www.perplexity.ai
• https://unsplash.com
• https://pexels.com

👩🏻‍💻 PRIVATE DATA

• Lutte pour la regulaton de la techno-police: https://www.laquadrature.net/
• Etat belge: https://www.belgium.be/fr/justice/respect_de_la_vie_privee/protection_des_donnees_personnelles

🔎 Accéssibilité

• https://www.anysurfer.be/fr/documentation/articles/categorie/structure-et-semantique
• https://www.w3.org/WAI/fundamentals/accessibility-intro/fr
• http://www.pompage.net/traduction/accesibilitemoteursderecherche

📏 Responsive

• Une liste des dimensions des appareils : https://screensiz.es/
• articcle d'Alsacreation, site français, tuto et article. : https://www.alsacreations.com/article/lire/1559-responsive-web-design-present-futur-adaptation-mobile.html
• article de Grafikart (video): https://grafikart.fr/tutoriels/media-query-css-1050

🏭 Framework CSS

• liste des framework les plus utilisés : https://2023.stateofcss.com/en-US/css-frameworks/
• Tailwind CSS https://tailwindcss.com/docs/installation
• [<Bootstrap >]
• UI Kit: https://getuikit.com/docs/introduction
• Bulma: https://bulma.io/documentation/
• PureCSS: https://purecss.io/
• Open Props: https://open-props.style/
• …

🚀 React

• https://github.com/enaqx/awesome-react

🥇 Front-End / U.I/U.X

• The Open Graph protocol: https://ogp.me/
• The FWA, classement des meilleurs site en termes de communication/publicité https://thefwa.com
• Awwwards, classement de sites https://www.awwwards.com/
• Collection de sites https://webawards.com/
• Css Tricks aka Chris Coyer, le site de références en Front end https://css-tricks.com/
• "Front-end education for the real world.", magazine https://piccalil.li
• Template HTML https://github.com/alsiam/web-projects?tab=readme-ov-file
• Traduction française d'article de références http://www.pompage.net/
• Portail sur le front-end, high level: https://tympanus.net/codrops/
• Magazine sur le web: https://abduzeedo.com/
• Ressources pour designer: https://www.webdesignerdepot.com
• Portail dev : https://typeoverflow.com/
• Les principales balises : https://thomgo.github.io/trainingIntegration/cheatsheetHTML/index.html
• Colour contrast checker: https://colourcontrast.cc/
• Design process in Figma https://piccalil.li/blog/redesigning-piccalilli-the-first-part-of-the-design-process/
• Quizz Html, Css, Js : https://www.alsacreations.com/quiz/

🧩 Back End links

• La documentation officielle html/CSS/JS/ … https://developer.mozilla.org/fr/docs/Learn/Common_questions
• Codecademy, tutoriels: https://www.codecademy.com/learn
• Magazine sur le Dév: https://dev.to/
• Magazine Alsacréation: https://www.alsacreations.com
• Front-End paradise: https://codepen.com
• Plateforme de formation française: https://grafikart.fr/
• Plateforme de formation française: https://openclassrooms.com/fr/courses
• Le C.V des Dév, cloud pour code: https://github.com/
• Article par les dév pour les dév: https://medium.com/tag/web-development
• Wordpress, tutoriels: https://capitainewp.io/
• Site regroupant TOUTE la documentation des langages web: https://devdocs.io/
• Plan d'un site: https://octopus.do/
• Cardio JS: https://javascript30.com/
• Plan de carriere: https://roadmap.sh/backend

📚 State Of … (étude demographique et technologique de la pratique du dév dans le monde)

• Tous les 'state of …' https://survey.devographics.com/fr-FR
• ❤️ State of CSS 2023 https://survey.devographics.com/fr-FR/survey/state-of-css/2023
• ❤️ State of HTML 2023 https://survey.devographics.com/fr-FR/survey/state-of-html/2023

🔩 EXTENSIONS DE NAVIGATEUR ET OUTILS

• https://chrispederick.com/work/web-developer/ / extension vitale
• Visualise le LocalStorage du navigateur:https://github.com/igorlogius/localstorage-editor
• inspecteur html: https://chromewebstore.google.com/detail/hover-inspector-like-in-z/ /
• https://chromewebstore.google.com/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf / verification de l'accésibilité
• https://github.com/oftheheadland/Colorblindly / accéssibilité des couleurs
• https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi / ext. Accéssibilité
• https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd / dev tools
• Generateur d'ombre en CSS: https://shadows.brumm.af/

🧐 Renseignement sur les entreprises

• <Linkedin.com>
• Glassdoor, https://fr.glassdoor.be/index.htm?countryPickerRedirect=true

🧳 Préprocesseur, Builder

• Bundler/Builder, easy https://parceljs.org/
• Vite JS, moyen https://vitejs.dev
• Logiciel: https://prepros.io/
• Php/Laravel + Webpack = https://laravel-mix.com/

TOOL / Utiles

• Générateur de dégradé CSS https://cssgradient.io
• Couleur et police de caractéres: https://www.colorsandfonts.com/
• Moteur de recherche d'APIhttps://any-api.com/
• Optimisation d'image https://tinypng.com/
• generateur de webfonts https://www.fontsquirrel.com/tools/webfont-generator
• Pléthore d'outils pour le front-end: https://www.beforepost.com
• Plein de petit outils sympa: https://tiny-helpers.dev/
• Open Source dev lists: https://freestuff.dev/
• Awesome Chart.js: https://github.com/chartjs/awesome
• Snippets, bout de code: https://www.30secondsofcode.org/collections/p/1/
• Randow profil: https://randomuser.me/
• Lorem ipsum html: http://officeipsum.com/index.php
• Lorem ipsum corporate: https://loripsum.net/
• 👌🏼 Collecting All Cheat Sheets https://overapi.com/

📰 Articles, tutoriels et documentation

• A propos de la nommination des classes: https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/
• 🍬 Block Element Modifier aka B.E.M https://putaindecode.io/articles/petite-definition-de-bem/
• Maîtriser la spécificité CSS @Layer https://www.alsacreations.com/article/lire/1871-Maitriser-la-specificite-CSS-grace-a-Cascade-Layers.html
• Les citations en HTML avec blockquote, cite et q https://www.alsacreations.com/article/lire/1908-Les-citations-en-HTML-avec-blockquote-cite-et-q.html

WordPress et Twig

• Quizz WordPress https://capitainewp.io/quiz-wordpress/

• Glossaire des termes de WordPress: https://www.wpbeginner.com/glossary

• Documentation Timber v2 https://timber.github.io/docs/v2/

• Starter Kit Timber v2 https://github.com/cearls/timberland

• Tuto Grafikart Timber v1 https://www.youtube.com/watch?v=o-io2Ck9iDk

• https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/

• https://putaindecode.io/articles/petite-definition-de-bem/

• https://www.30secondsofcode.org/collections/p/1/