Bienvenue sur la partie 1 du kit de survie !
Sur le net, il existe de nombreux sites et services en ligne pour vous aider dans le développement front-end. Cependant, c'est souvent difficile de s'y retrouver, surtout lorsque l'on débute.
- Tu cherches des infos sur le net et tu ne sais plus ou donner de la tête ?
- Tu ne sais pas quels sont les meilleurs outils du moment ?
- Tu veux savoir où vont les pros pour trouver leur inspiration ?
Alors tu es sur la bonne page.
En partenariat avec Alternative RVB, nous avons décidé de vous proposer pour 2022, une toute nouvelle liste en deux parties, avec quelques ajouts pour vous préparer au mieux pour l'année à venir.
La plupart des outils proposés sont des applications web gratuites ou open source que nous avons testé pour vous et adopté dans notre méthode de travail.
De la doc. en veux-tu en voilà !
Documentations
- w3schools.com & whatwg.org : Documentation HTML / CSS / JavaScript
- developer.mozilla.org : Documentation HTML / CSS / JavaScript
- stackoverflow.com : Un forum d’entraide spécialisé dans la programmation et le développement en anglais
Formations
- openclassrooms.com/fr : Un site spécialisé dans la formation web avec diplômes reconnus par l'état.
- grafikart.fr : Un site spécialisé dans la programmation et le développement web avec des formations et pleins de trucs utiles.
- threejs-journey.com : Site de formation dédié à ThreeJS, la librairie pour créer des sites avec animations 3D. (Payante : 99€)
Gérez au mieux votre projet avec ces outils de gestion et d'organisation.
- gitkraken.com : Un outil de gestion de projets open source.
- hackmd.io : Un outils de prise de note et de documentation collaborative en Markdown
- milanote.com : Un outil sympathique qui permet de faire des mood board et gérer vos projets ou prendre simplement des notes et aide à l'organisation.Très utile pour les designer.
- trello.com : Un outil de gestion de projets.
- quire.io : Un outil de gestion de projets pour les équipes avec la possibilité de faire des to-do-list ou des emplois du temps.
- vs-code
- Sublime Text
- Atom
- Code sandbox : Celui-ci permet la gestion de code en équipe et live via le navigateur
Liste de plugins utiles pour VS-CODE
Retrouvez aussi une liste non-exhaustive de plugins pour vs-code, préparée par Alternative RVB.
Générateur de thème pour VS-CODE
- oslo-vsc : Vous permet de créer votre propre thème pour VS-CODE
- Figma : Permet de créer des maquettes et prototypes de sites gratuitement.
- Adobe XD : Maquette et prototype de sites mais payant.
- Google drawings : Créer des visuels simples et des schémas relationnels.
- Google slider : Créer des visuels simples et des schémas relationnels sous forme de diaporama.
- Mockflow : Wireframe.
Ajoutez du faux texte et de faux utilisateurs et fausses images pour vos présentations client. Cela vous permettra de donner un peut plus de pep's à vos design.
Faux textes
- lipsum.com : Génére du texte de substitution.
Faux utilisateurs
- randomuser.me : Liste de photos d’utilisateurs pour maquettes.
- pravatar.cc : Liste de photos d’utilisateurs pour maquettes.
Fausses images
- loremflickr.com : Obtient des images de substitution.
- placeholder.com : Obtient des images de substitution.
Bien choisir les couleurs de son site est primordial. Avec ces outils vous pourrez tester rapidement si vos couleurs vont bien ensemble ou non et si celles-ci sont bien adaptées au public visé.
- paletton.com : Roue chromatique et sélecteur de couleur.
- color-hex.com : Roue chromatique et sélecteur de couleur.
- color.adobe.com : Roue chromatique et sélecteur de couleur.
- leonardocolor.io : Générateur de couleurs et contrastes Open-source.
- coolors.co : Générateur de schéma de couleurs avec extensions Adobe et chrome.
Aide pour l’accessibilité, calculer le contraste idéal pour vos couleurs d’arrière-plan et d’avant-plan - Conformité WCAG.
- contrastchecker.com
- whocanuse.com : Permet de savoir si vos couleurs sont adaptées pour chaque type de handicap visuel.
Installer des polices open-source. Non, Dafont n'est pas la solution ! :
Avec la combinaison de :
- fontjoy.com : Permet de comparer et associer plusieurs polices.
Photos
Icônes et illustrations
- boxicons.com
- icons8.com
- undraw.co
- manypixels.co
- absurd.design
- icomoon.io
- iconstore.co
- fontawesome.com
- thenounproject.com
- ionic.io
- Et plus encore …
Vidéos
SVG
Textures 3D
- polyhaven : Permet récupérer des textures 3D en 4K +
- 3dtextures : Permet récupérer des textures 3D
Retoucher des photos en ligne
Convertir des images et photos en ligne
- squoosh.app : Un convertisseur d’images en ligne.
- Pour les adeptes de la console il y a : https://pandoc.org/
CMS de forum
- Flarum : Très bon CMS de forum assez jeune et gratuit.
- Discourse : CMS de forum plus compliqué que Flarum à installer mais tout aussi puissant.
Gestionnaire de Cookies
- Axeptio : Fun et facile à intégrer même sur un wordpress.
Envoyer des fichiers à un client
- Wetransfer : Permet le transfert et envoi rapide de fichier plus volumineux
Tailles des images pour chaque réseau social
- socialsizes : Permet de connaître la taille des images requises pour chaque plateforme sociale.
