Профессиональный HTML и CSS, уровень 2, лекция 1

Раздел 1:
Знакомство
Цель интенсива
Подготовить полноценного и востребованного
специалиста высокого уровня, готового работать
в веб-индустрии.
2
На интенсиве мы будем
– Работать с Гитом.
3
– Верстать по методологии.
3
– Использовать препроцессоры.
3
– Верстать резиново и адаптивно.
3
– Работать с адаптивной графикой.
3
– Работать с адаптивной графикой.
– Оптимизировать и автоматизировать.
3
Учебный проект «Барбершоп»
4
Личный проект «Пинк»
5
Личный проект «Седона»
6
Личный проект «Мишка»
7
Личный проект «Кэт энерджи»
8
Постепенное открытие проектов
– Мобильная версия.
– Планшетная версия.
– Десктопная версия.
9
Техническое задание
10
Преподаватели
Алексей Симоненко, Виталий Зюзин, Александр Першин, Вадим Макеев
11
Подробнее о наставниках
Более 100 человек и все практикующие разработчики:
– Сотрудники веб-студий.
– Фрилансеры.
– Кексобот.
12
Работа с наставником
Обязательная часть интенсива. Наставник:
– Проверяет задания.
– Разбирает тонкости, консультирует.
– Передаёт опыт.
– Допускает к сдаче проекта.
– Оценивает финальный проект.
13
Как выбрать наставника и работать с ним?
– Главный ориентир выбора наставника — удобное время консультаций.

– Дополнительный ориентир — предпочитаемые наставником технологии.
– Наставник свяжется с вами в течение первых нескольких дней и уточнит расписание
консультаций.
– Консультации по скайпу: 1 час в неделю, а лучше 2 раза по полчаса.

– Выбор наставника откроется в конце этой лекции.
14
Успешное завершение интенсива?
– Защитить личный проект.

– Обратите внимание на регламент: 
https://up.htmlacademy.ru/adaptive/14/regulations
15
Защита проекта
1. Полностью сверстать макет.
2. Получить допуск у своего наставника.
3. Случайный наставник оценивает по критериям качества.
4. Можно дорабатывать два раза.
https://up.htmlacademy.ru/adaptive/14/regulations
16
Критерии
– Все критерии будут разобраны в процессе интенсива.

– Делятся на базовые и дополнительные.
– Базовые задают минимальный уровень качества.
– Все базовые критерии обязательны для сдачи проекта.
– Дополнительные критерии отражают уровень профессионализма.
https://up.htmlacademy.ru/adaptive/14/criteries
17
Сертификаты
18
Сертификаты
– Разные для сдавших и не сдавших личный проект.

– PDF-версия для всех.
– Печатная версия по желанию.
https://up.htmlacademy.ru/adaptive/14/faq
19
А если пропустил лекцию?
Ничего страшного, будут видеозаписи, а также весь наш арсенал:
– Пошаговые руководства.
– Скринкасты.
– Подборки ссылок на лучшие статьи.
20
Связь с кураторами
С любым вопросом или проблемой можно обратиться к кураторам интенсива
с помощью специальной формы в интерфейсе интенсива.
Кураторы ответят и помогут.
https://up.htmlacademy.ru/adaptive/14/faq
21
Инструменты
22
– Консоль:
– Встроенный терминал в Linux.
23
– Консоль:
– Встроенный терминал в macOS или iTerm2.
23
– Консоль:
– Встроенный терминал в macOS или iTerm2.
– Вместо cmd.exe и PowerShell для Windows рекомендуем cmder.
23
http://cmder.net
24
– Консоль.
– Git и GitHub:
– Пошаговые руководства в материалах.
25
– Консоль.
– Git и GitHub:
– Статьи в материалах.
25
– Консоль.
– Git и GitHub:
– Статьи в материалах.
– Наш видеокурс о работе с Git и GitHub (8 видео, ~1 час 20 минут).
25
Софья Ильинова
26
Git и GitHub
2. Как сделать
1. Как установить Git 3. Что делать, если всё
репозиторий из любого
и работать в консоли пошло не так
проекта
4. Как выложить код 5. Откуда берутся

6. Зачем и как создавать
в GitHub и настроить конфликты, и что с ними
ветки
SSH-ключи делать
7. Как синхронизировать
8. Как предложить свой
работу на двух
код в любой проект
компьютерах
27
Скринкасты
28
– Консоль.
– Git и GitHub.
– Node.js.
29
https://nodejs.org/en/
30
– Консоль.
– Git и GitHub.
– Node.js.
– Кодгайд.
31
Стиль кода HTML Academy
http://codeguide.academy/html-css.html
32
Рабочий процесс на интенсиве
33
Задания зависят друг от друга
34
Выбор проекта и наставника
35
Выбор личного проекта
36
Настройки личного проекта
37
Создание репозитория в Гитхабе
38
Создание репозитория в Гитхабе
39
Выполняем первое задание
40
Выполняем первое задание
41
Переходим ко второму заданию
42
Переходим ко второму заданию
43
Мастер-репозиторий, форкаем себе
44
45
46
47
Клонируем репозиторий
Клонируем форк репозитория с Гитхаба к себе на компьютер.
zsh
htmlacademy ~ git clone git@github.com:meritt/6-pink.git pink

Cloning into 'pink'...
remote: Counting objects: 22, done.
remote: Compressing objects: 100% (18/18), done.
remote: Total 22 (delta 0), reused 22 (delta 0), pack-reused 0
Receiving objects: 100% (22/22), 34.06 KiB | 120.00 KiB/s, done.
htmlacademy ~ cd pink
htmlacademy ~/pink master
48
Создаём ветку для задания
Из задания на сайте Академии берём название ветки и создаём её в своём
репозитории.
zsh
htmlacademy ~/pink master git checkout -b module1-task1

Switched to a new branch 'module1-task1'
htmlacademy ~/pink module1-task1
49
50
Фиксируем изменения
Добавляем файл в индекс изменений и фиксируем изменения в репозитории.
zsh
htmlacademy ~/pink module1-task1 git add Readme.md

htmlacademy ~/pink module1-task1 git commit -m "Добавляет наставника"
[module1-task1 b7c6d3c] Добавляет наставника
1 file changed, 1 insertion(+), 1 deletion(-)
51
Публикуем изменения в Гитхаб
Отправляем ветку module1-task1 со всеми изменениями в наш удалённый
репозиторий (форк) на Гитхабе.
zsh
htmlacademy ~/pink module1-task1 git push origin module1-task1

Counting objects: 3, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 366 bytes | 366.00 KiB/s, done.
Total 3 (delta 2), reused 0 (delta 0)
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
To github.com:meritt/6-pink.git
* [new branch] module1-task1 -> module1-task1
52
Ветка в Гитхабе
53
54
55
zsh

htmlacademy ~/pink module1-task1 git commit -m "Добавляет ссылку и прозвище наставника"
[module1-task1 04be932] Добавляет ссылку и прозвище наставника
56
Отправляем изменения в наш удалённый репозиторий (форк) на Гитхабе.
zsh

b7c6d3c..04be932 module1-task1 -> module1-task1
57
58
Создаём пулреквест
59
60
61
62
zsh

htmlacademy ~/pink module1-task1 git commit -m "Убирает прозвище"
[module1-task1 1da39ad] Убирает прозвище
63
zsh

04be932..1da39ad module1-task1 -> module1-task1
64
Обновления попали сразу в пулреквест
65
Привязываем пулреквест к заданию
66
67
68
Отправляем задание на проверку
69
Задание на проверке
70
Задание можно отозвать
71
Собрать проект и опубликовать
72
73
74
Ваш проект в интернете
75
Тем временем в Гитхабе…
76
77
78
79
Каждый раз, когда ваш пулреквест приняли, и вы
хотите приступить к следующему заданию…
80
Возвращаемся в ветку master
Все новые ветки обязательно создавайте из ветки master. Первым делом
переключаемся в master.
zsh
htmlacademy ~/pink module1-task1 git checkout master

Switched to branch 'master'
Your branch is up to date with 'origin/master'.
81
Связь с удалёнными репозиториями
Посмотрим, с какими удалёнными репозиториями связан мой локальный репозиторий.
zsh
htmlacademy ~/pink master git remote -v

origin git@github.com:meritt/6-pink.git (fetch)
origin git@github.com:meritt/6-pink.git (push)
82
Связь с мастер-репозиторием
Добавим связь с мастер-репозиторием, чтобы иметь возможность обновляться из него.
zsh

htmlacademy ~/pink master git remote add academy git@github.com:htmlacademy-adaptive/6-pink.git
83
Связь с удалёнными репозиториями
Ещё раз посмотрим, с какими удалёнными репозиториями связан мой локальный
репозиторий.
zsh

academy git@github.com:htmlacademy-adaptive/6-pink.git (fetch)
academy git@github.com:htmlacademy-adaptive/6-pink.git (push)
84
Данные из мастер-репозитория
Перед тем, как работать с мастер-репозиторием, нужно получить обновление из него.
zsh
htmlacademy ~/pink master git pull academy master

remote: Counting objects: 1, done.
remote: Total 1 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (1/1), done.
From github.com:htmlacademy-adaptive/6-pink
* branch master -> FETCH_HEAD
* [new branch] master -> academy/master
Updating 76359d2..e548219
Fast-forward
Readme.md | 2 +-
85
zsh
htmlacademy ~/pink master git push origin master

76359d2..e548219 master -> master
86
Что произошло в Гитхабе?
87
88
89
Структура личных проектов
90
91
92
93
94
95
96
97
98
99
100
101
102
Задания на дом
1. Посмотреть скринкасты.
2. Выбрать наставника и личный проект.
3. Подготовить и проверить рабочий процесс.
4. По желанию пройти небольшой опрос 

https://up.htmlacademy.ru/adaptive/14/interview.
Желательно: читать статьи в дополнительных материалах.

103

Профессиональный HTML и CSS, уровень 2, лекция 1

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Профессиональный HTML и CSS, уровень 2, лекция 1

Загружено:

Авторское право:

Доступные форматы

Раздел 1:

Алексей Симоненко, Виталий Зюзин, Александр Першин, Вадим Макеев

– Главный ориентир выбора наставника — удобное время консультаций.

– Консультации по скайпу: 1 час в неделю, а лучше 2 раза по полчаса.

– Защитить личный проект.

2. Получить допуск у своего наставника.

3. Случайный наставник оценивает по критериям качества.

4. Можно дорабатывать два раза.

– Все критерии будут разобраны в процессе интенсива.

– Разные для сдавших и не сдавших личный проект.

Кураторы ответят и помогут.

4. Как выложить код 5. Откуда берутся

htmlacademy ~ git clone git@github.com:meritt/6-pink.git pink

htmlacademy ~/pink master git checkout -b module1-task1

htmlacademy ~/pink module1-task1 git add Readme.md

htmlacademy ~/pink module1-task1 git push origin module1-task1

htmlacademy ~/pink module1-task1 git add Readme.md

htmlacademy ~/pink module1-task1 git push origin module1-task1

htmlacademy ~/pink module1-task1 git add Readme.md

htmlacademy ~/pink module1-task1 git push origin module1-task1

htmlacademy ~/pink module1-task1 git checkout master

htmlacademy ~/pink master git remote -v

htmlacademy ~/pink master git remote -v

htmlacademy ~/pink master git remote -v

htmlacademy ~/pink master git pull academy master

htmlacademy ~/pink master git push origin master

2. Выбрать наставника и личный проект.

3. Подготовить и проверить рабочий процесс.

4. По желанию пройти небольшой опрос

Желательно: читать статьи в дополнительных материалах.

Вам также может понравиться

4. По желанию пройти небольшой опрос 