{"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\/sl\/blog\/news\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva","title":{"rendered":"\u0160e 9 projektov za izpopolnjevanje Front-End ve\u0161\u010din","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p><img decoding=\"async\" alt=\"\u0160e 9 projektov za izpopolnjevanje Front-End ve\u0161\u010din\" src=\"\/wp-content\/uploads\/2019\/11\/05c3246e5ca620b5ea66c0542b53f08a.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<\/p>\n<h3>Uvod<\/h3>\n<p>\nNe glede na to, ali ste za\u010detnik v programiranju ali \u017ee izku\u0161en razvijalec, je v tej industriji nujno, da se u\u010dite novih konceptov ter jezikov\/okvirov, da boste lahko sledili trendom.<\/p>\n<p>Vzemimo za primer React \u2013 koda, ki jo je Facebook odprl pred \u0161tirimi leti, je \u017ee postala prva izbira za razvijalce JavaScript po vsem svetu.<\/p>\n<p>Vue in Angular imata seveda tudi svojo zakonito bazo obo\u017eevalcev. Poleg tega so tu \u0161e Svelte in drugi univerzalni okviri, kot sta Next.js ali Nuxt.js. Gatsby, Gridsome, Quasar ... in \u0161e mnogo ve\u010d.<\/p>\n<p>\u010ce \u017eelite pokazati svoje sposobnosti kot izku\u0161en razvijalec JavaScript, morate imeti vsaj nekaj izku\u0161enj z razli\u010dnimi okviri in knji\u017enicami \u2013 poleg dela s starim dobrim JS.<\/p>\n<p>Da vam pomagam postati mojster frontenda v letu 2020, sem zbral devet razli\u010dnih projektov, od katerih je vsak namenjen razli\u010dnim okvirem in knji\u017enicam JavaScript kot tehni\u010dnem kupu, ki ga lahko ustvarite in dodate v svoje portfelj. Ne pozabite, da vam ni\u010d ne more bolj pomagati kot praksa, zato naprej, odklopite svoj um in to uresni\u010dite.<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 - spletni razvoj\"><img decoding=\"async\" alt=\"\u0160e 9 projektov za izpopolnjevanje Front-End ve\u0161\u010din\" src=\"\/wp-content\/uploads\/2019\/11\/4f292db7c47eaa9d6e764f5a595d0edf.jpeg\" style=\"display:block;margin: 0 auto;\" \/><\/a><\/noindex><br clear=\"right\"><br \/>\n\u010clanek je bil preveden s podporo podjetja EDISON Software, ki <noindex><a rel=\"nofollow\" href=\"https:\/\/www.edsd.ru\/virtualnaya-primerochnaya\">ustvarja virtualne garderobe za multibrandne trgovine<\/a><\/noindex>, kao i <noindex><a rel=\"nofollow\" href=\"https:\/\/www.edsd.ru\/ru\/uslugi\/testirovanie_po\">testira programsko opremo<\/a><\/noindex>.<\/p><\/blockquote>\n<p><\/p>\n<h3>Aplikacija za iskanje filmov z Reactom (s hooki)<\/h3>\n<p>\nPrvo, kar bi lahko naredili, je ustvariti aplikacijo za iskanje filmov z Reactom. Spodaj je slika, kako bo kon\u010dna aplikacija izgledala:<\/p>\n<p><img decoding=\"async\" alt=\"\u0160e 9 projektov za izpopolnjevanje Front-End ve\u0161\u010din\" src=\"\/wp-content\/uploads\/2019\/11\/de9873700abc86e1ec63e92704f80dcf.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Kaj se boste nau\u010dili<\/b><br \/>\nPri ustvarjanju te aplikacije boste izbolj\u0161ali svoje ve\u0161\u010dine React, saj boste uporabljali razmeroma nov API Hooks. V vzor\u010dnem projektu so uporabljene komponente React, \u0161tevilni hooki, zunanji API in seveda nekatere CSS sloge.<\/p>\n<p><b>Tehni\u010dni kup in funkcije<\/b><\/p>\n<ul>\n<li>React s hooki<\/li>\n<li>create-react-app<\/li>\n<li>JSX<\/li>\n<li>CSS<\/li>\n<\/ul>\n<p>\nBrez uporabe razredov vam ti projekti nudijo idealen vstop v funkcionalni React in vam zagotovo pomagajo v letu 2020. Najdete lahko <noindex><a rel=\"nofollow\" href=\"https:\/\/www.freecodecamp.org\/news\/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7\/\">primer projekta tukaj<\/a><\/noindex>. Sledite navodilom ali pa vse naredite po svojem okusu.<\/p>\n<h3>Aplikacija za klepet z Vue<\/h3>\n<p>\n\u0160e en odli\u010den projekt za vas je ustvariti aplikacijo za klepet, ki uporablja moju najljub\u0161o JavaScript knji\u017enico: VueJS. Aplikacija bo izgledala pribli\u017eno takole:<\/p>\n<p><img decoding=\"async\" alt=\"\u0160e 9 projektov za izpopolnjevanje Front-End ve\u0161\u010din\" src=\"\/wp-content\/uploads\/2019\/11\/3c55136bcf260168f951e923983dc3a0.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Kaj se boste nau\u010dili<\/b><br \/>\nV temle vodi\u010du se boste nau\u010dili, kako zgraditi aplikacijo Vue od za\u010detka \u2014 ustvarjati komponente, obvladovati stanja, razvijati rute, povezovati se s storitvami tretjih oseb in celo obvladovati avtentifikacijo.<\/p>\n<p><b>Tehni\u010dni kup in funkcije<\/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>\nTo je res odli\u010den projekt, s katerim lahko za\u010dnete delati z Vue ali izbolj\u0161ate svoje obstoje\u010de sposobnosti za razvoj v letu 2020. Lahko najdete <noindex><a rel=\"nofollow\" href=\"https:\/\/www.sitepoint.com\/pusher-vue-real-time-chat-app\/\">tukaj tutorial<\/a><\/noindex>.<\/p>\n<h3>Lepo aplikacijo za pregledovanje vremena z Angular 8<\/h3>\n<p>\nTa primer vam bo pomagal ustvariti lepo aplikacijo za pregledovanje vremena z Angular 8:<\/p>\n<p><img decoding=\"async\" alt=\"\u0160e 9 projektov za izpopolnjevanje Front-End ve\u0161\u010din\" src=\"\/wp-content\/uploads\/2019\/11\/93575fb69c667f04a00c58bfeb8b9699.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Kaj se boste nau\u010dili<\/b><br \/>\nTa projekt vas bo nau\u010dil dragocenih ve\u0161\u010din pri ustvarjanju aplikacij od za\u010detka do konca \u2014 od na\u010drtovanja do razvoja, vse do kon\u010dne aplikacije pripravljene za postavitev.<\/p>\n<p><b>Tehni\u010dni kup in funkcije<\/b><\/p>\n<ul>\n<li>Angular 8<\/li>\n<li>Firebase<\/li>\n<li>Renderiranje na strani stre\u017enika<\/li>\n<li>CSS s mre\u017eo in Flexbox<\/li>\n<li>Prijazen do mobilnih naprav in odzivnost<\/li>\n<li>Temen na\u010din<\/li>\n<li>Lep vmesnik<\/li>\n<\/ul>\n<p>\nKar mi je resni\u010dno v\u0161e\u010d pri tem celovitem projektu, je to, da se stvari ne u\u010dite izolirano. Namesto tega se u\u010dite celoten proces razvoja \u2014 od na\u010drtovanja do kon\u010dne postavitve.<\/p>\n<h3>To-Do aplikacija s pomo\u010djo Svelte<\/h3>\n<p>\nSvelte je kot nov otrok v komponentnem pristopu \u2014 vsaj podoben Reactu, Vue in Angular. In to je ena izmed najbolj vro\u010dih novosti leta 2020.<\/p>\n<p>To-Do aplikacije niso nujno najbolj priljubljena tema, vendar vam resni\u010dno pomagajo izpopolniti va\u0161e ve\u0161\u010dine Svelte. Tako bo to izgledalo:<\/p>\n<p><img decoding=\"async\" alt=\"\u0160e 9 projektov za izpopolnjevanje Front-End ve\u0161\u010din\" src=\"\/wp-content\/uploads\/2019\/11\/1d2d414f5acbb3cfd0df5bf7ff29befd.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Kaj se boste nau\u010dili<\/b><br \/>\nIz tega tutoriala se boste nau\u010dili, kako zgraditi aplikacijo s Svelte 3, od za\u010detka do konca. Uporabili boste komponente, stilizacijo in obravnavo dogodkov<\/p>\n<p><b>Tehni\u010dni kup in funkcije<\/b><\/p>\n<ul>\n<li>Svelte 3<\/li>\n<li>Komponente<\/li>\n<li>Stilizacija s CSS<\/li>\n<li>ES 6 sintaksa<\/li>\n<\/ul>\n<p>\nNi veliko dobrih za\u010detnih projektov za Svelte, zato sem na\u0161el <noindex><a rel=\"nofollow\" href=\"https:\/\/medium.com\/codingthesmartway-com-blog\/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6\">ta dober izbor za za\u010detek<\/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 je najbolj priljubljen okvir za ustvarjanje aplikacij React, ki iz \u0161katle podpirajo renderiranje na strani stre\u017enika.<\/p>\n<p>Ta projekt vam bo pokazal, kako zgraditi aplikacijo za e-trgovino, ki izgleda takole:<\/p>\n<p><img decoding=\"async\" alt=\"\u0160e 9 projektov za izpopolnjevanje Front-End ve\u0161\u010din\" src=\"\/wp-content\/uploads\/2019\/11\/a848293ad9952a3c52bf8d059bf55ab9.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Kaj se boste nau\u010dili<\/b><br \/>\nV tem projektu boste spoznali, kako razvijati z Next.js \u2014 ustvarjati nove strani in komponente, pridobivati podatke ter stilizirati in postavljati aplikacijo Next.<\/p>\n<p><b>Tehni\u010dni kup in funkcije<\/b><\/p>\n<ul>\n<li>Next.js<\/li>\n<li>Komponente in strani<\/li>\n<li>Vzorkovanje podatkov<\/li>\n<li>Stilizacija<\/li>\n<li>Postavitev projekta<\/li>\n<li>SSR in SPA<\/li>\n<\/ul>\n<p>\nVedno je dobro imeti pravi primer, kot je aplikacija za e-trgovino, da se nau\u010dite kaj novega. Lahko <noindex><a rel=\"nofollow\" href=\"https:\/\/snipcart.com\/blog\/next-js-ecommerce-tutorial\">najdete tutorial tukaj<\/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 za Vue, tako kot je Next.js za React: odli\u010den okvir za zdru\u017eevanje mo\u017enosti stre\u017enikovega upodabljanja in enostranskih aplikacij<br \/>\nKon\u010dna aplikacija, ki jo lahko ustvarite, bo videti tako:<\/p>\n<p><img decoding=\"async\" alt=\"\u0160e 9 projektov za izpopolnjevanje Front-End ve\u0161\u010din\" src=\"\/wp-content\/uploads\/2019\/11\/ba05c24c81705c454c32d363e9a74fe5.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Kaj se boste nau\u010dili<\/b><\/p>\n<p>V tem projektu se boste nau\u010dili, kako ustvariti celovito spletno mesto z uporabo Nuxt.js \u2014 od za\u010detne nastavitve do kon\u010dne distribucije.<\/p>\n<p>Uporablja \u0161tevilne zanimive funkcije, ki jih Nuxt lahko ponudi, na primer strani in komponente ter stilizacijo s SCSS.<\/p>\n<p><b>Tehni\u010dni kup in funkcije<\/b><\/p>\n<ul>\n<li>Nuxt.js<\/li>\n<li>Komponente in strani<\/li>\n<li>Storyblock modul<\/li>\n<li>Mixini<\/li>\n<li>Vuex za upravljanje stanja<\/li>\n<li>SCSS za stilizacijo<\/li>\n<li>Nuxt vmesniki<\/li>\n<\/ul>\n<p>\n<noindex><a rel=\"nofollow\" href=\"https:\/\/www.storyblok.com\/tp\/nuxt-js-multilanguage-website-tutorial\">To je res kul projekt<\/a><\/noindex>, ki vklju\u010duje \u0161tevilne odli\u010dne funkcije Nuxt.js. Osebno imam rad delo z Nuxt, zato ga morate preizkusiti, saj vas bo to tudi naredilo odli\u010dnega Vue razvijalca.<\/p>\n<h3>Blog z Gatsbyjem<\/h3>\n<p>\nGatsby je odli\u010den generator stati\u010dnih spletnih strani, ki uporablja React in GraphQL. To je rezultat projekta:<\/p>\n<p><img decoding=\"async\" alt=\"\u0160e 9 projektov za izpopolnjevanje Front-End ve\u0161\u010din\" src=\"\/wp-content\/uploads\/2019\/11\/4a51e59e1983da87d2110f8b06e29e33.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Kaj se boste nau\u010dili<\/b><\/p>\n<p>V tem priro\u010dniku se boste nau\u010dili, kako uporabiti Gatsby za ustvarjanje bloga, ki ga boste uporabljali za pisanje lastnih \u010dlankov, z uporabo React in GraphQL.<\/p>\n<p><b>Tehni\u010dni kup in funkcije<\/b><\/p>\n<ul>\n<li>Gatsby<\/li>\n<li>React<\/li>\n<li>GraphQL<\/li>\n<li>Vti\u010dniki in teme<\/li>\n<li>MDX\/Markdown<\/li>\n<li>Bootstrap CSS<\/li>\n<li>Predloge<\/li>\n<\/ul>\n<p>\n\u010ce ste kdaj \u017eeleli imeti blog, <noindex><a rel=\"nofollow\" href=\"https:\/\/blog.bitsrc.io\/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc\">to je odli\u010den primer<\/a><\/noindex> kako ga ustvariti z uporabo React in GraphQL.<\/p>\n<p>Ne pravim, da je WordPress slaba izbira, vendar lahko z Gatsbyjem ustvarite visoko zmogljive strani z uporabo Reacta \u2014 kar je neverjetna kombinacija.<\/p>\n<h3>Blog z Gridsome<\/h3>\n<p>\nGridsome za Vue\u2026 No, to smo \u017ee imeli z Next\/Nuxt.<br \/>\nToda enako velja za Gridsome in Gatsby. Obe uporabljata GraphQL kot podatkovno plast, vendar Gridsome uporablja VueJS. To je tudi neverjeten generator stati\u010dnih spletnih strani, ki vam bo pomagal ustvariti odli\u010dne bloge:<\/p>\n<p><img decoding=\"async\" alt=\"\u0160e 9 projektov za izpopolnjevanje Front-End ve\u0161\u010din\" src=\"\/wp-content\/uploads\/2019\/11\/3d0162d6aeba8481056f4dee9f25808d.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Kaj se boste nau\u010dili<\/b><\/p>\n<p>Ta projekt vas bo nau\u010dil, kako ustvariti preprost blog, da za\u010dnete z Gridsome, GraphQL in Markdown. Prav tako se v njem obravnava, kako razporediti aplikacijo prek Netlifysta.<\/p>\n<p><b>Tehni\u010dni kup in funkcije<\/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>\nTo seveda ni najbolj popoln tutorial, vendar pokriva osnovne koncepte Gridsome in <noindex><a rel=\"nofollow\" href=\"https:\/\/www.telerik.com\/blogs\/building-a-blog-with-vue-and-markdown-using-gridsome\">Markdown ter lahko postane dobra izhodi\u0161\u010dna to\u010dka<\/a><\/noindex>.<\/p>\n<h3>Avdio predvajalnik, podoben SoundCloudu, s pomo\u010djo Quasar<\/h3>\n<p>\nQuasar je \u0161e en Vue framework, ki ga lahko uporabite za ustvarjanje mobilnih aplikacij. V tem projektu boste ustvarili aplikacijo predvajalnika avdio, na primer:<\/p>\n<p><img decoding=\"async\" alt=\"\u0160e 9 projektov za izpopolnjevanje Front-End ve\u0161\u010din\" src=\"\/wp-content\/uploads\/2019\/11\/e7acef4f60608d581533c038c61a0752.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Kaj se boste nau\u010dili<\/b><\/p>\n<p>Medtem ko se drugi projekti osredoto\u010dajo predvsem na spletne aplikacije, vam ta poka\u017ee, kako ustvariti mobilno aplikacijo z uporabo Vue in frameworka Quasar.<br \/>\n\u017de bi morali imeti delujo\u010do Cordovo z nastavljenim Android Studio\/Xcode. \u010ce tega \u0161e nimate, je v priro\u010dniku povezava na spletno mesto Quasar, kjer prika\u017eejo, kako vse nastaviti.<\/p>\n<p><b>Tehni\u010dni kup in funkcije<\/b><\/p>\n<ul>\n<li>Quasar<\/li>\n<li>Vue<\/li>\n<li>Cordova<\/li>\n<li>WaveSurfer<\/li>\n<li>UI Komponente<\/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\">Majhen projekt<\/a><\/noindex>, ki prikazuje zmo\u017enosti Quasarja za ustvarjanje mobilnih aplikacij.<br \/>\n<br \/>Izvor: <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.4 - 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\/sl\/blog\/news\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.4\" \/>\n\t\t<meta property=\"og:locale\" content=\"sl_SI\" \/>\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\/sl\/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 \u0160e 9 projektov za izpopolnjevanje Front-End ve\u0161\u010din | ProHoster","description":"Uvod Ne glede na to.","canonical_url":"https:\/\/prohoster.info\/sl\/blog\/news\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"sl_SI","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\/sl\/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\/sl\/wp-json\/wp\/v2\/posts\/52348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/comments?post=52348"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/posts\/52348\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/media?parent=52348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/categories?post=52348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/tags?post=52348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}