Dojo pen blaen: prosiectau i hyfforddi sgiliau datblygwyr (5 newydd + 43 oed)

1. Клон Notion

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

www.notion.so

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

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

Cyfieithwyd yr erthygl gyda chefnogaeth Meddalwedd EDISON, sydd разрабатывает приложения и сайтыAc yn buddsoddi mewn busnesau newydd.

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МБ) и массовых загрузок.
• Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
• Bonws: как хранить изображения в облаке или локальной базе данных.

4. Клон Gifsky

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

gif.ski

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

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

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

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

React Native cryptocurrency tracker

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

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

Nodyn: Yma GitHub example repository.

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

haen

www.reddit.com/r/layer

Mae Haen yn gymuned lle gall pawb dynnu picsel ar “fwrdd” a rennir. Ganwyd y syniad gwreiddiol ar Reddit. Mae'r gymuned r/Haen yn drosiad ar gyfer creadigrwydd a rennir, y gall pawb fod yn grëwr a chyfrannu at achos cyffredin.

Beth fyddwch chi'n ei ddysgu wrth greu eich prosiect Haen eich hun:

• Sut mae cynfas JavaScript yn gweithio Mae gwybod sut i weithredu cynfas yn sgil hanfodol mewn llawer o gymwysiadau.
• Sut i gydlynu caniatâd defnyddwyr. Gall pob defnyddiwr dynnu un picsel bob 15 munud heb orfod mewngofnodi.
• Creu sesiynau cwcis.

Squoosh

squoosh.app

Mae Squoosh yn gymhwysiad cywasgu delwedd gyda llawer o opsiynau datblygedig.

GIF 20 MB

Trwy greu eich fersiwn eich hun o Squoosh byddwch yn dysgu:

• Sut i weithio gyda meintiau delwedd
• Dysgwch hanfodion yr API Drag'n'Drop
• Deall sut mae'r API a gwrandawyr y digwyddiad yn gweithio
• Sut i uwchlwytho ac allforio ffeiliau

Nodyn: Mae'r cywasgydd delwedd yn lleol. Nid oes angen anfon data ychwanegol i'r gweinydd. Gallwch chi gael y cywasgydd gartref, neu gallwch ei ddefnyddio ar weinydd, eich dewis chi.

Cyfrifiannell

Dewch ymlaen? O ddifrif? Cyfrifiannell? Ie, yn union, cyfrifiannell. Mae deall hanfodion gweithrediadau mathemateg a sut maen nhw'n gweithio gyda'i gilydd yn sgil hanfodol ar gyfer symleiddio'ch cymwysiadau. Yn hwyr neu'n hwyrach bydd yn rhaid i chi ddelio â rhifau a gorau po gyntaf.

jarodburchill.github.io/CalculatorReactApp

Trwy greu eich cyfrifiannell eich hun byddwch yn dysgu:

• Gweithio gyda rhifau a gweithrediadau mathemateg
• Ymarferwch gydag API gwrandawyr digwyddiadau
• Sut i drefnu elfennau, deall arddulliau

Ymlusgo (peiriant chwilio)

Mae pawb wedi defnyddio peiriant chwilio, felly beth am greu un eich hun? Mae angen ymlusgwyr i chwilio am wybodaeth. Mae pawb yn eu defnyddio bob dydd a bydd y galw am y dechnoleg hon ac arbenigwyr ond yn tyfu dros amser.

Peiriant chwilio Google

Beth fyddwch chi'n ei ddysgu trwy greu eich peiriant chwilio eich hun:

• Sut mae ymlusgwyr yn gweithio
• Sut i fynegeio safleoedd a sut i'w graddio yn ôl gradd ac enw da
• Sut i storio gwefannau mynegeio mewn cronfa ddata a sut i weithio gyda'r gronfa ddata

Chwaraewr cerddoriaeth (Spotify, Apple Music)

Mae pawb yn gwrando ar gerddoriaeth - dim ond rhan annatod o'n bywydau ydyw. Gadewch i ni greu chwaraewr cerddoriaeth i ddeall yn well sut mae mecaneg sylfaenol platfform ffrydio cerddoriaeth fodern yn gweithio.

Spotify

Beth fyddwch chi'n ei ddysgu trwy greu eich platfform ffrydio cerddoriaeth eich hun:

• Sut i weithio gyda'r API. defnyddio API o Spotify neu Apple Music
• Sut i chwarae, oedi neu ailddirwyn i'r trac nesaf/blaenorol
• Sut i newid cyfaint
• Sut i reoli llwybro defnyddwyr a hanes porwr

Ap chwilio ffilm gyda React (gyda bachau)

Y peth cyntaf y gallwch chi ddechrau ag ef yw adeiladu ap chwilio ffilm gydag React. Isod mae delwedd o sut olwg fydd ar yr ap terfynol:

Beth fyddwch chi'n ei ddysgu
Trwy adeiladu'r cymhwysiad hwn, byddwch yn gwella'ch sgiliau React gan ddefnyddio'r API Hooks cymharol newydd. Mae'r prosiect sampl yn defnyddio cydrannau React, llawer o fachau, API allanol, ac wrth gwrs rhywfaint o arddull CSS.

Pentwr technoleg a nodweddion

• Ymateb gyda bachau
• creu-ymateb-app
• jsx
• CSS

Heb ddefnyddio unrhyw ddosbarthiadau, mae'r prosiectau hyn yn rhoi'r pwynt mynediad perffaith i chi i React swyddogaethol a byddant yn bendant yn eich helpu yn 2020. gallwch ddod o hyd prosiect sampl yma. Dilynwch y cyfarwyddiadau neu gwnewch ef yn un eich hun.

Ap sgwrsio gyda Vue

Prosiect gwych arall i chi yw adeiladu ap sgwrsio gan ddefnyddio fy hoff lyfrgell JavaScript: VueJS. Bydd y cais yn edrych rhywbeth fel hyn:

Beth fyddwch chi'n ei ddysgu
Yn y tiwtorial hwn, byddwch chi'n dysgu sut i wneud ap Vue o'r dechrau - creu cydrannau, trin cyflyrau, creu llwybrau, cysylltu â gwasanaethau trydydd parti, a hyd yn oed trin dilysu.

Pentwr technoleg a nodweddion

• Vue
• vuex
• Llwybrydd Vue
• Vue CLI
• Pusher
• CSS

Mae hwn yn brosiect gwych i ddechrau gyda Vue neu wella eich sgiliau presennol i ddechrau datblygu yn 2020. gallwch ddod o hyd tiwtorial yma.

Ap tywydd hyfryd gydag Angular 8

Bydd yr enghraifft hon yn eich helpu i adeiladu ap tywydd hardd gan ddefnyddio Angular 8:

Beth fyddwch chi'n ei ddysgu
Bydd y prosiect hwn yn dysgu sgiliau gwerthfawr i chi mewn adeiladu cymwysiadau o'r dechrau - o ddylunio i ddatblygiad, yr holl ffordd i gymhwysiad parod i'w ddefnyddio.

Pentwr technoleg a nodweddion

• Ongl 8
• Firebase
• Rendro Ochr y Gweinydd
• CSS gyda Grid a Flexbox
• Cyfeillgar i ffonau symudol a'r gallu i addasu
• Modd tywyll
• Rhyngwyneb hardd

Yr hyn rydw i wir yn ei hoffi am y prosiect cynhwysfawr hwn yw nad ydych chi'n astudio pethau ar eich pen eich hun. Yn lle hynny, rydych chi'n dysgu'r broses ddatblygu gyfan o'r dylunio i'r defnydd terfynol.

Ap To-Do gyda Svelte

Mae Svelte fel y plentyn newydd yn y dull cydrannol - o leiaf yn debyg i React, Vue ac Angular. A dyma un o'r cynhyrchion newydd poethaf ar gyfer 2020.

Nid apiau I'w Gwneud yw'r pwnc poethaf o reidrwydd, ond byddant yn eich helpu i fireinio'ch sgiliau Svelte. Bydd yn edrych fel hyn:

Beth fyddwch chi'n ei ddysgu
Bydd y tiwtorial hwn yn dangos i chi sut i greu cymhwysiad gan ddefnyddio Svelte 3, o'r dechrau i'r diwedd. Byddwch yn defnyddio cydrannau, steilio a thrinwyr digwyddiadau

Pentwr technoleg a nodweddion

• Svelte 3
• Cydrannau
• Steilio gyda CSS
• Cystrawen ES6

Nid oes llawer o brosiectau cychwynnol Svelte da, felly darganfyddais mae hwn yn lle da i ddechrau.

Ap e-fasnach gyda Next.js

Next.js yw'r fframwaith mwyaf poblogaidd ar gyfer adeiladu apiau React sy'n cefnogi rendro ochr y gweinydd allan o'r bocs.

Bydd y prosiect hwn yn dangos i chi sut i greu cymhwysiad e-fasnach sy'n edrych fel hyn:

Beth fyddwch chi'n ei ddysgu
Yn y prosiect hwn, byddwch yn dysgu sut i ddatblygu gyda Next.js - creu tudalennau a chydrannau newydd, adalw data, ac arddull a defnyddio rhaglen Next.

Pentwr technoleg a nodweddion

• Nesaf.js
• Cydrannau a Tudalennau
• Samplu data
• Styleiddio
• Defnyddio Prosiect
• SSR ac AGA

Mae bob amser yn wych cael enghraifft bywyd go iawn fel app e-fasnach i ddysgu rhywbeth newydd. Gallwch chi dod o hyd i diwtorial yma.

Blog amlieithog llawn gyda Nuxt.js

Mae Nuxt.js ar gyfer Vue, fel Next.js ar gyfer React: fframwaith gwych ar gyfer cyfuno rendrad ar ochr y gweinydd a chymwysiadau un dudalen
Bydd y cais olaf y gallwch ei greu yn edrych fel hyn:

Beth fyddwch chi'n ei ddysgu

Yn y prosiect enghreifftiol hwn, byddwch yn dysgu sut i adeiladu gwefan gyflawn gan ddefnyddio Nuxt.js, o'r gosodiad cychwynnol i'r defnydd terfynol.

Mae'n manteisio ar lawer o'r nodweddion cŵl sydd gan Nuxt i'w cynnig, megis tudalennau a chydrannau, a steilio gyda SCSS.

Pentwr technoleg a nodweddion

• Nuxt.js
• Cydrannau a Tudalennau
• modiwl bloc stori
• cymysgeddau
• Vuex ar gyfer rheolaeth y wladwriaeth
• SCSS ar gyfer steilio
• Nuxt nwyddau canol

Mae hwn yn brosiect cŵl iawn., sy'n cynnwys llawer o nodweddion gwych Nuxt.js. Yn bersonol, rydw i wrth fy modd yn gweithio gyda Nuxt felly dylech chi roi cynnig arni gan y bydd hefyd yn eich gwneud chi'n ddatblygwr Vue gwych.

Blog gyda Gatsby

Mae Gatsby yn gynhyrchydd safle sefydlog gwych gan ddefnyddio React a GraphQL. Dyma ganlyniad y prosiect:

Beth fyddwch chi'n ei ddysgu

Yn y tiwtorial hwn, byddwch yn dysgu sut i ddefnyddio Gatsby i greu blog y byddwch yn ei ddefnyddio i ysgrifennu eich erthyglau eich hun gan ddefnyddio React a GraphQL.

Pentwr technoleg a nodweddion

• Gatsby
• Ymateb
• GraffQL
• Ategion a Themâu
• MDX/Markdown
• Bootstrap CSS
• templedi

Os oeddech chi erioed eisiau dechrau blog, mae hon yn enghraifft wych sut i'w wneud gan ddefnyddio React a GraphQL.

Dydw i ddim yn dweud bod WordPress yn ddewis gwael, ond gyda Gatsby gallwch chi adeiladu gwefannau perfformiad uchel gan ddefnyddio React - sy'n gyfuniad anhygoel.

Blog gyda Gridsome

Gridsome ar gyfer Vue… Iawn, roedd gennym ni hwnnw eisoes gyda Next/Nuxt.
Ond mae'r un peth yn wir am Gridsome a Gatsby. Mae'r ddau yn defnyddio GraphQL fel eu haen ddata, ond mae Gridsome yn defnyddio VueJS. Mae hefyd yn gynhyrchydd gwefan sefydlog anhygoel i'ch helpu chi i greu blogiau gwych:

Beth fyddwch chi'n ei ddysgu

Bydd y prosiect hwn yn eich dysgu sut i greu blog syml i ddechrau gyda Gridsome, GraphQL a Markdown. Mae hefyd yn esbonio sut i ddefnyddio cais trwy Netlify.

Pentwr technoleg a nodweddion

• gridsome
• Vue
• GraffQL
• Markdown
• rhwydi

Yn sicr nid dyma'r tiwtorial mwyaf cyflawn, ond mae'n cwmpasu cysyniadau sylfaenol Gridsome a Markdown a gall fod yn fan cychwyn da.

Chwaraewr sain tebyg i SoundCloud gan ddefnyddio Quasar

Mae Quasar yn fframwaith Vue arall y gellir ei ddefnyddio i adeiladu apiau symudol. Yn y prosiect hwn, byddwch yn creu cymhwysiad chwaraewr sain fel:

Beth fyddwch chi'n ei ddysgu

Er bod prosiectau eraill yn canolbwyntio'n bennaf ar apiau gwe, bydd yr un hwn yn dangos i chi sut i adeiladu ap symudol gan ddefnyddio fframwaith Vue a Quasar.
Dylai fod gennych chi Cordova sy'n gweithio eisoes gyda Android Studio / Xcode wedi'i sefydlu. Os na, mae gan y llawlyfr ddolen i wefan Quasar lle maen nhw'n dangos i chi sut i sefydlu popeth.

Pentwr technoleg a nodweddion

• Quasar
• Vue
• Cordova
• TonSyrffwr
• Cydrannau UI

prosiect bach, gan ddangos galluoedd Quasar ar gyfer adeiladu cymwysiadau symudol.

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

Siâp cerdyn credyd cŵl gyda micro-ryngweithiadau llyfn a phleserus. Yn cynnwys fformatio rhifau, dilysu a chanfod math o gerdyn yn awtomatig. Mae wedi'i adeiladu ar Vue.js ac mae hefyd yn gwbl ymatebol. (Gallwch weld yma.)

ffurflen cerdyn credyd

Beth fyddwch chi'n ei ddysgu:

• Prosesu a dilysu ffurflenni
• Trin digwyddiadau (er enghraifft, pan fydd meysydd yn newid)
• Deall sut i arddangos a gosod elfennau ar y dudalen, yn enwedig y wybodaeth cerdyn credyd sy'n ymddangos ar ben y ffurflen

siart bar

Siart neu graff yw histogram sy'n cynrychioli data categorïaidd gyda barrau hirsgwar gydag uchder neu hyd yn gymesur â'r gwerthoedd y maent yn eu cynrychioli.

Gellir eu cymhwyso'n fertigol neu'n llorweddol. Weithiau gelwir siart bar fertigol yn siart llinell.

Beth fyddwch chi'n ei ddysgu:

• Arddangos data mewn ffordd strwythuredig a dealladwy
• Yn ogystal: Dysgwch sut i ddefnyddio'r elfen canvas a sut i dynnu elfennau ag ef

Yma gallwch ddod o hyd i ddata poblogaeth y byd. Maent yn cael eu didoli yn ôl blwyddyn.

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

Yn ôl yn 2016, cyflwynodd Twitter yr animeiddiad anhygoel hwn ar gyfer ei drydariadau. O 2019, mae'n dal i edrych y rhan, felly beth am greu un eich hun?

Beth fyddwch chi'n ei ddysgu:

• Gweithio gyda phriodoledd CSS keyframes
• Trin ac animeiddio elfennau HTML
• Cyfuno JavaScript, HTML a CSS

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

Nid oes unrhyw beth ffansi yma - dim ond rhestr ogoneddus yw ystorfeydd GitHub.
Y nod yw arddangos yr ystorfeydd a chaniatáu i'r defnyddiwr eu hidlo. Defnydd API swyddogol GitHub i gael storfeydd ar gyfer pob defnyddiwr.

Tudalen proffil GitHub - github.com/indreklasn

Beth fyddwch chi'n ei ddysgu:

• Derbyn data gan API
• Arddangos data o API
• Hidlo a dangos data perthnasol ar gyfer pob chwiliad
• Dewisol: Os ydych chi'n barod am her, defnyddiwch API v4, a adeiladwyd gan ddefnyddio GraphQL. Os ydych chi eisiau dysgu GraphQL, ewch i un o fy erthyglau blaenorol.

Чаты в стиле Reddit

Mae sgyrsiau yn ffordd boblogaidd o gyfathrebu oherwydd eu bod yn syml ac yn hawdd eu defnyddio. Ond beth sy'n tanio ystafelloedd sgwrsio modern mewn gwirionedd? WebSocedi!

Beth fyddwch chi'n ei ddysgu:

• Defnyddiwch WebSockets, cyfathrebu amser real a diweddariadau data
• Gweithio gyda lefelau mynediad defnyddwyr (er enghraifft, perchennog sianel sgwrsio sydd â'r rôl admin, ac eraill yn yr ystafell - user)
• Prosesu a dilysu ffurflenni - cofiwch, y ffenestr sgwrsio ar gyfer anfon neges yw input
• Creu ac ymuno â gwahanol sgyrsiau
• Gweithio gyda negeseuon personol. Gall defnyddwyr sgwrsio â defnyddwyr eraill yn breifat. Yn y bôn, byddwch yn sefydlu cysylltiad WebSocket rhwng dau ddefnyddiwr.

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

Yr hyn sy'n gwneud y llywio hwn yn unigryw yw bod y cynhwysydd popover yn trawsnewid i gyd-fynd â'r cynnwys. Mae ceinder i'r trawsnewid hwn o'i gymharu â'r ymddygiad traddodiadol o agor a chau popover newydd.

Beth fyddwch chi'n ei ddysgu:

• Cyfuno animeiddiadau CSS gyda thrawsnewidiadau
• Pylu'r cynnwys a chymhwyso dosbarth gweithredol i'r elfen arnawf

Pacman

Creu eich fersiwn eich hun o Pacman. Mae hon yn ffordd wych o gael syniad o sut mae gemau'n cael eu datblygu a deall y pethau sylfaenol. Defnyddiwch fframwaith JavaScript, React neu Vue.

Byddwch chi'n dysgu:

• Sut mae elfennau'n symud
• Sut i benderfynu pa allweddi i'w pwyso
• Sut i bennu moment y gwrthdrawiad
• Gallwch fynd ymhellach ac ychwanegu rheolaeth symudiad ysbrydion

Fe welwch enghraifft o'r prosiect hwn yn yr ystorfa GitHub

rheoli defnyddwyr

Prosiect yn yr ystorfa GitHub

Bydd creu cymhwysiad math CRUD ar gyfer gweinyddu defnyddwyr yn dysgu hanfodion datblygiad i chi. Mae hyn yn arbennig o ddefnyddiol i ddatblygwyr newydd.

Byddwch chi'n dysgu:

• Beth yw llwybro
• Sut i drin ffurflenni mewnbynnu data a gwirio beth mae'r defnyddiwr wedi'i nodi
• Sut i weithio gyda'r gronfa ddata - creu, darllen, diweddaru a dileu gweithredoedd

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

Prosiect yn yr ystorfa GitHub

Os ydych chi am greu apiau, dechreuwch gydag ap tywydd. Gellir cwblhau'r prosiect hwn gan ddefnyddio Swift.

Yn ogystal â chael profiad o adeiladu cais, byddwch yn dysgu:

• Sut i weithio gyda'r API
• Sut i ddefnyddio geolocation
• Gwnewch eich cais yn fwy deinamig trwy ychwanegu mewnbwn testun. Ynddo, bydd defnyddwyr yn gallu mynd i mewn i'w lleoliad i wirio'r tywydd mewn lleoliad penodol.

Bydd angen API arnoch chi. I gael data tywydd, defnyddiwch yr API OpenWeather. Mwy o wybodaeth am yr API OpenWeather yma.

Окно чата

Fy ffenestr sgwrsio ar waith, agorwch mewn dau dab porwr

Mae creu ffenestr sgwrsio yn ffordd berffaith o ddechrau gyda socedi. Mae'r dewis o stac technoleg yn enfawr. Mae Node.js, er enghraifft, yn berffaith.

Byddwch yn dysgu sut mae socedi'n gweithio a sut i'w rhoi ar waith. Dyma brif fantais y prosiect hwn.

Os ydych chi'n ddatblygwr Laravel sydd eisiau gweithio gyda socedi, darllenwch fy erthygl

GitLab CI

Ffynhonnell

Os ydych chi'n newydd i integreiddio parhaus (CI), chwaraewch o gwmpas gyda GitLab CI. Sefydlwch ychydig o amgylcheddau a cheisiwch redeg cwpl o brofion. Nid yw'n brosiect anodd iawn, ond rwy'n siŵr y byddwch chi'n dysgu llawer ohono. Mae llawer o dimau datblygu bellach yn defnyddio CI. Mae gwybod sut i'w ddefnyddio yn ddefnyddiol.

Byddwch chi'n dysgu:

• Beth yw GitLab CI
• Sut i ffurfweddu .gitlab-ci.ymlsy'n dweud wrth y defnyddiwr GitLab beth i'w wneud
• Sut i'w ddefnyddio i amgylcheddau eraill

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

Gwnewch sgraper sy'n dadansoddi semanteg gwefannau ac yn creu eu sgôr. Er enghraifft, gallwch wirio am dagiau alt coll mewn delweddau. Neu gwiriwch a oes gan y dudalen meta tagiau SEO. Gellir creu sgrapiwr heb ryngwyneb defnyddiwr.

Byddwch chi'n dysgu:

• Sut mae sgraper yn gweithio?
• Sut i greu dewiswyr DOM
• Sut i ysgrifennu algorithm
• Os nad ydych chi am stopio yno, crëwch ryngwyneb defnyddiwr. Gallwch hefyd greu adroddiad ar bob gwefan rydych chi'n ei gwirio.

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

Ffynhonnell

Mae canfod teimladau ar gyfryngau cymdeithasol yn ffordd wych o gael eich cyflwyno i ddysgu peirianyddol.

Gallwch chi ddechrau trwy ddadansoddi un rhwydwaith cymdeithasol yn unig. Mae pawb fel arfer yn dechrau gyda Twitter.

Os oes gennych brofiad o ddysgu peirianyddol eisoes, ceisiwch gasglu data o wahanol rwydweithiau cymdeithasol a'u cyfuno.

Byddwch chi'n dysgu:

• Beth yw dysgu peirianyddol

Клон Trello

clôn Trello o Indrek Lasn.

Beth fyddwch chi'n ei ddysgu:

• Trefnu llwybrau prosesu ceisiadau (Llwybro).
• Llusgo a gollwng.
• Sut i greu gwrthrychau newydd (byrddau, rhestrau, cardiau).
• Prosesu a gwirio data mewnbwn.
• O ochr y cleient: sut i ddefnyddio storfa leol, sut i arbed data i storio lleol, sut i ddarllen data o storfa leol.
• O ochr y gweinydd: sut i ddefnyddio cronfeydd data, sut i arbed data yn y gronfa ddata, sut i ddarllen data o'r gronfa ddata.

Dyma enghraifft o ystorfa, wedi'i wneud yn React+Redux.

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

Ystorfa Github.

Cymhwysiad CRUD syml, sy'n ddelfrydol ar gyfer dysgu'r pethau sylfaenol. Gadewch i ni ddysgu:

• Creu defnyddwyr, rheoli defnyddwyr.
• Rhyngweithio â'r gronfa ddata - creu, darllen, golygu, dileu defnyddwyr.
• Dilysu mewnbwn a gweithio gyda ffurflenni.

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

Ystorfa Github.

Unrhyw beth: Swift, Amcan-C, React Native, Java, Kotlin.

Gadewch i ni astudio:

• Sut mae cymwysiadau brodorol yn gweithio.
• Sut i adfer data o'r API.
• Sut mae cynlluniau tudalennau brodorol yn gweithio.
• Sut i weithio gydag efelychwyr symudol.

Rhowch gynnig ar yr API hwn. Os byddwch chi'n dod o hyd i rywbeth gwell, ysgrifennwch y sylwadau.

Os oes gennych ddiddordeb, dyma fe dyma tiwtorial.

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

Yn dechnegol, nid yw hwn yn gymhwysiad, ond mae'n dasg ddefnyddiol iawn deall sut mae pecyn gwe yn gweithio o'r tu mewn. Nawr nid “blwch du” fydd hwn, ond offeryn dealladwy.

Gofynion:

• Llunio es7 i es5 (sylfaenol).
• Llunio jsx i js - neu - .vue i .js (bydd rhaid dysgu llwythwyr)
• Sefydlu gweinydd dev webpack ac ail-lwytho modiwlau poeth. (mae vue-cli a create-react-app yn defnyddio'r ddau)
• Defnyddiwch Heroku, now.sh neu Github, dysgwch sut i ddefnyddio prosiectau pecynnau gwe.
• Gosodwch eich hoff ragbrosesydd i lunio css - scss, less, stylus.
• Dysgwch sut i ddefnyddio delweddau a svgs gyda webpack.

Mae hwn yn adnodd anhygoel ar gyfer dechreuwyr pur.

Клон Hackernews

Mae'n ofynnol i bob Jedi wneud ei Hackernews ei hun.

Beth fyddwch chi'n ei ddysgu ar hyd y ffordd:

• Sut i ryngweithio ag API hackernews.
• Sut i greu rhaglen un dudalen.
• Sut i weithredu nodweddion fel gwylio sylwadau, sylwadau unigol, proffiliau.
• Trefnu llwybrau prosesu ceisiadau (Llwybro).

Тудушечка

TodoMVC.

O ddifrif? Tudushka? Mae yna filoedd ohonyn nhw. Ond credwch chi fi, mae yna reswm dros y poblogrwydd hwn.
Mae ap Tudu yn ffordd wych o sicrhau eich bod yn deall y pethau sylfaenol. Ceisiwch ysgrifennu un cais mewn Javascript fanila ac un yn eich hoff fframwaith.

Dysgwch:

• Creu tasgau newydd.
• Gwiriwch fod y meysydd wedi'u llenwi.
• Tasgau hidlo (cwblhawyd, gweithredol, i gyd). Defnydd filter и reduce.
• Deall hanfodion Javascript.

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

Ystorfa Github.

Cymwynasgar iawn i ddeall llusgo a gollwng api.

Gadewch i ni ddysgu:

• Llusgo a gollwng API
• Creu UI cyfoethog

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

Byddwch yn deall sut mae cymwysiadau gwe a chymwysiadau brodorol yn gweithio, a fydd yn eich gosod ar wahân i'r màs llwyd.

Yr hyn y byddwn yn ei astudio:

• Socedi gwe (negeseuon gwib)
• Sut mae cymwysiadau brodorol yn gweithio.
• Sut mae templedi'n gweithio mewn cymwysiadau brodorol.
• Trefnu llwybrau prosesu ceisiadau mewn cymwysiadau brodorol.

Golygydd testun

Pwrpas golygydd testun yw lleihau ymdrech defnyddwyr sy'n ceisio trosi eu fformatio yn farcio HTML dilys. Mae golygydd testun da yn caniatáu i ddefnyddwyr fformatio testun mewn gwahanol ffyrdd.

Ar ryw adeg, mae pawb wedi defnyddio golygydd testun. Felly pam lai creu eich hun?

Клон Reddit

reddit yn gydgasglu newyddion cymdeithasol, sgôr cynnwys gwe a safle trafod.

Mae Reddit yn cymryd y rhan fwyaf o'm hamser, ond rwy'n parhau i dreulio amser arno. Mae creu clôn Reddit yn ffordd effeithiol o ddysgu rhaglennu (wrth bori Reddit ar yr un pryd).

Mae Reddit yn darparu cyfoethog iawn i chi API. Peidiwch â gadael unrhyw nodweddion allan na gwneud pethau ar hap. Yn y byd go iawn gyda chleientiaid a chwsmeriaid, ni allwch weithio ar hap, neu byddwch yn colli eich swydd yn gyflym.

Bydd cleientiaid craff yn sylweddoli ar unwaith bod y swydd yn cael ei gwneud yn wael a byddant yn dod o hyd i rywun arall.

API Reddit

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

Os ydych chi'n ysgrifennu cod Javascript, mae'n debyg y byddwch chi'n defnyddio rheolwr pecyn. Mae rheolwr pecyn yn caniatáu ichi ailddefnyddio'r cod presennol y mae pobl eraill wedi'i ysgrifennu a'i gyhoeddi.

Bydd deall cylch datblygu llawn pecyn yn rhoi profiad da iawn. Mae yna lawer o bethau y mae angen i chi eu gwybod wrth gyhoeddi cod. Mae angen i chi feddwl am ddiogelwch, fersiwn semantig, graddadwyedd, confensiynau enwi a chynnal a chadw.

Gall y pecyn fod yn unrhyw beth. Os nad oes gennych syniad, crëwch eich Lodash eich hun a'i gyhoeddi.

Lodash: lodash.com

Mae cael rhywbeth rydych chi wedi'i wneud ar-lein yn eich rhoi 10% yn uwch na rhai eraill. Dyma rai adnoddau defnyddiol am ffynonellau a phecynnau agored.

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

cwricwlwm Cyngor Sir y Fflint

Mae freeCodecamp wedi casglu llawer cwrs rhaglennu cynhwysfawr.

Sefydliad di-elw yw freeCodeCamp. Mae'n cynnwys llwyfan dysgu rhyngweithiol ar y we, fforwm cymunedol ar-lein, ystafelloedd sgwrsio, cyhoeddiadau Canolig, a sefydliadau lleol sy'n bwriadu gwneud datblygiad gwe dysgu yn hygyrch i bawb.

Byddwch yn fwy na chymwys ar gyfer eich swydd gyntaf os llwyddwch i gwblhau'r cwrs cyfan.

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

Mae'r protocol HTTP yn un o'r prif brotocolau y mae cynnwys yn teithio drwyddo ar y Rhyngrwyd. Defnyddir gweinyddwyr HTTP i wasanaethu cynnwys statig fel HTML, CSS, a JS.

Bydd gallu gweithredu'r protocol HTTP o'r dechrau yn ehangu eich gwybodaeth am sut mae pethau'n rhyngweithio.

Er enghraifft, os ydych chi'n defnyddio NodeJs, yna rydych chi'n gwybod bod Express yn darparu gweinydd HTTP.

Er gwybodaeth, gweler a allwch chi:

• Sefydlu gweinydd heb ddefnyddio unrhyw lyfrgelloedd
• Rhaid i'r gweinydd wasanaethu cynnwys HTML, CSS a JS.
• Gweithredu llwybrydd o'r dechrau
• Monitro newidiadau a diweddaru'r gweinydd

Os nad ydych chi'n gwybod pam, defnyddiwch Ewch lang a cheisio creu gweinydd HTTP Caddy o'r dechrau.

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

Rydyn ni i gyd yn cymryd nodiadau, onid ydyn ni?

Gadewch i ni greu app nodiadau. Mae angen i'r rhaglen arbed nodiadau a'u cysoni â'r gronfa ddata. Adeiladwch ap brodorol gan ddefnyddio Electron, Swift, neu beth bynnag rydych chi'n ei hoffi a beth sy'n gweithio i'ch system.

Mae croeso i chi gyfuno hyn â'r her gyntaf (golygydd testun).

Fel bonws, ceisiwch gysoni eich fersiwn bwrdd gwaith gyda'r fersiwn we.

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

Pwy sydd ddim yn gwrando ar bodlediadau?

Creu cymhwysiad gwe gyda'r swyddogaeth ganlynol:

• Creu cyfrif
• Chwilio Podlediadau
• Graddiwch a thanysgrifiwch i bodlediadau
• Stopio a chwarae, newid cyflymder, swyddogaethau ymlaen ac yn ôl am 30 eiliad.

Ceisiwch ddefnyddio'r iTunes API fel man cychwyn. Os ydych yn gwybod am unrhyw adnoddau eraill, postiwch y sylwadau.

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

Cipio sgrin

Helo! Rwy'n ffilmio fy sgrin ar hyn o bryd!

Creu bwrdd gwaith neu ap gwe sy'n eich galluogi i ddal eich sgrin ac arbed y clip fel .gif

Yma rhai awgrymiadausut i gyflawni hyn.

Ffynonellau

• 5 prosiect hyfforddi mwy beiddgar i'r datblygwr (Haen, Squoosh, Cyfrifiannell, Ymlusgo Gwefan, Chwaraewr Cerddoriaeth)
• 9 prosiect i fireinio eich sgiliau Pen Blaen
• Chwe thasg ar gyfer datblygwr Pen Blaen
• Ymarfer hwyliog i ddatblygwr
• 8 prosiect addysgol
• Rhestr arall o brosiectau i ymarfer arnynt

Ffynhonnell: hab.com