Автор |
Сообщение |
DepictWeb ®
Стаж: 13 лет 8 мес.
Сообщений: 789
Ratio: 100.561
Поблагодарили: 117548
100%
|
HTML Academy | Профессиональный HTML и CSS, уровень 1 (2018) PCRec [H.264]
Автор (режиссер): HTML Academy Жанр: Веб-дизайн, HTML, CSS Описание:HTML Academy — стандарт в обучении фронтендеров. Наша задача — сделать из любого новичка полноценного и востребованного специалиста, готового работать в веб-индустрии. Продолжительность: 30:59:17 Качество видео: PCRec Видео: AVC/H.264, 1152x720-1920x1080, ~190-1798 Kbps Аудио: AAC, 2 ch, 146-256 Kbps В раздаче имеются архивы! В них содержится шрифты для макетов. 1. Введение (Теоретическая лекция) Ведущий: Алексей Симоненко Вводная лекция про роль и место верстальщика в мире веб-технологий.
Как проходит курс. Организационные вопросы. Обзор личных проектов. Как работать с наставником. Критерии качества вёрстки. Защита личного проекта и получение сертификата.
Что на самом деле происходит, когда вы вводите в браузере адрес сайта и нажимаете Enter? IP-адрес, сервер и веб-сервер, «виртуальные хосты». Доменные имена, URL-адреса и система DNS. Загрузка и «сборка» веб-страницы. Особенности HTTP и HTTPS. Протоколы HTTP/1.1 и HTTP/2. Приёмы оптимизации веб-страниц.
Инструменты веб-разработчика и рабочий процесс на интенсиве. Системы контроля версий. Инструменты вёрстки: редакторы кода, инспекторы, полезные веб-сервисы. Немного о браузерах, браузерных движках и различиях между ними. 2. Разметка (Теоретическая лекция) Ведущий: Александр Першин Создадим логическую HTML-разметку страниц учебного и личного проектов. Попрактикуемся использовать подходящие теги, задавать имена классов, оценивать сложность разметки.
Введение в HTML. Синтаксис HTML, типы HTML-тегов. Структура простейшего HTML-документа. Как работать со спецификацией HTML. Обзор HTML-тегов из личных проектов.
Качественная разметка и стили кодирования. Простая, понятная, читабельная и логичная разметка: примеры и антипримеры. Типовые ошибки разметки: «ссылка или кнопка», «картинка или фон» и другие. Модульность разметки или использование «пространств имён». Когда использовать <article>, <section> и <div>? Кодгайды для разметки. Алгоритмы создания разметки: «страница как документ», «страница как приложение», «дивянка».
Создаём разметку главной страницы учебного проекта. 3.Фотошоп для верстальщика (Практическая лекция) Ведущий: Виталий Зюзин Разберём всё необходимое для работы верстальщика в Фотошопе. Подготовим графику для проектов.
Типовые задачи верстальщика в Фотошопе. Настройка интерфейса Фотошопа. Работа со слоями, типы слоёв. Получение параметров текста. Измерение размеров блоков, отступов, получение информации о цвете. Получение параметров сложных декоративных эффектов: тени и прочее. Экспорт графики, работа с повторяющимися паттернами.
Обзор форматов графики в вебе. Растровая графика — PNG, JPEG, GIF. Векторная графика — SVG. Как выбрать подходящий формат? Оптимизация графики.
Обзор альтернатив. Adobe Extract. NEW! Zeplin. Avocode. Sketch. Figma. NEW!
Разбор графических макетов проектов. 4. Доступность (Практическая лекция) Ведущий: Вадим Макеев Научимся делать интерфейсы удобные и доступные для всех. Управление фокусом, важность семантики, тестирование и скринридеры.
Интерфейсы — не картинки. Какие есть слои интерфейса, кроме графики. Зачем нужные интерактивные элементы. Неочевидное использование интерфейсов.
Понятие доступности. Что мешает пользоваться интерфейсами. Ежедневные ситуации недоступности. Физиологические и ментальные особенности.
Взаимодействие с клавиатуры. Интерфейсы без указателя. Зачем нужен фокус на элементах. Как сделать элементы интерактивными.
Значимые элементы. Зачем семантика и как не подхватить диватоз. Почему не нужно переделывать элементы. Кнопки и ссылки, в чём разница?
Лейблы элементов. Кому нужны описания элементов. Разбор ошибок в реальных интерфейсах. Инспекторы доступности и скринридеры. 5. Введение в CSS (Практическая лекция) Ведущий: Александр Першин Разберёмся с базовыми механизмами CSS и начнём стилизацию проектов.
Введение в CSS. Синтаксис CSS. CSS-селекторы, псевдоклассы и псевдоэлементы. Наследование, каскадность и приоритеты в CSS. Единицы измерения в CSS: абсолютные, относительные, для управления цветом. CSS-функции и директивы.
Практика стилизации. Зачем нужна нормализация. Пространства имён и независимые компоненты. Стили кодирования для CSS. Работа с нестандартными шрифтами. Стилизация состояний интерактивных элементов.
Начинаем стилизацию главной страницы учебного проекта.
Задаём глобальные стили документа, описываем текстовые параметры элементов и состояния интерактивных элементов. 6. Сетки (Теоретическая лекция) Ведущий: Александр Першин Разберёмся с блочной моделью документа. Создадим сетки страниц учебного и личного проектов.
Поток документа и блочная модель документа. Понятие сетки и потока документа. Блочные и строчные элементы и их особенности. Свойства блочной модели: размеры, рамки и отступы. Тонкости блочной модели: «схлопывание» и «выпадание» внешних отступов, width: 100% и width: auto, свойство box-sizing и другие. Свойство display. Управление типом элементов.
Создание сеток на флексбоксах. Введение во флексбокс. Флекс-контейнер, флекс-элементы, флекс-оси. Алгоритм расчёта размеров флекс-элементов. Выравнивание и распределение флекс-элементов вдоль осей. Однострочный и многострочный флекс-контейнер, управление флекс-рядами. Особенности флексов при создании сеток.
Создаём сетку главной страницы учебного проекта. 7. Декоративные элементы (Практическая лекция) Ведущий: Александр Першин Познакомимся с приёмами создания декоративных элементов. Завершим вёрстку главных страниц учебного и личного проектов.
Позиционирование. Относительное позиционирование. Абсолютное позиционирование: координаты, изменение точки начала координат, относительные координаты и размеры, координаты по умолчанию. Фиксированное позиционирование. Управление порядком слоёв.
Приёмы создания элементов интерфейса. Блочно-строчные элементы и их особенности. Борьба с пробелами между блочно-строчными элементами. Особенности флексов при создании элементов интерфейсов. Типовой приём «псевдоэлемент с абсолютным позиционированием». Использование CSS-графики для создания декоративных элементов.
Завершаем вёрстку главной страницы учебного проекта. 8. Оформление контента (Практическая лекция) Ведущий: Александр Першин Завершим вёрстку внутренних страниц и подготовим проекты к публикации. Начнём готовиться к защите личного проекта.
Практикуемся в вёрстке элементов содержимого. Сверстаем текстовую страницу учебного проекта. Подготовим универсальные стили содержания, которые будут хорошо работать при наполнении страницы из CMS. Сверстаем всплывающие окна с формой входа и интерактивной картой. Разберём приёмы стилизации нестандартных элементов форм. Подготовим свёрстанный учебный макет к публикации или передаче заказчику.
Разбираем типовые случаи переполнения и способы борьбы с ними.
Готовим проект к защите. Подробный разбор критериев защиты выпускных проектов. 9. Введение в JavaScript (Практическая лекция) Ведущий: Алексей Симоненко Познакомимся с JavaScript, узнаем что такое Vanilla JS и оживим некоторые блоки вёрстки.
Язык программирования JavaScript. Роль программирования в жизни верстальщика. Что такое DOM и зачем нам объект document. Зачем нужен объект window.
Типовые случаи использования JavaScript. Как найти любой элемент на странице. Как реагировать на события, происходящие на странице. Как менять CSS-стили у элементов. Как использовать анимацию на странице.
Оживляем всплывающее окно и вставляем интерактивную карту на главной странице учебного проекта. 10. Лучшие практики (Теоретическая лекция) Ведущий: Вадим Макеев Узнаем как правильно применять практические знания, как учиться новому и развиваться в профессии.
Совместимая вёрстка. Прогрессивное улучшение. Постепенная деградация. Цена совместимости. Независимые слои улучшения.
Реальное тестирование. Многообразие браузеров и устройств. Инспекторы, эмуляторы, виртуальные машины. Слабые устройства и медленные сети. Минификация, сжатие, оптимизация. Эмпатия, приоритеты, сначала контент.
Корневые технологии. Веб-стандарты и фантазийные велосипеды. Ваниль против библиотек и фреймворков. Мода, хайп, вечное и светлое.
Развитие в профессии. Как не потерять актуальность знаний. Обмен знаниями, события, выступления. Пограничные дисциплины. 11. Как не потеряться на рынке труда NEW! Ведущий: Серёжа Попов Трудоустройство, поиск заказов, оценка работы
Какая вообще бывает работа? В офисе На фрилансе
Поиск работы
Как оценивать себя и проходить собеседования Раздача ведётся путём добавления новых файлов; при каждом добавлении создаётся новый торрент. Чтобы начать докачку новых файлов, пользователям необходимо сделать следующее: (1) остановить скачивание, (2) удалить старый торрент у себя из клиента (имеющиеся файлы удалять не надо), (3) скачать новый торрент и запустить его у себя в клиенте вместо старого, при этом указать клиенту путь в старую папку, куда и должно происходить скачивание новых файлов.
Ваш клиент при этом должен произвести хеширование (проверку) старой папки (если не производит сам - помогите ему сделать это), и будет докачивать только те файлы, которых у вас ещё нет. Старые файлы при этом не удаляются, а продолжают раздаваться!
Eсли вы уже удалили старые файлы, то предотвратить повторную закачку старых файлов можно, отжав галочку в соответствующих местах при запуске нового торрента. По возможности, желательно не удалять старые файлы как можно дольше, чтобы релизёр не только продолжал раздавать старые файлы, а смог сконцентрироваться на новых. Скриншоты:
Время раздачи: 24/7 (круглосуточно) (до появления первых 3-5 скачавших) |
|
|
|
|
adrevs
Стаж: 8 лет 9 мес.
Сообщений: 2
Ratio: 13.832
0%
|
А будет ли сборка курсов с крайнего потока по этому интенсиву.Который недавно закончился? |
|
|
|
cucko
Стаж: 13 лет 5 мес.
Сообщений: 485
Ratio: 51.676
100%
|
Никто не знает где натырить картинок к проектам (всякие товары и т.д.)? Чета в раздаче я их не нашел ((
Или тока ставить фото шоп-его и тырить с PSD? |
|
|
|
l3xrom
Стаж: 7 лет 4 мес.
Сообщений: 29
Ratio: 2.102
100%
|
cucko писал(а): | Никто не знает где натырить картинок к проектам (всякие товары и т.д.)? Или тока ставить фото шоп-его и тырить с PSD? |
А в чём проблема поставить фотошоп? Всё легко экспортируется из макетов .psd и интересно, как размеры снимаете без фотошопа? |
|
|
|
x8i0
Стаж: 13 лет 1 мес.
Сообщений: 4
Ratio: 100.086
100%
|
rapman477 Есть и по JS 1, 2, 3 уровень, и по HTML с CSS от этого же автора поста. Воспользуйтесь поиском. Достаточно вбить HTML Academy |
|
|
|
tigser
Стаж: 13 лет 2 мес.
Сообщений: 13
Ratio: 39.765
1.34%
|
Очень плохая подача материала. Учителя быстро трещат и ничего подробно не объясняют. В итоге, что смотрел видео, что не смотрел, одинаково |
|
|
|
Yury30
Стаж: 14 лет 1 мес.
Сообщений: 7
Ratio: 32.403
15.13%
|
Огромное спасибо DepictWeb ®! Курс скачал, чтобы быть подготовленным, когда куплю его и буду учиться. |
|
|
|
voildc
Стаж: 12 лет 2 мес.
Сообщений: 236
Ratio: 16.801
Раздал: 23.8 TB
Поблагодарили: 13556
100%
|
|
|
vlacrat
Стаж: 3 года 9 мес.
Сообщений: 183
Ratio: 0.869
19.93%
|
Шел 2021-ый год, а кто-то (такие как я) смотрит курсы 2018-го |
|
|
|
Yury30
Стаж: 14 лет 1 мес.
Сообщений: 7
Ratio: 32.403
15.13%
|
vlacrat писал(а): | Шел 2021-ый год, а кто-то (такие как я) смотрит курсы 2018-го |
Да, смотрим. Потому что этот курс входит в поток профессии "Фронтенд-разработчик", остальные лекции из этой профессии, этого потока, есть на nnmclub, к примеру Профессиональный JavaScript, уровень 1 (2018). На мой взгляд, лучше подачи материала, от других производителей, нет. Лично мне понравились подробный конспект к каждой лекции и интерактивные курсы, для хорошего усвоения материала. |
|
|
|
|
|
|