Article original : A coding project a day for 20 days

Par Angela He

Comment j'ai appris le développement web en 20 jours

Image

C'était le premier jour des vacances d'hiver pour les étudiants de Stanford. De retour à la maison, j'ai ouvert une douzaine d'onglets d'inspiration pour le codage, je me suis mise sur un éditeur de code et j'ai créé mon premier projet de codage. 20 jours plus tard, j'ai créé mon dernier projet avant de faire mes valises et de prendre l'avion pour retourner à la routine universitaire.

Je me suis lancée le défi de coder un projet chaque jour afin d'acquérir les compétences nécessaires pour créer un site web aussi incroyable que ceux qui m'inspirent. Réaliser mes nombreuses idées et pouvoir les partager avec le monde a toujours été ma force motrice, d'abord dans l'art, maintenant dans le code.

Image

Pendant ces 20 jours, j'ai appris plusieurs langages de développement web et j'ai créé de nombreux projets, dont une application de messagerie, une application de notes et un chatbot.

Vous pouvez trouver mes projets des 20 jours sur CodePen.

Voici mes outils, mon processus créatif et quelques réflexions à la fin.

Image

Outils

J'ai utilisé tous les outils suivants, mais tout ce qui va au-delà de HTML, CSS, Javascript et un éditeur de code est facultatif.

  • CodePen. Un éditeur de code en ligne pour HTML, CSS et Javascript où les utilisateurs peuvent présenter leur travail — idéal pour faire connaître votre code de développement web.
  • Photoshop. Un éditeur graphique de classe mondiale pour créer des graphiques raster. J'ai créé des graphiques pour certains projets avec celui-ci et une tablette Huion.
  • HTML. Hypertext Markup Language ; crée le contenu d'une page web.
  • Pug. Un moteur de template pour une syntaxe plus « propre, sensible à l'espace pour HTML » — idéal pour accélérer le développement.
  • Bootstrap. Une bibliothèque de composants pour obtenir rapidement des composants réactifs. Idéal pour la vitesse ; moins idéal pour des designs uniques puisque chaque composant aura un look prédéterminé.
  • CSS. Cascading Style Sheets ; dicte le design d'une page web.
  • Sass. Langage de feuille de style qui fournit des variables, des fonctions, des mixins et plus encore pour rationaliser la création de CSS.
  • Javascript. Utilisé pour définir des événements imprévisibles ou contrôlés par l'utilisateur d'une page web.
  • React. Une bibliothèque Javascript qui aide à maintenir l'état et à créer le contenu d'une page web en séparant chaque partie en un composant réutilisable.
  • jQuery. Une bibliothèque Javascript pour aider à simplifier la manipulation et le parcours du DOM HTML — notez, cependant, que sa facilité vient au coût de sa taille relativement grande — environ 30 Ko.
  • three.js. Une bibliothèque Javascript pour créer et afficher des modèles 3D.
  • Firebase. Une plateforme mobile et web qui fournit un accès facile à la base de données, à la messagerie, à l'authentification et à d'autres services.

Image

Image

Image Collecte d'inspiration depuis Awwwards, CodePen et Dribbble

Processus créatif

Pour créer un projet avec succès, je devais faire deux choses :

  1. Avoir une idée,
  2. Savoir qu'elle serait réalisable.

Ainsi, mon processus créatif a pris forme en trois étapes —

1. Trouver une idée (30 min)

Mon objectif pour chaque projet était de créer quelque chose de cool tout en apprenant quelque chose de nouveau. Avec cela en tête, j'ai parcouru mes sites de design et de développement web préférés pour trouver de l'inspiration —

Mes sites de design préférés :

Mes sites de développement web préférés :

Et j'ai fait une liste de brainstorming d'idées comme suit —

Image Un brainstorming

… puis j'ai choisi ma préférée dans la liste comme l'Idée Officielle du Jour™.

2. Trouver des exemples (30 min)

Pour chaque idée que j'avais, je savais qu'une partie de celle-ci devait avoir une implémentation existante sur le web. J'ai fouillé l'internet pour trouver des implémentations élégantes. Certains sites qui mènent généralement à des solutions publiques incluent —

J'ai étudié ce qui avait été fait, comment cela avait été fait, puis j'ai combiné ce que j'avais appris pour créer la solution la plus propre possible.

Pas besoin de réinventer la roue quand on peut améliorer le passé.

3. Créer ! (le reste de la journée)

Armée d'une idée et d'exemples, j'ai transformé mon idée en réalité. Chaque jour, il y avait des obstacles, et le progrès semblait désespérément lent. Mais avec des recherches en ligne, j'ai appris de mes erreurs et je suis devenue plus compétente et plus rapide chaque jour.

Image

Jours 1–9 : recréer des exemples

Pour les jours 1 à 9, j'ai pris un design ou un site web que j'aimais particulièrement et j'ai essayé de le recréer.

Jours 10–20 : développer des idées originales

Une fois que je me suis sentie plus à l'aise avec le développement web, j'ai basé mes projets de codage sur des idées originales que j'ai toujours voulu réaliser, comme de l'art interactif, des polices originales et une application de notes mignonne.

Image

Réflexion

1. Acquis des connaissances pour la vie.

En regardant en arrière, j'ai parcouru un long chemin depuis là où j'en étais avant. Au cours de ces 20 jours, j'ai appris Bootstrap, jQuery, React, Pug, Sass et d'autres outils, ainsi que de nombreux concepts HTML/CSS/Javascript intéressants tels que les modes de fusion, le masquage et le rognage, les animations, les éléments pseudo, les requêtes média, les fermetures et le contexte, les Promesses, et bien plus encore. Ceux-ci m'aideront à aborder les projets futurs, surtout si et à mesure que le développement web et les applications web progressives deviennent plus populaires.

2. Jamais assez de temps.

Bien que j'aie appris beaucoup, je n'ai pas appris autant que je l'aurais souhaité. Je suis attristée de ne pas avoir eu le temps d'apprendre d'autres outils qui m'intéressaient, comme Vue.js, Redux, GreenSock, et autres. Néanmoins, ce sont toutes des choses que je peux revenir étudier et travailler à l'avenir.

Il était préférable de prendre le temps de comprendre mes outils plutôt que de me précipiter d'un outil à l'autre sans comprendre.

3. J'ai gagné confiance en moi.

Plus important encore, j'ai appris à croire en mes capacités de codage et de création.

Au lieu de commencer un projet massif (encore) et de ne jamais le terminer (encore), je terminais un projet du début à la fin tous les jours ou deux, obligée de limiter la portée par la limite de temps.

Avec chaque projet terminé, j'ai gagné plus de confiance en mes compétences, mon ambition et ma capacité à atteindre des objectifs.

Contrairement aux dernières vacances d'hiver, où j'ai commencé un projet (toujours inachevé) puis me suis découragée par le travail immeasurable qu'il nécessitait, je suis encouragée par cette pause. Aujourd'hui, je suis contente de retour à Stanford, reconnaissante pour ce que j'ai appris, un peu plus confiante et impatiente de créer plus.

Image

Un grand merci à Tiantian Xu qui m'a inspirée avec ses 100 jours de design de mouvement !

Si vous avez aimé lire ceci, n'oubliez pas de donner un ? (ou plusieurs !) Cela signifierait beaucoup pour moi. ?

Vous pouvez également me suivre sur Twitter, Tumblr, Instagram, et GitHub pour plus de projets cool 😊