1. Clona notiunii
Aplicația Notion este iubită de mulți; vă permite să vă optimizați fluxul de lucru, să lucrați cu documente, să programați sarcini și să sincronizați datele între dispozitive.
Ce veți învăța creând o clonă Notion:
- . Utilizatorul poate „prinde cu mouse-ul” trasabil element și plasați-l în picurabil zona.
- Cum să sincronizezi datele în timp real între computer și smartphone.
- Permitem utilizatorilor să creeze, să citească, să actualizeze și să șteargă înregistrări, antrenând astfel abilitățile CRUD.
Articolul a fost tradus cu sprijinul EDISON Software, care și .
2. Repl.it clona
Repl.it este un instrument pentru editarea codului colaborativ în timp real. Puteți alege mai multe limbi: JavaScript, Python, Go și rulați codul direct în browser. Foarte util pentru demonstrații rapide și interviuri cu coduri.
Ce veți învăța prin crearea unei clone Repl.it:
- Cum să rulați și să executați codul (partea serverului) în browser (partea clientului).
- Citiți datele de intrare (codul sursă) și afișați rezultatul execuției.
- Cum să creați fișiere și foldere pe web și să salvați rezultatele.
- Cum să evidențiezi sintaxa codului.
3. Clonarea Google Foto
Google Foto este un serviciu pentru stocarea și partajarea fotografiilor.
Orice aplicație foto modernă poate îndeplini funcții de bază: încărcare, decupare etc. Oamenii doresc să-și creeze propriile avatare și să partajeze fotografii cu pisici, așa că trebuie să poți lucra cu imagini.
Ce veți învăța creând o clonă Google Foto:
- Cum să creați imagini receptive pe telefoane, tablete, laptopuri și chiar ecrane TV gigantice.
- Cum să gestionați încărcările de imagini, în special imaginile mari (>1MB) și încărcările în bloc.
- Procesați fișiere imagine, decupați și redimensionați fotografiile pentru miniaturi sau când deschideți o galerie.
- bonus: cum să stocați imagini în cloud sau în baza de date locală.
4. Clona Gifsky
convertește video în GIF folosind funcții pentru palete eficiente încrucișate și anti-aliasing temporal. Rezultatul este un GIF cu mii de flori pe cadru.
Ce vei învăța creând o clonă Gifski:
- Cum se convertesc fișiere video (.mp4 în .gif).
- Cum să utilizați API-ul HTML Drag and Drop.
- Cum funcționează optimizarea și procesarea imaginii.
Nota: și este pe GitHub!
5. Monitorizarea ratelor criptomonedei
React Tracker nativ pentru criptomonede
Ce veți învăța prin crearea unui instrument de urmărire a cursului valutar:
- Cum să lucrați cu API-ul și să primiți date de la distanță de la API.
- Cum să afișați datele ca o listă.
- bonus: Dacă ești interesat, am scris recent pentru criptomonede cu React Native.
Nota: Aici .
O selecție de proiecte din publicațiile anterioare.
strat
Stratul este o comunitate în care toată lumea poate desena un pixel pe o „tablă” comună. Ideea originală s-a născut pe Reddit. Comunitatea r/Layer este o metaforă a creativității împărtășite, că toată lumea poate fi un creator și poate contribui la o cauză comună.
Ce veți învăța când vă creați propriul proiect Layer:
- Cum funcționează pânza JavaScript A ști cum să operați o pânză este o abilitate critică în multe aplicații.
- Cum să coordonezi permisiunile utilizatorului. Fiecare utilizator poate desena un pixel la fiecare 15 minute fără a fi nevoie să se conecteze.
- Creați sesiuni de cookie-uri.
Squoosh
Squoosh este o aplicație de compresie a imaginii cu multe opțiuni avansate.
GIF 20 MB
Prin crearea propriei versiuni de Squoosh, veți învăța:
- Cum să lucrați cu dimensiunile imaginii
- Aflați elementele de bază ale API-ului Drag'n'Drop
- Înțelegeți cum funcționează API-ul și ascultătorii de evenimente
- Cum să încărcați și să exportați fișiere
Nota: Compresorul de imagine este local. Nu este necesar să trimiteți date suplimentare către server. Poti avea compresorul acasa, sau il poti folosi pe un server, la alegerea ta.
calculator
Haide? Serios? Calculator? Da, exact, un calculator. Înțelegerea elementelor de bază ale operațiilor matematice și a modului în care acestea funcționează împreună este o abilitate critică pentru simplificarea aplicațiilor. Mai devreme sau mai târziu va trebui să te ocupi de numere și cu cât mai devreme, cu atât mai bine.
Creându-ți propriul calculator, vei învăța:
- Lucrați cu numere și operații matematice
- Exersați cu API-ul pentru ascultători de evenimente
- Cum să aranjezi elementele, să înțelegi stilurile
Crawler (motor de căutare)
Toată lumea a folosit un motor de căutare, așa că de ce să nu-l creezi pe al tău? Crawlerele sunt necesare pentru a căuta informații. Toată lumea le folosește în fiecare zi și cererea pentru această tehnologie și specialiști nu va face decât să crească în timp.
motor de căutare Google
Ce veți învăța prin crearea propriului motor de căutare:
- Cum funcționează crawlerele
- Cum să indexați site-urile și cum să le clasați în funcție de rating și reputație
- Cum să stocați site-urile indexate într-o bază de date și cum să lucrați cu baza de date
Player muzical (Spotify, Apple Music)
Toată lumea ascultă muzică - este doar o parte integrantă a vieții noastre. Să creăm un player muzical pentru a înțelege mai bine cum funcționează mecanismele de bază ale unei platforme moderne de streaming de muzică.
Spotify
Ce veți învăța prin crearea propriei platforme de streaming de muzică:
- Cum să lucrați cu API-ul. utilizați API de la Spotify sau Apple Music
- Cum să redați, să întrerupeți sau să derulați înapoi la piesa următoare/anterioră
- Cum se schimbă volumul
- Cum să gestionați rutarea utilizatorilor și istoricul browserului
Aplicație de căutare de filme folosind React (cu cârlige)
Primul lucru cu care puteți începe este să creați o aplicație de căutare de filme folosind React. Mai jos este o imagine a cum va arăta aplicația finală:
Ce vei învăța
Prin construirea acestei aplicații, vă veți îmbunătăți abilitățile React utilizând API-ul Hooks relativ nou. Proiectul exemplu folosește componente React, o mulțime de cârlige, un API extern și, desigur, unele stiluri CSS.
Tehnică și caracteristici
- Reacționează cu cârlige
- creați-reacþioneazã aplicație
- JSX
- CSS
Fără a folosi cursuri, aceste proiecte vă oferă punctul de intrare perfect în React funcțional și vă vor ajuta cu siguranță în 2020. puteți găsi . Urmați instrucțiunile sau creați-l al dvs.
Aplicația de chat cu Vue
Un alt proiect grozav de făcut este să creezi o aplicație de chat folosind biblioteca mea JavaScript preferată: VueJS. Aplicația va arăta cam așa:
Ce vei învăța
În acest tutorial, veți învăța cum să creați o aplicație Vue de la zero - crearea de componente, gestionarea stării, crearea de rute, conectarea la servicii terțe și chiar gestionarea autentificării.
Tehnică și caracteristici
- Vue
- vuex
- Router Vue
- Vizualizare CLI
- Pusher
- CSS
Acesta este un proiect foarte grozav pentru a începe cu Vue sau pentru a vă îmbunătăți abilitățile existente pentru a intra în dezvoltare în 2020. puteți găsi .
Aplicație de vreme frumoasă cu Angular 8
Acest exemplu vă va ajuta să creați o aplicație meteo frumoasă folosind Angular 8:
Ce vei învăța
Acest proiect vă va învăța abilități valoroase în construirea de aplicații de la zero - de la proiectare până la dezvoltare, până la o aplicație pregătită pentru implementare.
Tehnică și caracteristici
- Unghiular 8
- Firebase
- Redare pe partea serverului
- CSS cu Grid și Flexbox
- Mobil prietenos și adaptabilitate
- Mod întunecat
- Interfață frumoasă
Ceea ce îmi place cu adevărat la acest proiect atotcuprinzător este că nu studiezi lucrurile izolat. În schimb, înveți întregul proces de dezvoltare, de la proiectare până la implementarea finală.
Aplicație To-Do folosind Svelte
Svelte este ca noul copil în abordarea bazată pe componente - cel puțin similar cu React, Vue și Angular. Și acesta este unul dintre cele mai tari produse noi pentru 2020.
Aplicațiile To-Do nu sunt neapărat subiectul cel mai fierbinte, dar vă va ajuta cu adevărat să vă îmbunătățiți abilitățile Svelte. Va arata asa:
Ce vei învăța
Acest tutorial vă va arăta cum să creați o aplicație folosind Svelte 3, de la început până la sfârșit. Veți folosi componente, stiluri și handlere de evenimente
Tehnică și caracteristici
- Svelt 3
- Componente
- Stilizarea cu CSS
- Sintaxa ES 6
Nu există multe proiecte bune Svelte starter, așa că am găsit .
Aplicație de comerț electronic folosind Next.js
Next.js este cel mai popular cadru pentru construirea de aplicații React care acceptă redarea de pe partea serverului.
Acest proiect vă va arăta cum să creați o aplicație de comerț electronic care arată astfel:
Ce vei învăța
În acest proiect, veți învăța cum să dezvoltați cu Next.js - să creați pagini și componente noi, să extrageți date și să stilați și să implementați o aplicație Next.
Tehnică și caracteristici
- Next.js
- Componente și pagini
- Eșantionarea datelor
- stilizare
- Implementarea proiectului
- SSR și SPA
Este întotdeauna grozav să ai un exemplu real, cum ar fi o aplicație de comerț electronic, pentru a învăța ceva nou. Puteți .
Blog multilingv cu drepturi depline cu Nuxt.js
Nuxt.js este pentru Vue, ceea ce este Next.js pentru React: un cadru excelent pentru combinarea puterii randării pe server și a aplicațiilor cu o singură pagină
Aplicația finală pe care o puteți crea va arăta astfel:
Ce vei învăța
În acest exemplu de proiect, veți învăța cum să creați un site web complet folosind Nuxt.js, de la configurarea inițială până la implementarea finală.
Profită de multe dintre caracteristicile interesante pe care le are de oferit Nuxt, cum ar fi paginile și componentele și stilul cu SCSS.
Tehnică și caracteristici
- Nuxt.js
- Componente și pagini
- Modul Storyblock
- Migurină
- Vuex pentru managementul statului
- SCSS pentru styling
- Nuxt middleware
, care include multe funcții excelente Nuxt.js. Îmi place personal să lucrez cu Nuxt, așa că ar trebui să-l încercați, deoarece vă va face, de asemenea, un excelent dezvoltator Vue.
Blog cu Gatsby
Gatsby este un excelent generator de site static folosind React și GraphQL. Acesta este rezultatul proiectului:
Ce vei învăța
În acest tutorial, veți învăța cum să utilizați Gatsby pentru a crea un blog pe care îl veți folosi pentru a vă scrie propriile articole folosind React și GraphQL.
Tehnică și caracteristici
- Gatsby
- Reacţiona
- GraphQL
- Pluginuri și teme
- MDX/Markdown
- Bootstrap CSS
- Template-uri
Dacă ți-ai dorit vreodată să începi un blog, despre cum să o faci folosind React și GraphQL.
Nu spun că WordPress este o alegere proastă, dar cu Gatsby puteți construi site-uri web de înaltă performanță folosind React - care este o combinație uimitoare.
Blog cu Gridsome
Gridsome pentru Vue... Bine, am avut deja asta cu Next/Nuxt.
Dar același lucru este valabil și pentru Gridsome și Gatsby. Ambele folosesc GraphQL ca strat de date, dar Gridsome folosește VueJS. Acesta este, de asemenea, un generator de site static uimitor care vă va ajuta să creați bloguri grozave:
Ce vei învăța
Acest proiect vă va învăța cum să creați un blog simplu pentru a începe cu Gridsome, GraphQL și Markdown. De asemenea, acoperă modul de implementare a unei aplicații prin Netlify.
Tehnică și caracteristici
- Minunat
- Vue
- GraphQL
- Reduceri
- Netlify
Acesta nu este cu siguranță cel mai cuprinzător tutorial, dar acoperă conceptele de bază ale Gridsome și .
Player audio asemănător SoundCloud folosind Quasar
Quasar este un alt framework Vue care poate fi folosit pentru a crea aplicații mobile. În acest proiect veți crea o aplicație de redare audio, de exemplu:
Ce vei învăța
În timp ce alte proiecte se concentrează în principal pe aplicații web, acesta vă va arăta cum să creați o aplicație mobilă folosind Vue și framework-ul Quasar.
Ar trebui să aveți deja Cordova care rulează cu Android Studio/Xcode configurat. Dacă nu, manualul are un link către site-ul Quasar, unde vă arată cum să configurați totul.
Tehnică și caracteristici
- Quasar
- Vue
- Cordova
- WaveSurfer
- Componentele UI
, demonstrând capacitățile Quasar pentru crearea de aplicații mobile.
Formular card de credit
O formă cool de card de credit cu micro-interacțiuni fluide și plăcute. Include formatarea numerelor, verificarea și detectarea automată a tipului de card. Este construit pe Vue.js și este, de asemenea, pe deplin receptiv. (Poti sa vezi .)
Ce vei învăța:
- Procesați și validați formularele
- Gestionați evenimente (de exemplu, când se schimbă câmpurile)
- Înțelegeți cum să afișați și să plasați elemente pe pagină, în special informațiile despre cardul de credit care apar în partea de sus a formularului
grafic de bare
O histogramă este o diagramă sau un grafic care reprezintă date categorice cu bare dreptunghiulare cu înălțimi sau lungimi proporționale cu valorile pe care le reprezintă.
Ele pot fi aplicate vertical sau orizontal. O diagramă cu bare verticale este uneori numită diagramă cu linii.
Ce vei învăța:
- Afișați datele într-un mod structurat și ușor de înțeles
- În plus: Aflați cum să utilizați elementul
canvasși cum să desenezi elemente cu el
puteți găsi date despre populația mondială. Sunt sortate pe an.
Animație de inimă Twitter
În 2016, Twitter a introdus această animație uimitoare pentru tweet-urile sale. Începând cu 2019, arată încă o parte, așa că de ce să nu creați unul singur?
Ce vei învăța:
- Lucrați cu atributul CSS
keyframes - Manipulați și animați elemente HTML
- Combinați JavaScript, HTML și CSS
Arhivele GitHub care pot fi căutate
Nu este nimic elegant aici – depozitele GitHub sunt doar o listă glorificată.
Scopul este de a afișa depozitele și de a permite utilizatorului să le filtreze. Utilizare pentru a obține depozite pentru fiecare utilizator.
Pagina de profil GitHub -
Ce vei învăța:
- Primiți date de la API
- Afișează datele din API
- Filtrați și afișați datele relevante pentru fiecare căutare
- Opțional: dacă ești pregătit pentru o provocare, folosește , construit folosind GraphQL. .
Chat-uri în stil Reddit
Chaturile sunt o modalitate populară de comunicare datorită simplității și ușurinței lor de utilizare. Dar ce alimentează cu adevărat camerele de chat moderne? WebSockets!
Ce vei învăța:
- Utilizați WebSockets, comunicare în timp real și actualizări de date
- Lucrați cu nivelurile de acces ale utilizatorilor (de exemplu, proprietarul unui canal de chat are rolul
admin, și alții în cameră -user) - Procesați și validați formularele - amintiți-vă, fereastra de chat pentru trimiterea unui mesaj este
input - Creați și alăturați-vă diferitelor chaturi
- Lucrați cu mesaje personale. Utilizatorii pot discuta cu alți utilizatori în mod privat. În esență, veți stabili o conexiune WebSocket între doi utilizatori.
Navigare în stil Stripe
Ceea ce face această navigare unică este că containerul popover se transformă pentru a se potrivi cu conținutul. Există o eleganță în această tranziție în comparație cu comportamentul tradițional de deschidere și închidere a unui nou popover.
Ce vei învăța:
- Combinați animațiile CSS cu tranzițiile
- Diminuați conținutul și aplicați clasa activă elementului plutit
Pacman
Creează-ți propria versiune de Pacman. Aceasta este o modalitate excelentă de a vă face o idee despre cum sunt dezvoltate jocurile și de a înțelege elementele de bază. Utilizați un cadru JavaScript, React sau Vue.
O sa inveti:
- Cum se mișcă elementele
- Cum să determinați ce taste să apăsați
- Cum se determină momentul coliziunii
- Puteți merge mai departe și puteți adăuga comenzi de mișcare fantomă
Veți găsi un exemplu al acestui proiect GitHub
managementul utilizatorilor
Proiect GitHub
Crearea unei aplicații de tip CRUD pentru administrarea utilizatorilor vă va învăța elementele de bază ale dezvoltării. Acest lucru este util în special pentru dezvoltatorii noi.
O sa inveti:
- Ce este rutarea
- Cum să gestionați formularele de introducere a datelor și să verificați ce a introdus utilizatorul
- Cum să lucrați cu baza de date - creați, citiți, actualizați și ștergeți acțiuni
Verificați vremea în locația dvs
Proiect GitHub
Dacă doriți să creați aplicații, începeți cu o aplicație meteo. Acest proiect poate fi finalizat folosind Swift.
Pe lângă dobândirea experienței în construirea unei aplicații, veți învăța:
- Cum să lucrați cu API-ul
- Cum se utilizează geolocalizarea
- Faceți aplicația mai dinamică adăugând introducerea textului. În acesta, utilizatorii vor putea introduce locația lor pentru a verifica vremea într-o anumită locație.
Veți avea nevoie de un API. Pentru a obține date meteo, utilizați API-ul OpenWeather. Mai multe informații despre API-ul OpenWeather.
Fereastra de chat
Fereastra mea de chat în acțiune, deschisă în două file ale browserului
Crearea unei ferestre de chat este modalitatea perfectă de a începe cu socket-urile. Alegerea stivei de tehnologie este uriașă. Node.js, de exemplu, este perfect.
Veți învăța cum funcționează socket-urile și cum să le implementați. Acesta este principalul avantaj al acestui proiect.
Dacă sunteți un dezvoltator Laravel care dorește să lucreze cu socket-uri, citiți-mi
GitLab CI
Dacă sunteți nou în integrarea continuă (CI), jucați-vă cu GitLab CI. Configurați câteva medii și încercați să executați câteva teste. Nu este un proiect foarte dificil, dar sunt sigur că vei învăța multe din el. Multe echipe de dezvoltare folosesc acum CI. Este util să știi cum să-l folosești.
O sa inveti:
- Ce este GitLab CI
- Cum se configurează
.gitlab-ci.ymlcare îi spune utilizatorului GitLab ce trebuie să facă - Cum se implementează în alte medii
Analizor de site-uri web
Faceți un răzuitor care analizează semantica site-urilor web și creează evaluarea acestora. De exemplu, puteți verifica etichetele alt lipsă din imagini. Sau verificați dacă pagina are metaetichete SEO. Un scraper poate fi creat fără o interfață cu utilizatorul.
O sa inveti:
- Cum funcționează racleta?
- Cum se creează selectoare DOM
- Cum se scrie un algoritm
- Dacă nu doriți să vă opriți aici, creați o interfață cu utilizatorul. De asemenea, puteți crea un raport pe fiecare site web pe care îl verificați.
Detectarea sentimentelor pe rețelele sociale
Detectarea sentimentelor pe rețelele sociale este o modalitate excelentă de a te familiariza cu învățarea automată.
Puteți începe prin a analiza doar o singură rețea socială. De obicei, toată lumea începe cu Twitter.
Dacă aveți deja experiență cu învățarea automată, încercați să colectați date din diferite rețele sociale și să le combinați.
O sa inveti:
- Ce este învățarea automată
Clona Trello
Ce vei invata:
- Organizarea rutelor de procesare a cererilor (Routing).
- Tragere și plasare.
- Cum să creați noi obiecte (tablete, liste, carduri).
- Prelucrarea și verificarea datelor de intrare.
- Din partea clientului: cum să utilizați stocarea locală, cum să salvați datele în stocarea locală, cum să citiți datele din stocarea locală.
- Din partea serverului: cum să utilizați bazele de date, cum să salvați datele în baza de date, cum să citiți datele din baza de date.
, realizat în React+Redux.
Panoul Administratorului
O aplicație CRUD simplă, ideală pentru a învăța elementele de bază. Să învățăm:
- Creați utilizatori, gestionați utilizatori.
- Interacționați cu baza de date - creați, citiți, editați, ștergeți utilizatori.
- Validarea introducerii și lucrul cu formulare.
Tracker criptomonede (aplicație mobilă nativă)
Orice: Swift, Objective-C, React Native, Java, Kotlin.
Sa invatam:
- Cum funcționează aplicațiile native.
- Cum să preluați date din API.
- Cum funcționează aspectele native ale paginilor.
- Cum să lucrați cu simulatoare mobile.
. Dacă găsești ceva mai bun, scrie în comentarii.
Dacă ești interesat, iată-l .
Configurați-vă propria configurație webpack de la zero
Din punct de vedere tehnic, aceasta nu este o aplicație, dar este o sarcină foarte utilă pentru a înțelege cum funcționează webpack din interior. Acum nu va fi o „cutie neagră”, ci un instrument de înțeles.
Cerinte:
- Compilați es7 la es5 (de bază).
- Compilați jsx în js - sau - .vue în .js (va trebui să învățați încărcătoare)
- Configurați serverul de dezvoltare webpack și reîncărcarea modulului cald. (vue-cli și create-react-app folosesc ambele)
- Folosiți Heroku, now.sh sau Github, aflați cum să implementați proiecte webpack.
- Configurați preprocesorul preferat pentru a compila css - scss, less, stylus.
- Aflați cum să utilizați imagini și svg-uri cu webpack.
Clona Hackernews
Fiecărui Jedi i se cere să-și facă propriul Hackernews.
Ce vei învăța pe parcurs:
- Cum să interacționați cu API-ul hackernews.
- Cum se creează o aplicație cu o singură pagină.
- Cum să implementați funcții precum vizualizarea comentariilor, comentarii individuale, profiluri.
- Organizarea rutelor de procesare a cererilor (Routing).
Tudushechka
Serios? Tudushka? Sunt mii. Dar crede-mă, există un motiv pentru această popularitate.
Aplicația Tudu este o modalitate excelentă de a vă asigura că înțelegeți elementele de bază. Încercați să scrieți o aplicație în vanilla Javascript și una în cadrul dvs. preferat.
Învăța:
- Creați sarcini noi.
- Verificați dacă câmpurile sunt completate.
- Filtrați sarcini (finalizate, active, toate). Utilizare
filterиreduce. - Înțelegeți elementele de bază ale Javascript.
Listă sortabilă prin glisare și plasare
Foarte util de înțeles .
Să învățăm:
- Trageți și plasați API-ul
- Creați interfețe de utilizare bogate
Clona Messenger (aplicație nativă)
Veți înțelege cum funcționează atât aplicațiile web, cât și aplicațiile native, ceea ce vă va diferenția de masa gri.
Ce vom studia:
- Prize web (mesaje instantanee)
- Cum funcționează aplicațiile native.
- Cum funcționează șabloanele în aplicațiile native.
- Organizarea rutelor de procesare a cererilor in aplicatii native.
Editor de text
Scopul unui editor de text este de a reduce efortul utilizatorilor care încearcă să-și transforme formatarea în markup HTML valid. Un editor de text bun permite utilizatorilor să formateze textul în moduri diferite.
La un moment dat, toată lumea a folosit un editor de text. De ce nu ?
Clona Reddit
este un site de agregare de știri sociale, de evaluare a conținutului web și de discuții.
Reddit îmi ocupă cea mai mare parte a timpului, dar continui să petrec cu el. Crearea unei clone Reddit este o modalitate eficientă de a învăța programarea (în timp ce răsfoiți Reddit în același timp).
Reddit vă oferă un foarte bogat. Nu lăsați deoparte nicio caracteristică și nu faceți lucrurile la întâmplare. În lumea reală, cu clienți și clienți, nu poți lucra la întâmplare sau îți vei pierde rapid locul de muncă.
Clienții inteligenți își vor da seama imediat că treaba este făcută prost și vor găsi pe altcineva.
Publicarea unui pachet NPM open source
Dacă scrieți cod Javascript, sunt șanse să utilizați un manager de pachete. Un manager de pachete vă permite să reutilizați codul existent pe care l-au scris și publicat alți oameni.
Înțelegerea întregului ciclu de dezvoltare al unui pachet va oferi o experiență foarte bună. Există multe lucruri pe care trebuie să le știți când publicați cod. Trebuie să vă gândiți la securitate, versiuni semantice, scalabilitate, convenții de denumire și întreținere.
Pachetul poate fi orice. Dacă nu aveți o idee, creați-vă propriul Lodash și publicați-l.
Lodash:
Dacă ai ceva ce ai făcut online, te plasează cu 10% deasupra celorlalți. despre surse deschise și pachete.
Curriculum freeCodeCamp
freeCodecamp a strâns multe .
freeCodeCamp este o organizație non-profit. Acesta constă dintr-o platformă interactivă de învățare bazată pe web, un forum comunitar online, camere de chat, publicații Medium și organizații locale care intenționează să facă dezvoltarea web a învățării accesibilă tuturor.
Veți fi mai mult decât calificat pentru primul loc de muncă dacă reușiți să finalizați întregul curs.
Creați un server HTTP de la zero
Protocolul HTTP este unul dintre principalele protocoale prin care conținutul circulă pe Internet. Serverele HTTP sunt folosite pentru a difuza conținut static, cum ar fi HTML, CSS și JS.
A fi capabil să implementați protocolul HTTP de la zero vă va extinde cunoștințele despre modul în care lucrurile interacționează.
De exemplu, dacă utilizați NodeJs, atunci știți că Express oferă un server HTTP.
Pentru referință, vedeți dacă puteți:
- Configurați un server fără a utiliza biblioteci
- Serverul trebuie să ofere conținut HTML, CSS și JS.
- Implementarea unui router de la zero
- Monitorizați modificările și actualizați serverul
Dacă nu știi de ce, folosește și încercați să creați un server HTTP de la zero.
Aplicație desktop pentru note
Cu toții luăm notițe, nu-i așa?
Să creăm o aplicație de note. Aplicația trebuie să salveze note și să le sincronizeze cu baza de date. Creați o aplicație nativă folosind Electron, Swift sau orice doriți și ceea ce funcționează pentru sistemul dvs.
Simțiți-vă liber să combinați acest lucru cu prima provocare (editor de text).
Ca bonus, încercați să sincronizați versiunea desktop cu versiunea web.
Podcasturi (clonă acoperită)
Cine nu ascultă podcasturi?
Creați o aplicație web cu următoarele funcționalități:
- Creează un cont
- Căutați podcasturi
- Evaluează și abonează-te la podcasturi
- Opriți și redați, schimbați viteza, funcțiile înainte și înapoi timp de 30 de secunde.
Încercați să utilizați API-ul iTunes ca punct de plecare. Dacă cunoașteți alte resurse, vă rugăm să postați în comentarii.
Captură de ecran
Buna ziua! Îmi filmez ecranul chiar acum!
Creați o aplicație desktop sau web care vă permite să vă capturați ecranul și să salvați clipul ca .gif
Aici cum să realizezi acest lucru.
surse
Sursa: www.habr.com