{"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\/news\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva","title":{"rendered":"Noch 9 Projekte zur Verfeinerung des Front-End-Know-hows","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p><img decoding=\"async\" alt=\"Noch 9 Projekte zur Verfeinerung des Front-End-Know-hows\" 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 ein Anf\u00e4nger in der Programmierung sind oder bereits ein erfahrener Entwickler, in dieser Branche ist das Lernen neuer Konzepte sowie Sprachen\/Frameworks unerl\u00e4sslich, um mit den Trends Schritt zu halten.<\/p>\n<p>Nehmen wir zum Beispiel React \u2013 dessen Code Facebook vor gerade vier Jahren ver\u00f6ffentlicht hat. Es ist bereits die Nummer eins unter den JavaScript-Entwicklern weltweit geworden.<\/p>\n<p>Vue und Angular haben nat\u00fcrlich auch ihre treue Fangemeinde. Dazu kommen Svelte und andere universelle Frameworks wie Next.js oder Nuxt.js. 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 sammeln \u2013 zus\u00e4tzlich zu Ihrer Arbeit mit dem bew\u00e4hrten alten JS.<\/p>\n<p>Um Ihnen zu helfen, im Jahr 2020 ein Frontend-Meister zu werden, habe ich neun verschiedene Projekte zusammengestellt, die jeweils verschiedenen Frameworks und JavaScript-Bibliotheken als technischer Stack gewidmet sind, die Sie erstellen und Ihrem Portfolio hinzuf\u00fcgen k\u00f6nnen. Denken Sie daran, dass nichts mehr hilft, als Dinge praktisch zu kreieren, also legen Sie los, schalten Sie Ihren Verstand 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 des Front-End-Know-hows\" 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 der Firma EDISON Software \u00fcbersetzt, die <noindex><a rel=\"nofollow\" href=\"https:\/\/www.edsd.ru\/virtualnaya-primerochnaya\">macht virtuelle Umkleidekabinen 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>Film-Such-App mit React (mit Hooks)<\/h3>\n<p>\nDas erste, womit Sie beginnen k\u00f6nnten, ist, eine Film-Such-App mit React zu erstellen. Hier ist ein Bild davon, wie die fertige App aussehen wird:<\/p>\n<p><img decoding=\"async\" alt=\"Noch 9 Projekte zur Verfeinerung des Front-End-Know-hows\" 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 \/>\nIndem Sie diese App erstellen, verbessern Sie Ihre React-F\u00e4higkeiten und nutzen dabei den vergleichsweise neuen Hooks-API. Im Projektbeispiel werden React-Komponenten, zahlreiche Hooks, eine externe API und nat\u00fcrlich einige CSS-Stile verwendet.<\/p>\n<p><b>Technischer Stack und Features<\/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 die Verwendung von Klassen bieten Ihnen diese Projekte einen idealen Einstieg in funktionales React und werden Ihnen definitiv im Jahr 2020 helfen. Sie k\u00f6nnen <noindex><a rel=\"nofollow\" href=\"https:\/\/www.freecodecamp.org\/news\/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7\/\">ein Projektbeispiel hier finden<\/a><\/noindex>. Befolgen Sie die Anweisungen oder gestalten Sie alles nach Ihrem eigenen Geschmack.<\/p>\n<h3>Chat-App mit Vue<\/h3>\n<p>\nEin weiteres gro\u00dfartiges Projekt f\u00fcr Sie ist die Erstellung einer Chat-App 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 des Front-End-Know-hows\" 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 \/>\nAus diesem Leitfaden erfahren Sie, wie Sie eine Vue-Anwendung von Grund auf erstellen \u2013 Komponenten erstellen, Zust\u00e4nde verwalten, Routen erstellen, sich mit externen Diensten verbinden und sogar die Authentifizierung verarbeiten.<\/p>\n<p><b>Technischer Stack und Features<\/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 wirklich ein gro\u00dfartiges Projekt, um mit Vue zu beginnen oder Ihre vorhandenen F\u00e4higkeiten zu verbessern, um im Jahr 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 Wetter-App mit Angular 8<\/h3>\n<p>\nDieses Beispiel hilft Ihnen, eine sch\u00f6ne Wetter-App mit Angular 8 zu erstellen:<\/p>\n<p><img decoding=\"async\" alt=\"Noch 9 Projekte zur Verfeinerung des Front-End-Know-hows\" 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 vermittelt Ihnen wertvolle F\u00e4higkeiten beim Erstellen von Anwendungen von Grund auf \u2013 vom Design bis zur Entwicklung, bis hin zur bereiten Bereitstellung der Anwendung.<\/p>\n<p><b>Technischer Stack und Features<\/b><\/p>\n<ul>\n<li>Angular 8<\/li>\n<li>Firebase<\/li>\n<li>Serverseitiges Rendering<\/li>\n<li>CSS mit Grid und Flexbox<\/li>\n<li>Mobilfreundlich und responsive<\/li>\n<li>Dunkelmodus<\/li>\n<li>Sch\u00f6nes Layout<\/li>\n<\/ul>\n<p>\nWas mir an diesem umfassenden Projekt wirklich gef\u00e4llt, ist, dass Sie die Dinge nicht isoliert lernen. Stattdessen lernen Sie den gesamten Entwicklungsprozess \u2013 vom Design bis zur endg\u00fcltigen Bereitstellung.<\/p>\n<h3>To-Do-App mit Svelte<\/h3>\n<p>\nSvelte ist wie das neue Kind im Bereich der Komponentenans\u00e4tze \u2013 zumindest \u00e4hnlich wie React, Vue und Angular. Und es ist eines der hei\u00dfesten neuen Dinge f\u00fcr das Jahr 2020.<\/p>\n<p>To-Do-Apps sind vielleicht nicht das spannendste Thema, aber es wird Ihnen wirklich helfen, Ihre Svelte-F\u00e4higkeiten zu verfeinern. So wird es aussehen:<\/p>\n<p><img decoding=\"async\" alt=\"Noch 9 Projekte zur Verfeinerung des Front-End-Know-hows\" 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, Styling und Ereignis-Handler verwenden.<\/p>\n<p><b>Technischer Stack und Features<\/b><\/p>\n<ul>\n<li>Svelte 3<\/li>\n<li>Komponenten<\/li>\n<li>Styling mit CSS<\/li>\n<li>ES 6 Syntax<\/li>\n<\/ul>\n<p>\nEs gibt nicht viele gute Startprojekte f\u00fcr Svelte, daher 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 zum Starten 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 von Haus aus serverseitiges Rendering unterst\u00fctzt.<\/p>\n<p>Dieses Projekt zeigt Ihnen, wie Sie eine E-Commerce-Anwendung erstellen, die folgenderma\u00dfen aussieht:<\/p>\n<p><img decoding=\"async\" alt=\"Noch 9 Projekte zur Verfeinerung des Front-End-Know-hows\" 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 Sie mit Next.js entwickeln \u2013 neue Seiten und Komponenten erstellen, Daten abrufen sowie die Anwendung stilisieren und bereitstellen.<\/p>\n<p><b>Technischer Stack und Features<\/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>Projektbereitstellung<\/li>\n<li>SSR und SPA<\/li>\n<\/ul>\n<p>\nEs ist immer gro\u00dfartig, ein praktisches 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 gleiche wie Next.js f\u00fcr React: ein gro\u00dfartiges Framework, das die M\u00f6glichkeiten des serverseitigen Renderings mit Single-Page-Anwendungen verbindet.<br \/>\nDie letzte Anwendung, die Sie erstellen k\u00f6nnen, wird folgenderma\u00dfen aussehen:<\/p>\n<p><img decoding=\"async\" alt=\"Noch 9 Projekte zur Verfeinerung des Front-End-Know-hows\" 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 \u2014 von der Ersteinrichtung 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>Technischer Stack und Features<\/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 Zustandsverwaltung<\/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>, das viele gro\u00dfartige Funktionen von Nuxt.js beinhaltet. Ich pers\u00f6nlich arbeite gerne mit Nuxt, also sollten Sie es ausprobieren, denn es wird Sie auch zu einem gro\u00dfartigen Vue-Entwickler machen.<\/p>\n<h3>Blog mit Gatsby<\/h3>\n<p>\nGatsby ist ein gro\u00dfartiger Generator statischer Websites, der React und GraphQL verwendet. Das ist das Ergebnis des Projekts:<\/p>\n<p><img decoding=\"async\" alt=\"Noch 9 Projekte zur Verfeinerung des Front-End-Know-hows\" 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 das Schreiben Ihrer eigenen Artikel verwenden werden, wobei Sie React und GraphQL nutzen.<\/p>\n<p><b>Technischer Stack und Features<\/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 das ein gro\u00dfartiges Beispiel<\/a><\/noindex> daf\u00fcr, wie man ihn mit React und GraphQL erstellt.<\/p>\n<p>Ich sage nicht, dass WordPress eine schlechte Wahl ist, aber mit Gatsby k\u00f6nnen Sie leistungsstarke Websites mit React erstellen \u2014 was eine erstaunliche Kombination ist.<\/p>\n<h3>Blog mit Gridsome<\/h3>\n<p>\nGridsome f\u00fcr Vue... Nun, das hatten wir bereits mit Next\/Nuxt.<br \/>\nAber dasselbe gilt f\u00fcr Gridsome und Gatsby. Beide verwenden GraphQL als Datenschicht, aber Gridsome nutzt VueJS. Es ist auch ein gro\u00dfartiger Generator statischer Websites, der Ihnen hilft, herausragende Blogs zu erstellen:<\/p>\n<p><img decoding=\"async\" alt=\"Noch 9 Projekte zur Verfeinerung des Front-End-Know-hows\" 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 lehrt Sie, wie Sie einen einfachen Blog erstellen, um mit Gridsome, GraphQL und Markdown zu beginnen. Es wird auch erkl\u00e4rt, wie Sie die Anwendung \u00fcber Netlify bereitstellen.<\/p>\n<p><b>Technischer Stack und Features<\/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 nat\u00fcrlich kein vollst\u00e4ndiges 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, der SoundCloud \u00e4hnelt, mit Quasar<\/h3>\n<p>\nQuasar ist ein weiteres Vue-Framework, das zur Erstellung von mobilen Anwendungen verwendet werden kann. In diesem Projekt werden Sie eine Audioplayer-Anwendung erstellen, zum Beispiel:<\/p>\n<p><img decoding=\"async\" alt=\"Noch 9 Projekte zur Verfeinerung des Front-End-Know-hows\" 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 andere Projekte haupts\u00e4chlich auf Webanwendungen fokussiert sind, zeigt dieses Ihnen, wie Sie eine mobile Anwendung mit Vue und dem Quasar-Framework erstellen k\u00f6nnen.<br \/>\nSie sollten bereits eine funktionierende Cordova mit eingerichtetem Android Studio\/Xcode haben. Falls nicht, finden Sie im Handbuch einen Link zur Quasar-Website, auf der gezeigt wird, wie alles eingerichtet wird.<\/p>\n<p><b>Technischer Stack und Features<\/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-news"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.1.1 - 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\/de\/blog\/news\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.1.1\" \/>\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.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/prohoster.info\/de\/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\udd479 weitere Projekte zur Verbesserung Ihrer Front-End-F\u00e4higkeiten | ProHoster","description":"Einf\u00fchrung unabh\u00e4ngig von.","canonical_url":"https:\/\/prohoster.info\/de\/blog\/news\/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.","og:url":"https:\/\/prohoster.info\/de\/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\/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}]}}