Get best of the week

Si j'ai enseigné Frontend aujourd'hui. Conseils pour débutants

Mon chemin dans le développement web a commencé il y a 5 ans. Pendant ce temps, j'ai réussi à essayer de nombreuses technologies, et au cours des 3 dernières années, j'ai évolué vers le frontend.

Dans cet article, je voudrais indiquer clairement quelles technologies un débutant doit apprendre, ainsi que partager des méthodes pour son développement. Le guide s'adresse aux personnes qui font leurs premiers pas dans le développement Web, et j'essaierai d'expliquer en détail l'essence de chaque technologie. Finalement, je vous dirai où aller ensuite.

Vous voulez donc devenir développeur Frontend. Que faut-il pour cela?

Apprendre HTML, CSS, Javascript

HTML et CSS


Ces deux technologies sont nécessaires à l'aménagement du site. La mise en page est un arrangement de texte, d'images, de boutons et d'autres éléments d'interface sur une page.

En utilisant HTML, nous pouvons ajouter et décrire ces éléments. Au départ, ils seront bruts, avec un aspect standard. Pour changer le style, CSS est utilisé. Il vous permet de spécifier la couleur, la taille, l'emplacement et des dizaines d'autres paramètres pour l'apparence de l'élément.

Site sans CSS et avec lui

Comment maîtriser


Tout d'abord, vous devriez lire l'article ou la vidéo de synthèse sur ces technologies. Vous comprenez donc leur essence.

Ensuite, la mise en page est la plus pratique à apprendre et à améliorer dans la pratique. Essayez des mises en page pour des pages ou des éléments individuels. Vous pouvez également essayer de regarder le processus de mise en page sur Youtube et répéter après l'auteur.

Au début, ce sera difficile, et vous devrez souvent aller sur Google pour résoudre un autre problème. Mais au fil du temps, vous apprendrez à trouver rapidement dans votre tête la bonne structure HTML et les propriétés CSS nécessaires à la mise en page de l'élément.

Où trouver des idées et des mises en page pour la mise en page?


J'ai utilisé Dribbble et CollectUI , mais peut également être recherché sur Behance et One Page Love .

Vous pouvez également prendre de vraies dispositions depuis UI Store Design . Je recommande de faire des mises en page à partir de Figma, car il est utilisé par de nombreux designers, et à l'avenir, vous travaillerez très probablement avec lui. Il est également gratuit et fonctionne dans le navigateur.

image

Javascript


Cette langue commence la programmation sur le web. Il vous permet de gérer les éléments de la page, de décrire et de contrôler l'interaction avec l'interface.

Si nous créons une page avec HTML et CSS, alors JavaScript est responsable de la partie dynamique de la page: animations, affichage des données, traitement des actions et bien plus encore.

Pourquoi en ai-je besoin?


Un exemple simple. Supposons qu'il existe une page sur laquelle, d'un simple clic, vous devez afficher une fenêtre modale. HTML et CSS nous permettront de faire la mise en page de la page elle-même et de la fenêtre modale. Cependant, ces technologies ne peuvent pas capturer et traiter le clic d'un bouton.
C'est là que nous avons besoin de JavaScript. En l'utilisant, nous décrivons le comportement sur la page. Dans le code, nous voulons dire: si l'utilisateur a cliqué sur le bouton, vous devez afficher la fenêtre modale.

Voici un exemple d'une telle implémentation utilisant jQuery :



En utilisant JavaScript, vous pouvez effectuer presque toutes les opérations sur la page. Cependant, ses capacités ne sont pas limitées à la fenêtre du navigateur. À l'aide de la plateforme Node.js , ce langage peut être utilisé pour le développement de serveurs, la construction de projets et bien plus encore. À l'avenir, vous en aurez besoin pour travailler avec de grands projets, à partir de Webpack . Cependant, je vous conseille d'abord d'apprendre à utiliser la langue dans le navigateur.

Comment maîtriser


Votre meilleur pari est de commencer à apprendre sur learn.javascript.ru . Il s'agit d'une excellente ressource, qui est une base de connaissances pour les développeurs débutants et avancés.

Ici, il est important de comprendre les bases de JavaScript lui-même, ainsi que les caractéristiques de son fonctionnement dans le navigateur. Si certains sujets vous semblent trop compliqués (par exemple, les prototypes ), vous pouvez les ignorer et revenir plus tard.

Ne vous laissez pas trop emporter par la théorie JavaScript seule. Je vous recommande d'essayer votre main en même temps que vous étudiez et écrivez des scripts simples. Vous pouvez également essayer d'analyser d'autres parties du code sur Codepen .

image

Apprenez progressivement de nouveaux plugins et bibliothèques. L'un des plus populaires et des plus faciles à comprendre est jQuery.. Il est beaucoup plus facile d'interagir avec le contenu de la page avec, et il peut être rapidement maîtrisé à un niveau de base.

Dans l'ensemble, vous aurez souvent recours à des bibliothèques tierces dans vos projets. Pour mieux comprendre comment cela se fait, je recommande d'essayer de formater les dates en utilisant Luxon ou de faire un carrousel via Owl Carousel .

Et après?


Avec des compétences de base en HTML, CSS et JavaScript, vous pouvez créer une belle page de destination, disposer les pages d'une boutique en ligne ou d'un blog. C'est ce que je vous conseille de faire afin de consolider vos connaissances en développement web.

Dans l'ensemble, presque toutes les interfaces peuvent être écrites sur ces technologies. La seule question est de savoir quelles seront les applications que vous développez. Plus elle est grande et complexe, plus vous aurez besoin de bibliothèques, de plugins et de technologies différents pour faire face à la tâche.

image

Je vous recommande de vous familiariser avec la feuille de route frontale . Voici les technologies de développement d'interface dont vous aurez besoin à l'avenir.

À l'avenir, vous serez probablement intéressé par des frameworks réactifs comme React ou Vue.. Pour construire des applications dessus, vous apprendrez Webpack , et pour accélérer le processus de mise en page, vous apprendrez les préprocesseurs PUG et SASS . Ou peut-être voulez-vous approfondir les graphiques et apprendre à travailler avec D3 ou WebGL .

Comme vous l'avez déjà compris, le frontend dans le développement Web est très polyvalent et riche en diverses technologies pour des tâches complètement différentes. Apprenez, essayez, expérimentez et profitez de la création d'interfaces belles et pratiques pour n'importe quel but. Pour cela, nous aimons le frontend.


PS J'ai accompagné chaque technologie dans cet article avec un lien vers la documentation ou des exemples d'utilisation. Vous pouvez vous familiariser avec eux pour mieux comprendre le développement Web.

More articles:


All Articles