frontend разработчик обучение бесплатно
🕸 14 лучших каналов YouTube для фронтенд-разработчика
Фронтенд-разработчик – это не только ценная верстка, но 3-4, а временами и 19 навыков в сборной солянке, которую нужно уметь приготовить и воспроизводить изо дня в день. Да, непросто, но для этого мы тут и собрались. Погнали!
1. Front-end Science
Их труды позволят зрителям прокачать знания, подготовиться к собеседованию, устроиться на крутую работу мечты и наконец-то понять, что фронтенд – это интересно и увлекательно!
Звук и качество видео достойные.
2. Loftblog
3. MakeWeb.me
Проект для тех, кого интересует веб-разработка и мир IT. Авторы регулярно создают обучающие ролики на актуальные темы, а также проводят онлайн-стримы.
4. Гоша Дударь
Один из крупных русскоязычных каналов по веб-разработке и не только. 714+ тыс. подписчиков – это вам не шуточки. Ресурс публикует ролики на разные темы: React, Java, Android, CSS, JavaScript, NodeJs и т. д.
Если хотите изучить веб-программирование на более углубленном уровне, на канале можно найти уроки по фреймворкам и движкам. Лектор молодой, раздражающей рекламы нет, звук и качество видео достойные.
5. DKA-DEVELOP
Очередной русскоязычный канал универсальной тематики. Он пригодится как начинающим фронтендерам, так и фулстекам-разработчикам.
6. Web Developer Blog
Звук и качество видео достойные.
7. #JS Code
Качество видео нормальное, а вот в звуке есть небольшое эхо.
8. Programming with Mosh
Англоязычный канал, на который подписано более 2 млн. пользователей – есть смысл довериться.
У автора нет невнятных акцентов, нет навязчивой рекламы, отсутствует режим-снотворного. Рекомендуем к использованию.
9. Traversy Media
10. webDev
Русскоязычный образовательный канал, целью которого является обучение всех желающих основам (и не только) веб-ремесла.
Здесь вы найдете ролики для новичков по следующим темам:
Звук и качество видео достойные.
11. Devslopes
140 тыс. подписчиков считают этот ресурс самой доступной и эффективной в мире платформой для обучения программированию. Это по большей части правда – на канале много плейлистов с большим количеством видео по разным технологиям. Хотите JavaScript – пожалуйста, хотите Android или Q / A – держите, геймдев и iOS – их тоже есть. Очень годный контент с достойной подачей.
12. Zero To Mastery
Это место, куда приходят, чтобы научиться программировать, получить работу в компаниях мирового класса и весело провести время на этом пути.
Ролики актуальны, на приличном английском языке, с хорошей картинкой и звуком. Зачет!
13. DesignCourse
Новые ролики выходят еженедельно в одно время.
14. Harry Wolff
Лектор – фанат JavaScript с более чем десятилетним опытом в веб-разработке. Каждую неделю он публикует новое видео.
Канал еще молод, но уже имеет задатки успешного места силы, наполненного качественным контентом.
Заключение
Не перевелись еще достойные онлайн-источники для бесплатного качественного обучения и наша подборка тому подтверждение. Разные источники отлично дополняют друг друга, что положительно влияет на итоговый результат.
Не стесняйтесь пробовать всевозможные варианты, не ленитесь, а мы будем рады вашим комментариям с не упомянутыми в обзоре источниками, из которых вы черпаете скиллы. Удачи в обучении!
Бесплатные образовательные курсы: фронтенд-разработка
Порядочный фронтендер знает HTML и CSS, разбирается во фреймворках и библиотеках, понимает, что находится «под капотом» на серверной стороне. Плюс, обязательно умеет работать с контролем версий, использовать графические редакторы, разбираться в шаблонах разных CMS.
Сегодня наша подборка посвящена именно фронтенд-разработке. В нее вошли 15 бесплатных курсов из раздела Образование на Хабр Карьере, которые познакомят с основами основ — HTML, CSS, JavaScript — и еще с кучей полезных вещей.
Если вы где-то видели интересный бесплатный курс и не нашли его в этом списке — делитесь ссылками в комментариях.
Вы только начали свой путь в веб-разработке? На этом курсе вас научат профессионально оформлять внешний вид сайтов. В программе рассматриваются базовые свойства CSS и основные, CSS-селекторы, разработка макетов страниц с помощью относительного позиционирования CSS и лучшие практики в веб-дизайне.
HTML Fundamentals · SoloLearn
Это не курс, а обучающая игра по HTML для всех, кто хочет научиться создавать сайты с использованием тегов, элементов и атрибутов. Она состоит из тестов, увлекательных упражнений, контрольных точек и практики, чтобы вы получили больше знаний и драйва от их применения.
Programming for the Web with JavaScript · edX
Здесь вы узнаете, что позволяет браузерам отправлять и получать веб-контент, как создавать динамические интерактивные веб-страницы на JS, а также познакомитесь с объектной моделью документа (DOM), с jQuery, клиентскими библиотеками JavaScript и фреймворками. Обо всем расскажут преподаватели из Университета Пенсильвании.
JavaScript Tutorial · SoloLearn
Курс охватывает все основные функции разработки на JavaScript, в том числе способы сделать сайт более интерактивным, менять его содержимое, проверять формы, создавать файлы cookie и многое другое.
HTML для начинающих · Code Basics
Отличный базовый курс об основах работы с HTML-разметкой. Программа состоит из семи модулей и научит вас основам форматирования текста, встраиванию в документ фото, видео и аудио, структуре документа и семантическим элементам HTML5.
Знакомство с HTML и CSS · HTML Academy
На этом курсе вы познаете основы HTML и CSS и на практике разберетесь с семантической разметкой и базовыми механизмами стилизации на примере небольшого сайта. В программе 5 глав, домашка к каждой, а еще интересные задания и испытания, чтобы вы не заскучали от переизбытка теории.
CSS для начинающих · Code Basics
Каскадные таблицы стилей позволяют оформлять содержимое страницы. После прохождения этого курса вы научитесь настраивать внешний вид текста и блоков на сайте: отступы, цвет, размер шрифта и многие другие параметры. В программе четыре подробных модуля с лекциями и упражнениями.
HTML5 and CSS Fundamentals · edX
Узнайте, как создавать сайты с использованием HTML5 и базового CSS. Курс состоит из шести модулей, где вас познакомят с «большой тройкой» — HTML5, CSS и JavaScript, расскажут об элементах, тегах, атрибутах и стилях, а также об отладке багов и об основах лейаута страниц.
Курс Javascript / jQuery · FructCode
Мини-курс, который даст вам начальное представление о работе с DOM, как с помощью JavaScript ES5, так и с помощью jQuery. Курс подходит для начинающих с нуля, но знать основы HTML/CSS все же нужно. Программа включает четыре блока и 21 задание, чтобы потренировать полученные навыки.
JavaScript для начинающих · Stepik
Этот курс познакомит слушателей с основами разработки на JavaScript и подготовит к практическому применению этого инструмента. Он рассчитан на новичков в программировании. Чтобы освоить программу достаточно желания, внимательности и общей компьютерной грамотности.
Веб разработчик · Яндекс.Практикум
Бесплатный вводный курс, на котором вы сможете попробовать себя в качестве веб-разработчика и обучиться азам этой профессии. Полученный опыт позволит оценить возможности, силу мотивации, и решить, нужно ли идти дальше. В бесплатную часть входит 20 часов теории и 215 практических заданий.
Курс HTML / CSS · beONmax
Окончив этот курс, вы будете знать основы HTML и CSS, уметь создавать адаптивные HTML страницы. Благодаря интерактивным тестам и заданиям, вы сможете закрепить полученные знания по HTML и CSS верстке и разработке сайтов на практике.
HTML для начинающих · Loftblog
За 11 компактных видеоуроков этого курса вы познакомитесь с тегами и атрибутами, списками, таблицами, фреймами, формами и семантическими особенностями HTML5.
Основы HTML и CSS · Нетология
Здесь вас научит вносить правки в HTML-код страницы и верстать текстовые блоки, менять оформление и стиль отдельных элементов сайта. А еще вы узнаете, какие специалисты работают над разными частями веб-проектов и как их работа соединяется в общий результат.
Курс HTML / CSS · FructCode
С помощью этого видеокурса вы научитесь верстать адаптивные HTML-страницы и самостоятельно создадите портал КиноМонстр, работающий как на компьютерах, так и на мобильных устройствах.
Больше бесплатных и платных курсов для фронтендеров, тестировщиков, девопсов, дизайнеров и менеджеров — в разделе Образование на Хабр карьере.
Хочу стать frontend разработчиком: базовые знания и план обучения
Авторизуйтесь
Хочу стать frontend разработчиком: базовые знания и план обучения
Итак, друзья, вы решили встать на путь программирования? Жму руку, это решение изменит вашу жизнь. Это всегда интересная и востребованная работа на стыке интеллекта и творчества, работа о том, как принести пользу людям, сделать мир чуточку лучше. Возможности реализации в ней бесконечны.
В программировании много разных областей: веб-разработка, мобильная, десктопные приложения, разработка ОС, драйверов для железа. Веб-разработка — одна из самых интересных и востребованных областей. К её плюсам можно отнести то, что ваш продукт лежит в Интернете, и чтобы его увидеть, достаточно набрать адрес в браузере любого устройства, не нужно ничего качать и устанавливать. К тому же, с помощью современных инструментов, зная веб, можно разрабатывать сразу и мобильные, и десктопные приложения. Веб состоит из frontend (то, что видит клиент в браузере) и backend (серверная часть, занимается хранением, обработкой и выдачей данных). Я предлагаю начать знакомство с вебом именно с фронтенда.
Да, кстати, меня зовут Роман Латкин, я почти 10 лет варюсь в веб-разработке. Когда я начинал, всё было одновременно просто и сложно. Просто, потому что для построения приложения много знать было не нужно: вот HTML, немного CSS, чуть-чуть JavaScript — и готово. Сложно, потому что разработка велась через боль. Сейчас множество этой боли вылечено с помощью громадной экосистемы инструментов, но она очень пугает новичков, они не знают, как подступиться к фронтенду, с какой стороны подойти. Мне повезло, я наблюдал развитие фронтенда почти с начала, и у меня в голове всё неплохо уложилось. И я хочу в помощь начинающим разработчикам передать это понимание. Надеюсь, после прочтения этой статьи, вы будете чётко знать, каким путём идти, куда копать и по какому плану развиваться.
Три составляющих фронтенда
Если вам придётся как-нибудь вручную использовать эти средства, чтобы сделать более-менее сложный проект, то вам предстоит испытать много боли. К счастью, мир развивается, сложные вещи упрощаются, люди придумывают всё новые и новые инструменты и технологии, которые делают этот созидательный процесс более приятным и быстрым.
Любой процесс познания можно представить в виде буквы «Т», где горизонтальная линия — широкое понимание, вертикальная — глубокое. У идеального специалиста буква Т большая и красивая, равномерная. Если она вытянута в одну сторону, она некрасива, уродлива; такой специалист мало полезен в боевых делах. Он может либо глубоко разбираться в чём-то одном, но чуть шаг в сторону, и он непригоден; либо поверхностно разбираться во всём, но при этом ничего не уметь. В первую очередь необходимо максимально развить широкую составляющую, чем мы сейчас и займёмся — постараемся максимально широко охватить все аспекты фронтенда, не углубляясь. А потом вы займётесь углублением, которое останется вам на самостоятельную работу.
Чтобы хорошо представлять причины текущего положения вещей, нужно хотя бы чуть-чуть знать историю пути развития фронтенда, да и вообще веб-приложений в целом. Инструментов сейчас столько, что не только новичок, сам чёрт ногу сломит. Поэтому, чтобы в этом всём хорошо ориентироваться, начнём именно с истории, с короткой экскурсии, как всё начиналось, а затем плавно перейдём к современным подходам.
Первые сайты
Вначале люди писали на чистом HTML, рисовали внешний вид на чистом CSS, делали логику на чистом JavaScript. Типичное старомодное приложение — это когда серверная логика генерирует HTML (отвечая на запрос посетителя, сервер берёт данные из базы данных и вставляет их в HTML) и отдаёт его вместе со статическими файлами стилей и клиентской логики на JavaScript, которой в то время (около 10 лет назад) было немного. При совершении перехода на другую страницу весь этот процесс повторялся. То есть раньше как такового разделения на фронтенд и бэкенд не было, было одно цельное приложение, которое одновременно и работало с базой данных, и генерировало HTML.
jQuery
Писать на чистом JavaScript надоедало и появился хороший инструмент — jQuery, который с помощью удобного синтаксиса позволял обращаться к элементам страницы и выполнять с ними какие-то действия. Появлялись различные плагины, готовые решения, стало проще и интереснее.
Но приложения развивались, объём клиентской логики рос, и постепенно всё это превращалось в большую лапшу. Чтобы её распутать, нужна была какая-то форма, архитектура.
Умные Парни попробовали перенести на фронтенд архитектурный шаблон с серверной части — MVC (модель-представление-контроллер). Этот шаблон диктует правило, что есть модель, которая описывает данные. Например, модель пользователя, модель фильма, модель отзыва. Есть контроллер, который обрабатывает запросы, например «показать по такому-то адресу страницу со списком фильмов». И есть представление, которое отвечает за отображение данных в HTML, в которое контроллер передаёт готовые данные, полученные из базы данных/API.
Здесь началась история single page application, SPA — приложений, которые загружаются один раз, а затем при переходе по страницам обращаются к серверу за данными по API. Этот подход называется AJAX. Вместо того, чтобы генерировать HTML на стороне сервера, сервер отдаёт клиентскую логику приложения один раз. Переходя на другую страницу, например с главной страницы на страницу поиска отелей, приложение запрашивает с сервера данные в чистом виде (к примеру, информацию об отелях), без тегов HTML (как правило в формате JSON), и самостоятельно генерирует представление.
Шаблон MVC на фронтенде был хорош, прекрасно работал, но было излишне сложно. Angular, Backbone — представители этой вехи истории. Они, к слову, живут и сейчас, но я в них глубоко не разбирался.
Процессоры и сборщики
Приложения начали расти в размере, и тут пришло время рассказать о сборщиках, препроцессорах и пакетных менеджерах. Постараюсь вкратце по ним пробежаться, несмотря на то, что они заслуживают отдельной статьи.
В вебе важна скорость, поэтому нельзя просто так отдавать посетителю большие файлы, они будут идти по сети слишком долго. Поэтому все ресурсы сжимаются с помощью разных минификаторов. JavaScript чаще всего с помощью uglify (он удаляет пробелы, делает названия переменных короче и ещё много чего интересного). В CSS удаляются пробелы и могут ещё объединяться некоторые свойства. И всё это собирается в один или несколько файлов вместо 10-20, один файл скачать гораздо быстрее, и на сервер нагрузка меньше.
Что касается CSS, появлялись так называемые препроцессоры. Они расширяют синтаксис CSS, добавляют туда кучу разных возможностей — вложенные блоки, переменные, циклы. Даже просто отсутствие точек с запятой очень помогает и ускоряет написание кода?.
Препроцессор — это такая программа, которая запускается и компилирует этот сахарный синтаксис в чистый CSS. Использование препроцессоров позволяет избежать повторного использования кода, выстраивает архитектуру, и по сути превращает язык описания стилей в язык программирования. Изучите какой-либо инструмент, и вы поймете. Я для себя сейчас выбрал Stylus; есть ещё несколько, например — LESS, SASS.
Чуть позже придумали постпроцессоры. Они, в отличие от препроцессоров, обрабатывают уже готовый CSS, модифицируя его: например, добавляя дополнительные свойства к уже существующим, или изменяя названия классов, делая их уникальными, чтобы ничего не сломалось. Их чаще всего используют для поддержки кроссбраузерности, о которой мы ещё поговорим ниже. PostCSS — вот этот самый постпроцессор, он ещё обладает большой библиотекой плагинов, упрощающих жизнь.
JavaScript
Насчёт JavaScript: исторически так сложилось, что этот язык изначально был слишком простой и сейчас постоянно развивается, обрастая новыми инструментами. Основная его версия, которая работает во всех современных браузерах, называется ES5. В 2015-м году появился усовершенствованный стандарт JavaScript ES2015, или ES6, который даёт много новых инструментов упрощённого описания логики. Только он не работает в старых браузерах, поэтому используют препроцессор Babel для компиляции его в ES5. То есть код пишется с помощью современного синтаксиса ES6, а для работы в браузере сразу компилируется в ES5.
Есть ещё разные способы писать нормальный код, которые сводятся к тому же: код пишется на своём «особом» языке (как в случае с ES6), а потом транслируется в JavaScript. Вот некоторые из этих «особых» языков программирования:
Чтобы удобно вставлять динамические данные в HTML, отделяя данные от разметки, придумали шаблонизаторы. Например, в разметке пишется
Менеджеры пакетов
Чтобы не изобретать велосипеды, разработчики давно научились делиться между собой готовыми участками кода, модулями. Во фронтенде для этого активно используется менеджер зависимостей npm. На npmjs.com можно найти огромное количество модулей, плагинов, библиотек на все случаи жизни. Прежде чем писать что-то своё, поищите там.
Позже появился усовершенствованный менеджер зависимостей Yarn, он делает всё быстрее и стабильнее, не буду сейчас углубляться, почему.
Менеджеры задач
Для того, чтобы централизованно управлять всем этим зоопарком, появлялись менеджеры задач. Они позволяют в одном месте описать все процессы и этапы сборки приложения. Это Grunt, Gulp, Webpack. Последний — наиболее подходящий для сборки веб-приложения. Он может взять на себя много забот, легко и просто компилировать все ресурсы, будь то скрипты, стили, разметка, картинки — в любом формате (Stylus, Less, Sass, ES6, TypeScript, jpg, png) из любых исходников — в единые бандлы, сборки файлов js, CSS, HTML, которые будут работать в браузере.
Компонентная архитектура
Итак, можно продолжить: сложное начали упрощать, и в ходе упрощения, большого упрощения, Умные Парни решили — всё есть компонент. Кнопка — это компонент, шапка — компонент, выбор города — компонент. Страница — тоже компонент. Компонент может содержать в себе другие компоненты. Получилось крайне просто: такая концепция, как оказалось, пришлась как родная к построению клиентских приложений.
Что такое компонент? Это самостоятельный и независимый участок разметки со своей логикой и стилями. У компонента есть свое текущее состояние. Открыто ли меню, активна ли вкладка, и т.п. Состояние всего приложения можно представить как дерево состояний различных компонентов.
Разметка HTML зависит от текущего состояния, изменилось состояние — изменилась разметка. Это реализуется с помощью технологии Virtual Dom — когда DOM (дерево HTML-элементов страницы) рассчитывается сначала виртуально и в конце расчёта отображается в реальном DOM, в разметке. За счёт этой идеи достигли более высокой производительности приложений, ведь одна из самых тяжёлых частей работы браузера — операции с DOM (работа с деревом объектов HTML).
Здесь важно ввести ещё одно понятие — реактивные приложения. Это, упрощённо говоря, когда вместо прямого изменения DOM/Virtual Dom при изменении данных, вводится объект состояния, модель данных, и на её изменения подписывается обработчик, который уже меняет DOM. То есть чтобы что-то поменять в представлении, HTML (например, таблица со списком пользователей), нам достаточно изменить свойство модели (добавить в массив нового пользователя), всё остальное произойдет само (пользователь появится в html-таблице). Вы, наверное, замечали, что некоторые сайты медленно работают, а другие молниеносны. Скорее всего, первый на jQuery и работает с реальным DOM, второй — на одном из реактивных инструментов, с которыми мы познакомимся далее.
React
Итак, эти концепции (Virtual Dom, компоненты, реактивность) улеглись в новом инструменте создания клиентских приложений от Facebook — React. На текущий момент он является одним из лидеров индустрии, наиболее часто используемым во фронтенде. Он обладает развитой экосистемой — можно найти огромное количество готовых компонентов и дополнений.
Управление состоянием
Но между компонентами нужно было наладить связь, им нужно общаться между собой. Нажали на кнопку — изменился цвет. Можно строить эту взаимосвязь напрямую, но это быстро может превратиться в кашу. Тут придумали шаблон централизованного управления состоянием, когда есть одно место, где хранится состояние всего приложения в текущий момент времени. Это, сильно упрощая, такой JavaScript-объект со свойствами. Это состояние изменяется с помощью вызова действий и мутаций, но не будем сейчас так углубляться. Паттерн называется Flux. Самая популярная имплементация управления состоянием для React — Redux.
Vue.js
Тут появился Vue.js — гибкий, эффективный и простой в освоении веб-фреймворк, который несёт в себе всё те же концепции, но они в нём выглядят гораздо удачнее. Он объединил в себе всё лучшее из Angular и React, более чётко ответил на вопрос «что есть что». Из коробки Vue содержит уже большое количество инструментов и возможностей, которые в несколько строк позволяют писать объёмную логику. Разработка значительно упростилась.
Vue принёс ещё несколько интересных концепций, как, например, однофайловые компоненты — файлы, которые содержат в себе сразу логику, разметку и стили, и они там не переплетаются, как в случае с React и JSX. Vue из коробки позволяет использовать любые препроцессоры, которые очень органично вписываются в однофайловые компоненты. И имеет множество готовых встроенных решений, даже свою имплементацию Flux. Vue обладает отличной документацией на русском языке, которая научит вас лучшей практике во фронтенде, от сборки приложения до автотестов.
Изоморфные приложения, SSR
В разговоре об одностраничных приложениях мы упустили одну важную деталь: когда поисковый робот обращается к одностраничному приложению, он ничего не видит — только пустую страницу с тегами body без контента. В старомодных приложениях сервер обратился бы к базе данных, сгенерировал представление и отдал бы готовый HTML с текстом страницы. В случае с одностраничным приложением сервер отдаёт пустую страницу, которая лишь после инициализации подтягивает данные и показывает представление, чего конечно же поисковый робот не сделает. Таким образом, использовать одностраничные приложения для сайтов, ориентированных на контент, SEO, недопустимо.
Это недопущение обходилось множеством хаков и костылей, пока не появилась концепция SSR — Server-Side Rendering. Умные Парни научили весь JavaScript, который работал в браузере, выполняться на сервере с помощью NodeJS (технология создания серверных приложений с помощью браузерного языка JavaScript). Это, конечно, ввело свои ограничения, но жить стало легче. Теперь можно было написать логику один раз на одном языке, и она сразу же работала и на сервере (при первом обращении посетителя/робота генерировался HTML с контентом страницы) и в браузере (последующие переходы посетителя). Это и называется изоморфное, универсальное приложение.
Схема простая: при первом заходе посетитель отправляет запрос на сервер NodeJS, который обращается к API-серверу, берёт данные в виде JSON и отрисовывает их в HTML, возвращая посетителю. Дальше уже приложение живёт в браузере, при последующих переходах по страницам оно напрямую обращается к API-серверу за данными и уже непосредственно в браузере отрисовывает представление.
В React имплементация этой схемы делается разными и сложными путями. В качестве готовых решений есть для этого, например, фреймворк Next.js. В документации Vue есть целый раздел, посвященный SSR. Там указан фреймворк Nuxt — Vue + SSR. С его помощью можно довольно легко писать такие универсальные приложения.
CSS-фреймворки, адаптивность
Теперь мы сменим тему на попроще и поговорим о вёрстке.
В настоящее время всё упрощается, уже почти все браузеры поддерживают Flexbox и CSS Grid — современные удобные способы верстать сетку страницы. Их умелое сочетание позволяет в несколько свойств добиваться таких положений контейнеров, над которыми пришлось бы старыми методами изрядно попотеть, позволяя с лёгкостью выполнить практически любые дизайнерские изыски.
Адаптивность — это способность страницы выглядеть одинаково хорошо на всех устройствах, будь то ноутбук, планшет или мобильный телефон. Адаптивность достигается с помощью медиа-запросов — блоков условий в CSS, при каких разрешениях экрана какие CSS-свойства должны работать. Её можно также добиться с помощью умелого применения flexbox-контейнеров.
Все веб-приложения в основном типичны, состоят из строк, колонок, таблиц, кнопок и других UI-элементов. Чтобы не писать их каждый раз, в помощь сайтостроителям создавались CSS-фреймворки, где вся разметка уже продумана — достаточно применить нужный класс. Они содержат в себе множество готовых UI-элементов. Самый популярный — конечно же Bootstrap, сейчас уже 4-я версия. Есть ещё Bulma, тоже довольно хороший. И ещё множество менее популярных. Обычно в CSS-фреймворках адаптивность идёт из коробки, важно лишь правильно пользоваться предлагаемыми инструментами. CSS-фреймворки станут отличной основой практически в любом вашем веб-приложении и хорошим началом освоения навыков правильной вёрстки. Их стоит использовать, когда нужны типичные элементы пользовательского интерфейса, адаптивность, а это 99% кейсов в вебе.
Кроссбраузерность
Методологии
Чтобы вёрстка не превратилась в суп, ничего внезапно не ехало, всё было чётко и красиво — существуют специальные подходы, сборники правил о том, как называть тот или иной класс. Они очень вписываются в компонентную архитектуру, надо сказать, с них она и началась. Правило то же — всё есть компонент, или по-другому «блок». У блока есть свои элементы, мини-блоки, из которых и состоит блок. Изменяют отображение блока модификаторы, применяя к нему то или иное свойство. Изучите БЭМ от Яндекса или SUIT CSS, прежде чем начинать заниматься верстанием.
В путь!
Надеюсь, к концу статьи у вас уже сложилось более-менее полное и широкое понимание всех аспектов фронтенда. Теперь вам остаётся лишь его углублять, следуя шаг за шагом. Предложу вам план этих шагов, как стать профессиональным фронтендером:
Готово! Дальше только практика, вернее, она должна была начаться с первого пункта, а сейчас достигнуть своего апогея. Теперь вы мастер фронтенда! Хотя кто знает, может, к тому времени опять выйдет в свет какой-нибудь инструмент, который всё перевернёт во фронтенде, и придётся полностью менять свои понимания?
Глубоко в каждой теме не закапывайтесь, не старайтесь всё сразу запомнить. Главное — помнить, где и что посмотреть. Никогда не будет лишним повторить основы. Полезно общаться в комьюнити и желательно иметь живого, пусть даже удалённого, наставника, который поможет направить в случае застоя. Помните, что лучшее понимание приходит в процессе решения задач.
Хинт для программистов: если зарегистрируетесь на соревнования Huawei Cup, то бесплатно получите доступ к онлайн-школе для участников. Можно прокачаться по разным навыкам и выиграть призы в самом соревновании.
Перейти к регистрации