Praktiline juhend esiotsa arendamise õppimiseks algajatele

Alustasin oma kodeerimisreisi 2018. aasta kevadel, veidi vähem kui aasta tagasi. Ma teenisin sellest ajast mõned programmeerimisoskused, kuid siiski saan aru, et veel palju asju on vaja õppida. Igatahes otsustasin need näpunäited koondada ühte kohta, et tulevasi arendajaid nende teel aidata. See artikkel on juhend, mille oleksin tahtnud leida oma teekonda alustades.

Enne alustamist

Kui otsustasite iseseisvalt õppida, on Internetis palju teavet ja raske on kõike ümber keerata. Tähtis on struktureeritud plaan ja vältida aja raiskamist, hüpates ühelt ressursilt teisele.

Pange tähele, et need on vaid esimesed sammud esiotsa universumis. See aitab teil alustada, kuid see pole mõeldud täielikuks juhendiks.

Vastutusest loobumiseks pidage meeles, et järgmised ressursid ei ole reklaam. Mainin neid, sest nad aitasid mind mingil hetkel ja ma soovitan neid isiklikult. Enamik neist on tasuta, muidu täpsustatakse.

Alustuseks soovitan registreeruda saidil freeCodeCamp.Ja ülejäänud lähtun nende õppekavast. Pean seda suurepäraseks ressursiks erinevatel põhjustel:

  1. Õppekava. See võib olla teie peamine tee. See on hästi struktureeritud ülevaade asjadest, mida peaksite õppima, ja annab hea õppimiskõvera.
  2. Harjutused. Need on hammustuse suurused, nii et saate lihtsalt tempot hoida, tehes iga päev paar neist ja hoides oma soojakaarti rohelisena.
  3. Projektid. Pärast iga peatüki lõpetamist ehitate oma sertifikaadi saamiseks 5 projekti. Ideaalne on natuke harjutada ja oma teadmisi kinnistada.
  4. Kogukond. See on midagi enamat kui lihtsalt õppeplatvorm. Seal on foorum, ajaveeb ja YouTube'i kanal, kus erineva taseme arendajad jagavad oma teadmisi ja kust saate inspiratsiooni.
  5. See on tasuta. Raha võib olla paljude inimeste jaoks kriitiline ja siin ei kuluta te igal juhul midagi peale aja.
Pro näpunäide: saate Twitteris konto luua , kui teil seda veel pole, ja pühenduda avalikult sellele 100DaysOfCode väljakutse. Põhjus on lihtne - selle väljakutse teeb palju inimesi. Saate motivatsiooni ja tuge ning see aitab teil tempot hoida. Soovitan soojalt, ära ole häbelik ja naudi kogukonda ?

Nüüd oleme kõik alustanud! ?

Tundlik veebidisain

Esimene jaotis hõlmab staatiliste saitide koostamise ja neile stiilide rakendamise põhitõdesid.

Põhitõed

Põhiline HTML ja HTML5jaCSS-i põhisektsioonid on kaasaegse Interneti põhialused. Rakendatud visuaalne disain, rakenduslik juurdepääsetavus ja reageeriv veebidisaini põhimõttedõpetab teile heade veebisaitide kirjutamise põhitõdesid. Ärge kiirustage ja astuge ettevaatlikult, need on teie teadmiste peamised ehituskivid.

Saate täiendada oma õpinguid suurepärase juhendiga Internetis on raske.

Järgmisena õpite võimsaid paigutustehnikaid, nagu CSS Flexbox ja CSS Grid . Enne jätkamist täitke see lühike juhend, et saada ülevaade erinevatest paigutustehnikadest, mida inimesed enne Flexbox-Gridi ajastut kasutasid. On ebatõenäoline, et peate neid kunagi kasutama, kuid alati on hea olla teadlik ja hinnata tehnoloogiaid, mis meil täna on.

CSS Flexbox

Armusin Flexboxi selle lihtsuse ja jõu tõttu. Paljud erinevad omadused võivad teid alguses segadusse ajada, nii et minu ettepanek on panna petta oma arvuti lähedale, et saaksite neid alati hõlpsalt otsida. Lisaks märkige see interaktiivne Flexboxi petulehe järjehoidjatesse.

Ja lõpuks, harjutage sõltuvust tekitava Flexbox Froggy mängimisegamäng. ?

CSS Grid

Grid on arenenum ja paindlikum, kuid enamasti piisab Flexboxist. Igatahes on teie arsenalis veel üks võimas tööriist. Eriti kui seda on nii lihtne mõista, kui kasvatate oma saaki Grid Gardenis.?

Harjuta

Enne lõplike projektide juurde liikumist soovitan teil seda teha:

  1. Looge Codepenis konto . See on esiotsa lahe mänguväljak, kus saate oma projekte ehitada, juppe testida ja harjutada.
  2. Installige akoodiredaktorja õppige, kuidas sellega töötada.
  3. Siit videost saate teada käsurea põhitõedautor Wes Bos või Shell Workshop on Udacity.
  4. Siit saate teada, kuidas selles NetNinja esitusloendis Giti kasutada.
  5. Hankige juhendatud praktikat. Valige Traversy Media esitusloendist kõik projektid ja kodeerige. Ehitage neid seni, kuni tunnete end enesekindlalt. Tore oleks, kui kasutaksite juba koodiredaktorit ja versioonihaldust ning laadiksite oma töö Githubi spetsiaalsesse õppereppu.

Nüüd olete valmis saama oma esimese sertifikaadi! ?

Mine ja ehitage oma lõplikud projektid ja jagage neid?

Javascripti algoritmid ja andmestruktuurid

Nüüd teate, kuidas ehitada staatilisi veebisaite ja on aeg õppida JavaScripti.

freeCodeCampi JavaScripti jaotis on suurepärane, kuid soovitan teil tungivalt vaadata veebisaiti javascript.infolisaviidetena. See on parim ressurss, mis pakub põhjalikku teavet kõige JavaScripti kohta.

Veel soovitusi

  1. Beau Carnes'i JavaScripti põhikursus, kui eelistate visuaalseid juhendeid.
  2. Mis puudutab JavaScripti uut standardit, siis minu lemmikud on suurepärased kursused ES6 kõigile! (tasuline) Wes Bos ja Modern JavaScript Beau Carnes.
  3. Regulaaravaldiste kursus Scrimba teemal.
  4. NetNinja objektile suunatud JavaScripti kursus oli minu jaoks väga kasulik.

Algoritmid

See on minu lemmik osa sertifikaadist. Mäletan, kui keerulised nad olid, kui hakkasin neid lihtsalt lahendama. Võiksin terve päeva mõelda võimalike lahenduste peale. See on suurepärane viis JavaScripti õppimiseks ja programmeerija moodi mõtlemiseks.

Väikese abina soovitan teil vaadata Traversy Media JavaScripti kardiosessioone.

Harjutamiseks soovitan tungivalt registreeruda CodeWarsis ja seada esialgne eesmärk 6kyu saavutamiseks . See on väga kasulik, sest kui teete mõne väljakutse, saate vaadata teiste inimeste lahendusi ja avastada uusi nippe, lähenemisviise ja ideid.

Teiste 100DaysOfCode'i väljakutsujate, sealhulgas ka minu, leidmiseks minge oma konto seadetesse ja tippige väljale Klann # 100DaysOfCode .

Enne lõplike projektide jätkamist peate olema valmis lõplikuks ülemuseks, kassaks. ?

Pärast võitu võin öelda, et ...

... nüüd teate, kuidas JavaScriptiga töötada! ?

Asjade kokku kleepimine

Nüüd on aeg võtta vastu Wes Bos'i väljakutse Javascript30. See on parim viis õppida, kuidas HTML, CSS ja JavaScript koos töötavad, lihvida oma teadmisi põhialustest ja mõista DOM-i. Nende väikeste projektide ehitamine oli minu jaoks suurepärane kogemus ja tõeliselt lõbus!

Esiotsa raamatukogud

Sellest hetkest alates saate te tõeliseks esiotsa arendajaks?

Bootstrap

Kõige populaarsem CSS-i raamistik. Looge YouTube'is paar veebisaiti koos juhenditega. Harjuge Bootstrapi kuulsa veeruvõrgu paigutusega.

jQuery

Hoolimata sellest, et mõned inimesed ütlevad, et jQuery on surnud, on sellest alati abi, kui puhta JavaScripti lahendus on omapärane ja JS-i raamistiku kasutamine on liiga palju. See on teie arsenalis veel üks suurepärane tööriist. Ehitage sellega harjutamiseks paar väikest rakendust.

Sass

Ma ei hinnanud CSS-i raamistikke täielikult, kuni nägin nende tegelikku jõudu. Tahtsin õppida CSSi täiustatud tehnikaid ja ostsin hämmastava Advanced CSSi ja Sassikursus (tasuline) Jonas Schmedtmann. Äärmiselt soovitatav, kui soovite oma CSS-i oskusi lihvida ja töövoogu mõista. Olen endiselt õnnelik, et selle leidsin.

Reageeri ja Redux

See on esiosa raamatukogude sektsiooni põhiosa. React on suurepärane valik kui teie esimene JavaScripti teek, mida õppida.

Ausalt öeldes on raske mõista, kuidas sellega freeCodeCampi vormingus töötada, kuna te ei saa midagi nullist üles ehitada ja mõned asjad töötavad kapoti all. Nii et minge kursusele React ja Redux ning leidke aega nende ideede ja tööriistade mõistmiseks.

Minu isiklikud lemmikud:

  1. Täielik reageerimisõpetus (koos Reduxiga)autor NetNinja
  2. Reageerige algajatele (tasuline) Wes Bos
  3. Reageeri - Academindi täielik juhend (tasuline)

Loodan, et olete põnevil oma uusi teadmisi lõppprojektides kasutama.

Nüüd saate ehitada kõike, mida soovite ?

Edasi liikumine

Olete nüüd tõeline esiotsa arendaja ja teil on piisavalt oskusi suurepäraste veebirakenduste loomiseks. Võib-olla olete uudishimulik, mida edasi teha, ja vastus on sama lihtne kui „Ehitage, ehitage, ehitage!” . Teie praegune ülesanne on luua endale portfell ja saada rohkem praktikat.

Siin on mõned näpunäited teile, mida edasi teha:

  1. Hankige ideid projekti kohtaVõtke koduprojektidjaotises freeCodeCamp.
  2. Koostage mis tahes projekt koos kursusega, seejärel muutke ja täiustage seda uute funktsioonide lisamisega.
  3. Järgmiste freeCodeCampi sertifikaatide saamiseks lahendage D3.js ja Node.js!
  4. Lugege Kõnekas JavaScripti jaSa ei tea JS-isaada JavaScripti ninjaks.
  5. Parandage oma auastet Codewarsis.
  6. Nautige täiustatud veebidisaini sellest veebiarendajatele mõeldud veebidisainistmuidugi.
  7. Hoidke oma GitHubi konto aktiivne ja proovige panustada avatud lähtekoodiga.

Kui üks neist ressurssidest teie jaoks ei toimi, on see okei. Ärge pettuge, see, mis kellelegi sobib, ei pea ilmtingimata toimima iga inimese jaoks.

Loodan, et see juhend aitab teid õppimisel ja loodetavasti säästab teie aega?

Edu!