Фронтенд с чего начать
Если бы я учил 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 в веб-разработке очень многогранен и богат различными технологиями для совершенно разных задач. Изучай, пробуй, экспериментируй и получай удовольствие от созидания красивых и удобных интерфейсов для любых целей. За это мы и любим фронтенд.
Как научиться фронтенд-разработке, найти первую работу и не набить шишек
Фронтенд, возможное, лучшее и самое приветливое направление, чтобы войти в ИТ. Но с ним не все так просто — во фронтенде легко начать и трудно стать мастером. В нем не будет мук выбора языка программирования, но будет борьба с его недостатками. В этой сфере есть очень много инструментов, изучение каждого из которых тянет на освоение отдельной профессии.
О том, как правильно учиться, как не набить шишек и двигаться по карьере, мы расспросили у Олега Шикова, декана факультета веб-разработки в GeekBrains и у Дарьи Дьячковой, начинающей веб-разработчицы.
В 2015 году Дарья Дьячкова поступила в НИУ ВШЭ на факультет Мировой экономики и мировой политики потому что в школе больше всего любила языки — учила английский и немецкий, постоянно выигрывала олимпиады. Ей нравилась эта сфера, но не до блеска в глазах, поэтому Дарья продолжала искать будущую профессию. В 2018 году она пришла на день карьеры в одно из HR-агентств, после которого сменила направление в неожиданном направлении.
«Я прошла длинный психологический тест, где мне посчитали тип личности-склад ума и прочее. Не в обиду психологам, но я к таким тестам отношусь скептически. После теста мне сказали, «эх, программист пропадает» и предложили послушать выступление про переход в мир ИТ. Я пожала плечами, пошла — и зажглась».
Дома она начала гуглить, смотреть обзоры профессий. Раньше Дарья мастерила веб-странички на Tilda и Wix, вела свой блог-обзор международных новостей, поэтому подумала о фронтенде в первую очередь. Тем не менее она просмотрела все вводные вебинары профессий и языков программирования, попробовала написать маленький кусочек кода на нескольких языках программирования и выбрала JS, как самый близкий по духу.
Что делают фронтендеры
«Если вы открываете любую страницу в браузере, все, что вы видите перед собой на странице — это делают фронтендеры. Но на самом деле их работа намного сложнее одного внешнего вида», — рассказывает Олег Шиков, декан факультета веб-разработки в GeekBrains.
Олег писал код с детства. Первые эксперименты были на языке С, а в 2011 году он перешел на Javascript. Многое из того, что есть в технологии сейчас, тогда только зарождалось. HTML и CSS не имели больших возможностей, а в индустрии преобладал Flash. Профессия в целом была намного проще — всего лишь HTML-верстка и несложное оформление. Достаточно было писать теги и красиво их оформлять на CSS. Пользователи нажимали кнопку, и страница полностью обновлялась. Уходил запрос на сервер, сервер отдавал новую верстку. Но такой подход не позволял делать отзывчивый интерфейс.
«Задача фронтендера в наши дни — строить логику сайтов на стороне браузера», — говорит Олег, «Эта логика разрабатывается на языке программирования JavaScript. Современные сайты могут полностью работать на стороне клиента, делая запросы серверу лишь изредка, например, чтобы сохранить данные пользователя или загрузить необходимую информацию. То есть сейчас мы запрашиваем не полностью обновленную страницу, а только необходимую информацию, и грамотно ее отрисовываем в браузере. Благодаря такому поведению, сайты становятся отзывчивее и экономят часть трафика пользователя».
Учить фронтенд — это учить JavaScript?
Определившись с направлением, Дарья поступила на факультет веб-разработки в GeekBrains. В представлении многих обучение фронтенду слилось с изучением языка Javascript, но, как считает Олег Шиков — это не совсем верно.
«Первое с чего надо начать — это конечно HTML. Он предельно прост, с ним очень легко справиться, очень легко написать свой первый сайт. Конечно, он не будет отзывчивым, но он будет работать, и его уже можно будет выложить в интернет. Далее необходимо добавить этому сайту красивый внешний вид, чтобы это было не просто полотно текста, а удобная и красивая страница с визуальными элементами. В этом поможет CSS – каскадные таблицы стилей. Пары недель хватит, чтобы освоить и HTML, и CSS. А сразу после надо приступать к JavaScript, потому что он — основа основ для того, чтобы делать отзывчивый интерфейс».
Но когда к технологии приходит популярность, следом за ней идет море критики. Многие опытные разработчики один за другим вскрывают в своих докладах, выступлениях и статьях проблемы и языка и предлагают альтернативы. Новичка эти обсуждения могут только сбить с пути. Как считает Олег, начинать изучение фронтенда с других языков только потому, что их больше хвалят профессионалы, будет ошибкой.
«Несколько лет назад все дружно ругали PHP, сейчас все дружно ругают JavaScript, это такой мейнстрим. Конечно, JavaScript не без проблем, с этим никто не спорит. Но например, TypeScript (другой популярный язык от Microsoft, являющийся расширением возможностей JS) не выполняется в браузере сам — он переводится (компилируется) в JavaScript. Если мы что-то напишем на TypeScript, то все равно получим JavaScript, который уже выполнится в браузере. Чтобы грамотно отлаживать код необходимо знать JavaScript и уметь работать с браузером».
Но Дарья находит время, чтобы учить вещи, которые и не входят в программу.
«Я привыкла много учить и разбираться до конца, я из тех людей, кто читает все дополнительные материалы к статьям и делает доп.задания, потому что им просто интересно. Нахожу время осваивать, например, Nuxt.js, Typescript, Vue.js, Webpack и Stylus».
Что такое React, Vue и Angular и как их выбирать
Помимо Javascript и других языков от фронтендеров требуют знание различных инструментов для работы. На чистом JavaScript довольно сложно разрабатывать интерактивные отзывчивые интерфейсы веб-страниц без использования сторонних библиотек.
Библиотека — это тоже JavaScript код, уже написанный другими разработчиками. Он предоставляет удобный набор решений, чтобы выполнять заготовленные действия, которые регулярно требуются в работе. В вебе есть большое разнообразие таких библиотек, которые упрощают написание отзывчивых интерфейсов для веб-сайтов. В их числе самые известные — это React, Vue и Angular.
«Выбор между ними — сложный вопрос. Можно выучить все три. Это не сверхсложная задача, потому что когда поймешь, как работать с одним, каждый последующий будет учить проще. Но по моим наблюдениям, они используются немного в разных сферах. Angular — один из самых старых. Он чаще используется в корпоративном сегменте, на больших проектах, с поддержкой легаси кода, который был написан несколько лет назад. React используется повсеместно. Он первый в списке, когда пишут новые интерфейсы и веб-сервисы. Про Vue можно сказать, что он простой, молодой, крутой и мейнстримный.
Я бы советовал попробовать написать простую логику на всех трех фреймворках — условно говоря todo лист — на основании своих ощущений понять, какой нравится больше, и учить его. Либо посмотреть вакансии в своем городе, и выбирать, например, React, потому что большинство вакансий на фронтенд-разработчиков требуют знания именно React. Но переучиваться потом будет не сложно».
Дарья пишет приключенческие романы и разрабатывает на Nuxt.js справочник по вселенной своей книги. Еще она делает проекты и лендинги для своих друзей, поэтому выучила адаптивную верстку, медиа-запросы и прочее. «Я начала React.js, придумала проект на будущее, который хочу воплотить на React Native. Пока планирую архитектуру, рисую блок-схемами, и читаю про технологии, которые можно использовать».
Как проходит учеба
«Когда началось обучение, преподаватели все отлично объясняли – для меня важно выстроить полученные знания в систему. Домашние задания помогали закрепить навык, бонусом давали наводку где и что ещё поучить. Много читала и осваивала сама, смотрела руководства и мини уроки на YouTube. На GeekBrains всегда можно написать преподавателю или наставнику курса или своей группе в чат. Все помогут, объяснят. Если нашел интересную статью – тоже есть с кем поделиться и обсудить.
Думаю, ощущения, когда видишь свой первый Hello world, не забудет никто. Да и в целом, ощущения, когда сделал по макету красивый UI, а он ещё и работает – это драйв».
Учеба длится полтора года. Олег Шиков считает, что просто учить синтаксис — это скучно, поэтому учеба сразу строится вокруг проектов. «Мы даем базовые вещи, синтаксис, и сразу пытаемся применить их на практике, пишем простые веб-страницы. После этого мы даем PHP, тем самым обучая студентов бекенд (серверной) разработке. Некоторым начинающим разработчикам кажется, что достаточно выучить HTML с JavaScript, и этого хватит, чтобы стать востребованным на рынке. На деле не совсем так. Нужно знать архитектуру, алгоритмы, паттерны и фреймворки — и не просто знать. Необходима еще практика, надо написать свой продукт, поучаствовать в коллективной разработке».
В начале обучения студенты пишут код по отдельности, проверяя его с преподавателем, а к середине обучения начинают разрабатывать продукт вместе со своими одногруппниками, благодаря чему получают опыт командной разработки.
Помимо учебы Дарья любит заниматься на платформе Kodiri.com, где проходят международные соревнования по JS. «Там можно тренироваться и одному, решать задания на время, точность и красоту кода. Я познакомилась с основателем платформы Рикардо — он классный парень. Теперь пишу для них задачки. К каждому заданию я прикладываю эталонное решение и тесты (так я, кстати, начала писать юнит тесты). Мне забавно соревноваться с другими игроками, когда вероятность, что хотя бы одно из пяти заданий будет твоего авторства ≈0.94. Да, я посчитала, мне было любопытно, почему я так часто их встречаю. Свои честно решаю и в ответы не смотрю. Захватывает элемент геймификации, я уже получила высшие погоны (Императорское Величество), теперь осталось подвинуть Юраша как лучшего игрока месяца. Этого элемента игры и духа соревнования в обучении мне недоставало, в целом, думаю, стоит добавлять подобные возможности в образовательные платформы. Несколько дней задачек Kodiri на скорость, и я во сне напишу arr.map(e =>».
Поиски первой работы
На каком этапе начинать поиски работы — очень спорный вопрос в индустрии. Одни убеждены, что только годы обучения и проработки теории на практике в безопасных условиях дают человеку право просить деньги за разработку. Другие наоборот — что учиться надо работая на настоящей работе. По словам преподавателя многие студенты идут по второму пути.
«Я знаю студентов, которые получали первые заказы или устраивались в фирмы на третей четверти. Они продолжали обучение, совмещая его уже с работой. Все зависит от человека и его способности учиться. Начинающему разработчику проще устроиться в маленькую компанию, чем в большую. В компаниях вроде Mail.ru или «Яндекс» строгий отбор. Далеко не каждый опытный разработчик сможет туда устроиться. Но попытать счастья, конечно, может каждый».
Когда у Дарьи за плечами было полгода обучения и резюме-портфолио в форме сайта, она прошла несколько собеседований, но навыков устроиться фронтенд разработчиком ей не хватило.
«На первом собеседовании было страшно. Я откликнулась на вакансию фронтенд разработчик Vue. Готовилась тщательно, повторила весь материал JS и Vue, и все что выучила за полгода GeekUniversity, разобрала tricky questions и всякие мелочи, где JS ведёт себя непредсказуемо. Собеседование проходило по Skype. Небольшая компания, сразу техническое интервью, минуя HR. Я бодро отвечала на вопросы, мы говорили целый час… а потом оказалось, что они всё-таки искали фулстек разработчика. Бывает».
На Хабр Карьере вы можете посмотреть свежие вакансии для фронтендеров и подписаться на рассылку новых.
«Джуниор-разработчикам задают простые вопросы, чтобы убедиться, что они знают основы», считает Олег, — «Я бы спросил про адаптивную и семантическую верстку, про то, как работать с чистым JavaScript. Сейчас тренд на фреймворки и библиотеки, те же React, Vue и Angular, а «ванильный» JavaScript без дополнительных библиотек — его не все знают. Я бы хотел убедиться, что разработчик знает, как с ним работать, а не сразу кинулся в лагерь условного React.
В любом случае вам придется потратить какое-то время, чтобы откликаться на разные вакансии, проходить разные собеседования. Проходить их — это тоже определенный опыт и навык. Отказы — это нормальная ситуация, бояться вообще не нужно»
«Спустя ещё два собеседования мне порекомендовали продолжить обучение и попробовать снова позже. Нужны были и общие знания — протоколы, архитектурные решения и прочее. Я и сама понимала, устраиваться было рано. Поэтому нашла классную смежную работу с ИТ — устроилась инженером технической поддержки в Букмейт. В обязанностях отвечать читателям на вопросы по работе приложения и сайта, что-то мелкое советовать как чинить, на проблемы покрупнее оформлять баги в JIRA и Confluence. Плюс, теперь отлично представляю, как обычные пользователи юзают UI/UX нашего приложения. Подсказка, «это не баг, это фича». Или когда разработчики хотели как лучше, а пользователи не поняли, как это и зачем.
Хороший шанс посмотреть на обе стороны — как пользователи юзают приложение, и как разработчики его развивают и чинят».
Как развиваться в профессии
— Я бы советовал развиваться в фулстек-разработчика, знать и бекенд, и фронтенд. Если же говорить только про фронтенд, то — хоть и необходимо хорошо знать JavaScript — без фреймворков никуда. Их надо учить.
На TypeScript стоит посмотреть, хоть его и не требуют во всех вакансиях. На самом деле он интересный, и JavaScript-разработчику выучить его очень просто. По факту это тот же самый язык с дополнительными фичами, которые позволяют писать более надежные системы. TypeScript добавляет в язык явную систему типов, которая позволяет сказать, что эта переменная будет числовая, а эта переменная — строковая.
В чистом JavaScript такого нет, там переменная может иметь любой тип, и это иногда приводит к ошибкам. Вы ожидаете число в переменной, а получаете, например, строку или объект, и у вас из-за этого ломается логика работы программы. TypeScript помогает избежать такой ошибки.
Сейчас многие смотрят в сторону PWA. Дело в том, что, как я уже говорил, рынок смартфонов огромный. Большинство пользователей, которые заходят к вам на сайт, с большой вероятностью делают это с телефона.
PWA (Progressive Web Applications) — это сайты, которые имеют дополнительные возможности, позволяющие удобно работать с ними в том числе со смартфона. Например, на андроиде PWA-сайт можно добавить себе на на стартовый экран и запускать, просто нажимая иконку. Есть возможности, которые позволяют улучшить сайт так, что он будет работать, даже когда на смартфоне нет интернета. То есть, это практически нативное приложение. Недавно Google выпустил обновление Google Play, благодаря которому вы можете добавить свой PWA-сайт в магазин, и пользователи смогут его скачивать и обновлять как обычное нативное приложение, которое почти неотличимо от обычного, написанного, например, на Java. А на самом деле оно написано на JavaScript и сверстано с помощью HTML.
Зарплаты
Медиана зарплаты фронтендера-стажёра находится на уровне 35 тысяч рублей. Специалист младшего уровня может рассчитывать на 50 тыс., миддл — уже на 97 тыс. Синьор и лид получают в среднем 170-190 тысяч рублей.
По данным калькулятора зарплат Хабр Карьеры средняя зарплата фронтенд-разработчика составляет чуть менее 110 000 рублей (диаграмма кликабельна).
Что почитать и посмотреть для самостоятельного изучения
Книги непосредственно про JS и HTML/CSS:
Книги по программированию:
Как стать фронтенд-разработчиком? Пошаговый гид в мир фронтенда
Приветствую всех! Меня зовут Пучнина Анастасия, я ведущий разработчик в компании ДомКлик, занимаюсь фронтендом Витрины объявлений. Сегодня я хотела бы поделиться с вами своим мнением на тему того, что важно знать фронтенд-разработчику. Эта статья будет полезна тем, кто только начинает свой путь в разработке, или имеет опыт программирования в другой области и решил перейти на сторону фронтенда.
Содержание:
Кто такой фронтендер и чем он занимается?
Допустим, вы хотите арендовать квартиру: у вас есть компьютер с выходом в Интернет, вы знаете адрес другого, более мощного компьютера, который хранит огромное множество объявлений. Если представить, что привычных сайтов не существует и вы не можете, например, посмотреть объявления на карте, отфильтровать ненужные, заполнив удобную форму, вам придётся самим составлять сетевой запрос и разбираться в том, как и куда отправлять данные.
К счастью, инженеры придумали браузеры, а веб-технологии развиваются, и вам достаточно лишь воспользоваться удобным интерфейсом, который предоставляют разработчики разных компаний. Осталось сделать пару кликов, и нужная информация найдена.
Фронтенд-разработчиками называют программистов, которые отвечают за создание такой внешней стороны (англ. 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 фронтенд-разработчика. Так что не бойтесь: даже если прохождение собеседования кажется вам очень страшным, на самом деле, если вы смогли ответить на все вопросы выше, то с большой вероятностью сможете пройти собеседование.
Маленький совет: если вы не уверены в своих силах, всё равно пройдите собеседование в какой-нибудь компании. И даже если вам не сделают предложение, вы поймете свои слабые места. К следующему собеседованию сможете подготовиться еще лучше!
Спасибо, что дочитали до конца. Надеюсь, статья была вам полезна. Если знаете, что она может быть полезна кому-то другому, то поделитесь.