Un guide pratique pour apprendre le développement frontal pour les débutants

J'ai commencé mon parcours de codage au printemps 2018, il y a un peu moins d'un an. J'ai acquis des compétences en programmation depuis ce temps, mais je comprends tout de même qu'il reste encore beaucoup de choses à apprendre. Quoi qu'il en soit, j'ai décidé de rassembler ces astuces en un seul endroit pour aider les futurs développeurs sur leur chemin. Cet article est le guide que j'aurais aimé trouver au début de mon voyage.

Avant de commencer

Si vous décidez d'étudier par vous-même, il y a beaucoup d'informations sur Internet et il est difficile de comprendre tout. Il est important d'avoir un plan structuré et d'éviter de perdre du temps en passant d'une ressource à une autre.

Veuillez noter que ce ne sont que les premiers pas dans l'univers front-end. Cela vous aidera à démarrer, mais il ne vise pas à être un guide complet.

En guise d'avertissement, veuillez noter que les ressources suivantes ne sont pas une publicité. Je les mentionne parce qu'ils m'ont aidé à un moment donné et je les recommande personnellement. La plupart d'entre eux sont gratuits, sinon, cela sera précisé.

Comme point de départ, je recommande de vous inscrire sur freeCodeCamp.Et je baserai le reste sur leur programme. Je considère que c'est une excellente ressource pour diverses raisons:

  1. Curriculum. Cela peut être votre chemin principal. C'est un aperçu bien structuré des choses que vous devez apprendre et fournit une bonne courbe d'apprentissage.
  2. Des exercices. Ils sont de la taille d'une bouchée, vous pouvez donc facilement suivre le rythme en en faisant quelques-uns chaque jour et en gardant votre carte de chaleur verte.
  3. Projets. Après avoir terminé chaque chapitre, vous construirez 5 projets pour obtenir votre certification. C'est idéal pour s'entraîner et consolider vos connaissances.
  4. Communauté. C'est plus qu'une simple plateforme d'apprentissage. Il existe un forum, un blog et une chaîne YouTube où les développeurs de différents niveaux partagent leurs connaissances et où vous pouvez trouver de l'inspiration.
  5. C'est gratuit. L'argent peut être critique pour beaucoup de gens et ici, dans tous les cas, vous ne dépenserez rien sauf du temps.
Conseil de pro: vous pouvez créer un compte sur Twitter , si vous n'en avez pas encore, et vous engager publiquement100DaysOfCodedéfi. La raison est simple: de nombreuses personnes relèvent ce défi. Vous obtiendrez de la motivation et du soutien, et cela vous aidera à garder le rythme. Je le recommande vivement, ne soyez pas timide et appréciez la communauté ?

Maintenant, nous sommes tous prêts à commencer! ?

Site Web adaptatif

La première section englobe les bases de la création de sites statiques et de leur appliquer des styles.

Les bases

HTML de base et HTML5etLes sections CSS de base sont les fondements de l'Internet moderne. Conception visuelle appliquée, accessibilité appliquée et principes de conception Web réactivevous apprendra les bases de la rédaction de bons sites Web. Ne vous précipitez pas et ne faites pas attention, ce sont les principaux éléments de votre connaissance.

Vous pouvez compléter vos études avec un excellent guide sur Interneting Is Hard.

Ensuite, vous allez apprendre des techniques de mise en page puissantes telles que CSS Flexbox et CSS Grid . Avant de continuer, complétez ce petit guide pour avoir un aperçu des différentes techniques de mise en page utilisées avant l'ère Flexbox-Grid. Il est peu probable que vous ayez jamais besoin de les utiliser, mais il est toujours bon d'être conscient et d'apprécier les technologies dont nous disposons aujourd'hui.

CSS Flexbox

Je suis tombé amoureux de Flexbox en raison de sa simplicité et de sa puissance. Beaucoup de propriétés différentes peuvent vous dérouter au début, donc ma suggestion est de mettre une feuille de triche près de votre ordinateur afin que vous puissiez toujours les rechercher facilement. De plus, ajoutez cette feuille de triche interactive Flexbox à vos favoris.

Et enfin, entraînez-vous en jouant à l'addictif Flexbox FroggyJeu. ?

Grille CSS

Le Grid est plus avancé et plus flexible mais dans la plupart des cas, Flexbox suffit amplement. Quoi qu'il en soit, vous aurez un autre outil puissant dans votre arsenal. Surtout, si c'est aussi simple à comprendre lorsque vous cultivez vos cultures dans Grid Garden.?

Entraine toi

Avant de passer aux projets finaux, je vous recommande de faire ceci:

  1. Créez un compte sur Codepen . C'est un terrain de jeu sympa pour le front-end où vous pouvez créer vos projets, tester vos extraits et vous entraîner.
  2. Installez unéditeur de codesur votre machine et apprenez à l'utiliser.
  3. Apprenez les bases de la ligne de commande à partir de cette vidéopar Wes Bos ou le Shell Workshop sur Udacity.
  4. Apprenez à utiliser Git dans cette playlist de NetNinja.
  5. Obtenez une pratique guidée. Choisissez n'importe quel projet de cette liste de lecture par Traversy Media et codez avec. Construisez-les jusqu'à ce que vous vous sentiez en confiance. Ce serait génial si vous utilisez déjà un éditeur de code et un contrôle de version, et que vous téléchargez votre travail dans un dépôt d'étude spécial sur Github.

Vous êtes maintenant prêt à obtenir votre première certification! ?

Aller construire vos projets finaux et les partager?

Algorithmes Javascript et structures de données

Vous savez maintenant comment créer des sites Web statiques et il est temps d'apprendre JavaScript.

La section JavaScript de freeCodeCamp est géniale mais je vous conseille vivement de regarder javascript.infocomme référence supplémentaire. C'est la meilleure ressource qui fournit des informations complètes sur tout ce qui concerne JavaScript.

Plus de recommandations

  1. Cours de base JavaScript par Beau Carnes, si vous préférez les guides visuels.
  2. Concernant le nouveau standard pour JavaScript, mes préférés sont les super cours ES6 pour tout le monde! (payé) par Wes Bos et Modern JavaScript par Beau Carnes.
  3. Cours d'expressions régulières sur Scrimba.
  4. Le cours JavaScript orienté objet de NetNinja m'a été très utile.

Algorithmes

C'est ma partie préférée de la certification. Je me souviens à quel point ils étaient difficiles lorsque j'ai commencé à les résoudre. Je pourrais penser à des solutions possibles toute la journée. C'est un excellent moyen d'apprendre JavaScript et de penser comme un programmeur.

Pour vous aider, je vous conseille de visionner JavaScript Cardio Sessions par Traversy Media.

Pour plus de pratique, je vous recommande vivement de vous inscrire sur CodeWars et de définir un objectif initial pour atteindre 6kyu . C'est très utile car lorsque vous relevez un défi, vous pouvez parcourir les solutions des autres et découvrir de nouvelles astuces, approches et idées.

Pour trouver d'autres challengers 100DaysOfCode, y compris moi, allez dans les paramètres de votre compte et tapez # 100DaysOfCode dans le champ Clan.

Avant de passer aux projets finaux, vous devez être préparé pour le boss final, la caisse enregistreuse. ?

Après l'avoir battu, je peux dire que ...

… Maintenant vous savez comment travailler avec JavaScript! ?

Coller les choses ensemble

Il est maintenant temps de relever le défi Javascript30 de Wes Bos. C'est la meilleure façon d'apprendre comment HTML, CSS et JavaScript fonctionnent ensemble, peaufiner vos connaissances des principes de base et comprendre le DOM. Construire ces petits projets a été une expérience formidable et vraiment amusante pour moi!

Bibliothèques frontales

À partir de là, vous devenez un véritable développeur front-end?

Amorcer

Le framework CSS le plus populaire. Créez quelques sites Web avec des guides sur YouTube. Habituez-vous à la célèbre disposition de grille de colonnes de Bootstrap.

jQuery

Bien que certaines personnes disent que jQuery est mort, cela sera toujours utile lorsque la solution en JavaScript pur est excentrique et que l'utilisation d'un framework JS est trop. Ce sera un autre excellent outil dans votre arsenal. Créez quelques petites applications avec pour vous entraîner.

Toupet

Je n'ai pas pleinement apprécié les frameworks CSS avant de voir leur véritable pouvoir. Je voulais apprendre des techniques CSS avancées et j'ai acheté un incroyable CSS avancé et Sasscours (payé) par Jonas Schmedtmann. Fortement recommandé si vous souhaitez peaufiner vos compétences CSS et comprendre le flux de travail. Je suis toujours content de l'avoir trouvé.

Réagir et Redux

Il s'agit de la partie principale de la section Bibliothèques frontales. React est un excellent choix en tant que première bibliothèque JavaScript à apprendre.

Franchement, il est difficile de comprendre comment travailler avec lui au format freeCodeCamp car vous ne pouvez rien créer à partir de zéro et que certaines choses fonctionnent sous le capot. Alors suivez un cours sur React et Redux, et prenez votre temps pour comprendre leurs idées et leurs outils.

Mes favoris personnels:

  1. Tutoriel React complet (avec Redux)par NetNinja
  2. Réagissez pour les débutants (payant) par Wes Bos
  3. React - Le guide complet (payant) par Academind

J'espère que vous êtes ravi d'utiliser vos nouvelles connaissances sur les projets finaux.

Vous pouvez maintenant construire tout ce que vous voulez ?

Aller plus loin

Vous êtes maintenant un vrai développeur front-end et avez suffisamment de compétences pour créer de superbes applications Web. Peut-être que vous êtes curieux de savoir quoi faire ensuite et la réponse est aussi simple que "Construire, construire, construire!" . Votre tâche actuelle consiste à créer un portfolio pour vous-même et à vous entraîner davantage.

Voici quelques conseils sur la marche à suivre:

  1. Obtenez des idées pour un projet dans leProjets à emportersection sur freeCodeCamp.
  2. Construisez n'importe quel projet avec un cours, puis modifiez-le et améliorez-le en ajoutant de nouvelles fonctionnalités.
  3. Attaquez D3.js et Node.js pour obtenir les prochaines certifications freeCodeCamp!
  4. Lire JavaScript éloquent etVous ne connaissez pas JSpour devenir un ninja JavaScript.
  5. Améliorez votre classement sur Codewars.
  6. Obtenez un avant-goût de la conception Web avancée de cette conception Web pour les développeurs Webcours.
  7. Gardez votre compte GitHub actif et essayez de contribuer à l'open source.

Si l'une de ces ressources ne fonctionne pas pour vous, ça va. Ne soyez pas frustré, ce qui fonctionne pour quelqu'un ne doit pas nécessairement fonctionner pour chaque personne.

J'espère que ce guide vous aidera dans votre apprentissage et, espérons-le, vous fera gagner du temps?

Bonne chance!