Как стать веб разработчиком.
статья

Как стать веб разработчиком.

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

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

        Основа основ - это язык разметки html. Сегодня существует различные стандарты языка, а именно версия html 5 и 4. Ранее актуальной была версия html 4, соответственно начать учёбу можно и с версии html 4, но в итоге писать код и работать придется с html 5.

        Сегодня есть три авторитетных ресурсах, которые позволят вам изучать язык гипертекстовой разметки.

        Во-первых, это htmlbook.ru и его курсы «самоучитель html 4», а также курс «введение в html5».

        Во-вторых, это htmlacademy.ru и его интерактивный курс по html5, в котором вы найдете, множество бесплатных уроков с возрастающей сложностью.

        В-третьих, это webref.ru и его «самоучитель html версия 5».

        В целом все три ресурса бесплатные необходимо пройти все три. Изучать необходимо, именно в следующем порядке: начните с htmlbook.ru, продолжите htmlacademy.ru и закончите webref.ru

        Вместе они дадут вам наиболее целостные и валидные знания. Также если вы хотите писать качественный html код,  прочитайте книгу погружение в html5 автора Марка Пилигрима. Для разработки вам потребуется редактор кода subline text 3, обязательно добавьте к нему плагин emmet, чтобы увеличить скорость написания кода.

        Подводя итоги по html получается, что вам нужно установить редактор кода subline text 3. Пройти три курса, затем поставить плагин emmet, научиться быстро, писать код при помощи emmet и в итоге прочитать книгу погружение в html5.

        В целом, весь этот план можно пройти за один месяц.

        Далее необходимо изучить  каскадные таблицы стилей или же css. Так же, как и с html вам понадобятся следующие ресурсы:

- htmlbook.ru и его «самоучитель css», а затем «введение в css 3»

- htmlacademy.ru с  курсами  «основы css».

- webref.ru с курсами «основы css», «блочные модель в css», «текст css», «позиционирование в css» и конечно же «продвинутый css».

        Работа с css сложнее, чем с html. Здесь уже в качестве альтернативы для emmet, есть так называемые препроцессоры. Самым популярным является SCSS.

        Если говорить простыми словами, то препроцессоры - это программы, которые предназначены для ускорения написания кода, путем усовершенствования синтаксиса языка.

        Однако, препроцессоры не являются заменой самому языку css. Поэтому на выходе они выдают готовый css код. Иными словами вы пишете на SCSS, а затем на выходе получаете готовый css код, который используете на своем веб-сайте.

        Наиболее простым и понятным объяснением работы препроцессоров, будет сравнение работы коробки передач в автомобиле: представьте, что css - это ручная коробка передач, а scss это автоматическая. На  этапе изучения  препроцессоров необходимо изучить уроки на  сайте uroki-css.ru, там вы найдете простое видение в анимацию css3.

        Как и в html, у css есть версии. Текущая и наиболее актуальна это версия css 3. Для детального изучения работы css, прочитайте книгу автора Дэвида Макфарланда «Большая книга css3» или «CSS каскадные таблицы стилей», подробное руководство автора Эрика Майера.

        По итогам изучения css3, вы уже должны понимать и уметь объяснять, что такое язык css, блочная верстка, препроцессоры и какие они бывают ,css фреймворк bootstrap и foundation, css библиотеки, работа с google fonts, адаптивность, табличная верстка, позиционирование, а также в чем разница между static, absolute и relative,  понятие очистки float, flexbox, mobile first, table of contents, методологии и так далее.

        Более того, желательно знать, как браузер разбирает css код, и какие свойства заставляют его перерисовывать контент, вызывая нагрузку.

        Для придания функциональности вашему сайту необходим Javascript. Изучать javascript  будет уже не так просто, как html или css. Этот язык идет за руку с библиотеками JQuery и NodeJS.

        Версий у языка явных нет, но есть стандарт, именуемый ECMAScript. Наиболее поддерживаемым и актуальным сегодня является стандарт ES5, однако существуют и более новые стандарты, такие как ES6 и ES7, но они работают не во всех браузерах, и поэтому так активно не применяются, хоть существует трансляторы такие как BabelJS.         Ресурс для изучения js можно выделить всего один - это learn.javascript.ru. Пожалуй, самый современный самоучитель по языку javascript. Для закрепления знаний необходимо прочитать книгу Дэвида Флэнагана «JavaScript. Подробное руководство».

        Во время или после изучения языка вам придется изучить библиотеку JQuery, которая призвана облегчить работу с JavaScript являясь, самой популярной библиотекой для языка.

        Дальше, вам необходимо больше практиковаться, научиться писать свои слайдеры, табы, аккордеоны, модальные окна и т.д. Потом, когда вы достаточно уверенно будете чувствовать себя в языке JavaScript и работе с DOM, необходимо начать изучение или хотя бы рассмотрение самых популярных библиотек, таких, например, как: Slick, Owl, Carousel, Flickity, Masonry pkgd, JQuery UI Sortable, PhotoSwipe, Magniffic Popup, Cute Slider, JQuery Form Validation, Select2, JQuery JSON Editor, Face Detection, progress.js, Tooltipister,Typeheaed, FitText, PrettyEmbed, Fitvids, fullPage.js, velocity.js, Tree.js, MatchHeight, Slideout.js, FocusPoint, Liquid Images, Vide, Swipe, AutocompleteJS, Swiper, Template7, JsBarcode, InputMask, Remodal, glDatePicker, Chart.JS, EasyTabs и так далее.

        Их достаточно много, и это конечно не самый полный список, но после хотя бы поверхностного рассмотрения всех представленных библиотек, вы сможете в значительной степени ускорить и улучшить свои навыки в работе с javascript.  

        После всего этого, если у вас останется желание дальше познавать и совершенствоваться в языке javascript, настоятельно вам рекомендую изучить React и Angular 2. Первая позволит вам строить эффективные пользовательские интерфейсы. Вторая является полноценным MVVM фреймворком, на котором можно писать целые SPA, иными словами – одностраничные приложения, такие как gmail.         

        Не будем забывать  о Node.js. Это javascript, работающий вне браузера, который может быть использован, чтобы писать даже программы под телефон или компьютер. На него тоже определенно стоит взглянуть, даже если пока и не изучать. К примеру, редакторы кода Atom, Visual Studio code и Brackets написаны как раз применением Node.js. В целом по javascript это все.

        По итогам всего этого или же по ходу разработки настоятельно рекомендую вам перейти на использование IDE WebStorm, разработанной специально для ускорения  работы frontend программистов.

        Веб программирование -  это не только умение писать SPA или разные библиотеки и обработчики, это также умение, разбираться в веб-дизайне в сфере UI/UX, в тестировании, в принципах работы сети и работы браузерного движка, умение эффективно пользоваться инструментами для работы, в умение эффективно работать githab, в умении адаптировать шаблоны под популярные CMS.

        После изучения всего приведенного, вы без сомнения сможете назвать себя веб-разработчиком, а именно frontend разработчиком, а если наберете реальный практический опыт, то профессионалом.