Kaip tapti geresniu „front-end“ kūrėju kuriant projektus (įskaitant idėjas)

Jei norite greitai paspartinti savo, kaip „front-end“ kūrėjo, augimą, niekas nepadaro realių plėtros projektų.

Tiesa, jūs galite žiūrėti visas pamokas ir kursus pasaulyje, tačiau be pritaikymo ir praktikos tikrai neišmoksite įgūdžių, kurie jums reikalingi dirbant su realiais projektais.

Klientų projektams nepateikiamos nuoseklios instrukcijos, nes priešingu atveju jiems visai nereikėtų. Turėsite mąstyti už rėmų, rasti sprendimus, ieškoti kompromisų ir nulaužti kelią iki finišo.

Geriausias būdas išmokti šių įgūdžių yra atlikti keletą „front-end“ kūrėjų projektų ir mokytis kelyje. Ir geriausia dalis? Norėdami pradėti, jums net nereikia kliento, nes šiuos projektus galite atlikti patys.

Kaip pasirinkti asmeninį „Front-end“ plėtros projektą

Turėkite omenyje savo įgūdžių lygį

Nesirinkite per daug pažengusio jūsų įgūdžių lygio projekto, ypač jei esate tas, kuris praranda motyvaciją, kai viskas tampa per sunku.

Tačiau nepamirškite, kad kadangi tikslas yra padėti jums valdyti „front-end“ plėtrą, pasirinkite projektą, kuris viršija jūsų dabartinį įgūdžių lygį, tačiau vis tiek yra įgyvendinamas.

Pavyzdžiui, jei neseniai išmokote HTML ir CSS, atėjo laikas mokytis „JavaScript“.

Išspręskite asmeninę ar jums rūpimą problemą

Taip pat labiau tikėtina, kad patiksite ir laikysitės projekto, jei jis išspręs jūsų problemas ar pateisins jūsų norus.

Galbūt jūs visada prarandate laiko nuovoką, kai naršote „Facebook“ naujienų kanalą, arba norite svetainės, kurioje galėtumėte automatiškai sugeneruoti įtraukiančias „YouTube“ miniatiūras.

Pagalvokite apie asmeninę problemą, kurią galite išspręsti naudodamiesi technologijomis, ir pradėkite nuo to. Šiame straipsnyje pateikti pasiūlymai yra tik atspirties taškas. Bus daug geriau, jei jį pakeisite, kad pridėtumėte savo unikalų posūkį.

4 įdomūs „front-end“ plėtros projektai

Sukurkite svetainės kloną.

Mokymosi įgūdžiai: HTML, CSS, „JavaScript“ ir (arba) „Bootstrap“.

Sukurti svetainės kloną yra puikus būdas ištirti, kaip jis kuriamas, ir išmokti puslapio struktūros, spalvų, šriftų, laikmenų, lentelių ir kt. Pagrindų. Išsiaiškinkite kuo daugiau detalių, kad pakartotumėte originalą.

Pasirinkite jums patinkančią svetainę ir patys sukurkite jos kloną. Nežiūrėkite į šaltinio kodą kiek įmanoma, kad iš jo išgautumėte kuo daugiau.

„Google“ klonavimas iš tikrųjų yra vienas iš „Thinkful“ pratimų jų kodavimo seminaro studentams. „Thinkful“ yra švietimo įmonė, siūlanti technologijų kursus, įskaitant žiniatinklio kūrimo „bootcamp“.

Taip pat galite sekti šį pratimą, kad padėtumėte klonuoti programos „Karma WiFi“ nukreipimo puslapį. Jį sukūrė vienas iš „Thinkful“ mentorių Kyle'as Koski ir naudoja HTML bei CSS.

Kas naudinga klonuojant svetainę, galite pasirinkti svetainės sudėtingumo lygį. Jei dar tik pradedate, tinkama vieta pradėti nuo paprastos svetainės, kuriai reikia tik HTML ir CSS. Jei esate labiau pažengęs, pasirinkite svetainę, kuriai reikia „JavaScript“ arba „React“.

Sukurkite „JavaScript“ viktorinos žaidimą.

Įgūdis išmokti: „JavaScript“

„JavaScript“ yra programavimo kalba, leidžianti kurti interaktyvius tinklalapius. Tai kalba, kurią naudojate kurdami reaguojančius elementus, tokius kaip meniu, vaizdo grotuvai, animacijos, interaktyvūs žemėlapiai ir net naršyklės žaidimai.

Tačiau prieš tęsdami svarbu žinoti, kodėl norėtumėte sukurti viktoriną.

Tai daugiau nei linksmybės ir žaidimai. Iš tikrųjų viktorinos populiarėja kaip turinio rinkodaros priemonės. Ar kada nors matėte tokių dalykų?

Viktorinos yra nuostabios rinkodaros priemonės, nes jos yra interaktyvios. Remiantis turinio rinkodaros instituto apklausa, 81% rinkodaros specialistų sutinka, kad interaktyvus turinys - tai bet koks turinys, reikalaujantis vartotojo dalyvavimo - pritraukia dėmesį efektyviau nei statinis turinys.

Dėl šios priežasties viktorinos naudojamos skirtingiems rinkodaros tikslams. Svarbios viktorinos, kaip ir kairėje, yra naudojamos srautui į svetainę padidinti. Kai kurie rinkodaros specialistai taip pat naudoja viktorinas norėdami įvertinti potencialius klientus, segmentus ir padidinti įtraukimą.

Aš tai aiškinu, nes kaip kūrėjas jūsų darbas yra ne tik įsitikinti, kad viskas atrodo gražiai, bet ir sukurti tokias funkcijas, kurios būtų patogios vartotojui ir padėtų jūsų kliento svetainei efektyviau pasiekti pardavimo ir rinkodaros tikslus.

Norėdami sukurti viktoriną, peržiūrėkite šias „JavaScript“ viktorinų sudarymo iš „WebDevTrick“ ir „SitePoint“ instrukcijas. Štai kaip gali atrodyti jūsų JS viktorina:

Sukurkite savo mobilųjį QR skaitytuvą.

Įgūdis išmokti: „JavaScript“

Brūkšniniai kodai ir QR kodai pakeitė pirkimo būdą. Dabar klientai gali nuskaityti gaminį naudodami savo išmaniuosius telefonus ir sužinoti apie jį įvairią informaciją, pvz., Kainą ar vietą, kur jie gali ją nusipirkti.

Tai taip pat pašalina poreikį įvesti ilgus kodus kodus, pvz., Aktyvinimo kodus ar modelių numerius, todėl jų apsipirkimas yra lengvesnis ir be rūpesčių.

Priešingai nei mano kiti, QR kodams nuskaityti nereikia vietinės telefono programos.

Svetainės, veikiančios išmaniajame įrenginyje su kamera, gali tai padaryti.

Šis vadovas parodo nuoseklų savo QR kodų skaitytuvo kūrimo procesą.

Jūs naudosite HTML ir „JavaScript“, tačiau svarbiausia yra naudoti JS biblioteką, kuri gali interpretuoti QR kodą. Geros naujienos yra tai, kad nereikės jos kurti nuo nulio, nes tam tikslui yra daugybė puikių bibliotekų.

Sukurkite orų programą.

Įgūdis mokytis: kampinis 8

„Angular“ yra viena iš trijų populiariausių „front-end“ kūrimo sistemų kartu su „React“ ir „Vue.js“. Paprastai jis naudojamas kuriant formas pagrįstas programas (kur turite užsiregistruoti, kad sukurtumėte paskyrą), tačiau taip pat gali būti naudojamos žaidimams ir net programoms su virtualios realybės elementais kurti.

Yra labai išsami, nuosekli „Medium“ pamoka, kuri pradedantiesiems moko sukurti gražią orų programą su „Angular 8“ (naujausia „Angular“ versija). Orų programa atrodo taip:

Ši programa pasižymi švariu, minimalistiniu dizainu su nuostabiomis iliustracijomis ir paprasta sąsaja. Jis taip pat turi puikią šviesaus ir tamsaus režimo funkciją, kuri suteikia jai daugiau nuojautos.

Puiku šiame projekte yra tai, kad pajusite, kaip yra kurti nuo pat pradžių naudingą, greitai reaguojančią programą. Sužinosite viską, pradedant „Node.js“ ir „Angular CLI“ diegimu, baigiant kodo testavimu naudojant „LightHouse“.

Nors vadovėlio kūrėjas akivaizdžiai įterpė savo dizaino nuostatas, galite pridėti savo stilių ir būti kūrybingi, kiek norite. Galite žaisti naudodami CSS stilių ir animacijas ir netgi naudoti savo logotipą, piktogramas ir kitą dizaino medžiagą.

Padarykite tai teisingai ir savo portfelyje turėsite įspūdingą orų programą.

Pamoką galite pasiekti čia.

Nors ši pamoka yra tinkama pradedantiesiems, jums vis tiek reikia šiek tiek susipažinti su kampu. Jei norite išmokti „Angular“, geriausia pradėti nuo „Angular.io“.

Sukurkite ir užkoduokite savo portfelio svetainę.

Vykdydami tipinį projektą, greičiausiai dirbsite kartu su interneto dizaineriu, kuris skambina kadrams, kaip atrodys svetainė.

Nors dizainas ir plėtra, be abejo, yra dvi skirtingos sritys, žiniatinklio dizaino suvokimas ne tik papildys jūsų įgūdžių rinkinį jūsų arsenale, bet ir suteiks jums galimybę apsispręsti dirbti kaip laisvai samdomam darbuotojui ir dirbti su projektais nuo projektavimo iki diegimo.

Sukurdami ir užkoduodami savo portfelio svetainę galėsite laisvai vienu metu parodyti savo meninę ir techninę pusę.

Pirmas žingsnis - galvoti apie savo žinią ar prekės ženklą . Kokios yra jūsų pagrindinės paslaugos, kam norite tarnauti ir kodėl jos turėtų pasirinkti jus? (Daugiau apie prekės ženklą skaitykite čia.)

Antra - sukurti imitacinį dizainą, kuriame bus detalizuotas maketas, spalvos ir tipografija.

Taip pat pagalvokite apie temą. Ar tai minimalistinė, ar garsi ir funkiška? Ar jis vienspalvis, ar naudos paryškintas spalvas? Tada sudarykite jums reikalingų puslapių sąrašą. Tai dažnai apima kontaktų puslapį, kelis tinklaraščio įrašus, puslapį apie mane ir taisyklių bei sąlygų puslapį.

Trečia, užkoduokite ! Naudokite modernią CSS, norėdami išdėstyti svetainę, pridėti keletą animacijų, pridėti keletą aukštos kokybės vaizdų ir pan. Čia dangus yra riba - su savo portfelio svetaine galite daryti viską, ko norite, nes tai jūsų - eikite!

Kur galiu praktikuoti front-end kūrimą?

Nors geriausias būdas praktikuoti „front-end“ kūrimą yra pats kurti tikrų programų skelbimų svetaines, vis tiek puiku turėti vietą, kur gauti patarimų, prieigą prie pamokų ir gauti palaikymą, kai užstringa ar reikia nuomonės apie ką nors.

Tai yra puikios vietos gauti pagalbos, kai praktikuojate front-end kūrimą:

  1. freeCodeCamp.org - tai svetainė, užpildyta nemokamomis žiniatinklio kūrimo teorijos, kalbų ir geriausios praktikos pamokomis. Čia taip pat yra puiki bendruomenė, kuri gali padėti jums atsakyti į klausimus.
  2. Šiuolaikinis HTML ir CSS nuo pradžių - tai Brado Traversy kurtas „Udemy“ kursas. Joje gausu naudingos informacijos ir ji gali išmokyti visko, ko reikia norint pradėti naudotis šiomis kalbomis.
  3. Frontendor.io - Čia galite rasti kąsnio dydžio nemokamus ir aukščiausios kokybės „iššūkius“, kuriuos galite padaryti laisvalaikiu tobulindami savo įgūdžių rinkinį. Iššūkių sunkumas svyruoja nuo „jaunesnių“ iki „pažengusių“. Čia pateikiami iššūkių, kuriuos rasite čia, pavyzdžiai:

Norėčiau pasidalinti su jumis daugiau išteklių, tačiau kad tai nebūtų per ilga, galite peržiūrėti šią nuorodą ir pamatyti visą mano rekomenduojamų kursų sąrašą.

Tai yra 5 įdomūs „front-end“ plėtros projektai, kuriuos galite išbandyti šiandien. Vėlgi, tai yra atspirties taškas. Galų gale jūs turite jį pritaikyti, kad pridėtumėte šiek tiek savo asmeninio prisilietimo :)

Atminkite, kad viskas susiję su praktika. Jums reikia kurti dalykus, kad pagerintumėte savo įgūdžius.

Mokykis ne tik žiūrėdamas.

Mokykis kurdamas.

Mokykis darydamas.

- Kyle'as Prinsloo (@study_web_dev) 2020 m. Birželio 24 d

Laimingo kodavimo!

Ačiū, kad skaitėte ir džiaugiatės kol kas,

Kyle

Sekite mane „Twitter“ ir gaukite daugiau patarimų.