Обучающие материалы для стажеров на Frontend

Стажировка в WB—Tech

Привет!

Здесь ты найдешь материалы для обучения по направлению Frontend.

Если появились вопросы, пиши в Slack в канал #frontend. Надеемся, ты справишься и станешь частью команды.

Успехов в обучении!

P.S. Кстати, эти материалы были подобраны для нашей Школы стажеров

HTML

Основа основ во фронтенде. Рассмотрим темы:

1. Структура страницы.
2. Семантика (HTML5).
3. Формы.

Ресурсы для изучения

Видео-курс по HTML

15 уроков по HTML Basics.

Учебник по HTML5

Дженнифер Роббинс “HTML5. Карманный справочник”.

CSS

Основа основ во фронтенде. Рассмотрим темы:

1. Селекторы.
2. Box Model.
3. Позиционирование.
4. Flexbox.
5. Псевдоэлементы.
6. Медиа запросы.
7. Анимации.
8. Препроцессоры (SASS), nesting, создание переменных (дополнительно).
9. Bootstrap: знать, что такое и как пользоваться (дополнительно).
10. BEM (дополнительно).

Ресурсы для изучения

Видео-курс по CSS

23 урока по CSS Basics.

Учебник по CSS

Дэвид Макфарланд “Новая большая книга CSS”.

Flexbox

Короткий гайд.

BEM

БЭМ — методология web-разработки, а также набор интерфейсных библиотек, фреймворков и вспомогательных инструментов. Изучить все разделы.

JavaScript

Это один из основных языков программирования, который можно использовать в backend и frontend. Основные темы:

1. Взаимодействие с DOM.
2. Замыкания.
3. Стрелочные функции.
4. Promises.
5. Async Await.
6. Event Loop.
7. Методы массивов.
8. Весь синтаксис ES6.
9. Деструктуризация.
10. Классы.
11. Fetch (работа с сервером).
12. jQuery.

Ресурсы для изучения

Видео-курс

14 уроков по основам языка.

Онлайн-учебник

Учебник по JavaScript.

Серия из 6 книг Кайла Симпсона “Вы мне знаете JS”

1. Начните и Совершенствуйтесь.
2. Область видимости и замыкания.
3. this и Прототипы Объектов.
4. Типы и грамматика.
5. Асинхронность и Производительность.
6. ES6 и не только.

Пособие по JS

Книга на русском языке Адитья Бхаргава “Грокаем алгоритм”.

Инструменты для frontend разработки

Рассмотрим менеджеры пакетов и сборку проекта.

Ресурсы для изучения

Менеджеры пакетов

npm (англ. Node Package Manager) — менеджер пакетов, входящий в состав Node.js.

Yarn — это альтернативный npm-клиент для работы в качестве пакетного менеджера JavaScript.

Сборка проекта

webpack — это сборщик модулей JavaScript с открытым исходным кодом.

Gulp — это таск-менеджер для автоматического выполнения часто используемых задач, написанный на JavaScript.

Управление и процессы

Git

Система контроля версий, которую мы используем.

Ресурсы для изучения

Руководство с примерами

Курс обучения Git на русском языке.

ProGit Book

Книга на английском или русском языке.

Бонус

Игра, обучающая работе с Git.

Виртуализация

Для виртуализации серверов используем Docker.

Ресурсы для изучения

Видео-урок по основам Docker

Все, что нужно знать про Docker за 46 минут.