Projets pratiques pour les développeurs front-end

Le développement front-end comme toute autre compétence nécessite une tonne de travail. Il existe différentes façons de s'attaquer à cette grande tâche, dont certaines seraient:

1. Travailler dans une agence en tant que développeur front-end.
2. Étudiez chez vous et construisez des projets à côté.
3. Travaillez comme pigiste pour les clients.

Chacun a ses propres avantages et inconvénients, mais une chose reste constante: plus les tâches sont diverses, plus vite vous progresserez.

Dans cet article, nous examinerons quelques projets potentiels sur lesquels vous pouvez travailler en parallèle et par vous-même, où vous pourrez apprendre de nouvelles technologies, approches et potentiellement quelques «Aha!» moments de votre carrière front-end.

Toutes les tâches ci-dessous sont de très bons référentiels à avoir sur votre profil GitHub, en particulier lorsque vous décidez de postuler pour un poste frontal.

Une note! Tous les exemples ci-dessous sont réalisés par des designers pour de vrais produits. Nous ne vous proposons PAS de les saisir, de les coder et de faire ce que vous voulez. Tout cela est un exemple d'éléments d'interface utilisateur sur lesquels vous pouvez travailler sans les distribuer ni les vendre plus tard.

1 - Une bibliothèque d'interface utilisateur de composants

Difficulté: facile-moyen.

Ne vous laissez pas tromper par le «facile», car comme pour tout projet ici, un développeur junior ou senior peut avoir des difficultés en fonction des problèmes qu'il résout. Nous avons mis cela à une échelle facile car il ne comprendra aucun élément d'interface utilisateur complexe et tout peut être encapsulé.

Vous pouvez choisir un design existant comme celui-ci, qui se concentre sur les listes déroulantes / boutons:

La source

Ou vous pouvez en choisir un plus générique comme Bootstrap et Foundation. À considérer:

• Convention de dénomination bien définie.
• Une présentation des composants.
• Modificateurs - La plupart des gens aiment changer des éléments mineurs, alors réfléchissez à comment l'appliquer. Exemple - vous voulez des couleurs primaires et secondaires; succès, états d'erreur, etc.
• Gardez-le «plug and play». Votre objectif est de permettre à un autre développeur d'utiliser votre code sans avoir à écrire de CSS. Vous pouvez également le combiner avec un système de grille de base.

Une bonne architecture d'une telle bibliothèque n'est pas une mince affaire. Vous pouvez essayer cette même tâche au début de votre carrière ainsi que quelques années plus tard et comparer ce que vous avez appris.

2 - Implémenter l'interface utilisateur des animations complexes

Difficulté: difficile

Cette tâche concerne des animations et des performances épurées. Mais à côté de cela, vous devrez également écrire des visuels pas si génériques. Voir l'exemple ci-dessous:

Vous pouvez voir l'animation complète ici. Une fois l'interface utilisateur désactivée, il est temps d'ajouter l'interactivité. Toutes les animations ne ressembleront pas à la conception car elles ne sont pas réalisées sur un navigateur mais dans un autre outil, mais cela ne signifie pas que vous ne pouvez pas vous rapprocher vraiment de l'original. Bien sûr, nous ignorerons tous les effets de flou de mouvement et les déformations de forme étranges, mais une grande partie du reste est quelque chose que vous pouvez faire. Il existe également des bibliothèques JS pour vous aider à créer des images clés.

Cette tâche peut prendre seulement deux permutations d'écran pour la garder un peu plus courte. Pas besoin de travailler sur des vues mobiles ici, sauf si vous avez l'énergie.

3 - Une interface de jeu

Difficulté: difficile

Une autre tâche délicate! La plupart des jeux ont un style artistique très unique qui n'est pas facilement traduisible sur le Web. Pour rendre les choses plus difficiles, il existe une autre règle ici: n'utilisez pas d'images / svgs pour obtenir les formes sur l'interface utilisateur.

Source: StarCraft II

Nous avons choisi StarCraft 2 à cet effet. Comme vous pouvez le voir, il y a une tonne de petits détails ici et là dont vous devez tenir compte dans votre implémentation. En effet, ici, la règle du «pas d'actifs» est ce qui rend cela difficile. Vous devrez travailler avec des formes, des découpages, des magix d'ombre, des dégradés, des bordures et plus encore. Bien sûr, des images pour les portraits et la marine à droite sont nécessaires.

Pour rendre les choses plus réalistes, la bordure du portrait en haut à droite peut être remplacée par l'une des lignes du haut de l'image suivante:

Source: StarCraft II

Si vous avez réussi à le rendre également joli sur des écrans plus petits et sur un mobile, vous gagnez des points supplémentaires! Ce serait un très "Wow!" effet projet sur votre CV.

4 - Un jeu de quiz

Difficulté: moyenne

Les jeux de quiz ne sont pas trop difficiles à construire par rapport à certaines des conceptions ci-dessus, mais ils nécessiteraient quelques JS écrits pour les faire fonctionner. Oui, jusqu'à présent, nous n'avions que des projets basés sur CSS, pour celui-ci, vous devriez également le rendre interactif, afin que les gens puissent cliquer, voir les bonnes / mauvaises réponses et plus encore.

Si vous faites une recherche sur "Quiz" dans Dribbble, vous pouvez trouver une tonne d'exemples, mais si vous avez du mal à en choisir un, vous pouvez prendre ceci:

La source

Comme vous pouvez le voir, il n'y a que deux écrans, ce qui signifie que vous devrez créer les autres en fonction de la conception ci-dessus.

Caractéristiques du quiz:

• Comptez les bonnes réponses
• Réponse de N options
• Afficher les bonnes / mauvaises réponses après avoir cliqué
• Signaler une question contextuelle
• Revenez à tous les quiz, choisissez un quiz
• Afficher le score final après la fin du quiz

Vous pouvez faire beaucoup plus que ceux mentionnés ci-dessus si vous le souhaitez. Il s'agit généralement d'un projet de type «un après-midi».

5 - Choisissez un site aléatoire et rendez-le imprimable

Difficulté: facile

L'optimisation pour l'impression a ses bizarreries. Surtout lorsque vous masquez des éléments existants sur le site, nettoyez les arrière-plans, améliorez la typographie, travaillez avec des sauts de page et formatez les pages.

Pour cette tâche, vous pouvez choisir un site sur le Web, choisir une page d'article et commencer à travailler sur les styles d'impression. Il y a de longs articles écrits sur le sujet, il y en a donc beaucoup pour vous aider.

Exemples de sites Web que vous pouvez utiliser:

• Une page de vente Amazon - Concentrez-vous uniquement sur les informations importantes.
• Page de vente de cours - de SitePoint.
• Une autre page de cours

N'hésitez pas à choisir n'importe quel autre site que vous voulez, vous pouvez rendre cela facile ou difficile pour vous-même. Si vous voulez voir un exemple d'un bon style d'impression, jetez un œil à https://www.smashingmagazine.com/, ils l'ont vraiment bien réussi.

6 - Une mise en page de style de magazine complexe

Difficulté: Insensé

Celui-ci, en plus d'être dur, est également complexe. Et cela prend plus de temps que toutes les autres tâches mentionnées ci-dessus, vous devrez donc peut-être libérer plus de 20 à 30 heures pour cela.

La source

Le design ci-dessus est une refonte du New York Times par Slava Kornilov. Dans le lien, vous verrez tous les designs qu'il a réalisés, y compris de grands écrans présentant toute la page d'accueil.

Dans ce projet, vous devrez penser en termes de composants, styliser certains éléments complexes de l'interface utilisateur comme la vidéo sortant de la fenêtre (qui doit continuer à être réactive), les paramètres de typographie, les éléments qui se chevauchent et plus encore.

Le simple fait de regarder l'arrière-plan derrière le grand titre en haut cache quelques parties délicates de sa mise en œuvre.

Il a conçu une tonne d'éléments, vous pouvez donc passer plus d'un mois ou deux ici si vous le souhaitez et il y aurait tant à apprendre. Peut-être que vous pouvez même faire une vidéo en arrière-plan comme indiqué ci-dessous:

La source

Pour celui-ci, il existe également des animations pour les différents articles de presse qui peuvent également être implémentés. Vous devriez également considérer les vues mobiles ici.

7 - Le tableau de bord et ses graphiques

Difficulté: moyen-difficile

Les tableaux de bord sont partout. Et quand les designers ne savent pas quoi faire le soir, ils en conçoivent parfois un autre. Juste parce que.
Et grâce à cela, le choix est vaste. À un moment donné, vous devrez probablement en construire un vrai pour un vrai produit. Et vous pourriez être assez malchanceux pour obtenir l'une de ces interfaces «impressionnantes» avec un million d'animations en charge qui n'ont tout simplement aucun sens.

Pour vous préparer à une telle journée, voici un défi pour vous:

Implémentez la conception suivante:

La source

Ce que vous devez considérer ici - Les graphiques doivent être réels. Ils doivent utiliser des données réelles et vous devriez essayer de les faire ressembler à celles que vous voyez en haut. Il existe de nombreuses bibliothèques que vous pouvez utiliser, et vous devrez probablement étendre / modifier beaucoup.

Si vous décidez d'y incorporer des animations, cela pourrait être encore mieux. Ce serait si joli sur un CV, non?

À la fin:

L'un des meilleurs moyens d'apprendre et de devenir un meilleur développeur consiste simplement à commencer à écrire du code et à créer des sites. Faites-le quotidiennement, il suffit de coder une tonne! Ceci est particulièrement utile au cours des 3-4 premières années de votre carrière.

Avec cette expérience derrière vous, vous pourriez facilement occuper un poste plus élevé. Là, vous pourriez prendre des décisions et diriger votre propre équipe efficacement en utilisant l'expérience acquise de tous ces projets et les problèmes et problèmes que vous avez trouvés et surmontés en cours de route.Et n'oubliez pas, essayez toujours de trouver quelque chose de difficile sur lequel travailler!