Автор |
Сообщение |
DepictWeb ®
Стаж: 13 лет 8 мес.
Сообщений: 789
Ratio: 100.561
Поблагодарили: 117446
100%
|
HTML Academy | Профессиональный HTML и CSS, уровень 2 (2018) PCRec [H.264]
Автор (режиссер): HTML Academy Жанр: Веб-дизайн, HTML, CSS Описание:Во время курса вы будете работать как профессиональные верстальщики: создадите разметку по методологии БЭМ, будете писать CSS-код на препроцессорах, сделаете адаптивную сетку, поработаете с адаптивной и ретиновой графикой и подготовите автоматизацию сборки проекта для публикации. Продолжительность: 26:44:00 Качество видео: PCRec Видео: AVC/H.264, 1152x720-1920x1080, ~155-1469 Kbps Аудио: AAC, 2 ch, 125-256 Kbps 1. Введение (Теоретическая лекция) Ведущий: Алексей Симоненко Познакомимся с рабочим процессом на интенсиве.
Как проходит курс. Организационные вопросы. Обзор личных проектов. Как работать с наставником. Защита личного проекта и получение сертификата.
Системы контроля версий. Зачем нужны системы контроля версий. Обзор возможностей и работа с Гитом. Работа с ветками: создание, синхронизация, слияние. Конфликты и их разрешение. Обзор Гитхаба.
Рабочий процесс на интенсиве. Зависимость заданий. Настройки личных проектов. Создание мастер-репозитория. Структура личных проектов. 2. Методологии вёрстки (Теоретическая лекция) Ведущий: Вадим Макеев Приёмы создания надёжной вёрстки.
Зачем нужны методологии. Порядок в коде. Работа в команде. Недостатки технологий.
Обзор подходов к вёрстке. Классический подход. Независимые блоки. Атомарный подход. Компоненты и модули.
Методология БЭМ. Зачем всё так усложнять. Как разбить интерфейс на блоки. Элементы и модификаторы. Ошибки и узкие места.
Разбор учебного проекта по БЭМу. 3. Препроцессоры и автоматизация (Практическая лекция) Ведущий: Вадим Макеев Взглянем на препроцессоры и разберёмся, чем они помогают в процессе вёрстки.
Стили на стероидах. Обзор препроцессоров. Фантазийный CSS. Новые возможности CSS.
Основные возможности. Сравнение Less и Sass. Переменные и математика. Вложенные селекторы. Операции с цветами.
Дополнительные возможности. Подключение файлов. Примеси и расширения. Организация кода. Сборка стилей.
Настройка окружения. Система сборки на Node.js. Сборщики Gulp и Grunt. Автоматизация сборки и вотчеры. 4. Адаптивные сетки (Практическая лекция) Ведущий: Александр Першин Узнаем как создавать адаптивные сетки с использованием флексбоксов.
Создание сеток на флексбоксах. Введение во флексбокс. Флекс-контейнер, флекс-элементы, флекс-оси. Алгоритм расчёта размеров флекс-элементов. Выравнивание и распределение флекс-элементов вдоль осей. Однострочный и многострочный флекс-контейнер, управление флекс-рядами. Особенности флексов при создании сеток.
Адаптивные сетки. Принципы «перестройки сетки». Медиавыражения, макро- и микробрейкпоинты. Организация кода разных версий страницы: мобильной, планшетной и десктопной. «Проблема двух вьюпортов» на мобильных. Настройка вьюпорта.
Создаём адаптивные сетки БЭМ-блоков учебного проекта с помощью флексбоксов. 5. Адаптивные декоративные элементы (Практическая лекция) Ведущий: Александр Першин Разбираемся с адаптивными декоративными элементами. Делаем адаптивную вёрстку с резиновыми сетками.
Завершаем адаптивную вёрстку БЭМ-блоков учебного проекта.
Переход от фиксированных сеток к резиновым. Тонкости флексбокса. Отличие «резины» от «фикса». Переход от пикселей к процентам. Резиновые колонки с точными размерами на флексбоксе. flex-grow для создания «неточных» резиновых колонок. Флекс-контейнер внутри флекс-контейнера и резиновые по высоте элементы. Когда использовать резиновые сетки и насколько они дороже фиксированных.
Делаем резиново-адаптивную вёрстку БЭМ-блоков учебного проекта. 6. Адаптивная графика (Теоретическая лекция) Ведущий: Александр Першин Погружаемся в адаптивную и ретиновую графику. Разбираемся с форматами и их назначением.
Графика для экранов повышенной чёткости. В чём разница между физическими и логическими пикселями. Что такое «ретиновая» графика. Приёмы ретинизации содержимого веб-страницы.
Адаптивная графика. Тег на все случаи жизни — <picture>. Ретинизация контентных изображений с помощью атрибута srcset. Кадрирование изображений с помощью <source>. Использование современных форматов графики с помощью <source>. Изображения неопределённых размеров и <sizes>.
Ретинизируем и добавляем адаптивную графику в учебном проекте. 7. Векторная графика и оптимизация (Теоретическая лекция) Ведущий: Виталий Зюзин Научимся использовать векторную графику всеми возможными способами. Разберёмся, как использовать графику оптимально.
Использование SVG. Плюсы и минусы векторной графики. Подключение SVG внешним ресурсом. Встраивание SVG.
SVG-спрайты. Зачем нужны, в каких случаях полезны. Варианты реализации.
Стилизация SVG. Что можно, а что нельзя. Анимация. Адаптивность.
Оптимизация и доступность SVG. Особенности экспорта из Illustrator и Sketch. Дожимаем и оптимизируем SVG. Доступность.
Оптимизация растровой графики. Сжатие lossless и с потерей качества. Обзор формата webp и особенностей его применения 8. Погружение в автоматизацию (Практическая лекция) Ведущий: Алексей Симоненко Подготовим сборку проекта для его публикации. Решим для себя, что лучше для автоматизации Gulp или Grunt.
Оптимизация. Минификация CSS-кода. Оптимизация изображений. Сборка и минификация SVG-спрайта.
Как держать код для разработчика удобным, а для браузеров — быстрым. 9. Производительность вёрстки (Теоретическая лекция) Ведущий: Алексей Симоненко Разберёмся с производительностью вёрстки и попробуем оптимизировать «узкие места».
Как подключать внешние шрифты лучше всего. Отличается ли быстродействие сайта на десктопе от мобильного. Что нужно знать, когда пользуешься CSS-анимацией и плавными переходами. Что нужно знать о перерисовке и перекомпоновке страниц. 10. Как не потеряться на рынке труда Ведущий: Серёжа Попов Трудоустройство, поиск заказов, оценка работы
Какая вообще бывает работа? В офисе На фрилансе
Поиск работы
Как оценивать себя и проходить собеседования 10. С чем едят гриды (бонусная лекция из 13 потока) Ведущий: Вадим Макеев Введение в гриды. Вёртска Барбешепа. 11. Финал Ведущий: Алексей Симоненко Итоги интенсива. Скриншоты:
Время раздачи: 24/7 (круглосуточно) (до появления первых 3-5 скачавших) |
|
|
|
|
DepictWeb ®
Стаж: 13 лет 8 мес.
Сообщений: 789
Ratio: 100.561
Поблагодарили: 117446
100%
|
Это 14 поток интенсива по HTML и CSS, который входит в профессию "Фронтенд-разработчик". Профессиональному интенсиву профессиональный слив! - Демо - Задания - Курсы - Лекции - Материалы - Макеты + тз + критерии - Скринкасты |
|
|
|
naphuwa
Стаж: 9 лет 8 мес.
Сообщений: 13
Ratio: 23.129
6.25%
|
DepictWeb писал(а): | Это 14 поток интенсива по HTML и CSS, который входит в профессию "Фронтенд-разработчик". Профессиональному интенсиву профессиональный слив! - Демо - Задания - Курсы - Лекции - Материалы - Макеты + тз + критерии - Скринкасты |
По той ссылке которую я давал в уровне 1, указывали что там поток 19. Это старее или там не верно указано? |
|
|
|
DepictWeb ®
Стаж: 13 лет 8 мес.
Сообщений: 789
Ratio: 100.561
Поблагодарили: 117446
100%
|
naphuwa писал(а): | По той ссылке которую я давал в уровне 1, указывали что там поток 19. Это старее или там не верно указано? |
Там неверно определили. И там кучу всего нет. (+ весь материал меченный ссылками) А у меня тут все есть) п.с. 14 поток закончился 16 мая |
|
|
|
darkdim2014
Стаж: 9 лет 8 мес.
Сообщений: 16
Ratio: 8.942
0.32%
|
Благодарствуем! otus - php, js и JS.Ninja из этого ничего не планируется? |
|
|
|
DepictWeb ®
Стаж: 13 лет 8 мес.
Сообщений: 789
Ratio: 100.561
Поблагодарили: 117446
100%
|
darkdim2014 писал(а): | Благодарствуем! otus - php, js и JS.Ninja из этого ничего не планируется? |
otus - php Уже есть на трекере otus - js Еще не успел выйти весь да и отзывы у него как-то не очень JS.Ninja автор обещал выпустить еще 10 Summary Так, что подождем еще |
|
|
|
kir0077007
Стаж: 9 лет 3 мес.
Сообщений: 194
Ratio: 4.23
24.74%
|
А с чего лучше начать начинающим? Этот курс пойдет? |
|
|
|
stas061986
Стаж: 9 лет 7 мес.
Сообщений: 27
Ratio: 0.275
Поблагодарили: 10
19.59%
|
kir0077007 писал(а): | А с чего лучше начать начинающим? Этот курс пойдет? |
Начните с этого с первого курса там самое базовое HTML Academy | Профессиональный HTML и CSS, уровень 1 (2018) PCRec [H.264] |
|
|
|
kossmos14
Стаж: 10 лет 5 мес.
Сообщений: 9
Ratio: 236.214
Поблагодарили: 2597
100%
|
kir0077007 писал(а): | А с чего лучше начать начинающим? Этот курс пойдет? |
Данный курс подойдёт лучше всего, также начни сайта html academy. |
|
|
|
darkdim2014
Стаж: 9 лет 8 мес.
Сообщений: 16
Ratio: 8.942
0.32%
|
DepictWeb писал(а): | JS.Ninja автор обещал выпустить еще 10 Summary Так, что подождем еще |
по-моему их курс по реакту уже в сливе, только курсхантере. Кто-то решил немного подкосить, пока суть да дело;) |
|
|
|
DepictWeb ®
Стаж: 13 лет 8 мес.
Сообщений: 789
Ratio: 100.561
Поблагодарили: 117446
100%
|
darkdim2014 писал(а): | уже в сливе, только курсхантере. |
Если сливать сразу же с курсхантера, то больше не будет смысла в их подписке. Мне не особо хочется так делать. Так, что я сливаю лишь то, что сам беру. И то что уже в свободном доступе у них. |
|
|
|
bwevvcccx
Стаж: 6 лет 7 мес.
Сообщений: 5
Ratio: 0.143
0%
|
Дополняться раздача не будет? Можно уже качать? |
|
|
|
DepictWeb ®
Стаж: 13 лет 8 мес.
Сообщений: 789
Ratio: 100.561
Поблагодарили: 117446
100%
|
bwevvcccx писал(а): | Дополняться раздача не будет? Можно уже качать? |
Разрешаю) п.с. читайте внимательно первое сообщение под описанием раздачи |
|
|
|
bwevvcccx
Стаж: 6 лет 7 мес.
Сообщений: 5
Ratio: 0.143
0%
|
А куда они дели spa? В прошлой раздаче был. |
|
|
|
DepictWeb ®
Стаж: 13 лет 8 мес.
Сообщений: 789
Ratio: 100.561
Поблагодарили: 117446
100%
|
bwevvcccx писал(а): | А куда они дели spa? В прошлой раздаче был. |
10 лекция это бонус. Каждая раз другая. Вот в этой раздаче есть бонусная лекция для 13 и 14 потока. П.с. там где есть SPA - это 12 поток |
|
|
|
|
|