Материалы программы обучения MetaLamp

Explore

Программа обучения MetaLamp

Front-end

Наиболее распространенные ошибки стажеров на этапе код-ревью.

FAQ по программе обучения. Frontend 1.

Про трудоустройство

Важная информация!

По любым вопросам по программе обучения пишите Светлане в Telegram: @Lana_Dulceva

Внимательно прочитайте введение и правила по работе во время программы.

Проходить программу обучения вы можете из любого уголка нашей страны, работать в дальнейшем тоже можно удалённо. Но если вы проживаете в Томске — у вас есть возможность посещать офис.

Обучение бесплатное и доступно всем. Но трудоустройство в нашу команду возможно только для граждан РФ. Поэтому и пятый этап обучения (код-ревью и командный проект) доступен только для граждан РФ.

INTRO

Добро пожаловать!

Тут собраны задания программы обучения: все участники имеют доступ к плану обучения.

Нам бы очень хотелось видеть, как вы сами кооперируетесь друг с другом и решаете вместе возникающие проблемы. На вашу коммуникацию мы тоже будем обращать внимание — в первую очередь мы ожидаем увидеть в вас приветливого хорошего человека, с которым приятно совместно работать по 8 часов в день :)

Сотрудничайте и помогайте друг другу, вы ни в коем случае не конкуренты, вы все — будущие коллеги и будущие крутые разработчики. Общение осуществляется в чатах в телеграм. У каждого задания есть свой чатик.

Объявлять кому-то о начале своего обучения не нужно. Вам достаточно просто оставить свой первый отчёт в телеграмм чат соответствующего задания, так мы поймем что вы приступили к обучению.

Также, для вашего удобства, оставляем ссылку на материалы программы обучения на сервисе

Rizzoma⁠

. Раньше использовали только его и там могли остаться комментарии, которые ещё не успели перенести сюда. :)

В этом же доке вы можете найти другие полезные материалы по программе обучения:

FAQ по программе обучения для первого этапа.⁠

⁠

Список с наиболее распространенными ошибками стажеров на этапе код-ревью⁠

⁠

Введение и структура курса

Задания разбиты на 5 этапов. Ниже приведены средние сроки прохождения каждого этапа при активном изучении по 30-40 часов в неделю:

1 задание — 1-3 недели

2 задание — 2-4 месяца

3 задание — 3-4 недели

4 задание — 1-2 месяца

5 задание — 3-6 месяцев

6 задание - 2,5 месяца

Формат обучения нацелен на изучение основ и принципов разработки. Мы сторонники фундаментальных знаний и уверены, что без них на ранних этапах обучения в технологии лучше не лезть. Это как пытаться настроить самому всю проводку в доме не зная закона Ома :) Поэтому для начала нужно изучить базис и тогда вы сможете выбирать и осваивать фреймворки осознанно, подбирая лучший под стоящую перед вами задачу:

Вёрстку,

Инструменты сборки,

Архитектуру вёрстки,

Теорию по JavaScript,

MVC и применение его на фронте,

Написание тестов (чтобы понимать, зачем они нужны).

Изучение этого материала разбито на 4 этапа с практическими заданиями, а последний 5-й — это большой рефакторинг на основе наших стандартов с созданием issues в ваших GitHub-репозиториях и проверка ваших знаний на личной беседе (в офисе или через созвон) c неограниченным количеством попыток; а также в пятом задание вам предстоит поучаствовать в групповом проекте. Вас ждут условия, как в реальной работе: требовательные заказчики, добрый скрам-мастер, внимательный продакт-оунер, горящие дедлайны, скоростное изучение новых технологий, взаимное код-ревью, меняющиеся по ходу проекта требования и полная удовлетворенность результатами работы как итог этапа.

Коммуникация во время обучения

Общение во время обучения проходит в Telegram-чатах (если у вас не запускается Telegram — вам необходимо использовать прокси или VPN)

Доступ к телеграм-чатам для общения по первому этапу вы найдёте в конце формы из описания первого задания — заполняйте эту форму, когда приступите к нему. В этом чате вы можете общаться с участниками и задавать вопросы по вёрстке.

Для второго и последующих этапов — аналогично отдельный чат в Телеграм. Мы просим скидывать в каждый чат небольшие отчеты каждый день, после того, как вы поработали над заданиями (если в какой-то день ничего по заданиям не делали — ничего страшного, просто ничего не отсылайте). Отчёт в свободной форме: расскажите, что делали и поделитесь своими впечатлениями.

Если вы уже знаете вёрстку или проходили курсы HTML-Academy, то вы можете сразу перейти ко второму заданию!

Как задавать вопросы?

Вопросы — это хорошо, задавать их нужно: это поможет не только вам, но и всем кто проходит или будет проходить обучение. Помните,

глупых вопросов не бывает⁠

Вопросы по задачам задавать лучше в чате, соответствующего задания.

Вопросы организационные лучше задавать в личном сообщении админам чата или

менеджеру⁠

программы обучения в Telegram.

Перед любым вопросом, конечно же, смотрим сначала вопросы, которые ранее уже тут задавались, и гуглим в гугле. Если вы не нашли ответ, тогда задавайте вопрос )

Очень важно максимально точно и полно описать проблему, тут оба наречия "точно" и "полно" вставлены не просто так. Старайтесь описать проблему так, чтобы ни одна важная деталь не была упущена, а потом выпилите из вопроса все лишнее. Старайтесь задать вопрос так, чтобы не пришлось в ответ спрашивать деталей.

Оформляйте код в

jsfiddle⁠

или

codepen⁠

с вашей проблемой, чтобы там ее можно было найти и сразу же повторить. Там должен быть только минимальный код, описывающий проблему. Возможно, пока вы будете оформлять минимальный код, выпиливая все лишнее, вы сами и найдете проблему.

Не бойтесь вставлять скриншоты (пример программы для скриншота:

joxi⁠

), где показывайте интерфейс, который у вас почему-то не строится, как надо.

Вставлять ссылки на свои github репозитории лучше НЕ надо — для нас тяжело разбираться по каждому вопросу сразу в контексте всего репо, так как надо будет изучить кучу контекста. Небольшие примеры кода на jsfiddle как раз лишены всего нерелевантного и там можно смотреть только на тот код, что создает проблему.

Обязательно надо рассказать, что уже пробовали сделать и какое в итоге расхождение было с желаемым результатом.

Вот отличный сборник правил о том, как грамотно задавать вопросы [
оригинал англ.⁠
] и

[
перевод на русский⁠
]

Вот ещё один пример как задавать вопросы.
Как правильно задавать вопросы - Eric Steven Raymond⁠
⁠

Перед тем, как начать выполнение заданий, мы предлагаем внимательно ознакомиться с форматом прохождения, если вы еще не проходили наш
`тест`⁠
.

По любым вопросам по программе обучения пишите Светлане в Telegram: @Lana_Dulceva

Задание 1. Изучение вёрстки. (1-3 недели)

Если вы уже знаете вёрстку, то вы можете сразу перейти ко второму заданию!

Перед началом изучения материалов — заполните небольшую

форму⁠

, в конце которой вы найдёте ссылку на телеграм-чат, для всех, кто приступает к первому заданию. Задавайте вопросы по ходу изучения в чате.

ВАЖНО! После входа в группу нужно нажать на кнопку “Я не бот”, иначе вас выкинет из группы.

Отчеты за первый этап присылайте в этот чат из

формы⁠

выше, там же общайтесь, задавайте вопросы и помогайте другим участникам — рекомендуем.

Описание задания

В основе всей работы frontend-разработчика лежит создание интерфейсов. Первый и важный навык — умение скомпоновать внешний вид на HTML+СSS по макетам дизайнера.

Часть 1

Мы рекомендуем начать обучение с курса —

Stepik Веб-разработка для начинающих: HTML и CSS⁠

(без последних 2-х блоков).

Это не единственный обучающий ресурс по вёрстке, вы можете сами выбрать любой другой источник, главное просто свериться с содержанием курсов, чтобы не пропустить какие-то важные темы.

Часть 2

Вам необходимо изучить Git (систему контроля версий). Для изучения мы рекомендуем —

https://githowto.com/ru⁠

⁠

Задание вам даст

Уверенные знания вёрстки с HTML и CSS.

Уверенное владение Git. Если вы уже владеете следующими темами, то можете по гиту пока больше не изучать и идти дальше:

Индексация

Коммиты

Ветки (Создание, переключение)

Мерж веток

Просмотр изменений между коммитами или между ветками

Разрешение конфликтов

Клонирование репозиториев

Подключение нескольких удалённых репозиториев

Дополнительный материал к первому блоку

Материалы не являются обязательными и прикладываются в качестве рекомендаций. Вы можете добавить порталы и ссылки в закладки. По мере прохождения курсов мы будем выдавать вам ссылки и порталы, где можно читать дополнительные материалы, искать ответы и следить за новостями отрасли:

Книга «HTML и CSS. Разработка и дизайн веб-сайтов» Джон Дакетт. Полная версия

тут⁠

⁠

Книга «Новая большая книга CSS» Дэвид Макфарланд⁠

⁠

Основа методологии БЭМ⁠

Здесь очень ясно и понятно объясняется :

https://www.youtube.com/watch?v=HihYQVuH64U&t=61s⁠

⁠

HTML on MDN⁠

⁠

HTML и HTML5. Описание тегов по основным разделам⁠

⁠

Список актуальных знаний для HTML-верстальщика⁠

⁠

По любым вопросам по программе обучения пишите Виктору в Telegram: @victor_gorbachev

Материалы рекомендованные другими участниками программы обучения (открывается нажатием на треугольничек)

⁠

https://learn.freecodecamp.org/⁠

— бесплатный аналог htmlacademy

⁠

http://htmlbook.ru/⁠

— теория и есть несложные задачки на верстку (для практики полезная штука)

⁠

http://htmlbook.ru/html⁠

- по html

⁠

http://htmlbook.ru/css⁠

- по cs

⁠

https://webshake.ru/test-html/start⁠

- тест по html, проверь себя

⁠

https://code-basics.ru/languages/javascript⁠

- основы JS, интерактивный бесплатный курс

⁠

https://tproger.ru/translations/flex-properties-on-css/⁠

- анимированое руководство по flex

⁠

http://howtocenterincss.com/⁠

- Как отцентрировать все что угодно

⁠

https://fructcode.com/ru/courses/⁠

- интересный сервис, есть как и база HTML/CSS, так и JS + jQuery для следующего этапа

⁠

https://webref.ru/⁠

— хорошие туториалы по основам

⁠

https://htmlreference.io/⁠

— инфа по html тегам

⁠

https://cssreference.io/⁠

— инфа по css свойствам

⁠

https://flexboxfroggy.com/#ru⁠

— игра для изучения flex

⁠

https://flukeout.github.io/⁠

- игра для изучения css селекторов

⁠

https://tpverstak.ru/flex-cheatsheet/⁠

— хорошая шпаргалка по flex

⁠

https://frontender.info/centering-css-complete-guide/⁠

— все о центрировании в css (много способов для разных задач)

⁠

https://git-scm.com/book/ru/v2⁠

- настольная книга по git

⁠

https://designpub.ru/long-dash-c0b28fab6fdb⁠

- о правилах типографики в вебе

⁠

https://www.youtube.com/watch?v=Rke_Z1-nvUM&list=PL3LQJkGQtzc5rDeb7FjACNb6sOW300yA0⁠

- Git для самых маленьких, наглядно

⁠

https://www.w3schools.com/⁠

-- материал разбит по блокам, можно посмотреть код любого примера, после блоков есть задания на повторение пройденного

⁠

https://habr.com/ru/post/463923/⁠

⁠

https://flexboxfroggy.com/⁠

Игра, позволяет изучить флексы

⁠

http://howtocenterincss.com/⁠

– how to center in CSS.

⁠

https://www.sololearn.com/⁠

- площадка, на которой есть курсы по различным дисциплинам, плюс есть различные тесты и задания.

⁠

https://checkio.org/⁠

- здесь можно попрактиковаться в решении различных задач с помощью js.

Glo Academy -- полезный канал на ютубе по html/css/js/git

Еще есть хороший канал "Фрилансер по жизни". Евгений выкладывает всю информацию бесплатно. На добровольном основе можно задонатить и за это будут крутые плюшки. Не реклама. Сама смотрела его видео и узнала для себя много нового

https://www.youtube.com/channel/UCedskVwIKiZJsO8XdJdLKnA⁠

⁠

http://www.itmathrepetitor.ru/zadachi-po-html-i-css/⁠

- задачки по верстке

⁠

https://basicweb.ru/⁠

- Справочные и учебные материалы HTML, CSS, JavaScript, jQuery

https://learn.javascript.ru/⁠

- современный учебник по JS

⁠

https://github.com/yoksel/common-words⁠

– Слова, часто используемые в CSS-классах (если ступор какой класс задать)

⁠

https://javarush.ru/groups/posts/2683-nachalo-rabotih-s-git-podrobnihy-gayd-dlja-novichkov⁠

- разжёвывается ГИТ досконально на простом языке

Бесплатный курс "Системы контроля версий (GIT)" на 6 часов на русском языке

https://ru.hexlet.io/courses/intro_to_git⁠

⁠

https://www.youtube.com/playlist?list=PLDyvV36pndZFHXjXuwA_NywNrVQO0aQqb⁠

- объемный скринкаст по Git от Ильи Кантор

Для изучения Git рекомендую эту игру:

https://learngitbranching.js.org⁠

⁠

http://cssgridgarden.com/#ru⁠

— игра для изучения gri

⁠

тренажер по Git⁠

⁠

данный плейлист⁠

по Git

Задание 2. Практика вёрстки. (2-4 месяца)

После того, как вёрстка освоена хотя бы в основных моментах, самое время попробовать применить все полученные знания на практике.

Пройдите небольшой

опрос⁠

— в конце опроса вы найдёте ссылку на чат для участников второго этапа.

ВАЖНО! После входа в группу нужно нажать на кнопку “Я не бот”, иначе вас выкинет из группы.

Теперь каждый день, когда вы будете делать задания, мы просим присылать небольшое саммари по итогу дня: над чем вы работали, что получилось, с какими трудностями столкнулись. А так же задавайте вопросы и помогайте другим участникам.

Описание задания

Макет страниц по поиску номеров в отеле находится по

ССЫЛКЕ⁠

Если вдруг увидели сообщение "Editor limit reached", то вот вторая

ССЫЛКА⁠

В макете две вкладки. На первой вкладке представлен UI Kit, а на второй вкладке сами страницы по поиску номеров отеля. Переключение между вкладками находится в левом верхнем углу, рядом со значком ладошки.

Прошлая версия задания: ранее требовалось сверстать макет резюме и макет UI Kit, сейчас эти макеты заменены одним проектом, описанным выше. Тем, кто уже начал делать прошлую версию, можно продолжать работать по ней.

⁠

Рекомендуем познакомиться со

стандартами разработки (bestpractices)⁠

перед началом практического задания. По данным стандартам, на 5м задании, будет проводится код-ревью ваших проектов. Имеет смысл делать сразу по этим стандартам, чтобы ревью прошло быстрее. Ссылка на стандарты продублирована сюда из 5го задания.

⁠

Требования к верстке:

Вся вёрстка должна быть выложена на Github в ваш публичный репозиторий, результатом задачи будет как раз этот репозиторий. Под каждый проект создаём новый репозиторий. Присылать ссылку на него необязательно, это можно будет сделать только в пятом задании в личные сообщения организатору.

Для второго задания выделить отдельный репозиторий (мы потом отдельные issues можем туда делать). Макет опубликовать через Github Pages:

https://youtu.be/9h1UiqBuxO0⁠

, чтобы мы могли быстро проверить конечный результат.

Ссылку на Github Pages добавить в Readme проекта, чтобы мы при проверке могли быстро перейти к самой вёрстке.

С начала работы коммиты в репозиторий делать как можно чаще, минимум раз в день, когда было что-то сделано, а лучше чаще (для каждого нового блока). Не надо копить многодневную работу и сваливать это одним коммитом, для таких вещей лучше использовать ветки. Не бойтесь незаконченные изменения коммитить, в этом нет ничего страшного.

Все коммиты должны иметь осмысленные названия и быть написаны на английском языке.

Ориентироваться на последние версии Chrome и Firefox. На Safari и старые IE можно не обращать внимания для этих заданий

Все отступы и размеры элементов должны быть соблюдены, для этого во время работы используйте

расширение⁠

⁠

Все шрифты должны быть подключены и сгенерированы в форматах .ttf, .woff, .svg, в сервисе

Font2Web⁠

⁠

Количество картинок должно быть минимальным: если элемент состоит из текста, он должен быть текстовым, если элемент — это просто круг, сделать его чистым css, без картинок

Все страницы должны быть по максимуму responsive (

здесь⁠

примеры чем responsive отличается от adaptive и liquid). Можно максимальной ширину сделать 1920, а минимальной 320, а между этими значениями подстраиваться под ширину страницы.

Ставить в приоритет использование современных способов создания сеток, таких как flexbox и grid.

Не использовать фреймворки для создания раскладки страницы, такие как, например, bootstrap. Это, с одной стороны, важно для нашего понимания того, что вы владеете техниками создания раскладки страницы, а с другой, будет полезно вам, так как поможет углубить ваши знания в html и css, и, также, научит решать боевые задачи связанные с созданием раскладки.

Компонентность. В стандартах будет требоваться использование

БЭМ⁠

, так что предлагаем сразу его использовать. Необходимо настроить Parcel или Webpack и шаблоны, чтобы каждый БЭМ-овский блок находился в отдельной папке (там будет шаблон самого блока и все его стили, скрипты и картинки.

Затем в index.pug вы будете просто подключать самые верхние блоки, а они уже будут внутри себя импортировать вложенные блоки, где надо.

Каждый отдельный элемент лучше делать отдельным БЭМ-блоком. Мы сделали

небольшой туториал по компонентной архитектуре⁠

, где вы можете понять основные принципы.

Использовать в макетах препроцессоры по максимуму. Вам в любом случае надо будет это сделать для соблюдения предыдущего требования про компонентность, импорты и вставки компонентов друг в друга вы на сыром HTML не сделаете. Подключайте

Parcel⁠

(или

Webpack⁠

), он же нужен будет для 4-го задания, и через него настройте сборку

Pug⁠

(замену HTML) и

SCSS⁠

(замена CSS). Конкретно эти технологии просто рекомендации, можете использовать другие препроцессоры, главное, чтобы они позволяли вам сделать вкладываемые компоненты с чёткими контрактами.

Небольшие расхождения в PerfectPixel допускаются в местах, где есть неточности в макете (пример: разная ширина у одинаковых блоков).

Макет был подобран так, чтобы вы явно почувствовали типичную проблему верстки — когда есть несколько (от 3-х до 100) страниц верстки, в которых используются часто похожие (совсем похожие или с небольшими отличиями) блоки.

UI-Kit — это единый макет дизайна и единая страница верстки, с которой берут типовые блоки и используют в конечных страницах

На страницах UI-Kit responsive не требуется.

В этом задании вам нужно сверстать все элементы из макета, разбив на компоненты. То есть прямо по макету накидать на одной странице все компоненты.

Сделать отдельно сами страницы проекта по поиску номеров в отеле, где эти блоки будут использоваться. Обратите внимание, что некоторые блоки будут в немного измененных модификациях (в разных местах будут разный цвет, разные масштабы или еще что-то подобное).

Так же такие вещи, как бегунки, календари и дропдауны должны быть сделаны через JS. можете подключать какие угодно jQuery-плагины для этого (вообще ради этого макет и подбирался, чтобы был опыт экспериментов с подключением jQuery и его плагинов)

Проект можно сразу реализовывать с учетом наших СТАНДАРТОВ разработки. Именно на соответствие этим стандартам будет проводиться ревью проекта.

Ссылка на стандарты (best practices)⁠

Если есть вопросы по разработке, спрашивайте в чате задания, в Figma задавать вопросы нет смысла, потому что комменты в первую очередь видит дизайнер, а ответов у него нет.

Задание вам даст

Понимание, как верстать большие макеты с большим количеством одинаковых элементов.

Навыки проектировать компонентную архитектуру, где каждый блок можно переиспользовать.

Работу с препроцессорами

Pug⁠

SCSS⁠

Базовые знания БЭМ.

Навыки отзывчивой вёрстки.

Самые базовые навыки работы с JavaScript.

Базовые знания систем сборок Parcel или WebPack по выбору.

Умение подключать и настраивать шрифты так, чтобы они корректно отображались в разных браузерах.

Умение искать, подключать и настраивать JavaScript-библиотеки и jQuery-плагины в частности.

Навыки работы с макетами в Figma

По любым вопросам по программе обучения пишите Виктору в Telegram: @victor_gorbachev

Дополнительные материалы (открывается нажатием на треугольничек)

⁠

Хорошее⁠

видео про Webpack.

Очень крутое

видео⁠

про Webpack

Отличная

статья⁠

по настройке Webpack с нуля

Подробная статья на английском по настройке

https://hackernoon.com/a-tale-of-webpack-4-and-how-to-finally-configure-it-in-the-right-way-4e94c8e7e5c1⁠

⁠

Очень подробный аж целый онлайн учебник по настройке и работе сборщика

https://survivejs.com/webpack/foreword/⁠

⁠

пример сборки простого статического сайта с помощью webpack 4

https://m.habr.com/ru/post/350886/⁠

⁠

CSS Architecture⁠

(

перевод⁠

) — рекомендации по структуре вашего CSS-кода

Обзор редакторов кода и плагины к ним:

https://htmlacademy.ru/blog/40-editors-for-the-coders⁠

(рекомендуем использовать VSCode или WebStorm)

⁠

Словарь терминов по фронтенду⁠

(так же стоит посмотреть

MDN Web Docs Glossary: Definitions of Web-related terms⁠

)

⁠

https://github.com/kizu/bemto⁠

— удобный инструмент для написания кода по БЭМ-методологии в связке с Pug

В EMMET есть встроенный функционал для

BEM⁠

, если совместить с

Prettier Pug Plugin⁠

, то становится совсем хорошо.

Подкасты:

Frontend Weekend:

https://soundcloud.com/frontend-weekend⁠

⁠

Frontend Юность:

https://soundcloud.com/frontend_u⁠

LoftBlog:

https://soundcloud.com/loftblog⁠

⁠

Задание 3. Изучение JavaScript. (3-4 недели)

Поздравляем вас с выполнением второго задания — оно самое объёмное из всех заданий программы! Впереди JavaScript, ревью-кода, командный этап и личная беседа для проверки ваших знаний.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.

Front-end

Про трудоустройство

Важная информация!

INTRO

Введение и структура курса

Коммуникация во время обучения

Как задавать вопросы?

Перед тем, как начать выполнение заданий, мы предлагаем внимательно ознакомиться с форматом прохождения, если вы еще не проходили наш тест⁠.

Задание 1. Изучение вёрстки. (1-3 недели)

Описание задания

Часть 1

Часть 2

Задание вам даст

Дополнительный материал к первому блоку

Задание 2. Практика вёрстки. (2-4 месяца)

Описание задания

Задание вам даст

Задание 3. Изучение JavaScript. (3-4 недели)

Перед тем, как начать выполнение заданий, мы предлагаем внимательно ознакомиться с форматом прохождения, если вы еще не проходили наш
`тест`⁠
.