Как я решил перейти в IT
По образованию я инженер-строитель. Пять лет работал проектировщиком в конструкторском бюро, рассчитывал надёжность зданий и сооружений. В какой-то момент я понял, что мне не хватает развития. Я сидел как леший в болотце и потихоньку обрастал «ментальным» жирком. Пришла мысль сменить профессию.
В моём окружении всегда было много айтишников. Они постоянно рассказывали об интересных рабочих задачах и новых технологиях. А для меня самой «горячей» новостью было изменение СНиПа 85-го года — убрали опечатку в слове. Хаха, вы серьёзно? Потому я и решил попробовать себя в IT.
Практики изучения, которые я описываю ниже — не единственный верный путь. Но это то, что сработало для меня.
Я пробовал разбить обучение на последовательные шаги, но это оказалось нереальным: нельзя сначала изучить HTML и CSS, а через месяц взяться за JS. Это всё работает вместе. Поэтому придётся на каких-то этапах совмещать несколько источников. Главная идея — итеративное обучение: почитал теорию — закрепил на практике. И так повторять до бесконечности.
Закладываем фундамент
Я начал с курсов от HtmlAcademy. Ребята дают основы и закладывают правильный фундамент, на который потом проще будет надстраивать свои навыки.
Очень круто, что на курсах нет «голой» теории — вы сразу учитесь на практике.
Сам я прошёл только начальный и средний уровень, но если у вас будет желание и энергия заглянуть в продвинутый — не пожалеете.
Что даст: понимание, что такое вёрстка, HTML, тэги и атрибуты — вы научитесь верстать сетки, оформлять текст и немного поиграете с анимацией.
Прививаем хороший стиль с самого начала
Фундамент заложен, можно углубиться в вёрстку. Я взялся за методологию БЭМ от Яндекса. Её используют почти все компании для создания структуры классов.
Полностью всю методологию можно не изучать, но раздел «Быстрый старт» знать и использовать надо.
Ещё есть такой парень — Вадим Макеев. Он веб-евангелист (что бы это ни значило). Рассказывает и показывает, как делать валидную и удобную вёрстку. Погуглите его видосы и слушайте подкаст. По моему мнению, Вадим иногда перегибает палку, но рассказывает вещи, которые надо знать.
У него есть хороший доклад, который вдохновил меня с самого начала — «Людоедский интерфейс».
Что даст: умение различать хороший подход к вёрстке от плохого и создавать иерархию классов, на которую и через полгода можно смотреть без отвращения.
Практикуемся
Получили базу — нужно пробовать создавать тестовые странички. Гуглите «бесплатные PSD макеты сайтов», скачивайте и верстайте их. Не забывайте про адаптивность.
Скачайте и установите редактор исходного кода — теперь это ваш главный инструмент в работе. Я использовал Atom и VS Code. Это бесплатные редакторы. Они легко оптимизируются под себя разными расширениями.
На этом этапе нужна критика. Ищите в своём окружении или на форумах фронтендеров и показывайте им свои макеты. Фидбек от эксперта поможет найти слабые места и пробелы в знаниях.
Положите любимые свёрстанные макеты в портфолио — будет плюсом при поиске работы.
Что даст: реальный опыт вёрстки, пусть и в «домашних» условиях.
Изучаем современные способы работы с сеткой
Нужно знать flexbox и grid. С их помощью можно создавать гибкую сетку и радоваться жизни, а не страдать как наши предшественники с табличной версткой и флоутами.
Лично для меня flexbox стал откровением. Я пытался сделать хитрую сетку с помощью флоутов, когда подошёл мой друг и сказал «Да тут на флексбоксах делов на 5 минут». И да, действительно на 5 минут… даже на 4! После этого мой мир изучения фронтенда изменился :)
Что даст: опыт использования современных технологий и подходов к работе.
JavaScript
Не стоит забывать про JavaScript — без него сейчас никуда. Есть отличный учебник от Ильи Кантора — «Современный учебник JavaScript». Первая часть про основы JS, вторая про работу с DOM — как управлять элементами на странице с помощью JS. Учебник можно изучать бесконечно, но для начала хватит первых пяти глав.
Здесь главное не переборщить с теорией: освоил тему — закрепи на практике. Придумывайте себе задачи, которые требуют использования JS: скрыть элемент на странице при нажатии на кнопку; показывать или скрывать элементы на странице по таймауту.
Что даст: начальное знание JavaScript.
Что ещё нужно знать
Ещё есть такая штука как Webpack — сборщик модулей. Его используют на проектах, в которых много подключаемых файлов и зависимостей между ними. У Ильи Кантора есть скринкаст про него. Он, правда, немного устарел — вышло уже несколько новых версий Webpack. Но принципиальных отличий нет, для фундамента самое то.
Неплохо бы изучить и препроцессоры Sass/SCSS и Less. Они оптимизируют работу с CSS: с переменными, правилами вложенности, функциями и логическими блоками.
Добавлю, что не все браузеры будут одинаково отображать ваши свёрстанные макеты. Например, IE не дружит с флексбоксами, и далеко не все современные браузеры полностью поддерживают грид. Поэтому всегда проверяйте свои макеты в Chrome, Mozilla Firefox, Opera, Safari, IE и Edge.
Если вы уверенно чувствуете себя в JS, можете начинать выбирать фреймворк для изучения. В России, как я вижу, самый популярный это React. Рядом с ним стоят Vue и Angular. Каждый из них чем-то лучше и чем-то хуже других — всё зависит от задачи, которую нужно решить.
Что в итоге
Я занимался самостоятельно по 2-3 часа в день в течение шести месяцев. И за это время я…
- узнал, что такое HTML, CSS, JS, понял, как это всё применяется и работает вместе;
- научился отличать хорошие подходы к разработке от плохих, начал замечать косяки на своих любимых сайтах;
- узнал, что такое табличная верстка, флексбоксы и гриды, научился их использовать;
- понял, как работает один из препроцессоров и научился применять его в работе;
- смог собрать проект с помощью Webpack;
- смог самостоятельно сверстать и прикрутить JS на сайт;
- научился работать с редактором кода и оптимизировал его под себя.
Ищем работу по новой специальности
Полученных навыков хватит, чтобы претендовать на позицию фронтенд-разработчика уровня джуниор.
Чтобы попасть во fuse8, я взял отпуск на текущей работе и напросился на бесплатную стажировку. За эти две недели я старался показать всё, на что способен. В итоге меня взяли джуниором. Тут-то и началось основное обучение.
И не забывайте, что на ваш успех в работе влияют не только хард-скилы. Прокачивайте себя, приобретайте гибкие навыки (софт-скиллы): коммуникативность, умение работать в команде, креативность, тайм-менеджмент и другие.
Авторы и источники фото: Julian Moreau, Ricardo Gomez Angel, Adrian Trinkaus, Kelly Sikkema, David Siglin, Frederico Izzo on Unsplash.
Что почитать еще:
Софт скиллы в IT-сфере: что прокачивать
Советы тимлиду: что важно в командной работе
