Ressources pour développeur web

Si vous voulez avoir la liberté de travailler à la maison, la possibilité de créer un horaire adapté au reste de votre vie active, et la possibilité de faire un travail stimulant sur le plan mental et créatif, travailler en tant que développeur Web est une carrière idéale.

Mais qu’en est-il du coût pour commencer? Le développement web ne nécessite-t-il pas beaucoup d’outils et de logiciels coûteux?

La réponse est un NON retentissant. Avec juste un ordinateur et une connexion Internet fiable, vous aurez accès à plus de ressources gratuites que de documents en librairie. Pour vous donner un exemple de ce qui existe, j’ai sondé notre communauté de développeurs pour savoir quels sont leurs outils favoris qui permettent d’augmenter la productivité, de faciliter la vie au travail et de dépenser au total zéro francs.

 

La base

Le terme «ressources gratuites» peut faire penser à des modules complémentaires ou à des outils de support secondaires, mais certains des éléments les plus fondamentaux du développement Web sont sans prix. Les ressources de base suivantes sont des outils essentiels que vous utiliserez jour après jour en tant que développeur Web.

1. WORDPRESS

WordPress est un monstre dans le monde des systèmes de gestion de contenu (un logiciel qui vous permet d’écrire, de modifier et de publier du contenu sur le Web). Sa notoriété a été utilisée pour alimenter des blogs pour des marques de premier plan comme CNN, Reuters et le Wall Street Journal. Cependant, les plugins WordPress et la personnalisation en font un outil de travail pour les développeurs Web, de sorte que de nos jours des sites Web entiers, des sites de commerce électronique et des portails Web sont tous construits en utilisant WordPress.

2. MAMP OU WAMPSERVER

Lorsque vous créez un site Web avec WordPress, le programme WordPress (ainsi que les pages et le contenu de votre site) sont généralement stockés sur un serveur Web via une société d’hébergement Web . Cependant, à des fins de développement et de test, vous pouvez installer WordPress sur votre propre ordinateur local (à la maison ou au bureau). Si vous utilisez un Mac, MAMP est un programme qui vous donne les outils dont vous avez besoin pour exécuter WordPress sur votre propre machine. Mais que faire si vous utilisez un ordinateur Windows ? Aucun problème. Ne cherchez pas plus loin que WampServer , un programme qui sert le même but mais qui fonctionne avec Windows.

3. GIT

Git est un système de contrôle de version, un outil que vous utilisez pour suivre les modifications apportées au code d’un site Web au fil du temps. Si quelque chose ne va pas avec votre code, vous pouvez alors utiliser Git pour revenir à une version précédente du site et trouver le problème. Les systèmes de contrôle de version sont une partie essentielle du développement Web, et Git est un standard de l’industrie.

4. VISUAL STUDIO CODE

Visual Studio Code est un éditeur de code source disponible pour les machines Windows, Mac et Linux. Il vous permet de déboguer le code (identifier et supprimer les erreurs) directement à partir de son éditeur à l’écran. Il dispose également de commandes Git intégrées (pratiques pour suivre les modifications de votre code sans quitter l’éditeur) et de complétion intelligente (un outil d’efficacité pour l’écriture de code), et il est entièrement personnalisable.

5. JQUERY

JavaScript est un langage de programmation utilisé pour créer des éléments interactifs sur des sites Web. Lorsque vous utilisez JavaScript, vous constaterez que de nombreuses tâches courantes, comme l’animation de curseurs d’image ou la modification de la couleur d’un élément avec une action comme un clic de souris, peuvent nécessiter des lignes de code que vous n’auriez probablement pas mémorisées. jQuery est une collection gratuite de plugins et d’extensions JavaScript qui peuvent vous aider à rationaliser ces tâches courantes en méthodes simples et réutilisables.

6. BOOTSTRAP

Bootstrap est un framework Web front-end, un programme qui contient des modèles HTML, CSS et JavaScript pour la création de sites Web. En particulier, Bootstrap dispose de ressources pour vous aider à gérer les performances de votre projet dans des environnements mobiles (smartphones et tablettes), ce que vous ne pouvez plus ignorer après coup.

Applications

Les applications sont des programmes informatiques créés pour exécuter des fonctions spécifiques. (Pensez aux logiciels de traitement de texte, aux navigateurs Web et aux outils de retouche d’images.) Les applications suivantes sont toutes utiles pour les développeurs. Elles ne font que gratter la surface pour vous donner une idée de votre travail. ligne de fond.

7. ATOM

Atom est un éditeur de texte hautement personnalisable, mais même livré prêt à l’emploi, il dispose de suffisamment de fonctionnalités pour vous occuper. Atom fonctionne sur toutes les plates-formes, a une saisie semi-automatique intelligente (utile pour écrire du code), vous permet de travailler dans plusieurs sections de votre écran et prend en charge un certain nombre de langages de programmation tels que JavaScript, Ruby et Ruby on Rails .

8. CMDER

Sans partir dans un débat inutile sur les préférences des systèmes d’exploitation, nous sommes tous à peu près d’accord pour dire que le terminal windows n’est pas terrible. On peut noter une belle amélioration avec PowerShell mais on est pas encore à la satisfaction des terminales Linux et OSX.

C’est donc un émulateur de la console windows, plus beau, plus de fonctionnalité, et ultra-portable ! En effet cmder s’installe uniquement en version portable (Simplement un dossier), vous pouvez donc le mettre sur une clé USB ou sur le cloud, vous aurez alors toujours votre configuration, vos alias, etc…

Parmis les fonctionnalités de cmder, les plus intéressantes sont :

  • L’intégration des principales commandes linux
  • Intégration de git
  • Avoir sous les yeux un mini ‘git status’ avec le nombre de fichier à commit/push
  • Une belle interface Monokai (bon les gouts et les couleurs…)
  • Gestion de terminal par onglet et/ou en splitant l’écran

9. EVERNOTE

Lorsque vous travaillez sur un ordinateur, avec plusieurs navigateurs ouverts et autant de pistes de réflexion, il est facile de perdre des informations et des idées. Evernote recueille toutes les notes que vous prenez, y compris des captures d’écran et des photos de notes manuscrites, et les organise en un seul endroit synchronisé sur tous vos appareils. Il dispose également d’une fonction de recherche puissante qui vous permet de tout rechercher, même vos mots manuscrits.

10. INVISION

Dans la phase de conception et de développement d’un site Web, il y aura des moments où vous voudrez partager votre travail avec votre client. Etre capable de mettre en place des prototypes avec le même logiciel utilisé par de grandes sociétés comme Adobe, AT & T, Sony et Viacom semble être une bonne option (mais chère), non? En réalité, vous pouvez le faire gratuitement en utilisant InVision , le même outil de prototypage utilisé par ces entreprises et bien d’autres.

11. CYFE

Cyfe est un tableau de bord en ligne gratuit qui vous permet de suivre le temps de disponibilité d’un site Web (le temps qu’il a passé en ligne sans interruptions), les classements sociaux et les analyses. Cyfe vous permet également d’exporter ces données au format PNG, JPEG, PDF et CSV pour votre propre usage ou pour les partager avec d’autres.

12. F.LUX

En tant que développeur Web, vous pouvez travailler n’importe où et n’importe quand, ce qui signifie que vous pourriez vouloir faire du travail dans la soirée. Ce genre de flexibilité est un avantage majeur d’être un développeur, mais l’éblouissement d’un écran d’ordinateur dans votre visage dans une pièce de nuit n’est pas idéal. f.lux adaptera toujours l’affichage de votre ordinateur à l’éclairage de votre pièce, et c’est une ressource essentielle si vous passez de longues heures devant un moniteur. Maintenant, n’oubliez pas de prendre des pauses fréquentes pour reposer vos yeux!

Extensions de navigateur web

Le navigateur Web que vous utilisez pour accéder au Web (Chrome, Safari, Firefox, etc.) peut également être transformé en un outil de développement au moyen de modules complémentaires téléchargeables sur les extensions du navigateur qui apportent des fonctionnalités personnalisées à votre navigateur. Voici un aperçu de certaines extensions de navigateur gratuites spécifiquement applicables à la conception de sites Web.

13. WAPPALYZER

Imaginons que vous rencontriez un site extrêmement impressionnant avec des fonctionnalités que vous aimeriez intégrer dans un projet sur lequel vous travaillez, mais vous ne pouvez pas vraiment comprendre comment le site a fonctionné. Wappalyzer est une extension de navigateur qui permet de découvrir les technologies utilisées sur les sites Web, de sorte que vous pouvez voir ce qui fait fonctionner ces fonctionnalités et utiliser ces astuces dans votre propre travail. Wappalyzer détectera les systèmes de gestion de contenu (comme WordPress), les plateformes de commerce électronique (Shopify, Drupal Commerce, Etsy, etc.), les frameworks web (Ruby on Rails), et plus encore.

14. WHATFONT OU FOUNT

Que se passe-t-il quand vous rencontrez une police que vous aimez mais que vous ne pouvez pas vraiment placer? Vous ne voulez pas passer du temps à essayer de le retracer? L’ extension de navigateur WhatFont vous permet d’inspecter les polices Web simplement en les survolant, et elle détecte les services dont les polices proviennent, aussi, vous pouvez les saisir pour vous-même. WhatFont est uniquement compatible avec Chrome et Safari, donc si vous utilisez un autre navigateur, vous pouvez essayer Fount .

15. PERFECTPIXEL

Lorsque vous travaillez avec des images en HTML et CSS, il est possible de perdre une partie de la fidélité de votre design original. Perfectpixel vous permet de superposer vos images JPG ou PNG source sur votre contenu Web, de sorte que vous pouvez comparer les images pixel par pixel et créer une page HTML qui ressemble exactement à ce que vous aviez en tête.

16. STYLEBOT

Avez-vous déjà vu un site et souhaité que vous fassiez un petit changement, soit en raison de besoins de lecture spéciaux, soit parce qu’une police différente serait simplement meilleure? L’ extension du navigateur Stylebot vous permet de faire exactement cela. Et pour les développeurs, il vous permet également de voir comment les modifications apportées aux CSS affectent l’apparence d’un site Web pour une référence future dans vos propres projets. En utilisant une barre latérale pleine d’options CSS basiques et avancées, vous pouvez changer l’apparence des sites que vous visitez et même synchroniser vos styles sauvegardés sur les machines que vous utilisez.

17. GÉNÉRATEUR CSS3

CSS3 Generator est une extension de navigateur qui génère du code CSS3 (la dernière version de CSS) pour un certain nombre de caractéristiques de conception (ombrage de texte, colonnes, dégradés, etc.). Tout ce que vous avez à faire est de copier le code généré dans votre CSS et la fonctionnalité sera en place.

18. TESTEUR DE CONCEPTION WEB RÉACTIF

L’ extension de navigateur Responsive Web Design Tester vous permet de tester l’apparence de votre site Web sur des appareils mobiles, sans avoir à sortir votre téléphone ou votre tablette. Avec cette extension, vous pouvez prévisualiser rapidement votre site Web aux dimensions utilisées par les smartphones et les tablettes.

Sites Internet

Une ressource gratuite facile à négliger est ce que les développeurs passent leur temps à créer … des sites Web! Ne jamais sous-estimer la richesse de l’information gratuite en attente juste une recherche Google loin. Voici quelques bons sites à mettre en signet si vous cherchez à développer votre jeu de développeur.

19. CODROPS

Codrops est un blog de conception et développement avec des articles et des tutoriels sur les derniers conseils et les tendances du web. Consultez leur section Tutoriel pour les techniques sur les techniques de développement Web communes, et leur Playground pour les plugins et les articles. Ils ont également une section Blueprints avec des exemples de concepts et de mises en page de sites Web, et une page de référence CSS complète.

20. DZONE

DZone est une communauté en ligne où les développeurs Web peuvent partager des liens utiles entre eux. Il contient également des milliers d’articles, des feuilles de triche au format PDF sur différents sujets technologiques et des guides sur les techniques de développement, les plates-formes et les applications. Inscrivez-vous pour un compte et accédez gratuitement à tout ce que DZone a à offrir.

21. DÉPASSEMENT DE PILE

Le partage gratuit de conseils, astuces, conseils et informations est une énorme partie du développement web réussi. Stack Overflow est une communauté en ligne où plus de 7 millions de programmeurs se rassemblent pour s’aider les uns les autres avec des questions et des réponses. Prenez une minute pour vous inscrire et participer à la conversation!

22. DÉCHIFFRER

Rappelez-vous jQuery, cette collection gratuite de plugins et d’extensions JavaScript? jQuery est inestimable, mais peut être difficile à manier. C’est là qu’intervient Unheap : Il organise, catégorise, affiche les vignettes et balise les plugins et les extensions de jQuery pour que vous puissiez les trouver facilement.

23. GITHUB

GitHub est un service d’hébergement de référentiel où vous pouvez stocker des projets sur lesquels vous travaillez, collaborer avec d’autres utilisateurs et utiliser toutes les fonctionnalités de Git en ligne de commande, mais avec l’option d’utiliser l’interface graphique Web de GitHub. GitHub est gratuit pour les projets publics et open source.

24. BONSAI FREELANCE TAUX EXPLORATEUR

Freelancing est excitant! Travaillez selon vos propres conditions, établissez votre propre horaire et … établissez vos propres tarifs? Cette partie peut être difficile. Heureusement, il existe Bonsai Freelance Rate Explorer , un outil qui vous permet de comparer les taux des concepteurs et des développeurs web indépendants par niveau d’expérience, compétences et géographie.

Maintenant que vous avez une idée du nombre de ressources gratuites qui attendent, il est temps de s’attacher sérieusement à perfectionner ces compétences de développeur. Téléchargez mon guide gratuit 3 étapes pour devenir un excellent développeur web et apprenez exactement quelles sont les compétences techniques dont vous aurez besoin pour une carrière de développeur, comment utiliser ces compétences pour décrocher un emploi gratifiant que vous aimerez, et ce que vous devrez faire pour avoir du succès dans votre premier emploi en technologie et au-delà!

Partages à tous tes amis !