Sådan bliver du en bedre frontend-udvikler ved at bygge projekter (ideer inkluderet)

Hvis du vil spore din vækst som en front-end-udvikler, slår intet ud af at gøre rigtige udviklingsprojekter.

Sandheden er, at du kan se alle tutorials og kurser i verden, men uden anvendelse og praksis lærer du ikke rigtig færdigheder, som du har brug for for at arbejde på rigtige projekter.

Klientprojekter kommer ikke med trinvise instruktioner, fordi de ellers slet ikke har brug for dig. Du bliver nødt til at tænke uden for boksen, finde løsninger, gå på kompromis og hacke dig vej til målstregen.

Den bedste måde at lære disse færdigheder på er at lave nogle front-end udviklerprojekter og lære undervejs. Og den bedste del? Du har ikke engang brug for en klient for at komme i gang, fordi du selv kan udføre disse projekter.

Sådan vælger du et personligt front-end-udviklingsprojekt

Husk dit færdighedsniveau

Vælg ikke et projekt, der er for avanceret til dit niveau, især hvis du er typen, der mister motivation, når tingene bliver for hårde.

Men glem ikke, at da målet her er at hjælpe dig med at mestre front-end-udvikling, skal du vælge et projekt, der når ud over dit nuværende færdighedsniveau, men som stadig er gennemførligt.

For eksempel, hvis du for nylig har lært HTML og CSS, er det tid til at niveauere ved at lære JavaScript.

Løs et personligt problem eller et problem, du holder af

Du er også mere tilbøjelige til at nyde og holde fast i et projekt, hvis det løser dine egne problemer eller opfylder dine egne ønsker.

Måske mister du altid tid, når du ruller gennem dit Facebook-nyhedsfeed, eller du vil have et websted, hvor du automatisk kan generere engagerende YouTube-miniaturer.

Tænk på et personligt problem, som du kan løse med teknologi og starte derfra. Forslagene i denne artikel er kun beregnet til at være et udgangspunkt. Det vil være meget bedre, hvis du ændrer det for at tilføje dit unikke twist.

4 sjove front-end udviklingsprojekter

Byg en klon af et websted.

Færdigheder at lære: HTML, CSS, JavaScript og / eller Bootstrap.

Opbygning af en klon af et websted er en fantastisk måde at udforske, hvordan det er konstrueret, og lære det grundlæggende i sidestruktur, farver, skrifttyper, medier, tabeller og mere. Gå ind i så mange detaljer som muligt for at replikere originalen.

Vælg et websted, du kan lide, og opret en klon af det selv. Se ikke på kildekoden så meget som muligt for at få mest muligt ud af den.

Kloning af Google er faktisk en af ​​Thinkfuls øvelser for deres studerende på værksteder. Thinkful er en uddannelsesmæssig virksomhed, der tilbyder teknologikurser, herunder et webudviklings bootcamp.

Du kan også følge denne øvelse for at hjælpe dig med at klone destinationssiden for en app kaldet Karma WiFi. Det blev oprettet af Kyle Koski, en af ​​Thinkfuls mentorer, og bruger HTML og CSS.

Hvad der er godt ved at klone et websted er, at du kan vælge webstedets kompleksitet. Hvis du lige er begyndt, er et simpelt websted, der kun har brug for HTML og CSS, et godt sted at starte. Hvis du er mere avanceret, skal du vælge et websted, der kræver JavaScript eller React.

Opret et JavaScript-quizspil.

Dygtighed til at lære: JavaScript

JavaScript er et programmeringssprog, der giver dig mulighed for at oprette interaktive websider. Det er det sprog, du bruger, når du opretter lydhøre elementer som menuer, videoafspillere, animationer, interaktive kort og endda spil i browseren.

Men inden vi fortsætter, er det vigtigt at vide, hvorfor du gerne vil oprette en quiz.

Det er mere end sjov og spil. Quizzer vinder faktisk popularitet som indholdsmarkedsføringsværktøjer. Har du nogensinde set denne slags ting?

Quizzer er fantastiske marketingværktøjer, fordi de er interaktive. Ifølge en afstemning foretaget af Content Marketing Institute er 81% af marketingfolk enige om, at interaktivt indhold - som er enhver form for indhold, der kræver, at brugeren deltager - fanger opmærksomhed mere effektivt end statisk indhold.

Af denne grund bruges quizzer til forskellige markedsføringsformål. Triviale quizzer, som den til venstre, bruges til at øge trafikken til et websted. Nogle marketingfolk bruger også quizzer til at kvalificere kundeemner, segmentere kundeemner og øge engagementet.

Jeg forklarer dette, for som udvikler er dit job ikke kun at sørge for, at ting ser smukke ud, men også at skabe funktioner, der er brugervenlige og vil gøre din klients hjemmeside mere effektiv til at nå sine salgs- og marketingmål.

For at oprette en quiz skal du tjekke disse vejledninger til at lave JavaScript-quizzer fra WebDevTrick og SitePoint. Sådan ser din JS-quiz ud:

Opret din egen mobile QR-læser.

Dygtighed til at lære: JavaScript

Stregkoder og QR-koder har ændret den måde, vi handler på. Kunder kan nu scanne et produkt med deres smartphones og finde ud af forskellige oplysninger om det, f.eks. Prisen eller hvor de kan købe det.

Det eliminerer også behovet for at indtaste lange koder på et websted som aktiveringskoder eller modelnumre, hvilket gør deres shoppingoplevelse nemmere og problemfri.

I modsætning til hvad andre synes, behøver du ikke en indbygget telefonapp for at scanne QR-koder.

Websteder, der kører på en smart enhed med et kamera, kan gøre tricket.

Denne guide viser dig den trinvise proces til oprettelse af din egen QR-kodelæser.

Du bruger HTML og JavaScript, men den vigtigste del er at bruge et JS-bibliotek, der kan fortolke QR-koden. Den gode nyhed er, at du ikke behøver at oprette det fra bunden, fordi der er masser af gode biblioteker derude til netop dette formål.

Byg en vejr-app.

Færdighed til at lære: Vinkel 8

Angular er en af ​​de tre mest populære front-end udviklingsrammer sammen med React og Vue.js. Det bruges ofte til at opbygge formbaserede apps (hvor du skal tilmelde dig for at oprette en konto), men kan også bruges til at opbygge spil og endda apps med virtual reality-elementer.

Der er en meget detaljeret trin-for-trin vejledning på Medium, der lærer begyndere, hvordan man opretter en smuk vejr-app med Angular 8 (den nyeste version af Angular). Vejrappen ser sådan ud:

Denne app har et rent, minimalistisk design med fantastiske illustrationer og en simpel grænseflade. Det har også en smidig lys og mørk tilstandsfunktion, der tilføjer mere flair til den.

Hvad der er godt ved dette projekt er, at du får en fornemmelse af, hvordan det er at opbygge en brugbar, lydhør app fra bunden. Du lærer alt fra installation af Node.js og Angular CLI til test af din kode med LightHouse.

Og selvom skaberen af ​​vejledningen naturligvis indsatte sin egen designpræference, kan du tilføje din egen styling og være så kreativ, som du vil. Du kan lege med CSS-styling og animationer og endda bruge dit eget logo, ikoner og andet designmateriale.

Gør dette rigtigt, så får du en imponerende vejr-app på din portefølje.

Du kan få adgang til vejledningen her.

Mens denne vejledning er nybegyndervenlig, har du stadig brug for lidt vinklet fortrolighed. Hvis du vil lære Angular, er det bedste sted at starte på Angular.io.

Design og kod dit eget portefølje-websted.

I et typisk projekt arbejder du højst sandsynligt sammen med en webdesigner, der kalder skuddene på, hvordan hjemmesiden vil se ud.

Selvom design og udvikling uden tvivl er to forskellige felter, vil det ikke kun tilføje endnu en færdighedssæt til dit arsenal, men det vil også udstyre dig, hvis du beslutter dig for at gå solo som freelancer og arbejde på projekter fra design til implementering.

Design og kodning af din egen porteføljeside giver dig frihed til at fremvise din kunstneriske og tekniske side samtidigt.

Det første skridt er at tænke på din besked eller branding . Hvad er dine kernetjenester, hvem vil du tjene, og hvorfor skal de vælge dig? (Læs mere om branding her.)

For det andet er at skabe et mock-design , der detaljerer layout, farver og typografi.

Tænk også på et tema. Er det minimalistisk eller højt og funky? Er det monokrom, eller bruger det dristige farver? Lav derefter en liste over de sider, du har brug for. Dette inkluderer ofte en kontaktside, et par blogindlæg, en om mig-side og en side med vilkår og betingelser.

For det tredje skal du kode det ! Brug moderne CSS til layout af webstedet, tilføj nogle animationer, tilføj nogle billeder i høj kvalitet osv. Himlen er grænsen her - du kan gøre hvad du vil med din porteføljeside, fordi den er din - gå efter det!

Hvor kan jeg øve front-end udvikling?

Selvom den bedste måde at øve frontend-udvikling på er at opbygge rigtige apps-annoncesider, er det stadig godt at have et sted at få tip, få adgang til tutorials og få support, når du sidder fast eller har brug for en mening om noget.

Dette er gode steder at få hjælp, når du øver på front-end-udvikling:

  1. freeCodeCamp.org - Dette er et websted fyldt med gratis tutorials om webudviklingsteori, sprog og bedste praksis. Der er også et godt samfund her, der kan hjælpe med dine spørgsmål.
  2. Moderne HTML & CSS fra begyndelsen - Dette er et Udemy-kursus af Brad Traversy. Den er fyldt med nyttig info og kan virkelig lære dig alt hvad du behøver for at komme i gang med disse sprog.
  3. Front amendor.io - Du kan finde bid-sized gratis og premium "udfordringer" her, som du kan gøre i din fritid for at udvikle din skillset. Vanskeligheden ved udfordringerne spænder fra “junior” til “avanceret”. Her er eksempler på de udfordringer, du finder her:

Der er flere ressourcer, som jeg gerne vil dele med dig, men for at forhindre at dette bliver for langt, kan du tjekke dette link for at se min fulde liste over anbefalede kurser.

Det er 5 sjove front-end udviklingsprojekter, du kan prøve i dag. Igen er disse ment som udgangspunkt. I sidste ende er det op til dig at tilpasse det til at tilføje en lille smule af dit personlige touch :)

Husk, det handler om praksis. Du SKAL bygge ting for at forbedre din færdighed.

Lær ikke kun ved at se.

Lær ved at bygge.

Lær ved at gøre.

- Kyle Prinsloo (@study_web_dev) 24. juni 2020

God kodning!

Tak for læsning og jubel for nu,

Kyle

Følg mig på Twitter for flere tip.