9 proyek liyane kanggo ngasah katrampilan Front-End
Pambuka
Apa sampeyan anyar ing pemrograman utawa pangembang sing wis berpengalaman, sinau konsep lan basa/kerangka anyar kudu ana ing industri iki supaya bisa ngetutake tren.
Njupuk React, contone, sing mbukak sumber Facebook mung patang taun kepungkur lan wis dadi pilihan nomer siji kanggo pangembang JavaScript ing saindenging jagad.
Vue lan Angular, mesthi, uga duwe basis penggemar sing sah. Banjur ana Svelte lan kerangka universal liyane kayata Next.js utawa Nuxt.js. Lan Gatsby, lan Gridsome, lan Quasar ... lan akeh liyane.
Yen sampeyan pengin mbuktekake dhewe minangka pangembang JavaScript sing berpengalaman, sampeyan kudu paling ora duwe pengalaman karo macem-macem kerangka lan perpustakaan - saliyane nindakake karya karo JS lawas sing apik.
Kanggo mbantu sampeyan dadi master ngarep ing taun 2020, aku wis nggabungake sangang proyek sing beda-beda, saben fokus ing kerangka kerja lan perpustakaan JavaScript sing beda-beda minangka tumpukan teknologi sing bisa digawe lan ditambahake menyang portofolio sampeyan. Elinga yen ora ana sing mbantu sampeyan luwih saka nggawe barang, mula maju, gunakake pikiran lan kelakon
Aplikasi telusuran film nggunakake React (kanthi pancing)
Babagan pisanan sing bisa diwiwiti yaiku nggawe aplikasi telusuran film nggunakake React. Ing ngisor iki minangka gambar apa aplikasi pungkasan bakal katon kaya:
Apa sing bakal sampeyan sinau
Kanthi mbangun app iki, sampeyan bakal nambah katrampilan React kanthi nggunakake API Hooks sing relatif anyar. Proyek conto nggunakake komponen React, akeh pancingan, API eksternal, lan mesthi sawetara gaya CSS.
tumpukan Tech lan fitur
Reaksi karo pancingan
Nggawe-reaksi-app
JSX
CSS
Tanpa nggunakake kelas apa wae, proyek kasebut menehi titik mlebu sing sampurna menyang React fungsional lan mesthi bakal mbantu sampeyan ing 2020. sampeyan bisa nemokake conto proyek kene. Tindakake pandhuan utawa gawe dhewe.
Ngobrol App karo Vue
Proyek liyane sing apik kanggo sampeyan yaiku nggawe aplikasi chatting nggunakake perpustakaan JavaScript favoritku: VueJS. Aplikasi bakal katon kaya iki:
Apa sing bakal sampeyan sinau
Ing tutorial iki, sampeyan bakal sinau carane nggawe aplikasi Vue saka ngeruk - nggawe komponen, nangani negara, nggawe rute, nyambung menyang layanan pihak katelu, lan malah nangani otentikasi.
tumpukan Tech lan fitur
Vue
vuex
Vue Router
Tampilan CLI
Pusher
CSS
Iki minangka proyek sing apik banget kanggo miwiti Vue utawa nambah katrampilan sing wis ana supaya bisa berkembang ing taun 2020. sampeyan bisa nemokake tutorial kene.
Aplikasi cuaca sing apik karo Angular 8
Conto iki bakal mbantu nggawe aplikasi cuaca sing apik nggunakake Angular 8:
Apa sing bakal sampeyan sinau
Proyèk iki bakal mulang sampeyan katrampilan sing migunani kanggo mbangun aplikasi wiwit wiwitan - saka desain nganti pangembangan, nganti aplikasi sing siap-deployment.
tumpukan Tech lan fitur
Sudut 8
Firebase
Rendering sisih server
CSS karo Grid lan Flexbox
Mobile loropaken lan adaptasi
Mode peteng
Antarmuka sing apik
Sing daktresnani babagan proyek sing nyakup kabeh iki yaiku sampeyan ora nyinaoni prekara-prekara kasebut. Nanging, sampeyan sinau kabeh proses pangembangan, saka desain nganti panyebaran pungkasan.
Aplikasi To-Do nggunakake Svelte
Svelte kaya bocah anyar babagan pendekatan berbasis komponen - paling ora padha karo React, Vue lan Angular. Lan iki minangka salah sawijining produk anyar sing paling panas kanggo 2020.
Aplikasi To-Do ora kudu dadi topik sing paling panas, nanging bakal mbantu sampeyan ngasah katrampilan Svelte. Bakal katon kaya iki:
Apa sing bakal sampeyan sinau
Tutorial iki bakal nuduhake sampeyan carane nggawe aplikasi nggunakake Svelte 3, saka wiwitan nganti rampung. Sampeyan bakal nggunakake komponen, gaya, lan panangan acara
Next.js minangka kerangka paling populer kanggo mbangun aplikasi React sing ndhukung rendering sisih server metu saka kothak.
Proyek iki bakal nuduhake sampeyan carane nggawe aplikasi e-commerce sing katon kaya iki:
Apa sing bakal sampeyan sinau
Ing proyek iki, sampeyan bakal sinau babagan carane ngembangake Next.js-gawe kaca lan komponen anyar, ekstrak data, lan gaya lan masang aplikasi Sabanjure.
tumpukan Tech lan fitur
Sabanjure.js
Komponen lan Kaca
Sampling data
Stilisasi
Penyebaran Proyek
SSR lan SPA
Iku tansah apik kanggo duwe conto donya nyata kaya app e-commerce kanggo sinau bab anyar. Sampeyan bisa golek tutorial kene.
Blog multibasa lengkap karo Nuxt.js
Nuxt.js kanggo Vue, apa Next.js kanggo React: kerangka kerja sing apik kanggo nggabungake kekuwatan rendering sisih server lan aplikasi siji kaca.
Aplikasi pungkasan sing bisa digawe bakal katon kaya iki:
Apa sing bakal sampeyan sinau
Ing conto proyek iki, sampeyan bakal sinau carane nggawe situs web lengkap nggunakake Nuxt.js, saka persiyapan awal nganti panyebaran pungkasan.
Iku njupuk kauntungan saka akeh fitur kelangan sing Nuxt wis kurban, kayata kaca lan komponen, lan noto karo SCSS.
tumpukan Tech lan fitur
Nuxt.js
Komponen lan Kaca
Modul storyblock
Hagfish
Vuex kanggo manajemen negara
SCSS kanggo noto
Nuxt middlewares
Iki proyek apik tenan, kang kalebu akeh fitur Nuxt.js gedhe. Aku pribadi seneng nggarap Nuxt dadi sampeyan kudu nyoba amarga uga bakal nggawe sampeyan pangembang Vue sing apik.
Blog karo Gatsby
Gatsby minangka generator situs statis banget nggunakake React lan GraphQL. Iki minangka asil saka proyek kasebut:
Apa sing bakal sampeyan sinau
Ing tutorial iki, sampeyan bakal sinau carane nggunakake Gatsby kanggo nggawe blog sing bakal digunakake kanggo nulis artikel dhewe nggunakake React lan GraphQL.
tumpukan Tech lan fitur
gatsby
nanggepi
GraphQL
Plugins lan tema
MDX / Markdown
CSS Bootstrap
Cithakan
Yen sampeyan wis tau pengin miwiti blog, iki minangka conto sing apik carane nggawe nggunakake React lan GraphQL.
Aku ora ujar manawa WordPress minangka pilihan sing ala, nanging kanthi Gatsby sampeyan bisa mbangun situs web kanthi kinerja dhuwur nggunakake React - sing kombinasi apik tenan.
Blog karo Gridsome
Gridsome kanggo Vue ... Oke, kita wis duwe iki karo Sabanjure / Nuxt.
Nanging padha bener kanggo Gridsome lan Gatsby. Loro-lorone nggunakake GraphQL minangka lapisan data, nanging Gridsome nggunakake VueJS. Iki uga minangka generator situs statis sing bakal mbantu nggawe blog sing apik:
Apa sing bakal sampeyan sinau
Proyek iki bakal mulang sampeyan carane nggawe blog prasaja kanggo miwiti karo Gridsome, GraphQL lan Markdown. Iki uga kalebu cara masang aplikasi liwat Netlify.
Quasar minangka kerangka Vue liyane sing bisa digunakake kanggo nggawe aplikasi seluler. Ing proyek iki sampeyan bakal nggawe aplikasi pamuter audio, contone:
Apa sing bakal sampeyan sinau
Nalika proyek liyane fokus utamane ing aplikasi web, iki bakal nuduhake sampeyan carane nggawe aplikasi seluler nggunakake kerangka Vue lan Quasar.
Sampeyan kudu duwe Cordova mlaku karo Android Studio / Xcode dikonfigurasi. Yen ora, manual duwe link menyang situs web Quasar sing nuduhake sampeyan carane nyetel kabeh.
tumpukan Tech lan fitur
quasar
Vue
Cordova
WaveSurfer
Komponen UI
Proyek cilik, nuduhake kemampuan Quasar kanggo nggawe aplikasi seluler.