Le kit de survie pour le web
Des tas de sites et services en ligne pour vous aider dans le développement frontend
Tu t’es enfin décidé à affronter les terres désolées du World Wide Web et tu veux franchir de nouvelles étapes. Tu es malin et pas une andouille. Tu as frappé à la bonne porte, je t’ai préparé un bon guide pour déblayer le chemin.
Nous sommes en 2020 et l’homme a créé de gentils robots bien docile pour faire presque le travail à ta place. Pour toi je les ai listés et organisés par catégorie car on a peu de temps devant nous.
La plupart des outils proposés sont des applications web gratuites.
C’est parti !
Gestion de projet
- trello.com est un outil de gestion de projets.
- gitkraken.com est un un autre outil de gestion de projets open source.
Hébergement gratuit
- 000webhost.com est un Hébergeur avec une formule gratuite.
- planethoster.com est un Hébergeur avec une formule gratuite.
Attention hébergement gratuit ne veut pas dire qu’ils vont te faire un café mais tu pourras toujours trouver mieux contre quelques pièces.
Transférer des fichiers SFTP - SSH
- filezilla-project.org Filezilla application de transfert de fichier utilisant le protocole SFTP
- winscp.net Winscp application de transfert de fichier utilisant le protocole SFTP, est-il meilleur ?
- Ou encore directement dans le navigateur avec : cyberduck.io
- Un terminal Bash ou WSL Permet le transfert de fichier via le protocole SSH
Manuels et référence en ligne
Les manuels sont essentiels si tu veux survivre.
Obtenir une information exacte sur l’utilisation d’une fonction, obtenir des conseils sur le développement d’un site …
Pas la peine de courir partout. Privilégie les modes d’emploi.
Même Google est ton ami (si si). RTFM
- w3schools.com & whatwg.org contient de la documentation HTML / CSS / JavaScript
- developer.mozilla.org contient de la documentation HTML / CSS / JavaScript
- stackoverflow.com est un forum d’entraide spécialisé dans la programmation et le développement
Éditeurs de texte - IDE - Coder
Il en existe d’autres mais pour commencer cela suffit amplement.
Tu peux aussi apprendre des raccourcis Windows
Liste de plugins utiles pour VS-CODE
Tu peux mettre dans ton sac à dos ces quelques plugins pour vs-code.
Enfin si ça te branche.
Contrôler / vérifier le code
HTML
- validator.w3.org Le dictateur
CSS
Compatibilité
-
caniuse.com : permet de connaître la compatibilité des dernières technologies du web pour les navigateurs.
-
caniemail.com : permet de connaître la compatibilité des dernières technologies du web pour les clients mail.
Divers
-
lambdatest.com : Contrôle ton site sur tous les navigateurs.
-
drlinkcheck.com : Check les hyperliens de ton site.
Tableau de caractères spéciaux et raccourcis
Tu peux maintenant faire la combinaison de touches Win + ; pour insérer des émojis et prouver que tu es très en colère (Niark !). Merci Windows pour ton éveil.
Sinon il y a aussi :
Copyrighting
Un peu d’aide pour le Copyrighting.
Outils pour le Multimédia
Banques d’images, photos et vidéos.
Retoucher des photos en ligne
Convertir des images et photos en ligne
Un convertisseur d’images en ligne.
Pour les adeptes de la console il y a :
Banques photos, vidéo et illustrations vectorielles, Icones et glyphes libres de droits
Photos
Icônes et illustrations
- icons8.com
- undraw.co
- manypixels.co
- absurd.design
- icomoon.io
- iconstore.co
- fontawesome.com
- thenounproject.com
- Et plus encore …
Vidéos
SVG
Fonts - Polices
Installer des polices open-source
Avec la combinaison de :
Couleur
- 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
Aide pour l’accessibilité, calculer le contraste idéal pour vos couleurs d’arrière-plan et d’avant-plan - Conformité WCAG.
Wireframe, Maquettes et prototypes
- 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.com Wireframe.
- figma.com
- Adobe XD Maquette.
Faux textes et images de substitutions
- 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 comme ça.
- placeholder.com Obtient des images de substitution comme ça.
Viewport et responsive
Ou des Outils pour le responsive.
- mydevice.io Tu pourras mesurer la taille de ton écran.
- gs.statcounter.com
Performance
F12 sur ton navigateur puis aller dans l’onglet audit.
Sitemap
Génère un sitemap de ton site au format xml.
PWA - Créer sa première Application Web
Voici une manière rapide de transformer son site énergivore en Application Web Progressive.
Etape 1 : Génère tous les “favicons” nécessaires pour une application “cross-plateforme”
Etape 2 : Génère un “agent de service” (service worker) pour gérer ton application en mode hors-ligne
pwabuilder.com non testé
Bonus
- PowerToys de Microsoft Un couteau suisse, Sinon comment nommer un programme qui fait tout
News, actus, veille et inspirations
Pour trouver l’inspiration.
Pour approfondir tes compétences.
Jeux et apprentissage
Jouer et apprendre c’est possible
- 🎮 flukeout.github.io Jouer pour apprendre les règles CSS.
- 🎮 flexboxfroggy.com Jouer pour apprendre les propriétés Flex.
- 🎮 cssgridgarden.com Jouer pour apprendre les propriétés Grid.
- 🥚
- sololearn.com Apprendre tous les langages.
- developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web Apprendre HTML CSS et JavaScript.
- css-tricks.com - Guide Flexbox Aide-mémoire sur les propriétés Flex.
- css-tricks.com - Guide Grid Aide-mémoire sur les propriétés Grid.
- tutsplus.com Des tutos sur le Design (P.A.O.).
Framework CSS
Template de site
- https://www.w3schools.com/css/css_rwd_templates.asp
- webflow.com Constructeur de site.