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

Explore

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

Front-end
Front-end

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

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

У нас есть лимит на трудоустраиваемых сотрудников в месяц к нам в компанию, но мы все равно трудоустроим ВСЕХ, кто завершил полностью программу. Либо к нам в команду, либо к нашим партнерам.

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

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

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

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

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

INTRO

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

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

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

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

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

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

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

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

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

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

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

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

Вёрстку,

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

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

Теорию по JavaScript,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

jsfiddle⁠

или

codepen⁠

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

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

joxi⁠

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

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

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

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

оригинал англ.⁠

] и

[

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

]

Вот ещё один пример как задавать вопросы.

Как правильно задавать вопросы - Eric Steven Raymond⁠

⁠

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

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

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

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

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

форму⁠

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

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

формы⁠

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

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

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

Часть 1

Мы рекомендуем начать обучение с крутого и полезного сервиса —

HTML Academy⁠

Базовый минимум — пройти все бесплатные курсы из этого сервиса

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

Если решите пройти платные курсы, то можно взять подписку на месяц (повторюсь, НЕОБЯЗАТЕЛЬНО). Вам должно хватить этого времени, чтобы ознакомиться с темами.

HTML Academy не единственный обучающий ресурс по вёрстке, вы можете сами выбрать любой другой источник, главное просто свериться с содержанием курсов, чтобы не пропустить какие-то важные темы (в Академии просто почти все нужные темы достаточно полно охвачены)

Часть 2

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

https://githowto.com/ru⁠

⁠

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

Уверенные знания вёрстки с HTML и CSS. Чтобы понять примерный объём, можно посмотреть в

содержание всех курсов по HTML/CSS у HTML Academy⁠

(курсы по JS можно не учитывать).

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

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

Индексация

Коммиты

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

Мерж веток

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

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

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

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

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

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

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

тут⁠

⁠

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

Книги нашёл. Делюсь:

https://yadi.sk/d/L7gbNNXQcGdM4A⁠

⁠

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

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

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, сейчас эти макеты заменены одним проектом, описанным выше. Тем, кто уже начал делать прошлую версию, можно продолжать работать по ней.

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

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

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

https://youtu.be/9h1UiqBuxO0⁠

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

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-endFront-end

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

INTRO

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

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

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

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

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

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

Часть 1

Часть 2

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

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

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

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

Front-end
Front-end

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