Что конкретно нужно, для того, чтобы быть профессиональным front-end разработчиком?

Когда вы заходите на свой любимый сайт, то задавали ли вы себе вопрос, почему именно он? Почему не другой подобный ему аналог?

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

Скажем так – я работал по принципу «Есть задача, а значит цель задана, делаем как нужно, в остальном разберемся по ходу дела».  В целом так работают многие и в этом нет ничего суперстрашного, но когда ты не имеешь цели, стать востребованным специалистом, то появляются несколько сложностей:

  • Сложно найти работу;
  • Легко потерять имеющуюся;
  • Низки уровень вознаграждения;
  • Большая трата времени на выполнение задач;

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

Что такое Front-end разработка?

Front-end разработка нацелена на создание интерфейса с которым будет взаимодействовать конечный пользователь. В список работ по Front-end не входит функциональная часть на сайте – важно только оформление типографии и объектов.

Кто такой front-end разработчик?

Front-end разработчик или как их еще называют верстальщик. Это человек, который может реализовать веб-дизайн с помощью таких языков как HTML, CSS и JavaScript. Я писал о том, что нужно знать, чтобы начать верстать свои первые макеты.

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

В целом если зайти на любой сайт с работой, и зайти в раздел Веб-разработки то реально, возникает впечатление, что верстальщик, Front-end Developer, Web developer и Full-stack developer это совершенное разные лица. Но на деле, когда начинаешь читать требования оказывается, что это не совсем так.

Возникает простой вопрос «Что за х….я?» Почему это не можно называть каким-то одним именем, да и требования порой бывают выписаны огромным списком, мол нужно знать то-это, еще то ну и вот это. Человек-хамелеон какой-то получается.

Но суть остается одна – вам дизайнер дает макет, а вы, используя HTML, CSS и JavaScript воплощаете в жизнь эту задумку на картинке. Все….

Эта задумка будет уметь воспроизводить анимацию, если такая задумана, переключаться между собой по ссылкам, ну и отображаться на каждом устройстве одинаково красиво вне зависимости от размера дисплея устройства.

Какие навыки требует фронтэндшик (Front-end разработчик)?

Как я уже писал выше, этот человек должен отлично владеть тремя навыками:

  • HTML;
  • CSS;
  • JavaScript.

Но на этом еще не все, так как это просто те инструменты, с которыми нужно будет работать. Дальше возникает вопрос, а как с ними можно работать?

Вы записываете этот код в документ, а он отображается в браузере. Чаще всего это даже выглядит так:

Вы создаете полноценный дизайн которые отлично запускается на разных браузерах и устройствах, и передаете его Back-end Разработчику, который настраивает и запускает верстку на своем веб-сервере, который он создал.

На других профессиях это можно изобразить так:

  • Архитектор нарисовал план (веб-дизайнер);
  • Строитель создал фундамент, поставил все основные стены и провел электрику (Backend);
  • А дальше пришел дизайнер интерьера и навел красоту как внутри, так и снаружи, в более дешевых вариантах, это просто штукатурщик (Frontend).

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

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

HTML\CSS

HTML (Hyper Text Markup Language) и CSS (Cascading Style Sheets) без этих двух вещей вы никогда не создадите веб-дизайн и не сможете работать с текстом на сайте. По правде, вы даже не сможете добавить картинку на сайт без HTML в общем эти технологии нужно знать максимально идеально.

То есть что бы начать быть веб-разработчиком, то в самом начале вам нужно выучить эти две вещи, а вот в зависимости о того, какую вы ветку для себя выберете, решает глубину требования к знаниям. Например, если вдруг вы выбрали Back-end, то знать эти две технологии так же нужно будет знать, просто не так глубоко, как в этом нуждается верстальщик.

JavaScript

JavaScript делает сайт более функциональным. То есть если нужно сделать модальное окно, сделать какой-то переключатель или реализовать сложную анимацию, то скорее всего вы решите эту задачу именно с JavaScript.

В некоторых случаях, вы можете создавать целые блоки и дизайном с помощью одного лишь JS, но это будет означать то вы будете использовать готовую технологию, созданную кем-то, а значит это не освобождает от требований к знанию двух предыдущих технологий.

К примеру, если вы зайдете на facebook и будете листать ленту, то можно заметить, как лента никак не закончится – не благодарите, это ее постоянно подгружает JavaScript. Если говорить серьезно, то все популярные сайты используют JavaScript потому без его знания вам не обойтись.

jQuery

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

Если вдруг, вам нужно будет сделать соседу предпринимателю небольшой сайт где он может выложить свои товары, то скорее всего на этом сайте вы будете использовать эту библиотеку.

Ну, это если вдруг вам в голову взбредет использовать какую-то CMS систему, а так если вы будете использовать самописный сайт (правда зачем я не пойму?!), то использовать jQuery или нет, это будет уже вашим решением.

Если говорить серьезно, то я и сам был из тех, кто умел пользоваться jQuery раньше, чем самим JavaScript, настолько он прост.

JavaScript Фреймворки

JavaScript фреймворки – это готовая система, в которой вы можете создавать целые вебсайты значительно упростив для себя множество задач и не только для себя. Фреймворк значительно упрощает и ускоряет работу за счет того, что множество функционала в этой системе уже готово, вам нужно только взять и использовать это.

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

  • Angular
  • React
  • Backone
  • Vue.js
  • Knockout

В целом их значительно больше, я лишь перечислил самые популярные за которые на рынке труда платят очень хорошую сумму денег.

 Front-end фреймворки

Кроме JS фреймворков существуют и Front-end фрейворки. Они же упрощают работу с HTML и CSS. То есть не придется постоянно воевать с шириной тела документа, кнопками, надписями и всему тому подобным. Все это есть уже готовое, нужно лишь взять и использовать.

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

Среди самых популярных могу выделить такие:

  • Bootstrap
  • Foundation
  • Pure CSS
  • Bulma
  • Skeleton

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

CSS препроцессоры

CSS препроцессоры это относительно новая технология которая значительно упростит процесс разработки макета с помощью css. Она очень сильно упрощает написания кода на css и добавляет множество интересных возможностей.

Лично мне нравится тем использовать Sass и Less из-за возможности создания css дерева. Теперь не нужно писать много кода, если он генерируется автоматически. В целом начать работать с этой технологией очень просто, а научиться всем нюансам вполне реально за час, если вы конечно умеете работать с css. Я кстати написал целую интерестную статью о том как ты сможешь начать работать с препроцессорами, точнее о том как компилировать scss и другие препроцессоры.

Кроме того, есть и другие интересные вещи, например Gulp, стоит обратить на него внимание в первую очередь, если хочешь быть профи.

Работа с Rest API

Rest API сегодня используют множество социальных сетей. Точнее социальные сети их специально создают для разработчиков, чтобы те в свою очередь создавали очень удобные приложения как для мобильных, так и веб-сайты.

Чаще всего лично я использую Rest API для того, чтобы сделать авторизацию и регистрацию на сайте через социальные сети, либо для работы с картами от google. У них всех так же крутые документации.

Мобильная верстка (Респонсив верстка)

Уже сегодня, пользователей с телефонов значительно больше, чем пользователей с компьютера. А это естественно меняет все ваши цели. Цель становится другой потому, что вам не только важно сделать простой, удобный и красивый сайт, но и сайт, который будет хорошо отображаться на разных мобильных устройствах.

Раньше делались две версии сайта – мобильная и десктопная. Дальше мы выцепляли по юзер агенту, с какого устройства человек заходит, ну а дальше просто делали редирект. Сейчас это лишнее действие, ведь сайт может быть резиновый, а значит полностью подстроиться под ваш размер дисплея, правда нужно будет проработать каждый момент, и смотреть с разных разрешений.

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

Разработка для разных браузеров

Самая большая верстальщика, это тестирование – не все его любят. То есть сделал сайт на хроме, и хватит. Но так дело не пойдет. Ведь сайт после того как сделал, нужно проверить на разных браузерах. Самый несчастный это Explorer, на котором вечно есть какие-то проблемы.

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

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

Если все норм идем дальше, если нет, про правки, правки и еще раз правки.

Понимание принципа работы популярных CMS

Тут, наверное, даже не понимание принципа работы, а просто верстка для cms, а все потому, что самые популярные блоги и интернет магазины — это в основном сайты на CMS.

Статистика интернета говорит, что цифра переваливает за 60%, правда ли это, я не знаю, но это значит, что там крутятся неплохие деньги.

От себя скажу, что самые популярные это:

  • WordPress;
  • Joomla;
  • Magento;
  • Drupal;

Есть еще несколько, но если вы вдруг станете экспертом по WordPress, то на рынке просто не будет вам цены, проще говоря, готовьте лопату будете грести деньги.

Тестирование и отладка

В мой чеклист входит много чего разного, после создания сайта. Это целый набор инструментов, наработанных за годы работы. Те, которые работают безотказно это:

  • CSS Валидатор;
  • HTML Валидатор;
  • Google PageSpeed Insights;
  • Google Chrome Console (F12 в Google Chrome);

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

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

Контроль версий (Git)

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

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

Мы сделали, и тут он резко передумывает мол старый вариант все-таки лучше. Что делать? Заново верстать, ли восстановить старый вариант.

В общем Git упрощает всю работу в разы.

Решение проблем и умение выявлять ошибки

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

Я к примеру, вот недавно имел подобную проблему. Была на сайте форма регистрации пользователей, и вдруг она перестала работать, хотя файлы никто не трогал. Одно что изменилось, это поставили https. Оказывается, программист прописал в js прямую ссылку на ajax файл. Один символ заставил перестать работать целую форму регистрации, переписывать я ничего не стал, просто добавил недостающую букву «s» к «http».

Но бывают проблемы значительно хуже.

Что дальше?

А дальше все просто. Если все это звучит для тебя нормально, значит это твое. Ты попал в нужное место к нужным людям. Добавь сайт в закладки и следи за обновлениями, я буду стараться только о том, что нужно. А нужно все что касается Front-end разработки.

Оставьте комментарий