{"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\/de\/blog\/novosti-interneta\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva","title":{"rendered":"Noch 9 Projekte zur Verfeinerung Ihrer Front-End-F\u00e4higkeiten","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p><img decoding=\"async\" alt=\"Noch 9 Projekte zur Verfeinerung Ihrer Front-End-F\u00e4higkeiten\" src=\"\/wp-content\/uploads\/2019\/11\/05c3246e5ca620b5ea66c0542b53f08a.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<\/p>\n<h3>Einf\u00fchrung<\/h3>\n<p>\nEgal, ob Sie neu in der Programmierung sind oder bereits ein erfahrener Entwickler, in dieser Branche ist es unerl\u00e4sslich, neue Konzepte sowie Programmiersprachen und Frameworks zu lernen, um mit den Trends Schritt zu halten.<\/p>\n<p>Nehmen wir zum Beispiel React \u2014 dessen Code Facebook vor nur vier Jahren ver\u00f6ffentlicht hat, es ist bereits die erste Wahl f\u00fcr JavaScript-Entwickler weltweit geworden.<\/p>\n<p>Vue und Angular haben nat\u00fcrlich auch ihre treue Anh\u00e4ngerschaft. Dann gibt es noch Svelte und andere universelle Frameworks wie Next.js oder Nuxt.js. Und Gatsby, Gridsome, Quasar\u2026 und vieles mehr.<\/p>\n<p>Wenn Sie sich als erfahrener JavaScript-Entwickler beweisen m\u00f6chten, sollten Sie zumindest einige Erfahrungen mit verschiedenen Frameworks und Bibliotheken haben \u2014 zus\u00e4tzlich zur Arbeit mit dem bew\u00e4hrten alten JS.<\/p>\n<p>Um Ihnen dabei zu helfen, im Jahr 2020 ein Meister im Frontend zu werden, habe ich neun verschiedene Projekte zusammengestellt, die sich auf unterschiedliche JavaScript-Frameworks und -Bibliotheken als Technologiestack konzentrieren, die Sie erstellen und Ihrem Portfolio hinzuf\u00fcgen k\u00f6nnen. Denken Sie daran, dass nichts mehr hilft, als Dinge praktisch zu erstellen. Also legen Sie los, schalten Sie Ihren Kopf ein und machen Sie es m\u00f6glich.<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 - Web-Entwicklung\"><img decoding=\"async\" alt=\"Noch 9 Projekte zur Verfeinerung Ihrer Front-End-F\u00e4higkeiten\" src=\"\/wp-content\/uploads\/2019\/11\/4f292db7c47eaa9d6e764f5a595d0edf.jpeg\" style=\"display:block;margin: 0 auto;\" \/><\/a><\/noindex><br clear=\"right\"><br \/>\nDer Artikel wurde mit Unterst\u00fctzung von EDISON Software \u00fcbersetzt, einem Unternehmen, das <noindex><a rel=\"nofollow\" href=\"https:\/\/www.edsd.ru\/virtualnaya-primerochnaya\">schafft virtuelle Ankleidekabinen f\u00fcr Multibrand-Shops<\/a><\/noindex>, sowie <noindex><a rel=\"nofollow\" href=\"https:\/\/www.edsd.ru\/ru\/uslugi\/testirovanie_po\">testet Software<\/a><\/noindex>.<\/p><\/blockquote>\n<p><\/p>\n<h3>Filmsuche-App mit React (mit Hooks)<\/h3>\n<p>\nEin guter Einstieg w\u00e4re die Erstellung einer Filmsuche-App mit React. Unten sehen Sie, wie die endg\u00fcltige App aussehen wird:<\/p>\n<p><img decoding=\"async\" alt=\"Noch 9 Projekte zur Verfeinerung Ihrer Front-End-F\u00e4higkeiten\" src=\"\/wp-content\/uploads\/2019\/11\/de9873700abc86e1ec63e92704f80dcf.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Was Sie lernen werden<\/b><br \/>\nDurch die Erstellung dieser App verbessern Sie Ihre React-F\u00e4higkeiten mit dem relativ neuen Hooks-API. Im Projektbeispiel werden React-Komponenten, zahlreiche Hooks, eine externe API und nat\u00fcrlich einige CSS-Stile verwendet.<\/p>\n<p><b>Technologischer Stack und Funktionen<\/b><\/p>\n<ul>\n<li>React mit Hooks<\/li>\n<li>create-react-app<\/li>\n<li>JSX<\/li>\n<li>CSS<\/li>\n<\/ul>\n<p>\nOhne Verwendung von Klassen bieten Ihnen diese Projekte einen perfekten Einstieg in funktionales React und werden Ihnen definitiv im Jahr 2020 helfen. Sie k\u00f6nnen hier ein <noindex><a rel=\"nofollow\" href=\"https:\/\/www.freecodecamp.org\/news\/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7\/\">Beispielprojekt finden<\/a><\/noindex>. Folgen Sie den Anweisungen oder gestalten Sie alles nach Ihrem eigenen Geschmack.<\/p>\n<h3>Chat-Anwendung mit Vue<\/h3>\n<p>\nEin weiteres gro\u00dfartiges Projekt f\u00fcr Sie \u2013 erstellen Sie eine Chat-Anwendung mit meiner Lieblings-JavaScript-Bibliothek: VueJS. Die Anwendung wird ungef\u00e4hr so aussehen:<\/p>\n<p><img decoding=\"async\" alt=\"Noch 9 Projekte zur Verfeinerung Ihrer Front-End-F\u00e4higkeiten\" src=\"\/wp-content\/uploads\/2019\/11\/3c55136bcf260168f951e923983dc3a0.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Was Sie lernen werden<\/b><br \/>\nIn diesem Leitfaden lernen Sie, wie Sie eine Vue-Anwendung von Grund auf neu erstellen \u2013 Komponenten erstellen, Zust\u00e4nde verwalten, Routen erstellen, sich mit Drittanbieterdiensten verbinden und sogar die Authentifizierung abwickeln.<\/p>\n<p><b>Technologischer Stack und Funktionen<\/b><\/p>\n<ul>\n<li>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>\nDies ist ein wirklich gro\u00dfartiges Projekt, um mit Vue zu beginnen oder Ihre bestehenden F\u00e4higkeiten zu verbessern, um 2020 in die Entwicklung einzusteigen. Sie k\u00f6nnen das <noindex><a rel=\"nofollow\" href=\"https:\/\/www.sitepoint.com\/pusher-vue-real-time-chat-app\/\">Tutorial hier finden<\/a><\/noindex>.<\/p>\n<h3>Sch\u00f6ne Wetteranwendung mit Angular 8<\/h3>\n<p>\nDieses Beispiel hilft Ihnen, eine sch\u00f6ne Wetteranwendung mit Angular 8 zu erstellen:<\/p>\n<p><img decoding=\"async\" alt=\"Noch 9 Projekte zur Verfeinerung Ihrer Front-End-F\u00e4higkeiten\" src=\"\/wp-content\/uploads\/2019\/11\/93575fb69c667f04a00c58bfeb8b9699.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Was Sie lernen werden<\/b><br \/>\nDieses Projekt wird Ihnen wertvolle F\u00e4higkeiten beim Erstellen von Anwendungen von Grund auf vermitteln \u2013 vom Design bis zur Entwicklung, bis hin zur einsatzbereiten Anwendung.<\/p>\n<p><b>Technologischer Stack und Funktionen<\/b><\/p>\n<ul>\n<li>Angular 8<\/li>\n<li>Firebase<\/li>\n<li>Server-Side Rendering<\/li>\n<li>CSS mit Grid und Flexbox<\/li>\n<li>Mobilfreundlich und responsiv<\/li>\n<li>Dunkelmodus<\/li>\n<li>Sch\u00f6nes Interface<\/li>\n<\/ul>\n<p>\nWas mir an diesem umfassenden Projekt wirklich sehr gef\u00e4llt, ist, dass Sie die Dinge nicht isoliert lernen. Stattdessen lernen Sie den gesamten Entwicklungsprozess \u2013 von der Planung bis zur endg\u00fcltigen Bereitstellung.<\/p>\n<h3>To-Do-Anwendung mit Svelte<\/h3>\n<p>\nSvelte ist wie das neue Kind im komponentenbasierten Ansatz \u2013 zumindest \u00e4hnlich wie React, Vue und Angular. Und es ist eines der hei\u00dfesten neuen Tools des Jahres 2020.<\/p>\n<p>To-Do-Anwendungen sind vielleicht nicht das spannendste Thema, aber sie helfen Ihnen wirklich, Ihre Svelte-F\u00e4higkeiten zu verfeinern. So wird es aussehen:<\/p>\n<p><img decoding=\"async\" alt=\"Noch 9 Projekte zur Verfeinerung Ihrer Front-End-F\u00e4higkeiten\" src=\"\/wp-content\/uploads\/2019\/11\/1d2d414f5acbb3cfd0df5bf7ff29befd.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Was Sie lernen werden<\/b><br \/>\nIn diesem Tutorial erfahren Sie, wie Sie eine Anwendung mit Svelte 3 von Anfang bis Ende erstellen. Sie werden Komponenten, Stile und Ereignis-Handler verwenden.<\/p>\n<p><b>Technologischer Stack und Funktionen<\/b><\/p>\n<ul>\n<li>Svelte 3<\/li>\n<li>Komponenten<\/li>\n<li>Stilgestaltung mit CSS<\/li>\n<li>ES6-Syntax<\/li>\n<\/ul>\n<p>\nEs gibt nicht viele gute Starter-Projekte f\u00fcr Svelte, also habe ich <noindex><a rel=\"nofollow\" href=\"https:\/\/medium.com\/codingthesmartway-com-blog\/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6\">diese gute Option f\u00fcr den Anfang gefunden<\/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 ist das beliebteste Framework zum Erstellen von React-Anwendungen, das serverseitiges Rendering sofort unterst\u00fctzt.<\/p>\n<p>Dieses Projekt zeigt Ihnen, wie Sie eine Anwendung f\u00fcr den E-Commerce erstellen, die folgenderma\u00dfen aussieht:<\/p>\n<p><img decoding=\"async\" alt=\"Noch 9 Projekte zur Verfeinerung Ihrer Front-End-F\u00e4higkeiten\" src=\"\/wp-content\/uploads\/2019\/11\/a848293ad9952a3c52bf8d059bf55ab9.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Was Sie lernen werden<\/b><br \/>\nIn diesem Projekt lernen Sie, wie man mit Next.js entwickelt \u2013 neue Seiten und Komponenten erstellt, Daten abruft sowie eine Next-Anwendung gestaltet und bereitstellt.<\/p>\n<p><b>Technologischer Stack und Funktionen<\/b><\/p>\n<ul>\n<li>Next.js<\/li>\n<li>Komponenten und Seiten<\/li>\n<li>Datenauswahl<\/li>\n<li>Styling<\/li>\n<li>Projekteinf\u00fchrung<\/li>\n<li>SSR und SPA<\/li>\n<\/ul>\n<p>\nEs ist immer toll, ein reales Beispiel wie eine E-Commerce-Anwendung zu haben, um etwas Neues zu lernen. Sie k\u00f6nnen <noindex><a rel=\"nofollow\" href=\"https:\/\/snipcart.com\/blog\/next-js-ecommerce-tutorial\">das Tutorial hier finden<\/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 f\u00fcr Vue ist das \u00c4quivalent zu Next.js f\u00fcr React: ein gro\u00dfartiges Framework, um die M\u00f6glichkeiten von serverseitigem Rendering und Single-Page-Anwendungen zu kombinieren.<br \/>\nDie letzte Anwendung, die Sie erstellen k\u00f6nnen, wird so aussehen:<\/p>\n<p><img decoding=\"async\" alt=\"Noch 9 Projekte zur Verfeinerung Ihrer Front-End-F\u00e4higkeiten\" src=\"\/wp-content\/uploads\/2019\/11\/ba05c24c81705c454c32d363e9a74fe5.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Was Sie lernen werden<\/b><\/p>\n<p>In diesem Projektbeispiel erfahren Sie, wie Sie eine vollst\u00e4ndige Website mit Nuxt.js erstellen \u2013 von der anf\u00e4nglichen Einrichtung bis zur endg\u00fcltigen Bereitstellung.<\/p>\n<p>Es nutzt viele interessante Funktionen, die Nuxt zu bieten hat, wie Seiten und Komponenten sowie Styling mit SCSS.<\/p>\n<p><b>Technologischer Stack und Funktionen<\/b><\/p>\n<ul>\n<li>Nuxt.js<\/li>\n<li>Komponenten und Seiten<\/li>\n<li>Storyblock-Modul<\/li>\n<li>Mixins<\/li>\n<li>Vuex zur Verwaltung des Zustands<\/li>\n<li>SCSS zum Styling<\/li>\n<li>Nuxt-Middleware<\/li>\n<\/ul>\n<p>\n<noindex><a rel=\"nofollow\" href=\"https:\/\/www.storyblok.com\/tp\/nuxt-js-multilanguage-website-tutorial\">Das ist wirklich ein cooles Projekt.<\/a><\/noindex>, der viele gro\u00dfartige Funktionen von Nuxt.js enth\u00e4lt. Ich arbeite pers\u00f6nlich gerne mit Nuxt, also sollten Sie es ausprobieren, denn das wird Sie auch zu einem gro\u00dfartigen Vue-Entwickler machen.<\/p>\n<h3>Blog mit Gatsby<\/h3>\n<p>\nGatsby ist ein hervorragender Generator f\u00fcr statische Websites, der React und GraphQL nutzt. Das ist das Ergebnis des Projekts:<\/p>\n<p><img decoding=\"async\" alt=\"Noch 9 Projekte zur Verfeinerung Ihrer Front-End-F\u00e4higkeiten\" src=\"\/wp-content\/uploads\/2019\/11\/4a51e59e1983da87d2110f8b06e29e33.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Was Sie lernen werden<\/b><\/p>\n<p>In diesem Leitfaden erfahren Sie, wie Sie Gatsby verwenden, um einen Blog zu erstellen, den Sie f\u00fcr Ihre eigenen Artikel nutzen k\u00f6nnen, unter Verwendung von React und GraphQL.<\/p>\n<p><b>Technologischer Stack und Funktionen<\/b><\/p>\n<ul>\n<li>Gatsby<\/li>\n<li>React<\/li>\n<li>GraphQL<\/li>\n<li>Plugins und Themen<\/li>\n<li>MDX\/Markdown<\/li>\n<li>Bootstrap CSS<\/li>\n<li>Vorlagen<\/li>\n<\/ul>\n<p>\nWenn Sie jemals einen Blog starten wollten, <noindex><a rel=\"nofollow\" href=\"https:\/\/blog.bitsrc.io\/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc\">ist dies ein gro\u00dfartiges Beispiel<\/a><\/noindex> daf\u00fcr, wie Sie es mit React und GraphQL umsetzen k\u00f6nnen.<\/p>\n<p>Ich sage nicht, dass WordPress eine schlechte Wahl ist, aber mit Gatsby k\u00f6nnen Sie leistungsstarke Websites mit React erstellen \u2013 was eine erstaunliche Kombination ist.<\/p>\n<h3>Blog mit Gridsome<\/h3>\n<p>\nGridsome f\u00fcr Vue\u2026 Nun, das hatten wir schon mit Next\/Nuxt.<br \/>\nAber das Gleiche gilt f\u00fcr Gridsome und Gatsby. Beide verwenden GraphQL als Datenschicht, aber Gridsome nutzt VueJS. Das ist ebenfalls ein gro\u00dfartiger Generator f\u00fcr statische Websites, der Ihnen hilft, hervorragende Blogs zu erstellen:<\/p>\n<p><img decoding=\"async\" alt=\"Noch 9 Projekte zur Verfeinerung Ihrer Front-End-F\u00e4higkeiten\" src=\"\/wp-content\/uploads\/2019\/11\/3d0162d6aeba8481056f4dee9f25808d.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Was Sie lernen werden<\/b><\/p>\n<p>Dieses Projekt zeigt Ihnen, wie Sie einen einfachen Blog erstellen, um mit Gridsome, GraphQL und Markdown zu beginnen. Es wird auch erl\u00e4utert, wie man die Anwendung \u00fcber Netlify bereitstellt.<\/p>\n<p><b>Technologischer Stack und Funktionen<\/b><\/p>\n<ul>\n<li>Gridsome<\/li>\n<li>Vue<\/li>\n<li>GraphQL<\/li>\n<li>Markdown<\/li>\n<li>Netlify<\/li>\n<\/ul>\n<p>\nDas ist zwar nicht das umfassendste Tutorial, aber es deckt die grundlegenden Konzepte von Gridsome und <noindex><a rel=\"nofollow\" href=\"https:\/\/www.telerik.com\/blogs\/building-a-blog-with-vue-and-markdown-using-gridsome\">Markdown ab und kann ein guter Ausgangspunkt sein.<\/a><\/noindex>.<\/p>\n<h3>Ein Audio-Player, \u00e4hnlich wie SoundCloud, mit Quasar.<\/h3>\n<p>\nQuasar ist ein weiterer Vue-Framework, der zur Erstellung von mobilen Anwendungen verwendet werden kann. In diesem Projekt erstellen Sie eine Audio-Player-App, wie z.B.:<\/p>\n<p><img decoding=\"async\" alt=\"Noch 9 Projekte zur Verfeinerung Ihrer Front-End-F\u00e4higkeiten\" src=\"\/wp-content\/uploads\/2019\/11\/e7acef4f60608d581533c038c61a0752.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Was Sie lernen werden<\/b><\/p>\n<p>W\u00e4hrend sich andere Projekte haupts\u00e4chlich auf Webanwendungen konzentrieren, zeigt dieses, wie man eine mobile Anwendung mit Vue und dem Quasar-Framework erstellt.<br \/>\nSie sollten bereits \u00fcber eine funktionierende Cordova mit installiertem Android Studio\/Xcode verf\u00fcgen. Wenn nicht, gibt es im Handbuch einen Link zur Quasar-Website, auf der gezeigt wird, wie alles eingerichtet wird.<\/p>\n<p><b>Technologischer Stack und Funktionen<\/b><\/p>\n<ul>\n<li>Quasar<\/li>\n<li>Vue<\/li>\n<li>Cordova<\/li>\n<li>WaveSurfer<\/li>\n<li>UI-Komponenten<\/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\">Ein kleines Projekt,<\/a><\/noindex>das die M\u00f6glichkeiten von Quasar zur Erstellung mobiler Anwendungen demonstriert.<br \/>\n<br \/>Quelle: <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-novosti-interneta"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.10 - 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 \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\" \/>\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\/de\/blog\/novosti-interneta\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.10\" \/>\n\t\t<meta property=\"og:locale\" content=\"de_DE\" \/>\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 \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\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/prohoster.info\/de\/blog\/novosti-interneta\/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 Weitere 9 Projekte zur Verfeinerung Ihrer Front-End-F\u00e4higkeiten | ProHoster","description":"Einf\u00fchrung Egal, ob Sie neu in der Programmierung sind oder bereits ein erfahrener Entwickler, das Erlernen neuer Konzepte und Sprachen\/Frameworks ist unerl\u00e4sslich, um mit den Trends Schritt zu halten. Nehmen wir zum Beispiel React \u2013 dessen Code Facebook vor nur vier Jahren ver\u00f6ffentlicht hat. Es ist bereits die erste Wahl f\u00fcr JavaScript-Entwickler weltweit geworden. Vue und","canonical_url":"https:\/\/prohoster.info\/de\/blog\/novosti-interneta\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"de_DE","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 \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","og:url":"https:\/\/prohoster.info\/de\/blog\/novosti-interneta\/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"},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/posts\/52348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/comments?post=52348"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/posts\/52348\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/media?parent=52348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/categories?post=52348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/de\/wp-json\/wp\/v2\/tags?post=52348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}