O listă completă de 10 idei de proiecte de top în dezvoltarea web pentru începători pentru a vă ascuți abilitățile și pentru a vă construi portofoliul.
Tabel de conținut
De ce trebuie să începeți să luați proiecte devreme în dezvoltarea web?
Este important să începeți să construiți proiecte în timp ce învățați dezvoltarea web, deoarece nu veți putea absorbi conceptele pe care le învățați până când nu le aplicați pentru a realiza diverse proiecte. Ați putea începe cu proiecte de nivel începător și să treceți la proiecte intermediare și proiecte cu o complexitate mai mare pe măsură ce avansați în călătoria de învățare a dezvoltării web. Procesul de construire a unui proiect necesită planificare și un spectru larg de competențe. Acesta vă testează cunoștințele, ajutându-vă să vă înțelegeți punctele tari și punctele slabe.
Notes App:
Nivelul proiectului: Începător
Creați o aplicație web în care utilizatorii își pot adăuga și stoca notițele. Acesta este un proiect excelent pentru începători. Câteva indicații de care trebuie să țineți cont în timp ce construiți o aplicație de notițe sunt:
- Utilizatorul ar trebui să poată crea, edita și șterge o notă.
- Când utilizatorul închide fereastra browserului, notele ar trebui să fie stocate, iar când utilizatorul revine, datele ar trebui să fie recuperate înapoi.
- Utilizatorul ar trebui să poată vedea data și ora creării notei.
- După ce ați realizat o aplicație de bază, încercați să adăugați următoarele caracteristici pentru a o duce la nivelul următor-
- Aplicația ar trebui să poată prelua mai multe intrări pe notă, noua intrare având data și ora curentă.
- Utilizatorii ar trebui să poată căuta o notă pe baza unui cuvânt cheie.
- Utilizatorii ar trebui să poată sorta și filtra folosind informațiile privind data și ora.
- Pentru a face proiectul și mai provocator să afișeze un layout de calendar astfel încât utilizatorul să poată face clic pe orice dată pentru a vizualiza notele din ziua respectivă.
Câteva exemple de proiecte la care vă puteți referi:
To-do List:
Nivelul proiectului: Începător până la Intermediar
Realizați o aplicație to-do list în care utilizatorul poate adăuga sarcini zilnice de îndeplinit. Câteva indicii de care trebuie să țineți cont în timp ce construiți o aplicație pentru lista de sarcini sunt:
- Utilizatorul ar trebui să poată adăuga un nou element în listă.
- Elementele adăugate ar trebui să fie vizibile pentru utilizator în lista de sarcini.
- Utilizatorul ar trebui să poată marca o sarcină din listă ca fiind „finalizată”. Sarcinile finalizate pot apărea într-o categorie separată pentru o dispunere mai organizată.
- Utilizatorii ar trebui să poată edita sau șterge o sarcină din listă.
- După ce ați realizat o aplicație de bază, încercați să adăugați următoarele caracteristici pentru a o duce la nivelul următor.
- Afișează data și ora la care un anumit element de sarcină a fost adăugat la lista de sarcini.
- Utilizați stocarea locală, astfel încât atunci când utilizatorul închide fereastra browserului datele să fie stocate, iar atunci când utilizatorul deschide din nou aplicația datele să poată fi recuperate.
Proiect de exemplu:
Construiți o aplicație online Word-Counter:
Nivelul proiectului: Beginner to Intermediate
Contorul de cuvinte este numărul de cuvinte dintr-un document sau pasaj de text. Un contor de cuvinte este un instrument util pentru scriitori pentru a vedea numărul total de cuvinte din articolul lor. Câteva indicații de care trebuie să țineți cont în timp ce construiți o aplicație de contorizare a cuvintelor sunt:
- Este necesar să construiți o aplicație care să poată analiza textele și să arate numărul de cuvinte.
- Utilizatorul va introduce textul articolului său. Numărul de cuvinte din acel text ar trebui să fie afișat.
- În plus, încercați să adăugați următoarele caracteristici pentru a trece la nivelul următor-
- Afișează numărul de caractere, propoziții, paragrafe și cuvintele cheie de top (pe baza repetării cuvintelor).
- De asemenea, încercați să afișați timpul de citire prin utilizarea API-urilor.
Proiect de exemplu:
Construiți propriul site de portofoliu:
Nivelul proiectului: Beginner to Intermediate
Acesta este proiectul cu care aproape fiecare dezvoltator web trebuie să se fi întâlnit în cariera sa și există un motiv pentru asta. Este o modalitate excelentă de a vă arăta abilitățile și punctele forte prin intermediul propriului site de portofoliu. Puteți continua să adăugați caracteristici diferite și să experimentați cu noi tehnologii. Dacă sunteți un începător, atunci puteți începe cu o simplă pagină statică și pe măsură ce învățați tot mai multe concepte, le puteți adăuga la pagina dvs. de portofoliu.
Câteva puncte de care trebuie să țineți cont sunt:
- Elementele esențiale în orice site de portofoliu sunt – o biografie concisă pentru ca oamenii să te cunoască, precum și munca ta, cele mai bune abilități, background, experiență, realizări.
- Puteți încerca să includeți un logo pentru a vă marca și, de asemenea, să lucrați la favicon.
- Asigură-te că adaugi butoane de social media pentru a face legătura cu profilurile tale sociale, cum ar fi GitHub, LinkedIn, etc.
- Este esențial să incluzi un formular de contact pe site-ul tău, astfel încât potențialii clienți să te poată contacta.
- Adaugă navigare către alte pagini, cum ar fi o pagină de contact.
- Experimentează cu Flexbox și CSS Grid pentru a crea layout-uri frumoase.
- Concentrați-vă pe design și acordați atenție culorilor pe care le veți folosi pentru a vă scoate în evidență portofoliul.
- Încercați să folosiți noi unități de măsură cum ar fi VW și VH pentru a vă face site-ul mai receptiv și mai flexibil pe dispozitive cu dimensiuni diferite ale ecranului.
- Ați putea consulta documentațiile CSS pentru a cunoaște cele mai recente caracteristici adăugate limbajului CSS și pentru a continua să vă actualizați site-ul de portofoliu.
- Considerați posibilitatea de a adăuga o pagină de blog la site-ul dvs. în care să includeți propriile bloguri și articole.
- Afișați cele mai bune proiecte ale dvs. și pentru un aspect mai organizat, le puteți împărți pe categorii.
Quiz App/ Q&Un joc:
Nivelul proiectului: Începător până la Intermediar
Construiți o aplicație quiz în care utilizatorul poate alege una dintre cele patru opțiuni pentru o întrebare. La sfârșit afișați rezultatul. Puteți folosi JavaScript pentru acest proiect. Deși învățarea JS nu este atât de dificilă, aplicarea acestor cunoștințe în scenarii din lumea reală este destul de dificilă. Puteți să vă experimentați abilitățile lucrând la un mic joc chestionar bazat pe JavaScript. Prin intermediul acestui proiect, veți învăța despre manipularea DOM și gestionarea datelor. Amintiți-vă că, în funcție de abilitățile dvs. JS și de capacitatea de a gestiona logica complexă, puteți face acest joc atât de simplu sau complicat pe cât doriți să fie.
În plus, puteți încerca să adăugați următoarele caracteristici aplicației dvs. de tip quiz pentru a o face mai interesantă:
- Adaugați mai multe teste în aplicație, astfel încât utilizatorul să poată selecta testul pe care dorește să îl facă. (Va exista o pagină diferită pentru fiecare test.)
- Adaugați butoane de social media astfel încât utilizatorul să poată împărtăși rezultatele.
- Utilizatorii pot reseta și relua testul.
- Salvați și afișați scorurile anterioare ale utilizatorului pe tabloul de bord.
Pentru a începe puteți începe prin a vă referi la acest proiect de exemplu:
Cronometru invers:
Nivelul proiectului:
Nivelul proiectului:
: Începător
Cel mai simplu proiect din această listă este cronometrul de numărătoare inversă. Un cronometru de numărătoare inversă este un ceas virtual care numără înapoi de la o anumită dată pentru a indica începutul sau sfârșitul unui eveniment. Este o pagină web care practic trebuie să actualizeze timpul la fiecare secundă. Obiectivul este de a afișa un afișaj în descreștere continuă a zilelor, orelor, minutelor și secundelor până la o anumită dată sau oră. Puteți folosi JS pentru acest proiect.
După ce ați creat un cronometru de bază pentru numărătoarea inversă încercați să adăugați următoarele caracteristici la pagina dvs. web:
- Adaugați butoane de pauză, pornire și oprire.
- Afișați o notificare de alertă atunci când timpul evenimentului este atins.
- Utilizatorul poate introduce mai multe evenimente cu un cronometru inițializat pentru fiecare dintre aceste evenimente.
Puteți face referire la aceste exemple de proiecte pentru a începe:
Tic-Tac-Toe
Nivelul proiectului: Intermediar până la avansat
Construirea de jocuri este cel mai distractiv mod de a învăța codarea. Când vine vorba de jocuri, ce este mai bun decât clasicul joc de tic-tac-toe. Mai întâi ați putea încerca jocul de bază cu doi jucători (X și O). După aceea ați putea să-l ridicați cu o treaptă mai sus folosind AI pentru a-l face un joc utilizator vs. calculator folosind algoritmul și logica necesară.
Proiect de exemplu pentru a începe:
Build a Drawing Tool
Nivelul proiectului: Intermediar
Trebuie să fi folosit MS-Paint pentru a vă crea propriile lucrări de artă când erați copil. De ce să nu creați o pânză online pentru a face același lucru! Puteți folosi HTML, CSS și JS pentru a construi această aplicație. Utilizatorul poate desena folosind mouse-ul. Câteva caracteristici esențiale sunt- schimbarea culorii, ștergerea, schimbarea dimensiunii instrumentului de desen, resetarea / ștergerea pânzei. În plus, puteți permite utilizatorilor să își partajeze munca pe rețelele sociale sau să își salveze munca în format imagine.
Site de comerț electronic sau site de cumpărături online
Nivelul proiectului: Intermediar până la avansat
Majoritatea dezvoltatorilor web sfârșesc prin a lucra pentru o companie care vinde online sau oferă servicii clienților prin intermediul unei interfețe online. În zilele noastre, există atât de multe site-uri de livrare de alimente, magazine online etc. Așadar, există o cerere uriașă de dezvoltatori web în acest domeniu. Este foarte bine dacă aveți ceva similar în portofoliu pentru a vă angaja. Încercați să construiți o interfață pentru un magazin online. Asigură-te că folosești Flexbox pentru un aspect îngrijit. Puteți să-i adăugați multe caracteristici după cum doriți.
(Hint: add to cart, view cart, etc.) Luați în considerare toate paginile pe care va trebui să le includeți în el și puneți-le pe navbar. (Indiciu: pagina de logare-înregistrare, pagina de contact, pagina de profil al utilizatorului etc.) Lucrați cu bazele de date și îmbunătățiți logica backend pe măsură ce înaintați. (Sugestie: studiați despre algoritmii de recomandare folosiți pe aceste platforme care au ca rezultat o creștere extraordinară a veniturilor acestora.)
Joc bazat pe memorie
Nivelul proiectului: Intermediar până la avansat
Creați un joc de memorie bazat pe cărți în care utilizatorul va trebui să întoarcă două cărți și să dezvăluie ce se află dedesubt. Dacă utilizatorul întoarce cărțile care au sub ele imaginea care se potrivește, atunci utilizatorul punctează, dar dacă imaginile sunt diferite, atunci cărțile se întorc la starea inițială (cu fața în jos). Este un joc bazat pe memorie, deoarece utilizatorul trebuie să țină minte cărțile pentru a termina jocul în timp optim. În plus, puteți să includeți un cronometru, să afișați scorurile anterioare, statisticile jocului, să oferiți utilizatorului posibilitatea de a alege nivelul de dificultate (ușor, mediu, greu), să-l faceți un joc multi-player etc. pentru a-l face mai provocator.
Concluzie
Acestea sunt cele mai bune 10 idei de proiecte pentru a vă îmbunătăți abilitățile de dezvoltare web și pentru a avansa în cariera dvs. de dezvoltator web.
Începeți imediat cu oricare dintre ideile de mai sus sau puteți combina câteva pentru a veni cu propria idee inovatoare și unică. Suntem siguri că vă va da o aromă de dezvoltare în viața reală și un avantaj față de colegii dumneavoastră!
Pentru a citi mai multe despre dezvoltarea web, faceți clic aici.
De Shifani Ram