Автор |
Сообщение |
DepictWeb ®
Стаж: 13 лет 8 мес.
Сообщений: 789
Ratio: 100.561
Поблагодарили: 117515
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 скачавших) |
|
|
|
|
metalman1234
Стаж: 7 лет 6 мес.
Сообщений: 16
Ratio: 0.63
0%
|
продвинутый 2018 будет тут? |
|
|
|
naphuwa
Стаж: 9 лет 8 мес.
Сообщений: 13
Ratio: 23.129
6.25%
|
Надеемся на 2й уровень ! DepictWeb верим в тебя! |
|
|
|
naphuwa
Стаж: 9 лет 8 мес.
Сообщений: 13
Ratio: 23.129
6.25%
|
Нашел 2й уровень 2018 года, автор можешь скачать и оформить ? Облако mail.ru |
|
|
|
Maks_kraevoj
Стаж: 6 лет 5 мес.
Сообщений: 42
Ratio: 0.661
12.44%
|
naphuwa писал(а): | Нашел 2й уровень 2018 года, автор можешь скачать и оформить ? Облако mail.ru |
К сожалению, курс не полный. Нет скринкастов например |
|
|
|
DepictWeb ®
Стаж: 13 лет 8 мес.
Сообщений: 789
Ratio: 100.561
Поблагодарили: 117515
100%
|
Maks_kraevoj писал(а): | К сожалению, курс не полный. Нет скринкастов например |
Я готовлю раздачу на 2 уровень. В который будет ВЕСЬ материал! Ждите) |
|
|
|
FryOS
Стаж: 13 лет 4 мес.
Сообщений: 27
Ratio: 9.864
1.27%
|
DepictWeb писал(а): | Maks_kraevoj писал(а): | К сожалению, курс не полный. Нет скринкастов например |
Я готовлю раздачу на 2 уровень. В который будет ВЕСЬ материал! Ждите) |
Когда будет полная раздача (со скринкастами) отпишите пожалуйста |
|
|
|
DepictWeb ®
Стаж: 13 лет 8 мес.
Сообщений: 789
Ratio: 100.561
Поблагодарили: 117515
100%
|
FryOS писал(а): | Когда будет полная раздача (со скринкастами) отпишите пожалуйста |
Вот.. Все уже есть давно) HTML Academy | Профессиональный HTML и CSS, уровень 2 (2018) PCRec [H.264] |
|
|
|
bwevvcccx
Стаж: 6 лет 8 мес.
Сообщений: 5
Ratio: 0.143
0%
|
daermol писал(а): | slayerus писал(а): | "05 Введение в CSS" папка "демо" в папке "Базовая стилизация главной страницы «Барбершопа»" html и css файл не от главной страницы а от "Базовая стилизация страницы каталога «Барбершопа»" |
Файлы стиля не подключены в index.html, добавь в head тег: link href="css/style.css" rel="stylesheet". Тоже самое в 7 вебинаре Декоративные элементы. |
Причем тут файлы стиля если там в index.html разметка совсем другой страницы? |
|
|
|
grok88
Стаж: 9 лет 6 мес.
Сообщений: 7
Ratio: 0.421
100%
|
Поддержу просьбу про платные курсы. Там табличка с теорией перекрывает - все задания.Если есть возможность сделать скрин с теорией и следущий скрин без нее - чтоб было видны задания с платных подписок |
|
|
|
bomberpok
Стаж: 12 лет 4 мес.
Сообщений: 308
Ratio: 30.282
Раздал: 16.19 TB
Поблагодарили: 821
30.98%
|
Я конечно понимаю, что купить сам курс за 14к не каждый может себе позволить, и решить - нужен ли он. Но блин, просить у автора платные курсы перезалить, с практикой, вы конечно молодцы. Вам что, 390рублей жалко? На целый месяц у Вас будет открыты ВСЕ курсы, которые вы сможете и пройти вдоль и поперёк, и скачать себе. Но лучше поклянчить и возмущаться, то что им и так на блюде принесли. |
|
|
|
pylia79
Стаж: 9 лет
Сообщений: 167
Ratio: 48.082
100%
|
|
|
KsanderT
Стаж: 5 лет 8 мес.
Сообщений: 12
Ratio: 28.498
81.2%
|
grok88 писал(а): | Поддержу просьбу про платные курсы. Там табличка с теорией перекрывает - все задания.Если есть возможность сделать скрин с теорией и следущий скрин без нее - чтоб было видны задания с платных подписок |
У них сейчас акция, можно себе на месяц получить бесплатный доступ ко всем курсам. Но надо поспешить, так как окончание не то сегодня не то завтра. Поищи, если актуально, их каналы в соцсетях, там есть подробности. А если повезет, то вообще на шару сможешь интенсив с наставником пройти. |
|
|
|
gyrgen00
Стаж: 11 лет 8 мес.
Сообщений: 13
Ratio: 2.555
0%
|
KsanderT писал(а): | grok88 писал(а): | Поддержу просьбу про платные курсы. Там табличка с теорией перекрывает - все задания.Если есть возможность сделать скрин с теорией и следущий скрин без нее - чтоб было видны задания с платных подписок |
У них сейчас акция, можно себе на месяц получить бесплатный доступ ко всем курсам. Но надо поспешить, так как окончание не то сегодня не то завтра. Поищи, если актуально, их каналы в соцсетях, там есть подробности. А если повезет, то вообще на шару сможешь интенсив с наставником пройти. |
Интенсив на шару? Да у них повторные интенсивы нужно оплачивать наставника, а если хочешь проверку дипломного проекта, тоже заплати 1000 руб. Это коммерческая организация, у них нашару максимум какой-то интерактив на сайте может быть. |
|
|
|
vladro90
Стаж: 8 лет 2 мес.
Сообщений: 34
Ratio: 1.554
0.05%
|
В задании 6. Сетки нужно подключать outline.css - написан командой HTMLAcademy для наглядного отображения и понимания работы блочных элементов. Пример работы https://toster.ru/q/439321 Картинка-1. Очень бы хотелось увидеть его в раздаче. |
|
|
|
Snow1993
Стаж: 11 лет 3 мес.
Сообщений: 12
Ratio: 16.908
Раздал: 3.216 TB
100%
|
Огромная благодарность релизеру!!! Вы просто красавчик! |
|
|
|
|
|
|