Ha gyors előrehaladást szeretne elérni front-end fejlesztőként, semmi sem éri el a valódi fejlesztési projekteket.
Az az igazság, hogy megnézheti a világ összes oktatóanyagát és tanfolyamát, de alkalmazás és gyakorlat nélkül nem fog igazán megtanulni olyan készségeket, amelyekre valódi projekteknél van szükség.
Az ügyfélprojektek nem rendelkeznek lépésről lépésre, mert ellenkező esetben egyáltalán nem lenne rájuk szükség. Gondolkodnia kell a dobozon kívül, megoldásokat kell találnia, kompromisszumokat kell kötnie és csapkodnia kell a célig.
A készségek elsajátításának legjobb módja az, ha néhány front-end fejlesztői projektet hajt végre, és közben tanul. És a legjobb rész? A kezdéshez nem is kell kliens, mert ezeket a projekteket egyedül is megteheti.
Hogyan válasszunk személyes front-end fejlesztési projektet
Tartsa szem előtt a készség szintjét
Ne válasszon olyan képességű projektet, amely túl magas a képzettségi szintjéhez, különösen akkor, ha Ön elveszíti a motivációt, amikor a dolgok túlságosan megnehezülnek.
De ne felejtsd el, hogy mivel itt az a cél, hogy segítsen elsajátítani a kezelőfelület fejlesztését, válassz olyan projektet, amely meghaladja a jelenlegi készségszintedet, de még mindig kivitelezhető.
Például, ha nemrégiben megtanultad a HTML-t és a CSS-t, itt az ideje szintet lépni a JavaScript megtanulásával.
Oldjon meg egy személyes problémát vagy egy problémát, amely érdekli
Nagyobb valószínűséggel élvezi és kitart egy projekt mellett is, ha az megoldja saját problémáit vagy teljesíti vágyait.
Lehet, hogy mindig elveszted az időkövetést, amikor a Facebook hírcsatornádban lapozol, vagy olyan weboldalt szeretnél, ahol automatikusan létrehozhatsz vonzó YouTube indexképeket.
Gondoljon egy személyes problémára, amelyet megoldhat a technológiával, és onnan indulhat. A cikkben szereplő javaslatok csak kiindulópontként szolgálnak. Sokkal jobb lesz, ha megváltoztatja az egyedi csavar hozzáadásához.
4 szórakoztató front-end fejlesztési projekt
Készítsen egy klónot egy weboldalról.
Tanulási készségek: HTML, CSS, JavaScript és / vagy Bootstrap.
A weboldal klónjának felépítése nagyszerű módja annak, hogy felfedezzük annak felépítését, és megtanuljuk az oldalszerkezet, a színek, a betűtípusok, a média, a táblázatok és egyebek alapjait. Menjen annyi részletre, amennyit csak tud, az eredeti másolásához.
Válasszon egy tetszőleges weboldalt, és maga készítsen belőle egy klónot. Ne a lehető legnagyobb mértékben nézze meg a forráskódot, hogy a legtöbbet hozza ki belőle.
A Google klónozása valójában a Thinkful egyik gyakorlata kódoló műhely hallgatóik számára. A Thinkful egy oktatási vállalat, amely technológiai tanfolyamokat kínál, beleértve egy webfejlesztő bootcampot.
Kövesse ezt a gyakorlatot a Karma WiFi nevű alkalmazás céloldalának klónozásához is. Kyle Koski, a Thinkful egyik mentora hozta létre, és HTML-t és CSS-t használ.
A weboldal klónozásában az a jó, hogy kiválaszthatja a webhely összetettségét. Ha még csak most kezded, akkor egy egyszerű webhely, amelynek csak HTML-re és CSS-re van szüksége, jó kiindulópont. Ha fejlettebb, válasszon egy webhelyet, amelyhez JavaScript vagy React szükséges.
Hozzon létre egy JavaScript kvíz játékot.
Tanulási készség: JavaScript
A JavaScript egy programozási nyelv, amely lehetővé teszi interaktív weboldalak készítését. Ez az a nyelv, amelyet az adaptív elemek, például a menük, a videolejátszók, az animációk, az interaktív térképek és még a böngészőben lévő játékok létrehozásához is használ.
De mielőtt folytatnánk, fontos tudni, hogy miért szeretne kvízt készíteni.
Ez több, mint szórakozás és játék. A vetélkedők valójában egyre népszerűbbek, mint tartalommarketing eszközök. Látott már ilyeneket?
A vetélkedők félelmetes marketingeszközök, mert interaktívak. A Content Marketing Institute felmérése szerint a marketingszakemberek 81% -a egyetért abban, hogy az interaktív tartalom - amely bármilyen, a felhasználó részvételét igénylő tartalom - hatékonyabban vonzza a figyelmet, mint a statikus tartalom.
Emiatt a vetélkedőket különböző marketing célokra használják. A bal oldalihoz hasonló triviális vetélkedőkkel növelik a webhely forgalmát. Egyes marketingszakemberek kvízeket is használnak a leadek minősítésére, a leadek szegmentálására és az elkötelezettség növelésére.
Ezt azért magyarázom, mert fejlesztőként az a feladata, hogy ne csak a dolgok szépek legyenek, hanem olyan funkciókat is létrehozzon, amelyek felhasználóbarátak, és hatékonyabbá teszik az ügyfél webhelyét az értékesítési és marketing céljainak elérésében.
Kvíz létrehozásához nézze meg ezeket az oktatóanyagokat a JavaScript-kvízek elkészítéséhez a WebDevTrick és a SitePoint alkalmazásból. A JS-kvízed így nézhet ki:
Készítse el saját mobil QR-olvasóját.
Tanulási készség: JavaScript
A vonalkódok és a QR-kódok megváltoztatták a vásárlás módját. Az ügyfelek most szkennelhetnek egy terméket okostelefonjukkal, és különféle információkat találhatnak meg róla, például az árról vagy arról, hogy hol vásárolhatják meg.
Ez kiküszöböli annak szükségességét is, hogy hosszú kódokat írjon be egy webhelyre, például aktiválási kódokat vagy modellszámokat, megkönnyítve ezzel a vásárlási élményt és problémamentesen.
Szemben azzal, amit mások gondolnak, a QR-kódok beolvasásához nincs szükség natív telefonos alkalmazásra.
Kamerával ellátott intelligens eszközön futó webhelyek megtehetik a trükköt.
Ez az útmutató bemutatja a saját QR-kódolvasójának létrehozásának lépésenkénti folyamatát.
HTML-t és JavaScript-t fog használni, de a legfontosabb rész egy JS-könyvtár használata, amely képes értelmezni a QR-kódot. A jó hír az, hogy nem kell a semmiből létrehoznia, mert rengeteg nagyszerű könyvtár létezik erre a célra.
Építsen időjárás-alkalmazást.
Tanulási készség: Szögletes 8
Az Angular a három legnépszerűbb front-end fejlesztési keret egyike, a React és a Vue.js mellett. Általában űrlapalapú alkalmazások készítésére használják (ahol fiók létrehozásához regisztrálnia kell), de játékok, sőt virtuális valóság elemeket tartalmazó alkalmazások készítésére is használható.
Van egy nagyon részletes, lépésről-lépésre bemutatott oktatóanyag a Medium-on, amely megtanítja a kezdőket arra, hogyan hozzanak létre egy gyönyörű időjárási alkalmazást az Angular 8 (az Angular legújabb verziója) segítségével. Az időjárás-alkalmazás így néz ki:
Ez az alkalmazás tiszta, minimalista kivitelű, lenyűgöző illusztrációkkal és egyszerű felülettel. Remek világos és sötét üzemmóddal is rendelkezik, amely még több hangulatot kölcsönöz neki.
Ami remek ebben a projektben, az az lesz, hogy megérzi, milyen érzés egy nulláról felhasználható, érzékeny alkalmazást létrehozni. Mindent megtanul a Node.js és az Angular CLI telepítésétől a kód LightHouse teszteléséig.
És bár a bemutató készítője nyilvánvalóan beillesztette saját tervezési preferenciáit, hozzáadhatja saját stílusát, és olyan kreatív lehet, amennyit csak akar. Játszhat a CSS stílusával és animációival, sőt használhatja saját logóját, ikonjait és más tervezési anyagokat is.
Tegye ezt jól, és lenyűgöző időjárási alkalmazás áll rendelkezésre portfóliójában.
Az oktatóanyagot itt érheti el.
Bár ez az oktató kezdőbarát, mégis szüksége van egy kis szögletes ismeretre. Ha meg szeretné tanulni az Angulart, akkor a legjobb kezdési hely az Angular.io oldalon található.
Tervezze meg és kódolja saját portfólióját.
Egy tipikus projektben valószínűleg együtt dolgozik egy webdesignerrel, aki felhívja a felvételeket arra, hogyan fog kinézni a weboldal.
Bár a tervezés és a fejlesztés vitathatatlanul két különböző terület, a webdesign megismerése nem csak egy újabb készséggel bővíti arzenálját, hanem fel fogja szerelni azt is, ha úgy dönt, hogy szabadúszóként egyedül dolgozik, és projekteken dolgozik a tervezéstől a telepítésig.
Saját portfólió weboldalának megtervezése és kódolása lehetővé teszi, hogy egyszerre mutassa be művészi és technikai oldalát.
Az első lépés az üzenet vagy a márkaépítés gondolkodása . Melyek az alapszolgáltatásaid, kiket akarsz szolgálni, és miért választanának téged? (A márkajelzésről itt olvashat bővebben.)
A második az, hogy hozzon létre egy áltervet , amely részletezi az elrendezést, a színeket és a tipográfiát.
Gondoljon egy témára is. Minimalista vagy hangos és funky? Fekete-fehér vagy merész színeket használ? Ezután készítsen egy listát a szükséges oldalakról. Ez gyakran tartalmaz egy kapcsolattartási oldalt, néhány blogbejegyzést, egy rólam szóló oldalt és egy általános szerződési feltételeket tartalmazó oldalt.
Harmadszor, kódold be ! Használja a modern CSS-t a webhely elrendezéséhez, animációk hozzáadásához, néhány kiváló minőségű kép hozzáadásához stb. Az ég itt a határ - bármit megtehet a portfólió webhelyével, mert az a tiéd - hajrá!
Hol gyakorolhatom a front-end fejlesztést?
Bár a front-end fejlesztés gyakorlásának legjobb módja az, ha saját maga készít valódi alkalmazáshirdetési webhelyeket, mégis jó, ha van helye tippekhez, oktatóanyagokhoz való hozzáféréshez és támogatáshoz, ha elakad vagy valamiről véleményre van szüksége.
Ezek a nagyszerű helyek, ahol segítséget kaphat a front-end fejlesztés során:
- freeCodeCamp.org - Ez egy olyan webhely, amely ingyenes útmutatókkal rendelkezik a webfejlesztés elméletéről, a nyelvekről és a bevált gyakorlatokról. Van egy nagyszerű közösség is, amely segítséget nyújthat kérdéseiben.
- Modern HTML és CSS a kezdetektől fogva - Ez Brad Traversy Udemy tanfolyama. Hasznos információkkal van ellátva, és valóban megtaníthat mindent, amire szüksége van ahhoz, hogy elkezdhesse ezeket a nyelveket.
- Frontendor.io - Itt olyan harapásméretű ingyenes és prémium „kihívásokat” találhat, amelyeket szabadidejében tehet a készségfejlesztés érdekében. A kihívások nehézsége a „juniortól a„ haladóig ”terjed. Íme néhány példa az itt található kihívásokra:
További források vannak, amelyeket szívesen megosztanék Önnel, de hogy ez ne legyen túl hosszú, ezt a linket megtekintve megtekintheti az ajánlott tanfolyamok teljes listáját.
Ez 5 szórakoztató front-end fejlesztési projekt, amelyet ma kipróbálhat. Ezeket megint kiindulópontként értjük. Végül rajtad múlik, hogy testre szabod-e, hogy hozzáadj egy kis személyes érintést :)
Ne feledje, hogy a gyakorlatról van szó. Építenie kell a képességeit.
Ne csak nézéssel tanuljon.
Tanulj építéssel.
A gyakorlatban megtanulni.
- Kyle Prinsloo (@study_web_dev) 2020. június 24Boldog kódolást!
Köszönöm, hogy egyelőre olvastál és szurkoltál,
Kyle
Kövessen engem a Twitteren további tippekért.