Dojo ngarep: proyek kanggo nglatih katrampilan pangembang (5 anyar + 43 lawas)

1. Клон Notion

Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.

www.pangerten.so

Чему вы научитесь, создавая клон Notion:

• HTML Drag and drop API. Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable zona.
• Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
• Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.

Artikel kasebut diterjemahake kanthi dhukungan saka EDISON Software, sing разрабатывает приложения и сайтыLan nandur modal ing wiwitan.

2. Клон Repl.it

Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.

repl.it

Чему вы научитесь, создавая клон Repl.it:

• Как запускать и выполнять код (server-side) в браузере (client-side).
• Считывать входные данные (исходный код) и выводить на экран результат выполнения.
• Как создавать файлы и папки в вебе и сохранять результаты.
• Как подсвечивать синтаксис кода.

3. Клон Google Photos

Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.

www.google.com/photos/about

Чему вы научитесь, создавая клон Google Photos:

• Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
• Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
• Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
• Bonus: как хранить изображения в облаке или локальной базе данных.

4. Клон Gifsky

gifski конвертирует видео в GIF используя функцииpngquant для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.

gif.ski

Чему вы научитесь, создавая клон Gifski:

• Как конвертировать видео файлы (.mp4 в .gif).
• Как использовать API Drag and Drop HTML.
• Как работают оптимизация и обработка изображений.

Wigati: Gifsky — это проект с открытым исходным кодом и есть на GitHub!

5. Мониторинг курсов криптовалют

React Native cryptocurrency tracker

Чему вы научитесь, создавая трекер курса валют:

• Как работать с API и получать данные удаленно из API.
• Как отобразить данные в виде списка.
• Bonus: Если вам интересно, я недавно написал туториал по созданию трекера цен на криптовалюту с React Native.

Wigati: kene GitHub example repository.

Подборка проектов из предыдущих публикаций.

lapisan

www.reddit.com/r/layer

Lapisan minangka komunitas sing saben wong bisa nggambar piksel ing "papan" sing dienggo bareng. Ide asli lair ing Reddit. Komunitas r / Lapisan minangka metafora kanggo kreatifitas sing dienggo bareng, sing saben wong bisa dadi pencipta lan nyumbang kanggo sabab umum.

Apa sing bakal sampeyan sinau nalika nggawe proyek Layer dhewe:

• Cara kerja kanvas JavaScript Ngerti cara ngoperasikake kanvas minangka skill kritis ing akeh aplikasi.
• Carane koordinasi ijin pangguna. Saben pangguna bisa nggambar siji piksel saben 15 menit tanpa kudu mlebu.
• Nggawe sesi cookie.

Siksik

squoosh.app

Squoosh minangka aplikasi kompresi gambar kanthi akeh pilihan lanjut.

GIF 20 MB

Kanthi nggawe versi Squoosh sampeyan dhewe, sampeyan bakal sinau:

• Cara nggarap ukuran gambar
• Sinau dhasar Drag'n'Drop API
• Ngerti cara kerja API lan pamireng acara
• Cara ngunggah lan ngekspor file

Wigati: Kompresor gambar lokal. Ora perlu ngirim data tambahan menyang server. Sampeyan bisa duwe kompresor ing ngarep, utawa sampeyan bisa nggunakake ing server, Sampéyan.

Kalkulator

Ayo? Serius? Kalkulator? Ya, persis, kalkulator. Ngerteni dhasar operasi matematika lan cara kerjane minangka katrampilan kritis kanggo nyederhanakake aplikasi sampeyan. Cepet utawa mengko sampeyan kudu ngatasi nomer lan luwih cepet luwih apik.

jarodburchill.github.io/CalculatorReactApp

Kanthi nggawe kalkulator dhewe, sampeyan bakal sinau:

• Bisa nganggo angka lan operasi matematika
• Praktek karo API pamireng acara
• Carane ngatur unsur, ngerti gaya

Crawler (mesin telusur)

Saben uwong wis nggunakake mesin telusur, mula kenapa ora nggawe dhewe? Crawler dibutuhake kanggo nggoleki informasi. Saben uwong nggunakake saben dina lan panjaluk teknologi lan spesialis iki mung bakal tuwuh kanthi suwe.

mesin telusur Google

Apa sing bakal sampeyan sinau kanthi nggawe mesin telusur dhewe:

• Cara kerjane crawler
• Cara ngindeks situs lan carane menehi peringkat kanthi rating lan reputasi
• Cara nyimpen situs sing diindeks ing basis data lan cara nggarap database

Pamuter musik (Spotify, Apple Music)

Saben uwong ngrungokake musik - iku mung bagean integral saka urip kita. Ayo nggawe pamuter musik supaya luwih ngerti kepiye mekanisme dhasar platform streaming musik modern.

Spotify

Apa sing bakal sampeyan sinau kanthi nggawe platform streaming musik sampeyan dhewe:

• Carane bisa karo API. nggunakake API saka Spotify utawa Apple Music
• Carane muter, ngaso utawa mundur total menyang trek sabanjuré / sadurungé
• Cara ngganti volume
• Cara ngatur rute pangguna lan riwayat browser

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

tumpukan Tech lan fitur

• Slamet 3
• Komponen
• Styling nganggo CSS
• ES 6 sintaks

Ora akeh proyek wiwitan Svelte sing apik, mula aku nemokake iki pilihan apik kanggo miwiti karo.

Aplikasi E-commerce nggunakake Next.js

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.

tumpukan Tech lan fitur

• Gridsome
• Vue
• GraphQL
• Markdown
• netlify

Iki mesthi ora tutorial paling lengkap, nanging isine konsep dhasar saka Gridsome lan Markdown bisa dadi titik wiwitan sing apik.

Pamuter audio kaya SoundCloud nggunakake Quasar

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.

Форма кредитной карты

A wangun kertu kredit kelangan karo Gamelan lan nyenengake mikro-interaksi. Kalebu format nomer, verifikasi lan deteksi jinis kertu otomatis. Iki dibangun ing Vue.js lan uga responsif. (Sampeyan bisa ndeleng kene.)

wangun kertu kredit

Apa sing bakal sampeyan sinau:

• Proses lan validasi formulir
• Ngatur acara (contone, nalika kolom diganti)
• Ngerti carane nampilake lan nyelehake unsur ing kaca, utamane informasi kertu kredit sing katon ing ndhuwur formulir

grafik bar

Histogram minangka bagan utawa grafik sing nggambarake data kategoris kanthi garis persegi panjang kanthi dhuwur utawa dawa sing sebanding karo nilai sing diwakili.

Padha bisa ditrapake kanthi vertikal utawa horisontal. Bagan garis vertikal kadhangkala disebut bagan garis.

Apa sing bakal sampeyan sinau:

• Tampilake data kanthi cara sing terstruktur lan bisa dingerteni
• Tambahan: Sinau carane nggunakake unsur kasebut canvas lan carane nggambar unsur karo

iku sampeyan bisa nemokake data populasi donya. Padha diurutake miturut taun.

Анимация сердечка Twitter

Mbalik ing 2016, Twitter ngenalake animasi sing luar biasa iki kanggo tweets. Ing taun 2019, isih katon bagean kasebut, mula kenapa ora nggawe dhewe?

Apa sing bakal sampeyan sinau:

• Bisa nganggo atribut CSS keyframes
• Manipulasi lan animasi unsur HTML
• Gabungke JavaScript, HTML lan CSS

Репозитории GitHub с функцией поиска

Ora ana sing apik ing kene - repositori GitHub mung dhaptar sing dimuliakake.
Tujuane kanggo nampilake repositori lan ngidini pangguna nyaring. Gunakake resmi GitHub API kanggo entuk repositori kanggo saben pangguna.

Kaca profil GitHub - github.com/indreklasn

Apa sing bakal sampeyan sinau:

• Nampa data saka API
• Tampilan data saka API
• Nyaring lan nuduhake data sing cocog kanggo saben panelusuran
• Opsional: Yen sampeyan duwe tantangan, gunakake API v4, dibangun nggunakake GraphQL. Yen sampeyan pengin sinau GraphQL, bukak salah sawijining artikel sadurunge.

Чаты в стиле Reddit

Obrolan minangka cara komunikasi sing populer amarga kesederhanaan lan gampang digunakake. Nanging apa tenan bahan bakar kamar chatting modern? WebSockets!

Apa sing bakal sampeyan sinau:

• Gunakake WebSockets, komunikasi wektu nyata lan nganyari data
• Nggarap tingkat akses pangguna (contone, pamilik saluran obrolan duwe peran admin, lan liyane ing kamar - user)
• Proses lan validasi formulir - elinga, jendhela chatting kanggo ngirim pesen yaiku input
• Gawe lan gabung karo macem-macem obrolan
• Bisa nganggo pesen pribadi. Pangguna bisa ngobrol karo pangguna liyane kanthi pribadi. Ateges, sampeyan bakal nggawe sambungan WebSocket antarane rong pangguna.

Навигация в стиле Stripe

Sing nggawe navigasi iki unik yaiku wadhah popover diowahi supaya pas karo konten. Ana keanggunan kanggo transisi iki dibandhingake karo prilaku tradisional mbukak lan nutup popover anyar.

Apa sing bakal sampeyan sinau:

• Gabungke animasi CSS karo transisi
• Dim isi lan aplikasi kelas aktif kanggo unsur ngambang

Pacman

Gawe versi Pacman sampeyan dhewe. Iki minangka cara sing apik kanggo entuk ide babagan carane game dikembangake lan ngerti dhasar. Gunakake framework JavaScript, React utawa Vue.

Sampeyan bakal sinau:

• Carane unsur pindhah
• Cara nemtokake tombol sing kudu ditekan
• Carane nemtokake wayahe tabrakan
• Sampeyan bisa luwih maju lan nambah kontrol gerakan hantu

Sampeyan bakal nemokake conto proyek iki ing repositori GitHub

manajemen pangguna

Proyek kasebut ing repositori GitHub

Nggawe aplikasi jinis CRUD kanggo administrasi pangguna bakal mulang sampeyan dhasar pangembangan. Iki utamané migunani kanggo pangembang anyar.

Sampeyan bakal sinau:

• Apa routing
• Cara nangani formulir entri data lan mriksa apa sing dilebokake pangguna
• Cara nggarap database - nggawe, maca, nganyari lan mbusak tumindak

Проверка погоды в вашем местоположении

Proyek kasebut ing repositori GitHub

Yen sampeyan pengin nggawe app, miwiti karo app cuaca. Proyek iki bisa rampung nggunakake Swift.

Saliyane entuk pengalaman nggawe aplikasi, sampeyan bakal sinau:

• Carane bisa karo API
• Cara nggunakake geolokasi
• Gawe aplikasi sampeyan luwih dinamis kanthi nambah input teks. Ing kono, pangguna bakal bisa ngetik lokasi kanggo mriksa cuaca ing lokasi tartamtu.

Sampeyan butuh API. Kanggo entuk data cuaca, gunakake OpenWeather API. Informasi liyane babagan OpenWeather API kene.

Окно чата

Jendhela obrolanku ing tumindak, mbukak ing rong tab browser

Nggawe jendhela chatting iku cara sampurna kanggo miwiti karo soket. Pilihan tumpukan teknologi gedhe banget. Node.js, contone, sampurna.

Sampeyan bakal sinau babagan cara soket lan cara ngetrapake. Iki minangka kauntungan utama proyek iki.

Yen sampeyan pangembang Laravel sing pengin bisa karo soket, maca sandi artikel

GitLab CI

Sumber

Yen sampeyan anyar ing integrasi terus-terusan (CI), muter-muter karo GitLab CI. Nggawe sawetara lingkungan lan nyoba nglakokake sawetara tes. Iki dudu proyek sing angel banget, nanging aku yakin sampeyan bakal sinau akeh. Akeh tim pangembangan saiki nggunakake CI. Ngerti carane nggunakake iku migunani.

Sampeyan bakal sinau:

• Apa GitLab CI
• Carane ngatur .gitlab-ci.ymlsing ngandhani pangguna GitLab apa sing kudu ditindakake
• Cara nyebarake menyang lingkungan liyane

Анализатор сайтов

Nggawe scraper sing nganalisa semantik situs web lan nggawe rating. Contone, sampeyan bisa mriksa tag alt sing ilang ing gambar. Utawa priksa manawa kaca kasebut nduweni tag meta SEO. A scraper bisa digawe tanpa antarmuka panganggo.

Sampeyan bakal sinau:

• Kepiye cara kerja scraper?
• Cara nggawe pamilih DOM
• Kepiye carane nulis algoritma
• Yen sampeyan ora pengin mandheg ana, nggawe antarmuka panganggo. Sampeyan uga bisa nggawe laporan ing saben situs web sing dipriksa.

Определение настроений в социальных сетях

Sumber

Deteksi sentimen ing media sosial minangka cara sing apik kanggo ngenalake machine learning.

Sampeyan bisa miwiti kanthi nganalisa mung siji jaringan sosial. Saben uwong biasane miwiti karo Twitter.

Yen sampeyan wis duwe pengalaman sinau mesin, coba ngumpulake data saka jaringan sosial sing beda-beda lan gabungke.

Sampeyan bakal sinau:

• Apa iku machine learning

Клон Trello

Klone Trello dening Indrek Lasn.

Apa sing bakal sampeyan sinau:

• Organisasi rute pangolahan panyuwunan (Routing).
• Seret lan selehake.
• Cara nggawe obyek anyar (papan, dhaptar, kertu).
• Pangolahan lan validasi data input.
• Saka sisih klien: carane nggunakake panyimpenan lokal, carane nyimpen data ing panyimpenan lokal, carane maca data saka panyimpenan lokal.
• Saka sisih server: carane nggunakake database, carane nyimpen data ing database, carane maca data saka database.

Iki minangka conto gudangdigawe karo React + Redux.

Панель админа

Repositori Github.

A app CRUD prasaja, sampurna kanggo sinau dhasar. Ayo sinau:

• Nggawe pangguna, ngatur pangguna.
• Interaksi karo database - nggawe, maca, ngowahi, mbusak pangguna.
• Validasi input lan nggarap formulir.

Трекер криптовалют (нативное мобильное приложение)

Repositori Github.

Apa wae: Swift, Objective-C, React Native, Java, Kotlin.

Ayo sinau:

• Cara kerja aplikasi native.
• Carane njupuk data saka API.
• Cara kerja tata letak kaca asli.
• Cara nggarap simulator seluler.

Coba API iki. Temokake luwih apik - tulis ing komentar.

Yen kasengsem, kene punika tutorial.

Настроить собственный конфиг webpack с нуля

Secara teknis, iki dudu aplikasi, nanging tugas sing migunani banget kanggo ngerti cara kerjane webpack saka njero. Saiki ora bakal dadi "kothak ireng", nanging alat sing bisa dingerteni.

Syarat:

• Kompilasi es7 nganti es5 (dhasar).
• Kompilasi jsx menyang js - utawa - .vue menyang .js (sampeyan kudu sinau loader)
• Setel server webpack dev lan reload modul panas. (vue-cli lan create-react-app nggunakake loro-lorone)
• Gunakake Heroku, now.sh utawa Github, sinau carane masang proyek webpack.
• Setel preprocessor favorit kanggo ngumpulake css - scss, less, stylus.
• Sinau carane nggunakake gambar lan svg nganggo webpack.

Iki minangka sumber daya apik tenan kanggo pamula lengkap.

Клон Hackernews

Saben Jedi diwajibake nggawe Hackernews dhewe.

Apa sing bakal sampeyan sinau ing dalan:

• Carane sesambungan karo hackernews API.
• Carane nggawe aplikasi siji kaca.
• Cara ngleksanakake fitur kayata ndeleng komentar, komentar individu, profil.
• Organisasi rute pangolahan panyuwunan (Routing).

Тудушечка

TodoMVC.

Serius? Tudushka? Ana ewonan. Nanging pracaya kula, ana alesan kanggo popularitas kuwi.
Aplikasi Tudu minangka cara sing apik kanggo mesthekake yen sampeyan ngerti dhasar. Coba nulis siji aplikasi ing Javascript vanilla lan siji ing framework favorit.

sinau:

• Nggawe tugas anyar.
• Priksa lapangan rampung.
• Nyaring tugas (rampung, aktif, kabeh). Gunakake filter и reduce.
• Ngerti dhasar Javascript.

Сортируемый drag and drop список

Repositori Github.

Banget mbiyantu kanggo mangerteni seret lan selehake API.

Ayo sinau:

• Seret lan Selehake API
• Nggawe UI sing sugih

Клон мессенджера (нативное приложение)

Sampeyan bakal ngerti carane aplikasi web lan aplikasi asli bisa digunakake, sing bakal mbedakake sampeyan saka massa abu-abu.

Apa sing bakal kita sinau:

• Soket web (pesen instan)
• Cara kerja aplikasi native.
• Cara kerja cithakan ing aplikasi asli.
• Organisasi rute pangolahan panjalukan ing aplikasi asli.

Editor teks

Tujuan saka editor teks yaiku nyuda upaya pangguna sing nyoba ngowahi format dadi markup HTML sing sah. Editor teks sing apik ngidini pangguna ngowahi format teks kanthi cara sing beda-beda.

Ing sawetara titik, kabeh wong wis nggunakake editor teks. Mula kok ora nggawe dhewe?

Клон Reddit

Reddit minangka agregasi warta sosial, rating konten web lan situs diskusi.

Reddit njupuk akeh wektu, nanging aku terus nongkrong. Nggawe klon Reddit minangka cara sing efektif kanggo sinau pemrograman (nalika browsing Reddit bebarengan).

Reddit menehi sampeyan sugih banget API. Aja ninggalake fitur apa wae utawa nindakake samubarang kanthi sembarangan. Ing donya nyata karo klien lan pelanggan, sampeyan ora bisa sembarangan, utawa sampeyan bakal cepet ilang proyek.

Klien sing cerdas bakal langsung ngerti yen proyek kasebut ditindakake kanthi ora apik lan bakal nemokake wong liya.

Reddit API

Публикация пакета NPM с открытым исходным кодом

Yen sampeyan nulis kode Javascript, kemungkinan sampeyan nggunakake manajer paket. Manajer paket ngidini sampeyan nggunakake maneh kode sing wis ditulis lan diterbitake dening wong liya.

Ngerteni siklus pangembangan lengkap paket bakal menehi pengalaman sing apik banget. Ana akeh perkara sing sampeyan kudu ngerti nalika nerbitake kode. Sampeyan kudu mikir babagan keamanan, versi semantik, skalabilitas, konvensi jeneng lan pangopènan.

Paket bisa apa wae. Yen sampeyan ora duwe gagasan, nggawe Lodash dhewe lan nerbitaké.

Lodash: lodash.com

Duwe soko sing wis rampung online ndadekake sampeyan 10% ndhuwur liyane. Kene sawetara sumber migunani babagan mbukak sumber lan paket.

Учебный план freeCodeCamp

Kurikulum FCC

freeCodecamp wis diklumpukake kathah kursus programming komprehensif.

freeCodeCamp minangka organisasi nirlaba. Iki kalebu platform pembelajaran berbasis web interaktif, forum komunitas online, ruang obrolan, publikasi Sedheng, lan organisasi lokal sing pengin nggawe pangembangan web sinau bisa diakses kabeh wong.

Sampeyan bakal luwih saka kualifikasi kanggo proyek pisanan yen sampeyan bisa ngrampungake kabeh kursus.

Создайте HTTP-сервер с нуля

Protokol HTTP minangka salah sawijining protokol utama ing ngendi isi lelungan ing Internet. Server HTTP digunakake kanggo nglayani konten statis kayata HTML, CSS, lan JS.

Bisa ngetrapake protokol HTTP saka awal bakal nggedhekake kawruh babagan cara interaksi.

Contone, yen sampeyan nggunakake NodeJs, sampeyan ngerti yen Express nyedhiyakake server HTTP.

Kanggo referensi, deleng yen sampeyan bisa:

• Nggawe server tanpa nggunakake perpustakaan
• Server kudu nglayani konten HTML, CSS lan JS.
• Ngleksanakake router saka ngeruk
• Ngawasi owah-owahan lan nganyari server

Yen sampeyan ora ngerti sebabe, gunakake Meneng wae lan nyoba nggawe server HTTP caddy saka ngeruk.

Десктопное приложение для заметок

Kita kabeh njupuk cathetan, ta?

Ayo nggawe aplikasi cathetan. Aplikasi kasebut kudu nyimpen cathetan lan nyinkronake karo database. Gawe aplikasi asli nggunakake Electron, Swift, utawa apa wae sing disenengi lan apa sing cocog kanggo sistem sampeyan.

Bebas bae kanggo gabungke iki karo tantangan pisanan (editor teks).

Minangka bonus, coba nyinkronake versi desktop karo versi web.

Подкасты (клон Overcast)

Sapa sing ora ngrungokake podcast?

Gawe aplikasi web kanthi fungsi ing ngisor iki:

• Nggawe akun
• Telusuri Podcast
• Rate lan langganan podcast
• Mungkasi lan muter, ngganti kacepetan, maju lan mundur fungsi kanggo 30 detik.

Coba gunakake iTunes API minangka titik wiwitan. Yen sampeyan ngerti sumber daya liyane, kirimake ing komentar.

affiliate.itunes.apple.com/resources/documentation/itunes-store-web-service-search-api

Jupuk layar

Hello! Aku lagi syuting layarku saiki!

Gawe aplikasi desktop utawa web sing ngidini sampeyan njupuk layar lan nyimpen klip kasebut minangka .gif

kene sawetara tipscarane kanggo entuk iki.

Sumber informasi

• 5 proyek pelatihan sing luwih wani kanggo pangembang (Lapisan, Squoosh, Kalkulator, Crawler Situs Web, Pamuter Musik)
• 9 proyek kanggo ngasah katrampilan Front-End
• Enem tugas kanggo pangembang Front-End
• Latihan sing nyenengake kanggo pangembang
• 8 proyek sinau
• Dhaptar proyek liyane kanggo latihan

Source: www.habr.com