Kuidas saada paremaks arendajaks, ehitades projekte (ideed kaasa arvatud)

Kui soovite kiirendada oma kasvu esiotsa arendajana, ei võida miski reaalsete arendusprojektide tegemist.

Tõde on see, et saate vaadata kõiki õpetusi ja kursusi kogu maailmas, kuid ilma rakenduse ja praktikata ei õpi te tegelikult oskusi, mida peate tegelema tõeliste projektidega.

Kliendiprojektidel pole samm-sammult juhiseid, sest vastasel juhul poleks neil teid üldse vaja. Peate mõtlema raamidest välja, leidma lahendusi, kompromisse ja häkkima finišisse.

Parim viis nende oskuste õppimiseks on teha mõned arendaja arendusprojektid ja õppida sellel teel. Ja parim osa? Alustamiseks pole vaja isegi klienti, sest saate neid projekte ise teha.

Kuidas valida personaalne esiosa arendusprojekt

Pea meeles oma oskuste taset

Ärge valige oma oskuste taseme jaoks liiga arenenud projekti, eriti kui olete tüüp, kes kaotab motivatsiooni, kui asjad muutuvad liiga raskeks.

Kuid ärge unustage, et kuna siin on eesmärk aidata teil hallata arendust, valige projekt, mis ületab teie praeguse oskuste taseme, kuid on siiski teostatav.

Näiteks kui olete hiljuti õppinud HTML-i ja CSS-i, on aeg taseme tõstmiseks õppida JavaScripti.

Lahendage isiklik probleem või probleem, mis teile meeldib

Samuti on tõenäolisem, et naudite projekti ja jääte sellest kinni, kui see lahendab teie enda probleemid või täidab teie soovid.

Võib-olla kaotate alati ajataju, kui sirvite oma Facebooki uudistevoogu, või soovite veebisaiti, kus saate automaatselt luua haaravaid YouTube'i pisipilte.

Mõelge isiklikule probleemile, mille saate lahendada tehnoloogiaga, ja alustage sealt. Selle artikli soovitused on mõeldud ainult lähtepunktiks. Palju parem on, kui muudate seda oma ainulaadse keerdumise lisamiseks.

4 lõbusat esiotsa arendusprojekti

Ehitage veebisaidi kloon.

Õppimisoskused: HTML, CSS, JavaScript ja / või Bootstrap.

Veebisaidi klooni loomine on suurepärane võimalus uurida, kuidas see on üles ehitatud, ja õppida põhitõdesid lehe ülesehitusest, värvidest, fontidest, meediumitest, tabelitest ja muust. Originaali paljundamiseks minge nii palju kui võimalik.

Valige endale meelepärane veebisait ja looge ise selle kloon. Ärge võtke lähtekoodi nii palju kui võimalik, et sellest maksimumi võtta.

Google'i kloonimine on tegelikult üks Thinkfuli harjutusi nende kodeerimistöökoja õpilastele. Thinkful on haridusettevõte, mis pakub tehnoloogiakursusi, sealhulgas veebiarenduse alglaadimist.

Seda harjutust saate järgida ka Karma WiFi-nimelise rakenduse sihtlehe kloonimiseks. Selle lõi üks Thinkfuli mentoritest Kyle Koski ning see kasutab HTML-i ja CSS-i.

Veebisaidi kloonimisel on hea see, et saate valida veebisaidi keerukustaseme. Kui te alles alustate, on alustamiseks hea lihtne veebisait, mis vajab ainult HTML-i ja CSS-i. Kui olete arenenum, valige veebisait, mis nõuab JavaScripti või React.

Looge JavaScripti viktoriinimäng.

Oskus õppida: JavaScript

JavaScript on programmeerimiskeel, mis võimaldab teil luua interaktiivseid veebilehti. See on keel, mida kasutate selliste tundlike elementide loomiseks nagu menüüd, videopleierid, animatsioonid, interaktiivsed kaardid ja isegi brauserisisesed mängud.

Kuid enne jätkamist on oluline teada, miks soovite viktoriini koostada.

See on rohkem kui lõbu ja mängud. Viktoriinid on sisuturunduse vahenditena tegelikult populaarsust kogumas. Kas olete kunagi selliseid asju näinud?

Viktoriinid on kohutavad turundusvahendid, kuna need on interaktiivsed. Sisuturunduse instituudi küsitluse kohaselt nõustub 81% turundajatest, et interaktiivne sisu - mis on igasugune sisu, mis nõuab kasutajalt osalemist - äratab tähelepanu tõhusamalt kui staatiline sisu.

Sel põhjusel kasutatakse viktoriinid erinevatel turunduslikel eesmärkidel. Triviaalseid viktoriine, nagu vasakpoolseid, kasutatakse veebisaidi liikluse suurendamiseks. Mõned turundajad kasutavad viktoriinid ka müügivihjete kvalifitseerimiseks, müügivihjete segmentimiseks ja seotuse suurendamiseks.

Selgitan seda, sest arendajana pole teie ülesanne mitte ainult tagada, et asjad näeksid ilusad välja, vaid ka luua funktsioone, mis on kasutajasõbralikud ja muudavad teie kliendi veebisaidi oma müügi- ja turunduseesmärkide saavutamisel tõhusamaks.

Viktoriini loomiseks vaadake neid õpetusi JavaScripti viktoriinide loomiseks WebDevTrickist ja SitePointi. Teie JS-i viktoriin võib välja näha järgmine:

Looge oma mobiilne QR-lugeja.

Oskus õppida: JavaScript

Vöötkoodid ja QR-koodid on muutnud ostlemisviisi. Nüüd saavad kliendid toodet oma nutitelefonidega skannida ja leida selle kohta mitmesugust teavet, näiteks hind või koht, kust nad seda osta saavad.

Samuti välistab see vajaduse veebisaidil sisestada pikki koode, nagu aktiveerimiskoodid või mudelinumbrid, muutes nende ostukogemuse lihtsamaks ja probleemideta.

Vastupidiselt sellele, mida teised arvavad, pole teil QR-koodide skannimiseks vaja kohalikku telefoni rakendust.

Kaameraga nutiseadmes töötavad veebisaidid saavad selle triki ära teha.

See juhend näitab teile oma QR-koodilugeja loomise järkjärgulist protsessi.

Kasutate HTML-i ja JavaScripti, kuid kõige olulisem osa on JS-i teegi kasutamine, mis suudab QR-koodi tõlgendada. Hea uudis on see, et te ei pea seda nullist looma, sest täpselt selleks on seal palju häid raamatukogusid.

Ehitage ilmarakendus.

Õppimisoskus: nurk 8

Nurgeline on React ja Vue.js kõrval üks kolmest populaarsemast esiotsa arendusraamistikust. Seda kasutatakse tavaliselt vormipõhiste rakenduste loomiseks (kuhu konto loomiseks peate registreeruma), kuid seda saab kasutada ka virtuaalreaalsuse elementidega mängude ja isegi rakenduste ehitamiseks.

Mediumil on väga üksikasjalik ja üksikasjalik õpetus, mis õpetab algajatele, kuidas luua Angular 8 (Angulari uusim versioon) abil ilusat ilmarakendust. Ilmarakendus näeb välja selline:

Sellel rakendusel on puhas, minimalistlik disain koos suurepäraste illustratsioonide ja lihtsa liidesega. Sellel on ka suurepärane hele ja pimedas režiimis funktsioon, mis lisab sellele rohkem elegantsi.

Selle projekti puhul on suurepärane see, et saate tunda, mis tunne on ehitada kasutatavat ja tundlikku rakendust nullist. Õpid kõike alates Node.js ja Angular CLI installimisest kuni koodi testimiseni LightHouse'i abil.

Ja kuigi õpetuse looja sisestas ilmselgelt oma disainieelistuse, saate lisada oma stiili ja olla nii loominguline kui soovite. Võite mängida CSS-i kujunduse ja animatsioonidega ning kasutada isegi oma logo, ikoone ja muid kujundusmaterjale.

Tehke seda õigesti ja teie portfellis on muljetavaldav ilmarakendus.

Õpetusele pääseb siit.

Kuigi see õpetus on algajale sobiv, vajate siiski veidi nurgelist tuttavust. Kui soovite Angulari õppida, on parim koht alustamiseks aadressil Angular.io.

Kujundage ja kodeerige oma portfelli veebisait.

Tüüpilises projektis töötate suure tõenäosusega koos veebidisaineriga, kes helistab kaadritele, kuidas veebisait välja näeb.

Ehkki disain ja arendus on vaieldamatult kaks erinevat valdkonda, ei anna veebidisaini mõistmine mitte ainult teie arsenalile veel üht oskuste kogumit, vaid annab teile ka võimaluse valida vabakutselise soolo ja töötada projektidega alates kujundusest kuni juurutamiseni.

Oma portfelli veebisaidi kujundamine ja kodeerimine annab teile vabaduse tutvustada samaaegselt oma kunstilist ja tehnilist külge.

Esimene samm on mõelda oma sõnumile või kaubamärgile . Mis on teie põhiteenused, keda soovite teenida ja miks nad peaksid teid valima? (Lisateavet brändingu kohta leiate siit.)

Teiseks on luua väljamõeldis , mis kirjeldab üksikasjalikult paigutust, värve ja tüpograafiat.

Mõelge ka teemale. Kas see on minimalistlik või vali ja funky? Kas see on ühevärviline või kasutab see julgeid värve? Seejärel koostage loetelu vajalikest lehtedest. See hõlmab sageli kontaktilehte, mõnda ajaveebipostitust, minu kohta käivat lehte ning tingimuste lehte.

Kolmandaks, kodeerige see ! Saidi paigutamiseks, animatsioonide lisamiseks, kvaliteetsete piltide lisamiseks jne kasutage tänapäevast CSS-i. Siin on piiriks taevas - oma portfelli veebisaidiga saate teha mida iganes, sest see on teie - minge!

Kus saab praktiseerida esiotsa arendust?

Kuigi esiotsa arendamise parim viis on ise ehitada tõelisi rakenduste reklaamide veebisaite, on siiski tore, kui teil on koht, kust hankida näpunäiteid, pääseda juurde õpetustele ja saada tuge, kui jänni jääte või vajate millegi kohta arvamust.

Need on suurepärased kohad abi saamiseks, kui harjutate esiotsa arendamist:

  1. freeCodeCamp.org - see on veebisait, mis on täis tasuta veebiarendusteooria, keelte ja parimate tavade õpetusi. Siin on ka suurepärane kogukond, mis aitab teie küsimustes aidata.
  2. Kaasaegne HTML ja CSS algusest - see on Brad Traversy Udemy kursus. See on täis kasulikku teavet ja võib teile tõesti õpetada kõike, mida vajate nende keeltega alustamiseks.
  3. Frontendor.io - Siit leiate näksimissuuruseid tasuta ja esmaklassilisi „väljakutseid“, mida saate vabal ajal oma oskuste arendamiseks teha. Väljakutsete raskus ulatub „juuniorist“ kuni „edasijõudnuteni“. Siin on näited väljakutsetest, mida leiate siit:

Ressursse on rohkem, mida tahaksin teiega jagada, kuid et see ei oleks liiga pikk, võite vaadata seda linki, et näha minu soovitatud kursuste täielikku loendit.

Need on viis lõbusat arendusprojekti, mida saate täna proovida. Need on jällegi mõeldud lähtepunktidena. Lõppkokkuvõttes on teie ülesanne seda kohandada, et lisada natuke oma isiklikku puudutust :)

Pidage meeles, et kõik on seotud harjutamisega. Peate oma oskuste täiustamiseks üles ehitama asju.

Ärge õppige ainult vaadates.

Õppige ehitades.

Õppige tehes.

- Kyle Prinsloo (@study_web_dev) 24. juuni 2020

Head kodeerimist!

Täname, et lugesite ja rõõmustasite praegu,

Kyle

Järgige mind Twitteris, et saada rohkem näpunäiteid.