Если бы я учил 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 фронтенд-разработчика. Так что не бойтесь: даже если прохождение собеседования кажется вам очень страшным, на самом деле, если вы смогли ответить на все вопросы выше, то с большой вероятностью сможете пройти собеседование.
Маленький совет: если вы не уверены в своих силах, всё равно пройдите собеседование в какой-нибудь компании. И даже если вам не сделают предложение, вы поймете свои слабые места. К следующему собеседованию сможете подготовиться еще лучше!
Спасибо, что дочитали до конца. Надеюсь, статья была вам полезна. Если знаете, что она может быть полезна кому-то другому, то поделитесь.
Начало пути Frontend-разработчика
Дисклеймер: данный пост сделан мной, чтобы рассылать его друзьям, которым нужна помощь с началом изучения Frontend- разработки. Если он поможет и тебе, заглянувшему сюда от нечего делать — буду очень рад. Ну а если не поможет — чего ты ожидал от поста с таким дисклеймером? В любом случае, любые вопросы, фидбек, и критика приветствуются.
После того, как все предупреждены, приступим к делу
Что такое Frontend?
Frontend/фронтенд/разработка клиентской части приложений/разработка интерфейсов/верстка with benefits — одно из самых презираемых «труъ программистами» направлений разработки. Причина тому — достаточно низкий порог входа (можно не обладая мощной базой довольно быстро начать делать коммерческие проекты) (быстро — это месяца три изучения, а не неделя, закатай губу обратно) и полное незнания большинства фронтендерами таких понятий как «управления памятью» и «строгая типизация».
Суть занятия фронтендера заключается в том, что ты с помощью кода на html/css/js (с вариациями, о которых я расскажу чуть позднее) рисуешь те страницы сайтов, которые видит пользователь, и прописываешь логику взаимодействия с этим контентом: при нажатии на кнопку делаем вот это, после заполнения формы отправляем её на сервер и т. д. Как правило для этой деятельности НЕ НУЖНО обладать выдающимися дизайнерскими навыками, потому что чаще всего, когда нужно сверстать сайт, тебе дают нарисованный в figma (графический редактор, заточенный под веб-дизайн) макет сайта и говорят «сделай вот так же, но чтоб это было сайтом и работало». Иногда придётся самому додумывать, как это должно выглядеть на устройствах той или иной ширины, потому что твой любимый коллега дизайнер сделал макет только под десктоп. Ещё реже у тебя просто есть ТЗ в духе «здесь нужно фильтр для таблички сделать чтоб вот по этим параметрам можно было выбирать, дизайна не будет дедлайн вчера». Тут уж либо тебе это нравится, либо выбора не было, либо сам дурак, что согласился. В целом нечастая ситуация.
Что необходимо знать для старта?
Все, что тебе понадобится — это школьная математика хотя бы с калькулятором и английский язык хотя бы с переводчиком. Без умения делить, умножать и складывать сложно будет высчитывать, какой отступ или размер должен быть у того или иного элемента, а без знания английского со временем ты просто не сможешь найти в интернетах этих ваших решение какой-то проблемы в процессе работы, не дернув старшего товарища.
Кроме этого, желательно иметь немного воображения, чтобы визуализировать в голове схемы расстановки компонентов, ну и некоторое количество алгоритмического мышления/знания программирования на недостижимом уровне «хоть сколько-то». Если этого нет — придет в процессе. Если не придëт — а нужно ли тебе это IT?
Немножко философии и экономики.
Возможно ты уже слышал что-то про Тильду и всякие движки для сайтов типа «Joomla», «WordPress», «Drupal», «1C Bitrix», которые также известны как CMS. Вкратце: это вещи, которые позволяют очень быстро и очень недорого, даже почти не зная программирование, создать на коленке свой интернет-магазин, форум или что-то подобное.
Так вот, с вероятностью близкой к 100% ты не сможешь писать подобные вещи дешевле, чем это делают разработчики, использующие данные системы, не умирая с голоду. Значит ли это, что тебе стоит перейти на подобные технологии?
Тебе решать. Для меня лично ответ «Нет».
Скорее всего, я не смогу отхватить хорошую часть рынка и составить конкуренцию людям, которые могут интернет-магазин сделать за 10к. Я за лендинг обычно больше беру. И путь, который я буду описывать ниже, он не совсем для тех, кто хочет быстро научиться и сидеть клепать лендосы/простые штуки за недорого. Есть много гораздо более интересных вещей (маркетплейсы, CRM, LMS и т. д.), которые очень и очень сложно сделать быстрыми и качественно работающими, используя готовые решения. И лично я топлю за то, чтобы вы — те, кто читает этот текст — тоже учились с заделом на то, чтобы создавать сложные и интересные вещи. За это неплохо платят (статистику найдете сами), и это весело.
Стек технологий, с которыми вы столкнетесь: языки разметки, оформления, программирования, фреймворки и другое.
ВНИМАНИЕ! Бóльшую часть технологий, описанных ниже, НЕ НУЖНО учить и использовать сразу. Понимание, что они нужны и необходимость их использовать придëт с крупными проектами. Если придет раньше — супер, дерзайте. Просто не пугайтесь такого обширного списка.
1) HTML (HyperText Markup Language) (не язык программирования). Это база. Язык разметки содержимого любой веб-страницы
2) CSS (Cascade Style Sheets). Данная технология позволяет задавать стили для того, что ты написал на HTML. Существуют препроцессоры, которые позволяют писать его проще и приятнее (например, с простым использованием переменных и примесей, какими-то математическими вычислениями и т.д.): Less, SASS, SCSS и другие. Сам CSS является must know технологией фронтендера, без него вообще никуда, а препроцессоры — это просто чертовски удобно. Попробуйте обязательно
3) JavaScript. Один из самых популярных и самых ненавидимых языков программирования. Медленный, неприятный, тупой, нелогичный и. все это по большей степени неправда. Во-первых, со времён создания первых мемов про JS прошло чертовски много времени, и этот язык реально изменился в лучшую сторону. Во-вторых, за счëт, емнип, гугловского движка V8, который научился его быстро компилировать, он просто летает. Самое «узкое место» в производительности клиентской части сайтов сейчас — это изменение содержимого страницы (операции с DOM, об этом чуть позже).
Также многие не любят этот язык из-за хреново сделанного ООП, но есть проблема. Это не объектно-ориентированный язык. Это прототипо-ориентированный язык. Неважно. В начале вам это не нужно, когда будет нужно — разберетесь.
5) React, Vue, Svelte, Angular — фреймворки и библиотеки для того, чтобы создавать такую штуку как SPA (одностраничные приложения). Если по-русски: сайт не перезагружается целиком чтобы перейти в другой раздел иди отобразить обновившийся контент — обновляется и изменяется только та часть, которую нужно перерисовать (отрендерить).
Эти вещи позволяют значительно ускорить быстродействие приложения за счёт того, что под капотом они сами вычисляют, как и что эффективнее перерисовать + нет бесячей перезагрузки страницы, пользователям это понравится, гарантирую.
Из того, что перечислено выше, можете выбрать любую понравившуюся технологию (посмотрите видосы, как выглядит код, как на них пишут, чтобы понять, что приятнее). Мой любимец — Vue, React тоже хорош, про Svelte ничего не знаю, а ангуляр мертв. (На самом деле нет, но брать его для обучения — очень и очень сомнительная идея).
6) JSX и TSX. Улучшения синтаксиса JS и TS, позволяющие удобно писать простую логику и разметку вместе. Полезные вещи, рекомендую. Отдельно их учить не придется, сами все поймете в процессе освоения одного из фреймворков, перечисленных выше.
7) Nuxt.js/Next.js. Библиотеки для простого создания сайтов с использованием Vue/React. Нужны, чтобы поисковики их лучше понимали, и чтобы у пользователей первая загрузка происходила быстрее. Полезные вещи.
8) Vuex/Redux. Библиотеки, которые позволяют не перекидываться данными между компонентами вашего SPA, а централизованно и хранить и изменять. Сейчас вы скорее всего не понимаете, зачем это нужно, но в процессе изучения Vue и React обязательно поймёте.
9) Jest/Mocha (моча, ахахах). Фреймворки для тестирования. Очень важная штука на больших проектах.
10) UI-фреймворки (Bootstrap, Vuetify, Material Design и т. д.). Позволяют очень быстро создавать симпатичные кнопочки, формы и прочие элементы интерфейсов, не тратя время на написание хреновой горы CSS-кода. Также ПРЯМ РЕАЛЬНО ЗНАЧИТЕЛЬНО упрощают создание адаптивных (подстраивающихся под размер экрана) кроссбраузерных (даже в IE будет норм отображаться) сайтов.
Маслята. Теперь это вы
С чего начать?
0) Установи VSCode или WebStorm, не мучайся с плохими IDE.
1) Изучи HTML и CSS на достаточном уровне для вëрстки какого-нибудь простого одностраничника без взаимодействия с пользователем. Могу порекомендовать вот этот курс на степике. Есть ещё курс Веб-разработчик 10.0 от Glo Academy, рекомендую там посмотреть как минимум видео 1, 4-13.
Обязательно пойми, что такое флексбоксы, основы блочной модели и позиционирования. Это крайне важно.
2) Сверстай одностраничник. Это может быть твоя визитка, сайт для продажи ссаных тряпок, и прочие интересные вещи — макеты подобных сайтов легко найти в сети Internet. Добавь какую-нибудь простейшую форму обратной связи (не обязательно рабочую), анимируй наведение на кнопки и сделай так, чтобы при нажатии на одну из них, например, на секунду на сайте появлялась какая-то надпись.
3) Изучи основы адаптивной вëрстки. Почитай про @media запросы. Переверстай свой сайт с новыми знаниями (Видео с курса)
4) Попробуй сделать то же самое с использованием Bootstrap.
5) Научись пользоваться гитом. В дальнейшем создавай репозиторий под каждый твой учебный проект, ибо без опыта это будет единственным весомым аргументом для работодателя «почему на стажировку нужно взять именно тебя». Небольшой видеокурс (1 час)
6) Пришло время вплотную заняться JavaScript. В этом тебе очень поможет сайт https://learn.javascript.ru/ Это в принципе один из самых лучших учебников по программированию на русском языке, который я знаю, и, если ты потратишь время на то, чтобы прочитать и отработать там весь материал по JS — это будет очень здорово. В качестве практики можно участвовать в интенсивах от тех же Glo Academy, где они верстают «Соцсети», «Онлайн плееры» и прочие нереализуемые за несколько часов вещи, которые звучат круто. Забей на кликбейтные заголовки — это даст тебе неплохое понимание применения JS.
7) Подучи сложные CSS- селекторы. >, псевдоклассы и :not(nth-last-child(3)) должны стать для тебя кристально понятны. (ссылка) Проверь, знаешь ли ты, что значит fit-content, calc(), min(), max(), clamp() и другие подобные вещи. Также будет очень неплохо, если ты решишь изучить БЭМ (Блок-Элемент-Модификатор, технология Яндекса, позволяющаяся не запутываться в именовании классов для больших проектов)Попробуй понять gridы.
8) Научись отправлять запросы на сервер с помощью fetch/axios, если ещё не научился этому в 6 пункте. База. Важно.
9) Примерно тут ты уже можешь верстать годные лендинги и даже чет посложнее. Если повезет — кто-нибудь из знакомых может подкинуть заказ. Но не останавливайся — время расти дальше.
10) Пройди курс по React + Redux от Юрия Бура (Вот ссылка). Даже если потом ты перейдешь на другую технологию. Даже если ты на 100% в этом уверен. Пройди. Он реально хорош, преподаватель все очень приятно и подробно объясняет. По итогу курса ты должен будешь уже уметь создавать пригодные для коммерческого использования SPA и поймешь, как и зачем использовать менеджеры состояний типа Redux/Vuex. Перейти на другой фреймворк после данного курса — как нефиг делать. Если финансы позволяют — рекомендую взять его на Udemy и поддержать автора, благо, он довольно дешевый.
11) После прохождения курса и практики в виде нескольких проектов с применением этих штук (которые ты конечно же не забыл залить на гитхаб, да?) можешь попробовать найти работу джуном. Шанс на успех не самый низкий.
