- Фронтенд разработчик
- Основные темы
- Необходимые условия
- Получить помощь
- Путь обучения
- Начало работы
- Необходимые условия
- Как понять, что я могу двигаться дальше?
- Основные руководства
- Семантика и структура с HTML
- Необходимые условия
- Как понять, что я могу двигаться дальше?
- Основные модули
- Стилизация и размещение с помощью CSS
- Необходимые условия
- Как понять, что я могу двигаться дальше?
- Основные модули
- Дополнительные ресурсы
- Интерактивность с JavaScript
- Необходимые условия
- Как понять, что я могу двигаться дальше?
- Основные модули
- Веб формы — Работаем с данными пользователя
- Необходимые условия
- Как понять, что я могу двигаться дальше?
- Основные модули
- Заставляем веб работать для всех
- Необходимые условия
- Как понять, что я могу двигаться дальше?
- Основные модули
- Современные инструменты
- Необходимые условия
- Как понять, что я могу двигаться дальше?
- Основные модули
- Found a content problem with this page?
- Если бы я учил Frontend сегодня. Советы начинающим
- HTML и CSS
- Как освоить
- Где брать идеи и макеты для верстки?
- JavaScript
- Зачем мне он нужен?
- Как освоить
- Что дальше?
Фронтенд разработчик
Добро пожаловать на курс обучения Фронтенд разработчика!
Здесь мы предлагаем вам структурированный курс, который научит вас всему, что вам необходимо знать, чтобы стать фронтенд разработчиком. Изучение в рекомендуемом порядке каждого раздела позволит получить новые навыки, или улучшить имеющиеся. Также в каждом разделе вы найдёте упражнения и тесты. Прежде чем переходить к следующей теме обязательно проверьте себя.
Основные темы
В курсе рассматриваются темы:
- Базовая настройка и как правильно проходить курс
- Веб-стандарты и лучшие решения (такие как доступность и кросс-браузерная совместимость)
- HTML, язык, описывающий структуру и смысл контента
- CSS, язык, используемый для оформления страниц
- JavaScript, язык сценариев, используемый для создания динамических функций в веб содержимом
- Инструменты, используемые для облегчения современной веб-разработки на стороне клиента.
Различные разделы предназначены для проработки по порядку, но каждый из них также самодостаточен. Если вы, к примеру, уже хорошо знакомы с HTML, то можете перейти к разделу CSS.
Необходимые условия
Вам не нужно никаких предварительных знаний, чтобы начать этот курс. Всё, что вам необходимо – это компьютер, который может работать с современными браузерами, интернет соединение и готовность учиться.
Если вы не уверены, подходит ли вам фронтенд разработка и/или вы хотите получить подробное представление, то прежде чем начинать полный курс, вам следует сначала изучить наш раздел Начало работы с веб модулем.
Получить помощь
Мы постарались сделать изучение фронтенд разработки настолько комфортным, насколько это возможно. Вероятно, вы всё равно рано или поздно попадёте в безвыходное положение, когда что-то будет непонятно или какой-то код не будет работать.
Не беспокойтесь. Мы все иногда застреваем, и начинающие, и профессиональные веб-разработчики. Статья Обучение и получение помощи предоставит вам серию советов и подсказок для поиска информации и помощи самому себе. Если вы всё ещё в замешательстве, задайте вопрос по возникшей проблеме на нашем Форуме.
Путь обучения
Начало работы
Необходимые условия
Ничего, кроме базовой компьютерной грамотности.
Как понять, что я могу двигаться дальше?
В этой части курса нет оценок, но обязательно убедитесь, что вы ничего здесь не пропустили — важно всё настроить и подготовиться к выполнению упражнений в дальнейшем.
Основные руководства
- Установка базового программного обеспечения— базовая настройка инструмента (15 минут чтения)
- История всемирной сети и веб-стандартов (45 минут чтения)
- Обучение и получение помощи (45 минут чтения)
Семантика и структура с HTML
Время завершения: 35–50 часов
Необходимые условия
Ничего, кроме базовой компьютерной грамотности и базовой среды разработки веб-приложений.
Как понять, что я могу двигаться дальше?
Оценки в каждом модуле предназначены для проверки ваших знаний по предмету — завершение каждого из них докажет, что вы можете перейти к следующему модулю.
Основные модули
- Введение в HTML (15–20 часов чтения/упражнений)
- Мультимедиа и встраивание (15–20 часов чтения/упражнений)
- HTML таблицы (5–10 часов чтения/упражнений)
Стилизация и размещение с помощью CSS
Время завершения: 90–120 часов
Необходимые условия
Рекомендуется иметь базовые знания HTML перед началом изучения CSS. Сначала вы должны изучить Введение в HTML.
Как понять, что я могу двигаться дальше?
Оценки в каждом модуле предназначены для проверки ваших знаний по предмету — завершение каждого из них докажет, что вы можете перейти к следующему модулю.
Основные модули
- Первые шаги в CSS (10–15 часов чтения/упражнений)
- Структурные элементы CSS (35–45 часов чтения/упражнений)
- Стилизирование текста (15–20 часов чтения/упражнений)
- CSS разметка (30–40 часов чтения/упражнений)
Дополнительные ресурсы
Интерактивность с JavaScript
Время завершения: 135–185 часов
Необходимые условия
Рекомендуется иметь базовые знания HTML перед началом изучения JavaScript. Сначала вы должны изучить Введение в HTML.
Как понять, что я могу двигаться дальше?
Оценки в каждом модуле предназначены для проверки ваших знаний по предмету — завершение каждого из них докажет, что вы можете перейти к следующему модулю.
Основные модули
- Первые шаги в JavaScript (30–40 часов чтения/упражнений)
- Структурные элементы Javascript (25–35 часов чтения/упражнений)
- Клиентский веб API (30–40 часов чтения/упражнений)
- Введение в объекты Javascript (25–35 часов чтения/упражнений)
- Асинхронный Javascript (25–35 часов чтения/упражнений)
Веб формы — Работаем с данными пользователя
Время завершения: 40–50 часов
Необходимые условия
Для эффективного использования форм требуется знание HTML, CSS и JavaScript. Они сложны и поэтому рассматриваются отдельно.
Как понять, что я могу двигаться дальше?
Упражнения и оценки в каждом модуле предназначены для проверки ваших знаний по предмету — завершение каждого из них докажет, что вы можете перейти к следующему модулю.
Основные модули
Заставляем веб работать для всех
Время завершения: 60–75 часов
Необходимые условия
Рекомендуется ознакомиться с HTML, CSS и JavaScript перед началом работы с этим разделом — многие из техник и лучших практик используются в нескольких технологиях.
Как понять, что я могу двигаться дальше?
Упражнения и оценки в каждом модуле предназначены для проверки ваших знаний по предмету — завершение каждого из них докажет, что вы можете перейти к следующему модулю.
Основные модули
Современные инструменты
Время завершения: 55–90 часов
Необходимые условия
Рекомендуется ознакомиться с HTML, CSS и JavaScript перед началом работы с этим разделом, так как обсуждаемые инструменты работают со многими из этих технологий.
Как понять, что я могу двигаться дальше?
В этом наборе модулей нет специальных статей для оценки, но учебные примеры в конце 2-го и 3-го модулей хорошо подготовят вас к пониманию основ современного инструментария.
Основные модули
Found a content problem with this page?
This page was last modified on 20 июл. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Если бы я учил 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 в веб-разработке очень многогранен и богат различными технологиями для совершенно разных задач. Изучай, пробуй, экспериментируй и получай удовольствие от созидания красивых и удобных интерфейсов для любых целей. За это мы и любим фронтенд.
P.S. Каждую технологию в этой статье я сопровождал ссылкой на документацию или примеры использования. Ты можешь ознакомиться с ними, чтобы получить более широкое представление об веб-разработке.