Gyakorlati útmutató a front end fejlesztés elsajátításához kezdőknek

Programozás

Kódolási utamat 2018 tavaszán kezdtem, valamivel kevesebb, mint egy éve. Azóta megszereztem néhány programozási ismeretet, de mégis megértem, hogy még sok mindent meg kell tanulnunk. Egyébként úgy döntöttem, hogy ezeket a tippeket egyetlen helyre gyűjtem, hogy segítsem a jövőbeli fejlesztőket az útjukon. Ez a cikk az útmutató, amelyet szerettem volna megtalálni, amikor megkezdtem az utamat.

Kezdés előtt

Ha úgy döntött, hogy egyedül tanul, sok információ található az interneten, és nehéz mindenre belekavarni a fejét. Fontos, hogy strukturált tervvel rendelkezzünk, és elkerüljük az időpazarlást az egyik erőforrásról a másikra ugrással.

Felhívjuk figyelmét, hogy ezek csak az első lépések a front-end univerzum felé. Ez segít az indulásban, de nem célja, hogy teljes útmutató legyen.

Jogi nyilatkozatként vegye figyelembe, hogy az alábbi források nem hirdetések. Azért említem őket, mert valamikor segítettek nekem, és én személy szerint ajánlom őket. Legtöbbjük ingyenes, különben pontosítani fogják.

Kiindulásként azt javaslom, hogy regisztráljon a freeCodeCamp-ra.A többit pedig a tananyagukra fogom alapozni. Nagyszerű erőforrásnak tartom különböző okokból:

  1. Tanterv. Ez lehet a fő utad. Ez egy jól strukturált áttekintés a megtanulandó dolgokról, és jó tanulási görbét nyújt.
  2. Feladatok. Harapásméretűek, így könnyen tarthatja a tempót, ha mindennap elvégez egy párat, és zölden tartja a hőtérképét.
  3. Projektek. Minden fejezet befejezése után 5 projektet épít, hogy megszerezze tanúsítványát. Ideális egy kis gyakorlathoz és a tudás megerősítéséhez.
  4. Közösség. Ez nem csak egy tanulási platform. Van egy fórum, blog és YouTube-csatorna, ahol a különböző szintű fejlesztők megosztják tudásukat, és ahol inspirációt kaphat.
  5. Ez ingyenes. A pénz sok ember számára kritikus lehet, és itt mindenesetre nem fog költeni semmit, csak az időt.
Pro tipp: létrehozhat egy fiókot a Twitteren , ha még nincs, és nyilvánosan elkötelezheti magát a 100DaysOfCode kihívás. Az ok egyszerű - sokan teszik ezt a kihívást. Kapsz motivációt és támogatást, és ez segít a tempó tartásában. Nagyon ajánlom, ne légy félénk és élvezd a közösséget ?

Most mindannyian indulhatunk! ?

Reszponzív webdesign

Az első szakasz a statikus webhelyek felépítésének és a stílusok alkalmazásának alapjait tartalmazza.

Az alapok

Alap HTML és HTML5ésAz alapvető CSS szakaszok a modern Internet alapjait jelentik. Alkalmazott vizuális tervezés, alkalmazott akadálymentesség és érzékeny web-tervezési elvekmegtanulja a jó weboldalak írásának alapjait. Ne rohanjon és lépjen óvatosan, ezek a fő építőkövei a tudásának.

Tanulmányait kiegészítheti egy nagyszerű útmutatóval az Internetezés nehézségekről.

Ezután hatékony elrendezési technikákat fog megtanulni, mint például a CSS Flexbox és a CSS Grid . Mielőtt továbblépne, töltse ki ezt a rövid útmutatót, hogy áttekintést kapjon az emberek különböző elrendezési technikáiról, amelyeket az emberek a Flexbox-Grid korszaka előtt használtak. Nem valószínű, hogy valaha is szüksége lesz rájuk, de mindig jó, ha tisztában vagyunk és értékeljük a mai technológiákat.

CSS Flexbox

Az egyszerűség és az ereje miatt megszerettem a Flexboxot. Sokféle tulajdonság eleinte megzavarhatja, ezért azt javaslom, hogy tegyünk egy csalólapot a számítógép közelébe, hogy mindig könnyedén megkereshesse őket. Ezenkívül jegyezze fel könyvjelzővel ezt az interaktív Flexbox csalólapot.

És végül gyakorold az addiktív Flexbox Froggy játékávaljátszma, meccs. ?

CSS Rács

A Grid fejlettebb és rugalmasabb, de a legtöbb esetben a Flexbox elég. Egyébként lesz egy másik hatékony eszköz az arzenálban. Különösen, ha ilyen könnyen érthető, amikor a Grid Garden-ben termeszted a növényeidet.?

Gyakorlat

Mielőtt továbbtérne a végleges projektekre, ajánlom, hogy tegye ezt:

  1. Hozzon létre egy fiókot a Codepen-en . Ez egy jó játszótér a kezelőfelület számára, ahol megépítheti projektjeit, tesztelheti a részleteket és gyakorolhat.
  2. Telepítse akódszerkesztőgépén, és megtanulják, hogyan kell vele dolgozni.
  3. Ismerje meg a parancssor alapjait ebből a videóbólWes Bos vagy az Udacity Shell Műhelye.
  4. Tudja meg, hogyan kell használni a Git-et a NetNinja ezen lejátszási listáján.
  5. Szerezzen néhány irányított gyakorlatot. Válasszon projekteket a lejátszási listából a Traversy Media segítségével, és kódoljon. Építsd őket, amíg magabiztosnak nem érzed magad. Nagyon jó lenne, ha már használna kódszerkesztőt és verziókezelőt, és munkáját egy speciális tanulmányi repóba töltené fel a Githubon.

Most már készen áll az első tanúsítvány megszerzésére! ?

Menjen, készítse el a végső projekteket, és ossza meg őket?

Javascript algoritmusok és adatszerkezetek

Most már tudja, hogyan kell statikus webhelyeket készíteni, és itt az ideje megtanulni a JavaScript-et.

A freeCodeCamp JavaScript szakasza remek, de nagyon azt tanácsolom, hogy nézze meg a javascript.info oldaltkiegészítő referenciaként. Ez a legjobb forrás, amely átfogó információkat nyújt a JavaScript-hez kapcsolódó mindenről.

További ajánlások

  1. Beau Carnes JavaScript alapismeretek tanfolyama, ha inkább vizuális útmutatókat szeretne.
  2. Ami az új JavaScript-et illeti, a kedvenceim a nagyszerű ES6 tanfolyamok mindenki számára! (fizetett): Wes Bos és Modern JavaScript: Beau Carnes.
  3. Rendszeres kifejezések tanfolyam a Scrimbán.
  4. A NetNinja objektumorientált JavaScript tanfolyama nagyon hasznos volt számomra.

Algoritmusok

Ez a kedvenc részem a tanúsításban. Emlékszem, milyen nagy kihívások voltak, amikor csak elkezdtem megoldani őket. Egész nap gondolkodhattam a lehetséges megoldásokon. Ez nagyszerű módja a JavaScript elsajátításának és a programozóként való gondolkodásnak.

Kis segítségként azt javaslom, hogy nézze meg a Traversy Media JavaScript Cardio Sessions programját.

További gyakorlathoz nagyon ajánlom, hogy iratkozzon fel a CodeWars-ra, és tegyen kezdeti célt a 6kyu elérésére . Nagyon hasznos, mert ha bármilyen kihívást teljesít, átnézheti mások megoldásait, és új trükköket, megközelítéseket és ötleteket fedezhet fel.

Ha további 100DaysOfCode kihívókat szeretne találni, köztük engem is, lépjen a Fiókbeállítások oldalra, és írja be a # 100DaysOfCode szót a Klán mezőbe.

A végleges projektek folytatása előtt fel kell készülnie a végső főnökre, a pénztárgépre. ?

Miután legyőzted, azt mondhatom ...

... most már tudja, hogyan kell működni a JavaScript-szel! ?

Összedugni a dolgokat

Itt az ideje, hogy megválasszuk Wes Bos javascript30 kihívását. Ez a legjobb módja annak, hogy megtanulja, hogyan működnek együtt a HTML, a CSS és a JavaScript, csiszolhatja az alapismeretek ismeretét és megértheti a DOM-ot. Ezeknek a kis projekteknek az építése nagy élmény volt és nagyon szórakoztató volt számomra!

Első könyvtárak

Innentől kezdve igazi front end fejlesztővé válsz?

Bootstrap

A legnépszerűbb CSS keretrendszer. Készítsen néhány weboldalt, valamint útmutatókat a YouTube-on. Szokja meg a Bootstrap híres oszloprács-elrendezését.

jQuery

Annak ellenére, hogy egyesek azt mondják, hogy a jQuery halott, mindig hasznos lesz, ha a tiszta JavaScript megoldása furcsa, és a JS keretrendszer használata túl sok. Ez egy újabb nagyszerű eszköz lesz az arzenáljában. Készítsen vele pár apró alkalmazást a gyakorláshoz.

Sass

Nem értékeltem teljes mértékben a CSS-keretrendszereket, amíg meg nem láttam valódi erejüket. Fejlett CSS technikákat akartam megtanulni, és vettem egy csodálatos Advanced CSS-t és Sass-ttanfolyam (fizetett) Jonas Schmedtmann. Erősen ajánlott, ha csiszolni kívánja CSS-ismereteit és megérteni a munkafolyamatot. Még mindig örülök, hogy megtaláltam.

React & Redux

Ez a Kezelői könyvtárak szakasz fő része. A React nagyszerű választás, mint az első JavaScript-könyvtár, amelyet megtanulhat.

Őszintén szólva nehéz megérteni, hogyan kell vele dolgozni freeCodeCamp formátumban, mivel semmit sem lehet építeni a semmiből, és néhány dolog a motorháztető alatt működik. Tehát vegyen részt a React és a Redux tanfolyamokon, és szánjon rá időt arra, hogy megértse ötleteiket és eszközeiket.

Személyes kedvenceim:

  1. Teljes React bemutató (Redux-szal)írta NetNinja
  2. Reagáljon kezdőknek (fizetős): Wes Bos
  3. React - A teljes útmutató (fizetős) az Academind

Remélem, örömmel használja új ismereteit a végső projektek során.

Most építhet bármit, amit csak akar ?

Tovább haladva

Ön most igazi front-end fejlesztő, és elegendő készséggel rendelkezik a nagyszerű webalkalmazások létrehozásához. Talán kíváncsi, mit tegyen a továbbiakban, és a válasz olyan egyszerű, mint „Építs, épít, épít!” . Jelenlegi feladata, hogy portfóliót hozzon létre magának, és további gyakorlatot szerezzen.

Íme néhány tipp a következő teendőkhöz:

  1. Szerezzen ötleteket aVidd haza a projekteketszakasz a freeCodeCamp-ről.
  2. Készítsen bármilyen projektet egy tanfolyammal együtt, majd módosítsa és fejlessze új funkciók hozzáadásával.
  3. Foglalkozzon a D3.js és a Node.js fájlokkal a következő freeCodeCamp tanúsítványok megszerzéséhez!
  4. Olvassa el az Eloquent JavaScript ésNem ismered JS-thogy JavaScript ninja legyen.
  5. Javítsa rangját a Codewars-on.
  6. Kóstolja meg a fejlett webtervezést ebből a webdesignból a webfejlesztőknektanfolyam.
  7. Tartsa aktívan GitHub-fiókját, és próbáljon hozzájárulni a nyílt forráskódhoz.

Ha ezen források egyike nem működik az Ön számára, akkor rendben van. Ne csalódjon, ami valakinek beválik, annak nem feltétlenül kell minden egyes embernek megfelelnie.

Remélem, hogy ez az útmutató segít a tanulásban, és remélhetőleg időt spórol meg?

Sok szerencsét!