Кой не е привлечен от очарователна корица на книга? Време е да започнете пътуването си, като разработите красиви и удобни потребителски интерфейси. Бъдете готови да станете „разработчик от страна на клиента“.

Front-end web development е практиката за конвертиране на данни в графичен интерфейс чрез използването на HTML, CSS и JavaScript, така че потребителите могат да преглеждат и взаимодействат с тези данни. Става въпрос за това как един дизайн всъщност се внедрява в мрежата.

Няма по-добро време за начало от тези дни на Корона. По-горе има илюстрирана пътна карта, фокусирана върху това как да станете Frontend уеб разработчик през 2020 г. (Това страхотно илюстровано ръководство за това как да станете уеб разработчик е създадено от Kamranahmedse и публикувано в GitHub под лиценза CC BY 4.0 .)

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

Улесняване на начинаещи …………

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

Предните уеб разработчици използват три основни езика за кодиране, за да кодират дизайна на уебсайта и уеб приложенията, създадени от уеб дизайнери:

  • HTML
  • CSS
  • JavaScript

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

HTML и CSS

HTML (Език за маркиране на хипертекст) иCSS (Каскадни стилови таблици) са най-основните градивни елементи на уеб кодирането. Без тези две неща не можете да създадете дизайн на уебсайт и всичко, което ще получите в крайна сметка, е неформатиран обикновен текст на екрана. Не можете дори да добавяте изображения към страница без HTML!

Преди да започнете каквато и да е кариера в уеб разработката, ще трябва да овладеете кодирането с HTML и CSS. Добрата новина е, че придобиването на солидни работни познания за което и да е от тях може да стане само за няколко седмици.

Най-добрата част: само знанието за HTML и CSS ще ви позволи да създавате основни уебсайтове.

JavaScript

JavaScript ви позволява да добавите много повече функционалност към уебсайтовете си и можете да създадете много основни уеб приложения, като използвате само HTML, CSS и Javascript (съкратено JS). На най-основното ниво JS се използва за създаване и контрол на неща като карти, които се актуализират в реално време и онлайн игри. Сайтове като Pinterest използват силно JavaScript, за да направят своя потребителски интерфейс лесен за използване (фактът, че страницата не се презарежда, когато закачите нещо, е благодарение на JavaScript!).

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

jQuery

jQuery е JavaScript библиотека: колекция от плъгини и разширения, която прави разработката с JavaScript по-бърза и лесна. Вместо да се налага да кодира всичко от нулата, jQuery позволява на преден уеб разработчик да добавя готови елементи към проекти, след което да персонализира според нуждите (една от причините, поради които познаването на JavaScript е толкова важно). Можете да използвате jQuery за неща като таймери за обратно отброяване и дори автоматично пренареждане и преоразмеряване на мрежови оформления.

JavaScript Frameworks

JS рамки (включително AngularJS, Backbone, Ember и ReactJS) дават готова структура към вашия JavaScript код. Има различни видове рамки на JavaScript за различни нужди, въпреки че четирите споменати са най-популярни в действителните обяви за работа. Тези рамки наистина ускоряват разработката, като ви дават бърз старт и могат да се използват с библиотеки като jQuery, за да сведете до минимум колко кодиране от нулата трябва да направите.

Front End Frameworks

CSS и предните рамки (най-популярната предна рамка е Bootstrap) правят за CSS това, което JS Frameworks правят за JavaScript: те ви дават отправна точка за по-бързо кодиране . Тъй като толкова много CSS започва с абсолютно едни и същи елементи от проект до проект, рамка, която дефинира всичко това за вас предварително, е супер ценна. Повечето обяви за работа на преден край разработчици очакват да сте запознати с това как работят тези рамки и как да ги използвате.

Опит с CSS препроцесори

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

Опит с RESTful услуги и API

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

Да приемем, че искате да напишете приложение, което да ви показва всички ваши приятели в социалните медии в реда, в който сте станали приятели. Можете да се обадите на RESTful API на Facebook, за да прочетете списъка си с приятели и да върнете тези данни. Същото нещо и с Twitter (който също използва RESTful API). Общият процес е един и същ за всяка услуга, която използва RESTful API, само върнатите данни ще бъдат различни.

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

Хвърлете един поглед!

Има тонове пътни карти, блогове и статии, достъпни в интернет, които да ви помогнат да преведете пътя си.

В тази статия бих искал да хвърля светлина върху някои от първоначалните грешки, които учениците правят като начинаещи!

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

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

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