Как да станете по-добър разработчик от преден край чрез изграждане на проекти (включени идеи)

Ако искате бързо да проследите растежа си като преден разработчик, нищо не може да се направи, като правите реални проекти за развитие.

Истината е, че можете да гледате всички уроци и курсове по света, но без приложение и практика няма да научите наистина умения, които са ви необходими, за да работите по реални проекти.

Клиентските проекти не се предлагат с инструкции стъпка по стъпка, защото в противен случай изобщо не биха имали нужда от вас. Ще трябва да мислите нестандартно, да намирате решения, да правите компромиси и да пробивате пътя си до финалната линия.

Най-добрият начин да научите тези умения е да направите някои проекти за разработчици от предния край и да научите по пътя. А най-добрата част? Дори не ви е необходим клиент, за да започнете, защото можете да направите тези проекти сами.

Как да изберем личен проект за развитие отпред

Имайте предвид нивото на уменията си

Не избирайте проект, който е твърде напреднал за вашето ниво на умения, особено ако сте от типа, който губи мотивация, когато нещата станат твърде трудни.

Но не забравяйте, че тъй като целта тук е да ви помогне да овладеете разработката отпред, изберете проект, който надхвърля текущото ви ниво на умения, но все още е изпълним.

Например, ако наскоро сте научили HTML и CSS, е време да преминете към ниво, като научите JavaScript.

Решете личен проблем или проблем, който ви интересува

Също така е по-вероятно да се насладите и да се придържате към даден проект, ако той решава вашите собствени проблеми или изпълнява вашите собствени желания.

Може би винаги губите представа за времето, когато превъртате във вашата емисия новини във Facebook, или искате уебсайт, където можете автоматично да генерирате увлекателни миниатюри в YouTube.

Помислете за личен проблем, който можете да разрешите с технология и започнете от там. Предложенията в тази статия са предназначени само за отправна точка. Ще бъде много по-добре, ако го промените, за да добавите своя уникален обрат.

4 забавни проекта за преден край за развитие

Изградете клонинг на уебсайт.

Умения за учене: HTML, CSS, JavaScript и / или Bootstrap.

Изграждането на клонинг на уебсайт е чудесен начин да проучите как е изграден и да научите основите на структурата на страниците, цветовете, шрифтовете, медиите, таблиците и други. Влезте в колкото се може повече подробности, за да копирате оригинала.

Изберете уебсайт, който ви харесва, и създайте негов клонинг сами. Не гледайте изходния код колкото е възможно повече, за да извлечете максимума от него.

Клонирането на Google всъщност е едно от упражненията на Thinkful за техните студенти по кодиране. Thinkful е образователна компания, която предлага технологични курсове, включително уебкамп за уеб разработка.

Можете също да следвате това упражнение, за да ви помогне да клонирате целевата страница на приложение, наречено Karma WiFi. Създаден е от Кайл Коски, един от менторите на Thinkful, и използва HTML и CSS.

Хубавото на клонирането на уебсайт е, че можете да изберете нивото на сложност на уебсайта. Ако тепърва започвате, един прост уебсайт, който се нуждае само от HTML и CSS, е добро място да започнете. Ако сте по-напреднали, изберете уебсайт, който изисква JavaScript или React.

Създайте игра за викторина на JavaScript.

Умение за учене: JavaScript

JavaScript е език за програмиране, който ви позволява да създавате интерактивни уеб страници. Това е езикът, който използвате, когато създавате отзивчиви елементи като менюта, видео плейъри, анимации, интерактивни карти и дори игри в браузъра.

Но преди да продължим, важно е да разберете защо бихте искали да изградите тест.

Това е повече от забавление и игри. Тестовете всъщност набират популярност като инструменти за маркетинг на съдържание. Виждали ли сте някога такива неща?

Тестовете са страхотни маркетингови инструменти, защото са интерактивни. Според анкета на Content Marketing Institute, 81% от търговците са съгласни, че интерактивното съдържание - което е всякакъв вид съдържание, което изисква от потребителя да участва - привлича вниманието по-ефективно от статичното съдържание.

Поради тази причина тестовете се използват за различни маркетингови цели. Тривиалните тестове, като този отляво, се използват за стимулиране на трафика към уебсайт. Някои търговци също използват викторини, за да квалифицират потенциални клиенти, да сегментират потенциални клиенти и да увеличат ангажираността.

Обяснявам това, защото като разработчик вашата задача е не само да се уверите, че нещата изглеждат красиви, но и да създадете функции, които са лесни за ползване и ще направят уебсайта на вашия клиент по-ефективен при постигане на целите му за продажби и маркетинг.

За да създадете тест, разгледайте тези уроци за правене на викторини за JavaScript от WebDevTrick и SitePoint. Ето как може да изглежда вашият JS тест:

Създайте свой собствен мобилен QR четец.

Умение за учене: JavaScript

Баркодовете и QR кодовете са променили начина ни на пазаруване. Клиентите вече могат да сканират продукт със своите смартфони и да открият различна информация за него, като например цената или къде могат да го купят.

Също така елиминира необходимостта от въвеждане на дълги кодове на уебсайт като кодове за активиране или номера на модели, което прави тяхното изживяване при пазаруване по-лесно и безпроблемно.

Противно на това, което мислят другите, за сканиране на QR кодове не ви е необходимо приложение за местен телефон.

Уебсайтовете, работещи на смарт устройство с камера, могат да свършат работа.

Това ръководство ви показва стъпка по стъпка процеса на създаване на ваш собствен четец на QR кодове.

Ще използвате HTML и JavaScript, но най-важната част е използването на JS библиотека, която може да интерпретира QR кода. Добрата новина е, че няма да се налага да го създавате от нулата, защото има много чудесни библиотеки за точно тази цел.

Изградете приложение за времето.

Умение за учене: Ъглов 8

Angular е една от трите най-популярни фреймворк рамки за разработка заедно с React и Vue.js. Той обикновено се използва за изграждане на базирани на формуляр приложения (където трябва да се регистрирате, за да създадете акаунт), но може да се използва и за изграждане на игри и дори приложения с елементи на виртуална реалност.

Има много подробен урок стъпка по стъпка за Medium, който учи начинаещите как да създадат красиво приложение за времето с Angular 8 (най-новата версия на Angular). Приложението за времето изглежда така:

Това приложение се отличава с изчистен, минималистичен дизайн със зашеметяващи илюстрации и опростен интерфейс. Той също така има елегантна функция за светъл и тъмен режим, която добавя повече усет към него.

Чудесното при този проект е, че ще усетите какво е да създадете използваемо, отзивчиво приложение от нулата. Ще научите всичко от инсталирането на Node.js и Angular CLI до тестването на вашия код с LightHouse.

И въпреки че създателят на урока очевидно е вмъкнал собственото си предпочитание за дизайн, можете да добавите свой собствен стил и да бъдете толкова креативни, колкото искате. Можете да си поиграете със стила и анимациите на CSS и дори да използвате собствено лого, икони и други дизайнерски материали.

Направете това правилно и ще имате впечатляващо приложение за времето във вашето портфолио.

Можете да получите достъп до урока тук.

Въпреки че този урок е удобен за начинаещи, все пак се нуждаете от малко ъглово познаване. Ако искате да научите Angular, най-доброто място да започнете е Angular.io.

Проектирайте и кодирайте своя собствен уебсайт за портфолио.

В типичен проект най-вероятно ще работите заедно с уеб дизайнер, който извиква снимките за това как ще изглежда уебсайтът.

Въпреки че дизайнът и разработката са може би две различни области, разбирането на уеб дизайна не само ще добави още един набор от умения към вашия арсенал, но и ще ви подготви, ако решите да отидете самостоятелно като свободна професия и да работите по проекти от проектиране до внедряване.

Проектирането и кодирането на вашия собствен уебсайт на портфолио ще ви даде свободата да демонстрирате своята артистична и техническа страна едновременно.

Първата стъпка е да помислите за вашето послание или марка . Какви са основните ви услуги, на кого искате да обслужвате и защо трябва да избират вас? (Прочетете повече за марката тук.)

Второто е да се създаде фиктивен дизайн, който да детайлизира оформлението, цветовете и типографията.

Също така, помислете за тема. Минималистично ли е или силно и фънки? Едноцветен ли е или ще използва смели цветове? След това направете списък на страниците, от които се нуждаете. Това често включва страница за контакт, няколко публикации в блога, страница за мен и страница с условия.

Трето, кодирайте го ! Използвайте съвременен CSS за оформление на сайта, добавяне на анимации, добавяне на висококачествени изображения и др. Небето тук е ограничението - можете да правите каквото искате с вашия уебсайт на портфолиото, защото той е ваш - отидете!

Къде мога да практикувам разработка отпред?

Въпреки че най-добрият начин да практикувате разработка отпред е чрез създаването на реални уебсайтове за реклами на приложения сами, все пак е чудесно да имате място за получаване на съвети, достъп до уроци и получаване на поддръжка, когато закъсате или се нуждаете от мнение за нещо.

Това са чудесни места за получаване на помощ, докато практикувате разработка отпред:

  1. freeCodeCamp.org - Това е уебсайт, пълен с безплатни уроци по теория на уеб разработката, езици и най-добри практики. Тук има и страхотна общност, която може да ви помогне с вашите въпроси.
  2. Съвременни HTML и CSS от самото начало - Това е курс Udemy от Брад Травърси. Той е пълен с полезна информация и наистина може да ви научи на всичко, от което се нуждаете, за да започнете с тези езици.
  3. Frontendmentor.io - Тук можете да намерите безплатни и първокласни „предизвикателства“ с размер на хапка, които можете да направите в свободното си време, за да развиете своя набор от умения. Трудността на предизвикателствата варира от „младши” до „напреднал”. Ето примери за предизвикателствата, които ще намерите тук:

Има още ресурси, които бих искал да споделя с вас, но за да не бъде твърде дълго, можете да разгледате тази връзка, за да видите пълния ми списък с препоръчани курсове.

Това са 5 забавни проекта за разработка отпред, които можете да опитате днес. Отново, те са предназначени като отправни точки. В крайна сметка зависи от вас да го персонализирате, за да добавите малко от вашето лично докосване :)

Не забравяйте, че всичко е свързано с практиката. ТРЯБВА да изградите неща, за да подобрите набора си от умения.

Не се учи само като гледаш.

Учете се чрез изграждане.

Учете се като правите.

- Kyle Prinsloo (@study_web_dev) 24 юни 2020 г.

Приятно кодиране!

Благодаря за четене и наздраве за сега,

Кайл

Последвайте ме в Twitter за още съвети.