обучение на фронтенд разработчика с нуля
Если бы я учил Frontend сегодня. Советы начинающим
Мой путь в веб-разработке начался 5 лет назад. За это время я успел испробовать множество технологий, а в последние 3 года развиваюсь в направлении frontend.
В этой статье я бы хотел ясно изложить, какие технологии необходимо изучить новичку, а также поделиться методами их освоения. Гайд ориентирован на людей, которые делают свои первые шаги в веб-разработке, и в нем я постараюсь подробно пояснять суть каждой технологии. Также в конце я расскажу, куда двигаться дальше.
Итак, ты хочешь стать Frontend разработчиком. Что для этого нужно?
HTML и CSS
Эти две технологии необходимы для верстки сайта. Верстка – это расположение текста, изображений, кнопок и других элементов интерфейса на странице.
С помощью HTML мы можем добавлять и описывать эти элементы. Изначально они будут «сырыми», со стандартным внешним видом. Для изменения стиля используется CSS. Он позволяет задавать цвет, размер, расположение и десятки других параметров внешнего вида элемента.
Как освоить
В первую очередь стоит ознакомиться с обзорной статьей или видеороликом об этих технологиях. Так ты поймешь их суть.
Затем верстку удобнее всего осваивать и совершенствовать на практике. Пробуй верстать макеты страниц или отдельных элементов. Также, можно попробовать смотреть на Youtube процесс верстки страницы и повторять за автором.
Поначалу будет сложно, и придется часто обращаться в гугл за решением очередной проблемы. Но со временем ты научишься быстро находить у себя в голове правильную структуру HTML и необходимые CSS свойства для верстки элемента.
Где брать идеи и макеты для верстки?
Я использовал Dribbble и CollectUI, но также можно поискать на Behance и One Page Love.
Также можно брать настоящие макеты из UI Store Design. Я советую верстать макеты из Figma, т.к. её используют многие дизайнеры, и в будущем ты вероятнее всего будешь работать именно с ней. А еще она бесплатна и работает в браузере.
JavaScript
С этого языка начинается программирование в вебе. Он позволяет управлять элементами на странице, описывать и контролировать взаимодействие с интерфейсом.
Если с HTML и CSS мы верстали страницу, то JavaScript отвечает за динамическую часть страницы: анимации, отображение данных, обработка действий и многое другое.
Зачем мне он нужен?
Простой пример. Предположим, есть страница, на которой по нажатию кнопки нужно отобразить модальное окно. HTML и CSS позволят нам сделать верстку самой страницы и модального окна. Однако зафиксировать и обработать нажатие на кнопку эти технологии не могут.
Здесь нам и нужен JavaScript. С помощью него мы описываем поведение на странице. В коде мы обозначаем: если пользователь нажал на кнопку, то нужно показать модальное окно.
Вот пример такой реализации и использованием JQuery:
С помощью JavaScript можно производить практически любые операции со страницей. Однако его возможности не ограничиваются окном браузера. С помощью платформы Node.js этот язык можно использовать для серверной разработки, сборки проектов, и многого другого. В будущем тебе это будет нужно, чтобы работать с большими проектами, собирая из через Webpack. Однако я советую сперва научиться использовать язык внутри браузера.
Как освоить
Лучше всего будет начать изучение на learn.javascript.ru. Это прекрасный ресурс, который является базой знаний как для новичков, так и для продвинутых разработчиков.
Здесь важно понять основы самого JavaScript, а также особенности его работы в браузере. Если какие-то темы покажутся тебе слишком сложными (к примеру, прототипы), то можешь пропустить их и вернуться позже.
Не стоит слишком увлекаться одной лишь теорией JavaScript. Я рекомендую параллельно с изучением пробовать свои силы и писать простые скрипты. Можно также пробовать разбирать чужие участки кода на Codepen.
Постепенно изучай новые плагины и библиотеки. Одной из самых популярных и простых для понимания является JQuery. С ней значительно проще взаимодействовать с содержимым страницы, и её можно довольно быстро освоить на базовом уровне.
По большому счету, ты часто будешь прибегать к использованию сторонних библиотек в своих проектах. Чтобы лучше понять, как это делается, рекомендую попробовать форматировать даты с помощью Luxon или сделать карусель через Owl Carousel.
Что дальше?
С базовыми навыками в HTML, CSS и JavaScript можно сделать красивый лендинг, сверстать страницы интернет-магазина или блога. Этим я и советую заниматься, чтобы закрепить знания в веб-разработке.
По большому счету, на этих технологиях можно написать почти любой интерфейс. Вопрос только в том, какая специфика будет у приложения, которое ты разрабатываешь. Чем оно больше и сложнее – тем больше различных библиотек, плагинов и технологий тебе потребуется, чтобы справиться с задачей.
Рекомендую ознакомиться с Frontend Roadmap. Здесь описаны технологии разработки интерфейсов, которые будут нужны тебе в дальнейшем.
В дальнейшем тебе наверняка будут интересны реактивные фреймворки, вроде React или Vue. Для сборки приложений на них ты освоишь Webpack, а для ускорения процесса верстки изучишь препроцессоры PUG и SASS. Или может быть захочешь углубиться в графику и научишься работать с D3 или WebGL.
Как ты уже понял, frontend в веб-разработке очень многогранен и богат различными технологиями для совершенно разных задач. Изучай, пробуй, экспериментируй и получай удовольствие от созидания красивых и удобных интерфейсов для любых целей. За это мы и любим фронтенд.
Как стать фронтенд-разработчиком? Пошаговый гид в мир фронтенда
Приветствую всех! Меня зовут Пучнина Анастасия, я ведущий разработчик в компании ДомКлик, занимаюсь фронтендом Витрины объявлений. Сегодня я хотела бы поделиться с вами своим мнением на тему того, что важно знать фронтенд-разработчику. Эта статья будет полезна тем, кто только начинает свой путь в разработке, или имеет опыт программирования в другой области и решил перейти на сторону фронтенда.
Содержание:
Кто такой фронтендер и чем он занимается?
Допустим, вы хотите арендовать квартиру: у вас есть компьютер с выходом в Интернет, вы знаете адрес другого, более мощного компьютера, который хранит огромное множество объявлений. Если представить, что привычных сайтов не существует и вы не можете, например, посмотреть объявления на карте, отфильтровать ненужные, заполнив удобную форму, вам придётся самим составлять сетевой запрос и разбираться в том, как и куда отправлять данные.
К счастью, инженеры придумали браузеры, а веб-технологии развиваются, и вам достаточно лишь воспользоваться удобным интерфейсом, который предоставляют разработчики разных компаний. Осталось сделать пару кликов, и нужная информация найдена.
Фронтенд-разработчиками называют программистов, которые отвечают за создание такой внешней стороны (англ. front end) веб-сайтов. Это клиентская часть сайта, с которой пользователь непосредственно взаимодействует на своем компьютере или телефоне (клиенте).
Многим известно, что сайты включают в себя разметку и стили, которые необходимы, чтобы обеспечить понятную структуру страницы и дизайн, однако фронтенд-разработка этим не ограничивается. Большинство сайтов, которыми мы постоянно пользуемся, это полноценные веб-приложения: почта, онлайн-банк, онлайн-кинотеатры, редакторы фото, заметки. Чтобы такие приложения работали, фронтенд-разработчики добавляют программный код, который выполняется в браузере, реализует нужную функциональность и, при необходимости, взаимодействует с сервером, динамически получая нужную информацию.
С чего начать и что читать? Чек-лист обучения
Вне зависимости от того, в какой области вы захотите работать и какие решения создавать, есть определенная база, которую, на мой взгляд, должен знать любой разработчик фронтенда.
В начале пути некоторых пугает список технологий, названий и аббревиатур во фронтенде. Их огромное множество. Но даже опытный разработчик не знает, да и не должен знать абсолютно все технологии и библиотеки, которые только существуют (ходят слухи, что каждую секунду в мире фронтенда выпускается новая библиотека:)
Три кита разработки под браузеры — это HTML, CSS и JavaScript, с которых и стоит начать.
Если у вас нет опыта в разработке и вам сложно обучаться самостоятельно, хорошим решением будет пойти на курсы фронтенд-разработчика с наставником в одной из известных школ программирования. Также хорошие курсы по вёрстке и фронтенд-разработке можно найти на Udemy и Coursera. Однако это совсем не обязательно, в интернете много бесплатных материалов и источников по необходимым темам.
Чтобы помочь вам сориентироваться, я составила пошаговый чек-лист для получения знаний, которых будет достаточно для прохождения собеседования на начинающего фронтенд-разработчика. Также прикрепила ссылки на материалы и источники на русском и английском языке, которые могут быть вам полезны.
Сохраняйте в закладки и пользуйтесь.
1. Как работает Веб
Прежде чем начать разрабатывать сайты, необходимо иметь представление о том, что происходит при открытии сайта в браузере, как работает клиент-серверная модель и что такое HTTP-протокол.
2. Среда разработки
Писать код и разметку можно даже в блокноте, но удобнее использовать специальные редакторы. Наиболее популярные среди фронтендеров:
3. Основы HTML
Изучите структуру HTML-документа, что такое теги и какие они есть, мета-теги, атрибуты, как добавлять изображения, создавать формы. Важными моментами в верстке является семантика и доступность.
4. CSS
Добавление стилей для элементов страницы. Изучаем блочную модель, позиционирование, каскадирование стилей, специфичность селекторов, псевдоэлементы, адаптивную верстку (для компьютеров, планшетов и телефонов). Учимся верстать современные макеты с помощью Flexbox и Grid.
5. Система контроля версий Git
Git поможет вам выйти на новый уровень в процессе написания кода. Это незаменимый инструмент для разработчиков, который позволяет поэтапно сохранять информацию обо всех изменениях в коде, возвращаться к разному состоянию, и многое другое. Желательно научиться работать с Git в терминале, а также попрактиковаться: создать репозиторий на Github или Gitlab и опробовать основные возможности Git на своём тестовом репозитории.
Практика. Практика. Практика!
На этом этапе я предлагаю побольше попрактиковаться и сделать свой небольшой проект, чтобы запомнить пройденный материал. Необязательно самостоятельно придумывать дизайн сайта, вы можете взять готовый макет. Создайте landing page или, например, сверстайте сайт-портфолио, сохраняйте код на Github в процессе разработки и попробуйте разместить сайт на бесплатном хостинге для статических сайтов — Github Pages. Если вам недостаточно практики, попробуйте посмотреть, как верстают другие, и повторить. На YouTube достаточно видеоуроков на эту тему (например, по запросу «верстка сайта по макету figma»).
Если вы глубоко изучили HTML и CSS, то после прохождения предыдущих пунктов сможете стать верстальщиком сайтов. Но чтобы научиться писать интерактивные веб-приложения и стать профессиональным фронтенд-разработчиком, нужно продолжить свой путь в мире фронтенда и погрузиться в программирование.
6. Язык программирования JavaScript
Не путайте JavaScript с Java. Изучите основы языка: переменные, объекты, типы данных, функции, контекст и замыкания, классы. Сравните отличия спецификаций EcmaScript старых и новых версий. После понимания основ переходите к более сложным вещам: тонкостям асинхронного программирования (коллбеки, промисы, async-await) и выполнению запросов на сервер (XmlHttpRequest, Ajax, Fetch, Cookie).
7. DOM (Document Object Model)
DOM — это объектная модель документа, дерево, которое строит браузер, чтобы отрисовать вашу страницу на экране. Научившись работать с DOM, вы сможете с помощью JavaScript создавать или изменять элементы на странице, реагировать на клики пользователей и многое другое. Работе с DOM и событиям в браузере посвящена отдельная часть LearnJavascript.
Подробно тема DOM также описана в книге «Выразительный JavaScript», автор Марейн Хавербек.
8. Node.js, NPM
Благодаря программной платформе Node.js язык JavaScript можно использовать не только в браузере. С помощью этого инструмента можно написать консольную программу или серверную часть приложения.
Попробуйте написать свой собственный небольшой сервер.
В своих JavaScript-программах вы можете использовать модули, написанные другими разработчиками. Ознакомьтесь с онлайн-хранилищем пакетов NPM.
9. Babel
Babel Js — компилятор JavaScript-кода, который позволяет использовать последние возможности языка, например, стрелочные функции, классы, optional chaining, не дожидаясь их полной поддержки браузерами. Вам необходимо лишь правильно сконфигурировать Babel под нужную версию EcmaScript или список поддерживаемых вами браузеров, исходный код будет преобразован автоматически.
Попробуйте воспользоваться онлайн-компилятором кода на официальном сайте, чтобы посмотреть, во что превращаются современные конструкции JavaScript. Настройте компиляцию кода для небольшого JavaScript-приложения, подключив Babel как NPM-пакет.
10. Сборщики модулей, Webpack
При создании приложений разработчики делят код на части (модули), подключают дополнительные обработчики кода, настраивают приложения для различных окружений (development и production). Чтобы это было возможным, а нам не пришлось вручную подключать модули в HTML-файле в нужном порядке и следить за изменениями, в приложениях используются сборщики модулей (бандлеры).
Сборщики подключают и комбинируют модули и их зависимости в один или несколько файлов в правильном порядке, а также позволяют дополнительно преобразовывать код.
Webpack — один из самых популярных сборщиков модулей. Это помощник разработчиков, несмотря на то, что по началу он может показаться достаточно сложным. Его гибкость позволяет настроить сборку с использованием огромного множества плагинов и загрузчиков (пре- и пост- процессоров CSS и HTML, Babel и др.), оптимизировать ресурсы, быстро подгружать изменения в процессе разработки с помощью hot module replacement, и многое другое.
11. Препроцессоры CSS
CSS-препроцессор — это надстройка над CSS, которая предоставляет удобные новые синтаксические конструкции для разработчика, добавляя новые возможности, которые позволяют упростить и ускорить разработку и поддержку стилей.
Наиболее популярные препроцессоры:
12. Препроцессоры HTML (Шаблонизаторы)
Препроцессоры HTML имеют те же преимущества, что и CSS-препроцессоры. Они позволяют более эффективно писать HTML-разметку, разбивать код на модули, а также использовать условия, циклы, миксины, наследование.
13. Стиль кода и линтеры
Стиль кода (code style) — набор правил, который позволяет сделать код единообразным, максимально удобным для восприятия и читаемым для вас и других разработчиков. Такие правила описывают, где и какие отступы и скобки должны быть, максимальную длину строк, названия переменных, позволяют определить слишком запутанный или лишний код и множество других аспектов.
Некоторые компании придумывают свой стиль кода. Одним из известных наборов правил во фронтенде является стандарт компании Airbnb, советую ознакомиться с ним для повышения качества своего кода.
Существуют специальные инструменты, которые могут проверять ваш код автоматически и позволяют легко поддерживать код в определенном стиле, настроив конфигурацию проекта один раз:
14. Изучение фреймворка/UI-библиотеки
React, Angular или Vue? На 2020 год основная борьба идет между этими библиотеками. Вы можете выбрать любую из них. Если вам симпатизирует какая-то конкретная компания, в которой вы хотели бы работать, можете выбрать используемый ими фреймворк.
Я бы советовала начать с React — он имеет огромную популярность среди разработчиков и компаний, продолжает развиваться, прост для понимания начинающими фронтендерами, вокруг него сложилось множество других инструментов и большое сообщество.
Начните изучать React с официальной документации, она достаточно подробная. Если её вам покажется недостаточно, можно найти на Udemy полноценный курс (например, Modern React and Redux — на английском языке, с очень понятным и подробным объяснением для начинающих, практическими заданиями и всем необходимым материалом по React и библиотекам).
Уделите внимание описанию типов входных параметров для React-компонентов (проверка типов с помощью PropTypes), а также написанию комментариев по стандарту JSDoc (цикл статей по использованию JSDoc).
По мере вашего продвижения необходимо будет научиться управлять состоянием приложения. Библиотеки, которые помогают в этом: Redux и Mobx. Начать рекомендую с Redux — это наиболее популярная библиотека в связке с React. Ознакомьтесь с официальной документацией или переводом. Также советую курс от одного из авторов библиотеки (Getting Started with Redux от Дэна Абрамова).
Затем приступайте к изучению библиотеки для удобного выполнения асинхронных действий (например, запросов к серверу). Самая простая библиотека, с которой стоит начать — Redux Thunk (документация).
15. Автоматическое тестирование
Тестирование — это процесс оценки того, что все модули приложения ведут себя так, как ожидалось. Благодаря тестированию можно избежать большого количества ошибок, которые вы могли бы не заметить. Изучите, что такое тестирование и какие виды бывают (Тестирование для «чайников»). Научитесь писать модульные тесты к вашему коду, используя одну из библиотек для тестирования, например, Jest.
16. Углубленное
Какие трудности могут быть? Ошибки в начале пути
Изучение фреймворков вместо базовых знаний
Иногда будет казаться, что лучше сразу изучать какой-нибудь популярный фреймворк или библиотеку. Это достаточно частая ошибка, особенно во фронтенде: люди начинают изучать React или верстают с помощью Bootstrap и Material UI, не разобравшись в основах и не получив достаточных знаний по HTML, CSS и JavaScript. Можно использовать такой подход, если вы «бежите на короткую дистанцию» и вам нужно быстро сделать какой-нибудь проект. Но если вы планируете стать разработчиком, это не принесет нужного результата.
Нет необходимости знать наизусть абсолютно все CSS-свойства или методы в JS, вы сможете поискать их, если забудете. Важно понимание основных концепций и тонкостей: это то, что будет вашим крепким фундаментом во фронтенд-разработке.
Обучение — это труд, самодисциплина и много практики
Ошибочно ожидать, что вы разберетесь со всем материалом за неделю или выучите JS за один день. Количество времени, которое вам будет необходимо, это очень индивидуальный вопрос, и, скорее всего, процесс займёт не один месяц.
Не пугайтесь, изучайте пошагово и постепенно, больше практикуйтесь — так вы сможете быстрее продвинуться в обучении. Всем нужно какое-то время, чтобы научиться новому.
Определитесь, зачем и почему вы хотите стать фронтенд-разработчиком. Фронтенд — это область, в которой можно реализовать интересные решения и работать над проектами, которыми будет пользоваться огромное количество людей по всему миру! В добавок к этому, чем больше вы наберете знаний и опыта, тем выше будет оплачиваться ваш труд.
Вспоминайте о мотивирующих именно вас моментах, когда ваш код не будет работать, а очередной блок не будет выравниваться так, как вы этого хотите 🙂 Если вам нравится видеть результат своей работы, изучайте материал через практические задачи или создание своего проекта, так вы будете быстрее получать отдачу.
Копирование чужого кода
Если вы столкнетесь с проблемами и ошибками, которые не сможете решить, то не стесняйтесь искать помощи в Google. Учитесь пользоваться поиском и находить причину возникшей проблемы, но не копируйте чужой код вслепую.
Обязательно разберитесь, что происходит в найденном решении, и почему именно так. Это будет дольше и затратнее, но, если не разобраться, вы с большей вероятностью столкнетесь с похожей проблемой и опять не сможете решить её самостоятельно, а ваш код превратится в лапшу с разными стилями из-за копирования чужого кода.
Не доверяйте на 100% коду, который вы находите
Другие люди тоже могут ошибаться или иметь недостаточно опыта. Если вы находите видеоурок от магистра JavaScript или вёрстки, это не всегда значит, что преподносимое — идеальное решение и лучший возможный код.
Смотрите разные источники и критически относитесь ко всему, что находите. По мере того, как вы будете набираться опыта, вы поймете, какой код и подходы лучше, а что только усложняет ваше приложение и добавляет костылей, об которые вы потом споткнетесь.
Подготовка к собеседованию на Junior-разработчика
Собеседования в разные компании могут проходить совершенно по-разному, я бы хотела рассказать о необходимых знаниях, основываясь на своём опыте.
Направления, по которым чаще всего собеседуют на должность фронтенд-разработчика — это вёрстка, JavaScript, в частности, асинхронность и знание одного из фронтенд-фреймворка или библиотеки. На позицию Junior больше внимания уделяется именно вёрстке и JavaScript.
Вопросы могут быть как теоретические, так и практические, на решение небольших задач.
Сообщество разработчиков составило примерный список вопросов для интервью. Пройдитесь по всем вопросам и попробуйте дать ответ. Если вы не смогли на что-то ответить, это сигнал к повторению темы.
В подготовке к решению задач на JavaScript могут помочь сайты с задачами по программированию, на которых вы можете попрактиковаться онлайн и проверить свои навыки (начинайте с раздела с простыми задачами). Особенно популярными задачами являются задачи на применение методов работы с массивами. Пример таких задач: проверка на палиндром или анаграмму.
Сайты с задачами по программированию:
Задачи на применение действительно сложных алгоритмов и знание таких структур данных, как деревья и графы, практически нигде не даются при собеседовании на должность Junior фронтенд-разработчика. Так что не бойтесь: даже если прохождение собеседования кажется вам очень страшным, на самом деле, если вы смогли ответить на все вопросы выше, то с большой вероятностью сможете пройти собеседование.
Маленький совет: если вы не уверены в своих силах, всё равно пройдите собеседование в какой-нибудь компании. И даже если вам не сделают предложение, вы поймете свои слабые места. К следующему собеседованию сможете подготовиться еще лучше!
Спасибо, что дочитали до конца. Надеюсь, статья была вам полезна. Если знаете, что она может быть полезна кому-то другому, то поделитесь.
Как я стал программистом
Я пошел работать в «Макдональдс», когда учился в университете. А потом увлекся программированием — и изучил его с нуля.
Я окончил Московский государственный лингвистический университет по специальности «лингвист-переводчик». Всегда любил иностранные языки, поэтому еще в школе думал, что всю жизнь буду работать в этой сфере. А вот с математикой и физикой у меня были проблемы, поэтому я и представить не мог, что в будущем стану программистом. Раньше мне казалось, что эта профессия доступна только тем, кто хорошо разбирается в точных науках.
На деле мой путь в программирование оказался довольно быстрым и простым — сам в шоке. Расскажу, какие этапы мне пришлось для этого пройти.
На третьем курсе университета я осознал, что не хочу работать по специальности. Уже тогда я пытался подрабатывать, используя знание языков: занимался со школьниками английским и был переводчиком на выставках.
Сначала я пошел в «Макдональдс»: хотел понять, смогу ли вообще совмещать постоянную работу и учебу. Потом немного поработал в агентстве, которое занимается продвижением в соцсетях, еще пытался попасть на стажировку в финансовые компании Ernst & Young и KMPG.
Плюс таких стажировок в том, что, если повезет, ты сможешь устроиться в один из этих гигантов даже без профильного образования и уже на месте выбрать будущую специализацию. Но мне не повезло: я не прошел первичный отбор на позицию стажера.
Я думал, чем еще можно заняться, и друг посоветовал попробовать себя в программировании. Он убедил меня, что это не так сложно, как кажется, и не требует никаких специальных знаний. Его главный аргумент: сейчас научиться азам веб-разработки можно практически бесплатно. Я подумал, что человеку с дипломом по информационной безопасности можно верить, и решил, что ничего не потеряю, если попробую.
Программирование — большая и сложная отрасль со множеством направлений, которые тесно переплетены между собой. Кто-то разрабатывает игры для компьютеров или смартфонов, кто-то учит космического робота Федора выполнять нужные действия на околоземной орбите, а кто-то пилит программы, которые в режиме реального времени позволяют получать данные с камер видеонаблюдения и распознавать лица прохожих.
Фронтендеры отвечают за внешний вид сайта или приложения и за функции, которые доступны пользователям. Если сравнить разработчиков со строителями, то фронтендеры — это ребята, которые занимаются внутренней отделкой. Это как выбирать цвет стен, форму окон и ширину дверных проемов, чтобы людям было удобно заходить в здание и вообще в нем жить.
Бэкендеры работают с начинкой сайта: базами данных, алгоритмами, функциями и сервисами, которые потом будут доступны пользователям. То есть эти ребята строят дом из плит, перекрытий и кирпичей, а потом быстро чинят там, где что-то вдруг сломалось.
Девопс-специалисты следят за серверами и инфраструктурой. Их задача — обеспечить бесперебойную работу сайта, оптимизировать нагрузку на сеть и сделать так, чтобы сайт не рухнул, если его вдруг захочет посетить половина рунета. По нашей квартирно-строительной аналогии такие ребята следят, чтобы в квартиры поступала вода, электричество и газ, а еще чтобы дом вообще не развалился из-за просадки грунта.
Я выбрал фронтенд-разработку, потому что мне было важно быстро начать работать. На фронтендера гораздо проще учиться, а результат его работы нагляднее: уже после первого онлайн-курса вы сможете за час собрать простенькую веб-страницу и хвастаться ею перед родными и друзьями. Тогда как результат целого месяца трудов в бэкенде и девопсе сможет оценить только человек, который в этом разбирается.
Обращение фронтендеров Т—Ж
На сегодняшний день фронтенд — это СОВСЕМ не легче, а иногда даже сложнее того же бэкенда. JavaScript за каких-то 20 лет из милого, невинного пупсика, написанного на коленке ради создания простейшего интерактива, превратился в МОНСТРА, с помощью которого можно реализовывать даже серверную часть сайта.
И вообще, это безумно развивающаяся сфера, в которой каждый месяц появляются новые интересные штуки. Короче, словили легкую обиду за фронтенд.
Сначала разберемся, что вообще придется изучать. Я буду сильно все упрощать.
Любой сайт работает благодаря трем элементам: HTML, CSS и JavaScript. Упрощенно их называют кодом сайта или просто кодом. Если вы разобрались в них, то уже сможете собирать и программировать полноценные веб-страницы и даже целые сайты.
HTML, или HyperText Markup Language, — в переводе с английского «язык гипертекстовой разметки». Это еще не полноценный язык программирования, а всего лишь набор команд, или тегов, которые помогают браузеру понять, как именно текст и другие элементы оформления должны располагаться на страницах сайта. Это примерно как схема, где в квартире после ремонта будет стоять диван, а где — холодильник.
CSS, или Cascading Style Sheets, — в переводе «каскадная таблица стилей». Из нее браузер узнает, как сайт должен быть оформлен: какими должны быть размер и тип шрифта, ширина полей, цвет фона и многое другое. Это все равно что выбирать цвет дивана или размер холодильника в вашу новую квартиру.
JavaScript — это уже полноценный язык программирования, с помощью которого можно оживить сайт: добавить сложную анимацию, научить кнопки нажиматься и настроить автозаполнение полей в форме подписки. Если продолжить сравнение со строительством и ремонтом, то JavaScript — это умный дом, который по нажатию одной кнопки сам наберет ванну, приглушит свет в квартире и приготовит вам кофе.
— paragraph), где заголовок (
— paragraph), где заголовок (
Строятся все курсы по единым лекалам: вводная теоретическая часть про то, как вообще работают сайты, объяснение базовых элементов, отработка новых знаний с помощью небольших практических заданий.
Например, изучили основы разметки текста — собираете блоки с текстом на простенькой страничке. Прошли, как вставлять изображения, — добавляете на страницу картинки. Познакомились с базовыми скриптами — пытаетесь поставить на вашу страницу мини-калькулятор или счетчик просмотров.
Обычно платные курсы дают какие-то дополнительные возможности. Например, более интересные практические задания или возможность спросить у наставника, какие ошибки в коде вы сделали и как избежать их в будущем. Такая обратная связь экономит много времени и сил, особенно когда вроде делаешь правильно, но все равно ничего не работает.
В итоге я начал с русскоязычного сайта HTML Academy. Выбрал его, потому что курс по основам HTML и CSS там полностью бесплатный. Еще можно пойти, например, в Codecademy или на Яндекс-практикум. Я расскажу, как все устроено в HTML Academy.
Выглядит курс так: вы смотрите лекции, выполняете задания, они проверяются автоматически, с вами на курсе учатся другие люди. Мне понравилось, что весь материал изложен в максимально простой и понятной форме.
В платной части курса я прошел только то, что показалось мне интересным, например основы адаптивной верстки. Это специальные настройки, которые нужны, чтобы сайты хорошо смотрелись и на большом мониторе компьютера, и на смартфоне. Без адаптивности сейчас никуда. Это стандартное требование ко всем современным сайтам, и каждый фронтендер должен такое уметь.
Страница этого курса — сначала он бесплатный, но, чтобы открыть все блоки с теорией и практическими заданиями, его нужно будет оплатить
В то же время я пропускал все, что казалось мне слишком сложным и на тот момент было просто не нужно. Оправдывал себя тем, что всегда смогу вернуться к пропущенному материалу и внимательно его изучить, когда эти знания мне по-настоящему понадобятся. Но, когда знания действительно понадобились, я уже мог найти все необходимое в более продвинутой технической документации, так что к этому курсу я больше не возвращался.
Если есть время, лучше не спешить
Поэтому в течение месяца я тратил все свободное время на изучение курса, при этом пропуская сложные и неинтересные места. Это очень спорный подход. Вам я так делать не рекомендую. Если есть время, не торопитесь и постарайтесь получше усвоить все основы: потом будет намного легче.
Если у вас что-то не выходит, не берите подсказки и не пропускайте задания. Лучше еще два раза подробно разберите блок с теорией и еще десять раз внимательно прочитайте свой код. Так вы быстрее освоите язык и научитесь не психовать из-за малейшей ошибки в коде.
Немного разобравшись с основными принципами веб-разработки и набив руку на практических заданиях, я продолжил обучение уже на англоязычном сайте Freecodecamp. Он тоже бесплатный.
Курс по веб-разработке там очень обширный и охватывает много тем. Чтобы изучить их все, потребуется около 1800 часов, или 75 дней. Зато, окончив этот курс, вы будете обладать всеми необходимыми знаниями для начала карьеры — от верстки простой веб-страницы до визуализации данных и способов обезопасить сайт от хакерских атак.
понадобится, чтобы пройти курс по веб-разработке на Freecodecamp
Мне понравилось учиться на этом курсе: он простой и понятный. В глубине души даже не верилось, что только на HTML и CSS можно так легко собирать очень красивые страницы. Я все ждал, что встречу какую-то непреодолимую для гуманитария преграду.
И я ее встретил, когда дошел до JavaScript.
Освоить JavaScript оказалось гораздо сложнее, чем разобраться с тегами в HTML и CSS. Это уже полноценный язык программирования, и, чтобы в него вникнуть, придется понять довольно сложные концепции. Например, хойстинг (не путать с хостингом), замыкания, каррирование, контекст вызова функции, параметры и аргументы функции, синглтон-паттерн, инстанс объекта, интерфейс объекта и т. д.
Это как раз те штуки, которые ребята-технари изучают еще в вузах. Без фундаментального образования понять такое сложно. Мне удалось более-менее разобраться в них примерно за год. Помогло постоянное общение с более опытными коллегами: они подсказывали, какие термины что значат, где и какие статьи про это лучше почитать.
Попробовать свои силы на практике мне хотелось с самого первого дня обучения. Начал я с дополнительных заданий в рамках платной подписки на HTML Academy. Потом стал просто копировать известные сайты, как бы пересобирая их заново. Для этого я сначала внимательно изучал, как они оформлены, а потом копировал их код из браузера, попутно разбираясь, как именно он написан, какие теги и зачем используются.
Страничка на сайте Codepen — там лежат мои первые проекты. Сейчас даже стыдно заглядывать в код, но когда-то я очень гордился своими первыми шагами и всегда упоминал о них в резюме
Когда я чувствовал, что для работы над проектами знаний из курса мне не хватает, то шел читать документацию по HTML и CSS в интернете.
Документация — это как инструкция к холодильнику или стиральной машинке. Там описаны все основные возможности языков программирования с подробными примерами. Например, как и когда нужно использовать конкретный тег.
MDN — сейчас это мой любимый сайт с документацией
w3schools.com больше подходит для новичков, там много интерактивных примеров и интерфейс попроще
На этапе практики самое важное — не бояться ошибок. Они неизбежны, и, на мой взгляд, это одна из самых увлекательных частей обучения программированию. Когда в сотый раз всматриваешься в код и пытаешься понять, почему он не работает, начинаешь лучше понимать структуру языка программирования. А еще учишься мыслить нелинейно, то есть не держаться за единственную гипотезу, а придумывать много разных вариантов кода и смотреть, какой из них сработает.
, — учебник покажет, зачем он вообще нужен, в каких браузерах работает и как его применять» loading=»lazy» data-bordered=»true»>
Небольшой совет: если не можете решить проблему сами, вбейте ее описание в поисковик. Скорее всего, вы не первый, кто ломает над ней голову, и опытные люди уже все придумали за вас. На мой взгляд, умение гуглить — это вообще один из важнейших навыков хорошего программиста. Оно позволяет сэкономить много времени и сил, а главное, избежать «костылей» — когда сначала городишь 100 строчек кода, а потом приходит кто-то поумнее и показывает, как то же самое делают всего три.
Даже став достаточно опытным разработчиком, я все равно продолжаю использовать Гугл так же часто, как документацию, а ответы на множество вопросов ищу на сайте Stackoverflow — там разработчики со всего мира пытаются найти варианты решения своих задач.
Большие компании часто проводят разные финтех-школы, хакатоны, кейс-чемпионаты и прочие митапы. По сути, это короткие стажировки, на которых молодые и еще недостаточно опытные ребята могут попробовать свои силы в программировании на реальных задачах.
У меня не было ни опыта, ни профильного образования, поэтому я просто откликался на все понравившиеся вакансии, игнорируя требуемый опыт и обращая внимание только на список необходимых навыков. Сначала меня не приглашали даже на профильные мероприятия. Но я упорно рассылал заявки на участие и откликался на все возможные вакансии.
Еще искал в сети резюме опытных ребят и внимательно их изучал, искал интересные оформительские решения, смотрел, какие данные считаются важными в карьере. А потом пытался подогнать под это свой скромный опыт. Это сработало — на мои письма наконец-то стали приходить ответы. Иногда я даже получал тестовые задания.
С каждым выполненным тестовым заданием я лучше понимал, каких знаний и навыков в сфере веб-разработки мне не хватает. Еще я всегда просил оставить отзыв на мое задание, но за все время поисков получил всего два нормальных отклика.
Хорошо запомнил телефонный разговор с рекрутером из Яндекса: эта девушка подробно пересказала мне комментарии их разработчиков к моему тесту, хотя могла бы этого не делать. Спасибо ей!
Спустя два месяца упорных поисков я все-таки получил первое предложение о работе. Это была позиция удаленного разработчика в компании Travelab. Сейчас компания уже не работает, но тогда она занималась продажей авиабилетов.
Сначала я был крайне воодушевлен тем, что меня наконец куда-то взяли. Но радость быстро закончилась. Оказалось, что, когда ты программист-новичок, работать удаленно очень непросто: если возникнут сложности, спросить совета не у кого.
я получил за свою первую работу программистом
После увольнения из Travelab мне на глаза попалась вакансия фронтенд-разработчика в крупном российском банке. В описании вакансии тоже значилось «Опыт работы — от 2 лет», что я благополучно проигнорировал. Мое письмо прочитали и — о чудо! — взяли меня на работу.
Постепенно я разобрался в проектной работе и из неопытного новичка, который умеет только писать тот код, который ему сказали, смог дорасти до самостоятельного разработчика, способного предлагать нестандартные технические решения и реализовывать собственные проекты. На это у меня ушел примерно год, по прошествии которого я понял, что хочу двигаться дальше, — и ушел из банка.
Я подписал договор о неразглашении информации, поэтому не могу назвать свою зарплату в банке. Скажу только, что это была отличная сумма для человека, который делал первые шаги в программировании. В Москве вилка зарплат на стартовых позициях — от 50 до 100 тысяч рублей, моя зарплата была ближе ко второй цифре. Со временем я понял, что даже в программировании твой заработок во многом зависит от умения торговаться. Поэтому начал искать позицию получше.
Пришло время поговорить про минусы. На мой взгляд, в профессии веб-разработчика их два: частые переработки и необходимость постоянно учиться.
С другой стороны, чем больше ты работаешь, тем опытнее становишься и тем более интересные проекты тебе достаются. По крайней мере, у меня еще ни разу не возникало мысли, что все тлен и я погряз в рутине.
Теперь про учебу. Приступив к своему первому курсу по HTML, вы приоткрываете дверцу, которую потом будет сложно закрыть. Чтобы быть хорошим и востребованным программистом, нужно знать все актуальные инструменты разработчика, а их примерно миллион, и каждый день появляется парочка новых. А если не будешь постоянно учиться, очень быстро отстанешь от этого поезда. И вот тогда привет, рутина и унылые задачи типа «у нас на сайте кнопка сломалась — почини».
Хеппи-энд
Словом, оглядываясь назад, я радуюсь, что вовремя решил свернуть с пути переводчика и стал программистом.
И напоследок
Несмотря на то, что почти любую профессию сейчас можно освоить с нуля в интернете, многие по-прежнему считают, что хорошим программистом можно стать только с техническим образованием за плечами. Как считаете вы?