{"id":52348,"date":"2019-11-06T00:00:00","date_gmt":"2019-11-05T21:00:00","guid":{"rendered":"https:\/\/prohoster.info\/blog\/blog_prohoster\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva"},"modified":"2020-02-18T14:00:02","modified_gmt":"2020-02-18T11:00:02","slug":"eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva","status":"publish","type":"post","link":"https:\/\/prohoster.info\/fr\/blog\/news\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva","title":{"rendered":"Encore 9 projets pour perfectionner vos comp\u00e9tences en Front-End","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p><img decoding=\"async\" alt=\"Encore 9 projets pour perfectionner vos comp\u00e9tences en Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/05c3246e5ca620b5ea66c0542b53f08a.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<\/p>\n<h3>Introduction<\/h3>\n<p>\nQue vous soyez novice en programmation ou d\u00e9veloppeur exp\u00e9riment\u00e9, il est essentiel d'apprendre de nouveaux concepts ainsi que des langages\/frameworks dans ce domaine pour rester \u00e0 la pointe des tendances.<\/p>\n<p>Prenons par exemple React - dont le code a \u00e9t\u00e9 ouvert par Facebook il y a seulement quatre ans, qui est d\u00e9j\u00e0 devenu le choix num\u00e9ro un pour les d\u00e9veloppeurs JavaScript \u00e0 travers le monde.<\/p>\n<p>Vue et Angular ont \u00e9galement leurs fid\u00e8les \u043f\u043e\u043a\u043b\u043e\u043d\u043d\u0438\u043a\u043e\u0432. Il existe aussi Svelte et d'autres frameworks polyvalents comme Next.js ou Nuxt.js. Et Gatsby, Gridsome, Quasar\u2026 et bien d'autres.<\/p>\n<p>Si vous souhaitez vous affirmer en tant que d\u00e9veloppeur JavaScript exp\u00e9riment\u00e9, vous devez avoir au moins une certaine exp\u00e9rience avec divers frameworks et biblioth\u00e8ques - en plus de faire du bon vieux JS.<\/p>\n<p>Pour vous aider \u00e0 devenir un ma\u00eetre du front-end en 2020, j'ai rassembl\u00e9 neuf projets diff\u00e9rents, chacun d\u00e9di\u00e9 \u00e0 divers frameworks et biblioth\u00e8ques JavaScript comme stack technique, que vous pouvez cr\u00e9er et ajouter \u00e0 votre portfolio. N'oubliez pas que rien ne vous aide plus que de cr\u00e9er des choses en pratique, alors allez-y, activez votre esprit et rendez cela possible.<br \/>\n<noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><\/p>\n<blockquote><p><noindex><a rel=\"nofollow\" href=\"https:\/\/www.edsd.ru\/\" title=\"EDISON Software - d\u00e9veloppement web\"><img decoding=\"async\" alt=\"Encore 9 projets pour perfectionner vos comp\u00e9tences en Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/4f292db7c47eaa9d6e764f5a595d0edf.jpeg\" style=\"display:block;margin: 0 auto;\" \/><\/a><\/noindex><br clear=\"right\"><br \/>\nCet article a \u00e9t\u00e9 traduit avec le soutien de la soci\u00e9t\u00e9 EDISON Software, qui <noindex><a rel=\"nofollow\" href=\"https:\/\/www.edsd.ru\/virtualnaya-primerochnaya\">cr\u00e9e des cabines d'essayage virtuelles pour des magasins multi-marques<\/a><\/noindex>, ainsi que <noindex><a rel=\"nofollow\" href=\"https:\/\/www.edsd.ru\/ru\/uslugi\/testirovanie_po\">teste des logiciels<\/a><\/noindex>.<\/p><\/blockquote>\n<p><\/p>\n<h3>Application de recherche de films avec React (avec hooks)<\/h3>\n<p>\nLa premi\u00e8re chose que vous pourriez faire est de cr\u00e9er une application de recherche de films avec React. Voici une image de \u00e0 quoi ressemblera l'application finale :<\/p>\n<p><img decoding=\"async\" alt=\"Encore 9 projets pour perfectionner vos comp\u00e9tences en Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/de9873700abc86e1ec63e92704f80dcf.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Ce que vous apprendrez<\/b><br \/>\nEn cr\u00e9ant cette application, vous am\u00e9liorerez vos comp\u00e9tences en React en utilisant le nouvel API Hooks. Ce projet utilise des composants React, plusieurs hooks, une API externe et, bien s\u00fbr, quelques styles CSS.<\/p>\n<p><b>Stack technique et fonctionnalit\u00e9s<\/b><\/p>\n<ul>\n<li>React avec hooks<\/li>\n<li>create-react-app<\/li>\n<li>JSX<\/li>\n<li>CSS<\/li>\n<\/ul>\n<p>\nSans utiliser de classes, ces projets vous offrent une excellente porte d'entr\u00e9e dans React fonctionnel et vous aideront certainement en 2020. Vous pouvez trouver <noindex><a rel=\"nofollow\" href=\"https:\/\/www.freecodecamp.org\/news\/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7\/\">un exemple de projet ici<\/a><\/noindex>. Suivez les instructions ou faites-le \u00e0 votre sauce.<\/p>\n<h3>Application de chat avec Vue<\/h3>\n<p>\nUn autre excellent projet \u00e0 r\u00e9aliser est de cr\u00e9er une application de chat en utilisant ma biblioth\u00e8que JavaScript pr\u00e9f\u00e9r\u00e9e : VueJS. L'application ressemblait \u00e0 peu pr\u00e8s \u00e0 ceci :<\/p>\n<p><img decoding=\"async\" alt=\"Encore 9 projets pour perfectionner vos comp\u00e9tences en Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/3c55136bcf260168f951e923983dc3a0.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Ce que vous apprendrez<\/b><br \/>\nDans ce guide, vous apprendrez \u00e0 cr\u00e9er une application Vue depuis z\u00e9ro \u2014 \u00e0 cr\u00e9er des composants, \u00e0 g\u00e9rer les \u00e9tats, \u00e0 cr\u00e9er des itin\u00e9raires, \u00e0 vous connecter \u00e0 des services externes et m\u00eame \u00e0 g\u00e9rer l'authentification.<\/p>\n<p><b>Stack technique et fonctionnalit\u00e9s<\/b><\/p>\n<ul>\n<li>projet Vue<\/li>\n<li>Vuex<\/li>\n<li>Vue Router<\/li>\n<li>Vue CLI<\/li>\n<li>Pusher<\/li>\n<li>CSS<\/li>\n<\/ul>\n<p>\nC'est vraiment un excellent projet pour commencer \u00e0 travailler avec Vue ou am\u00e9liorer vos comp\u00e9tences existantes pour vous impliquer dans le d\u00e9veloppement en 2020. Vous pouvez trouver <noindex><a rel=\"nofollow\" href=\"https:\/\/www.sitepoint.com\/pusher-vue-real-time-chat-app\/\">un tutoriel ici<\/a><\/noindex>.<\/p>\n<h3>Une belle application de pr\u00e9visions m\u00e9t\u00e9orologiques avec Angular 8<\/h3>\n<p>\nCet exemple vous aidera \u00e0 cr\u00e9er une belle application de pr\u00e9visions m\u00e9t\u00e9orologiques avec Angular 8 :<\/p>\n<p><img decoding=\"async\" alt=\"Encore 9 projets pour perfectionner vos comp\u00e9tences en Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/93575fb69c667f04a00c58bfeb8b9699.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Ce que vous apprendrez<\/b><br \/>\nCe projet vous apprendra des comp\u00e9tences pr\u00e9cieuses pour cr\u00e9er des applications depuis le design jusqu'au d\u00e9veloppement, jusqu'\u00e0 une application pr\u00eate \u00e0 \u00eatre d\u00e9ploy\u00e9e.<\/p>\n<p><b>Stack technique et fonctionnalit\u00e9s<\/b><\/p>\n<ul>\n<li>Angular 8<\/li>\n<li>Firebase<\/li>\n<li>Rendu c\u00f4t\u00e9 serveur<\/li>\n<li>CSS avec Grid et Flexbox<\/li>\n<li>Adapt\u00e9 aux mobiles et r\u00e9actif<\/li>\n<li>Mode sombre<\/li>\n<li>Une interface \u00e9l\u00e9gante<\/li>\n<\/ul>\n<p>\nCe que j'appr\u00e9cie vraiment dans ce projet complet, c'est que vous n'\u00e9tudiez pas les choses de mani\u00e8re isol\u00e9e. Au lieu de cela, vous apprenez tout le processus de d\u00e9veloppement \u2014 de la conception au d\u00e9ploiement final.<\/p>\n<h3>Application To-Do avec Svelte<\/h3>\n<p>\nSvelte est comme le nouveau venu dans l'approche bas\u00e9e sur les composants \u2014 du moins comparable \u00e0 React, Vue et Angular. Et c'est l'une des tendances les plus chaudes pour 2020.<\/p>\n<p>Les applications To-Do ne sont peut-\u00eatre pas le sujet le plus chaud, mais cela vous aidera vraiment \u00e0 affiner vos comp\u00e9tences en Svelte. Cela ressemblera \u00e0 ceci :<\/p>\n<p><img decoding=\"async\" alt=\"Encore 9 projets pour perfectionner vos comp\u00e9tences en Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/1d2d414f5acbb3cfd0df5bf7ff29befd.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Ce que vous apprendrez<\/b><br \/>\nCe tutoriel vous montrera comment cr\u00e9er une application avec Svelte 3, du d\u00e9but \u00e0 la fin. Vous utiliserez des composants, du stylisme et des gestionnaires d'\u00e9v\u00e9nements.<\/p>\n<p><b>Stack technique et fonctionnalit\u00e9s<\/b><\/p>\n<ul>\n<li>Svelte 3<\/li>\n<li>Composants<\/li>\n<li>Stylisation avec CSS<\/li>\n<li>Syntaxe ES 6<\/li>\n<\/ul>\n<p>\nIl n'y a pas tant de bons projets de d\u00e9marrage pour Svelte, c'est pourquoi j'ai trouv\u00e9 <noindex><a rel=\"nofollow\" href=\"https:\/\/medium.com\/codingthesmartway-com-blog\/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6\">cette bonne option pour commencer<\/a><\/noindex>.<\/p>\n<h3>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Next.js<\/h3>\n<p>\nNext.js est le framework le plus populaire pour cr\u00e9er des applications React qui prennent en charge le rendu c\u00f4t\u00e9 serveur par d\u00e9faut.<\/p>\n<p>Ce projet vous montrera comment cr\u00e9er une application de commerce \u00e9lectronique qui ressemble \u00e0 ceci :<\/p>\n<p><img decoding=\"async\" alt=\"Encore 9 projets pour perfectionner vos comp\u00e9tences en Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/a848293ad9952a3c52bf8d059bf55ab9.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Ce que vous apprendrez<\/b><br \/>\nDans ce projet, vous d\u00e9couvrirez comment d\u00e9velopper avec Next.js \u2014 cr\u00e9er de nouvelles pages et composants, extraire des donn\u00e9es, et styliser et d\u00e9ployer l'application Next.<\/p>\n<p><b>Stack technique et fonctionnalit\u00e9s<\/b><\/p>\n<ul>\n<li>Next.js<\/li>\n<li>Composants et pages<\/li>\n<li>\u00c9chantillonnage des donn\u00e9es<\/li>\n<li>Stylisation<\/li>\n<li>D\u00e9ploiement du projet<\/li>\n<li>SSR et SPA<\/li>\n<\/ul>\n<p>\nIl est toujours bon d'avoir un exemple concret, comme une application de commerce \u00e9lectronique, pour apprendre quelque chose de nouveau. Vous pouvez <noindex><a rel=\"nofollow\" href=\"https:\/\/snipcart.com\/blog\/next-js-ecommerce-tutorial\">trouver le tutoriel ici<\/a><\/noindex>.<\/p>\n<h3>\u041f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u043c\u0443\u043b\u044c\u0442\u0438\u044f\u0437\u044b\u0447\u043d\u044b\u0439 \u0431\u043b\u043e\u0433 \u0441 Nuxt.js<\/h3>\n<p>\nNuxt.js pour Vue, c'est comme Next.js pour React : un excellent framework pour combiner les capacit\u00e9s de rendu c\u00f4t\u00e9 serveur et les applications \u00e0 page unique.<br \/>\nLa derni\u00e8re application que vous pouvez cr\u00e9er ressemblera \u00e0 ceci :<\/p>\n<p><img decoding=\"async\" alt=\"Encore 9 projets pour perfectionner vos comp\u00e9tences en Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/ba05c24c81705c454c32d363e9a74fe5.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Ce que vous apprendrez<\/b><\/p>\n<p>Dans ce projet, vous apprendrez \u00e0 cr\u00e9er un site web complet en utilisant Nuxt.js \u2014 de la configuration initiale au d\u00e9ploiement final.<\/p>\n<p>Il utilise de nombreuses fonctionnalit\u00e9s int\u00e9ressantes que Nuxt peut offrir, telles que les pages et les composants, ainsi que le stylage avec SCSS.<\/p>\n<p><b>Stack technique et fonctionnalit\u00e9s<\/b><\/p>\n<ul>\n<li>Nuxt.js<\/li>\n<li>Composants et pages<\/li>\n<li>Module Storyblock<\/li>\n<li>Mixins<\/li>\n<li>Vuex pour la gestion d'\u00e9tat<\/li>\n<li>SCSS pour le stylage<\/li>\n<li>Middleware Nuxt<\/li>\n<\/ul>\n<p>\n<noindex><a rel=\"nofollow\" href=\"https:\/\/www.storyblok.com\/tp\/nuxt-js-multilanguage-website-tutorial\">C'est vraiment un projet g\u00e9nial<\/a><\/noindex>, qui inclut de nombreuses fonctionnalit\u00e9s incroyables de Nuxt.js. J'adore personnellement travailler avec Nuxt, donc vous devriez l'essayer car cela vous fera \u00e9galement un excellent d\u00e9veloppeur Vue.<\/p>\n<h3>Blog avec Gatsby<\/h3>\n<p>\nGatsby est un excellent g\u00e9n\u00e9rateur de sites statiques utilisant React et GraphQL. Voici le r\u00e9sultat du projet :<\/p>\n<p><img decoding=\"async\" alt=\"Encore 9 projets pour perfectionner vos comp\u00e9tences en Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/4a51e59e1983da87d2110f8b06e29e33.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Ce que vous apprendrez<\/b><\/p>\n<p>Dans ce guide, vous apprendrez \u00e0 utiliser Gatsby pour cr\u00e9er un blog que vous pourrez utiliser pour \u00e9crire vos propres articles, en utilisant React et GraphQL.<\/p>\n<p><b>Stack technique et fonctionnalit\u00e9s<\/b><\/p>\n<ul>\n<li>Gatsby<\/li>\n<li>React<\/li>\n<li>GraphQL<\/li>\n<li>Plugins et th\u00e8mes<\/li>\n<li>MDX\/Markdown<\/li>\n<li>Bootstrap CSS<\/li>\n<li>Mod\u00e8les<\/li>\n<\/ul>\n<p>\nSi vous avez d\u00e9j\u00e0 voulu cr\u00e9er un blog, <noindex><a rel=\"nofollow\" href=\"https:\/\/blog.bitsrc.io\/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc\">c'est un excellent exemple<\/a><\/noindex> de comment le faire, en utilisant React et GraphQL.<\/p>\n<p>Je ne dis pas que WordPress est un mauvais choix, mais avec Gatsby, vous pouvez cr\u00e9er des sites performants en utilisant React \u2014 ce qui est une combinaison incroyable.<\/p>\n<h3>Blog avec Gridsome<\/h3>\n<p>\nGridsome pour Vue\u2026 Bon, nous avons d\u00e9j\u00e0 eu \u00e7a avec Next\/Nuxt.<br \/>\nMais il en va de m\u00eame pour Gridsome et Gatsby. Les deux utilisent GraphQL comme couche de donn\u00e9es, mais Gridsome utilise VueJS. C'est aussi un incroyable g\u00e9n\u00e9rateur de sites statiques qui vous aidera \u00e0 cr\u00e9er d'excellents blogs :<\/p>\n<p><img decoding=\"async\" alt=\"Encore 9 projets pour perfectionner vos comp\u00e9tences en Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/3d0162d6aeba8481056f4dee9f25808d.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Ce que vous apprendrez<\/b><\/p>\n<p>Ce projet vous apprendra \u00e0 cr\u00e9er un blog simple pour commencer avec Gridsome, GraphQL, et Markdown. Il explique \u00e9galement comment d\u00e9ployer l'application via Netlify.<\/p>\n<p><b>Stack technique et fonctionnalit\u00e9s<\/b><\/p>\n<ul>\n<li>Gridsome<\/li>\n<li>projet Vue<\/li>\n<li>GraphQL<\/li>\n<li>Markdown<\/li>\n<li>Netlify<\/li>\n<\/ul>\n<p>\nCe n'est bien s\u00fbr pas le tutoriel le plus complet, mais il couvre les concepts fondamentaux de Gridsome et <noindex><a rel=\"nofollow\" href=\"https:\/\/www.telerik.com\/blogs\/building-a-blog-with-vue-and-markdown-using-gridsome\">Markdown et peut \u00eatre un bon point de d\u00e9part.<\/a><\/noindex>.<\/p>\n<h3>Lecteur audio similaire \u00e0 SoundCloud, avec Quasar.<\/h3>\n<p>\nQuasar est un autre framework Vue qui peut \u00eatre utilis\u00e9 pour cr\u00e9er des applications mobiles. Dans ce projet, vous allez cr\u00e9er une application de lecteur audio, par exemple :<\/p>\n<p><img decoding=\"async\" alt=\"Encore 9 projets pour perfectionner vos comp\u00e9tences en Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/e7acef4f60608d581533c038c61a0752.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Ce que vous apprendrez<\/b><\/p>\n<p>Alors que d'autres projets se concentrent principalement sur les applications web, celui-ci vous montrera comment cr\u00e9er une application mobile en utilisant Vue et le framework Quasar.<br \/>\nVous devez d\u00e9j\u00e0 avoir Cordova fonctionnel avec Android Studio\/Xcode configur\u00e9. Si ce n'est pas le cas, le guide contient un lien vers le site Web de Quasar, o\u00f9 ils montrent comment tout configurer.<\/p>\n<p><b>Stack technique et fonctionnalit\u00e9s<\/b><\/p>\n<ul>\n<li>Quasar<\/li>\n<li>projet Vue<\/li>\n<li>Cordova<\/li>\n<li>WaveSurfer<\/li>\n<li>Composants UI<\/li>\n<\/ul>\n<p>\n<noindex><a rel=\"nofollow\" href=\"https:\/\/www.learningsomethingnew.com\/how-to-build-a-sound-cloud-like-audio-player-app-with-vue-js-quasar-and-wave-surfer\">Petit projet<\/a><\/noindex>, d\u00e9montrant les capacit\u00e9s de Quasar pour cr\u00e9er des applications mobiles.<br \/>\n<br \/>Source : <a content=\"nofollow\" rel=\"nofollow\" href=\"https:\/\/habr.com\/ru\/company\/edison\/blog\/474230\/\">habr.com<\/a><\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"<p>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u044f\u0432\u043b\u044f\u0435\u0442\u0435\u0441\u044c \u043b\u0438 \u0432\u044b \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u043c \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0438\u043b\u0438 \u0443\u0436\u0435 \u043e\u043f\u044b\u0442\u043d\u044b\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c, \u0432 \u044d\u0442\u043e\u0439 \u043e\u0442\u0440\u0430\u0441\u043b\u0438 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u044b\u0445 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0439 \u0438 \u044f\u0437\u044b\u043a\u043e\u0432\/\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u043f\u0435\u0432\u0430\u0442\u044c \u0437\u0430 \u0442\u0440\u0435\u043d\u0434\u0430\u043c\u0438. \u0412\u043e\u0437\u044c\u043c\u0435\u043c, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, React \u2014 \u043a\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e, Facebook \u043e\u0442\u043a\u0440\u044b\u043b \u0432\u0441\u0435\u0433\u043e \u0447\u0435\u0442\u044b\u0440\u0435 \u0433\u043e\u0434\u0430 \u043d\u0430\u0437\u0430\u0434, \u043e\u043d \u0443\u0436\u0435 \u0441\u0442\u0430\u043b \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u043d\u043e\u043c\u0435\u0440 \u043e\u0434\u0438\u043d \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 JavaScript \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u043c\u0438\u0440\u0443. Vue \u0438 [&hellip;]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[702],"tags":[],"class_list":["post-52348","post","type-post","status-publish","format-standard","hentry","category-news"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.2 - aioseo.com -->\n\t<meta name=\"description\" content=\"\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Yuri Gagarin\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/prohoster.info\/fr\/blog\/news\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.2\" \/>\n\t\t<meta property=\"og:locale\" content=\"fr_FR\" \/>\n\t\t<meta property=\"og:site_name\" content=\"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"\ud83e\udd47\u0415\u0449\u0451 9 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0434\u043b\u044f \u043e\u0442\u0442\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f Front-End \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u0442\u0432\u0430 | ProHoster\" \/>\n\t\t<meta property=\"og:description\" content=\"\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/prohoster.info\/fr\/blog\/news\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"350\" \/>\n\t\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-11-05T21:00:00+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2020-02-18T11:00:02+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"\ud83e\udd47 Encore 9 projets pour perfectionner vos comp\u00e9tences en Front-End | ProHoster","description":"Introduction Peu importe.","canonical_url":"https:\/\/prohoster.info\/fr\/blog\/news\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"fr_FR","og:site_name":"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b","og:type":"article","og:title":"\ud83e\udd47\u0415\u0449\u0451 9 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0434\u043b\u044f \u043e\u0442\u0442\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f Front-End \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u0442\u0432\u0430 | ProHoster","og:description":"\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442.","og:url":"https:\/\/prohoster.info\/fr\/blog\/news\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva","og:image":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:secure_url":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:width":350,"og:image:height":350,"article:published_time":"2019-11-05T21:00:00+00:00","article:modified_time":"2020-02-18T11:00:02+00:00","article:publisher":"https:\/\/www.facebook.com\/prohoster","article:author":"https:\/\/www.facebook.com\/prohoster"},"aioseo_meta_data":{"post_id":"52348","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"seo_analyzer_scan_date":"2026-01-24 03:19:19","breadcrumb_settings":null,"limit_modified_date":false,"reviewed_by":null,"ai":null,"created":"2021-02-28 14:23:14","updated":"2026-01-24 03:19:19","focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/posts\/52348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/comments?post=52348"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/posts\/52348\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/media?parent=52348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/categories?post=52348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/tags?post=52348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}