Автор |
Сообщение |
DepictWeb ®
Стаж: 13 лет 8 мес.
Сообщений: 789
Ratio: 100.561
Поблагодарили: 117446
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 скачавших) |
|
|
|
|
JIetForce
Стаж: 7 лет 11 мес.
Сообщений: 4
Ratio: 24.078
43.04%
|
Мне совсем не понравился курс(посмотрел 2 урока). До этого проходил курс JavaScript от GoIt, вот там хорошо и понятно обьясняют и показывают на примерах как всё работает. Здесь этого нет |
|
|
|
AlexWorld111
Стаж: 6 лет
Сообщений: 52
Ratio: 2.98
58.46%
|
РЕбята, скажите, это самые основы основ? Для полного чайника подойдут? |
|
|
|
DepictWeb ®
Стаж: 13 лет 8 мес.
Сообщений: 789
Ratio: 100.561
Поблагодарили: 117446
100%
|
AlexWorld111 писал(а): | РЕбята, скажите, это самые основы основ? Для полного чайника подойдут? |
Если не потяните этот курс, то можете глянуть эти ITVDN | HTML5 И CSS3 STARTER (2018) PCRec [H.264/720p-LQ]ITVDN | HTML5 & CSS3 ADVANCED (2018) PCRec [H.264/720p-LQ] |
|
|
|
delux
Стаж: 8 лет 11 мес.
Сообщений: 148
Ratio: 10.971
Поблагодарили: 2221
100%
|
JIetForce писал(а): | Мне совсем не понравился курс(посмотрел 2 урока). До этого проходил курс JavaScript от GoIt, вот там хорошо и понятно обьясняют и показывают на примерах как всё работает. Здесь этого нет |
Вы про курс GoIT Frontend. HTML/CSS + JavaScript (2016)? |
|
|
|
AlexWorld111
Стаж: 6 лет
Сообщений: 52
Ratio: 2.98
58.46%
|
Реально чему-то научиться по этому видеокурсу? Я смотрю и нифига не понимаю, многого не хватает. куратора нет. Где даже тот же элементарный FAQ найти, о котором лектор говорит в первой лекции? |
|
|
|
DepictWeb ®
Стаж: 13 лет 8 мес.
Сообщений: 789
Ratio: 100.561
Поблагодарили: 117446
100%
|
AlexWorld111 писал(а): | Реально чему-то научиться по этому видеокурсу? Я смотрю и нифига не понимаю, многого не хватает. куратора нет. Где даже тот же элементарный FAQ найти, о котором лектор говорит в первой лекции? |
тут есть все, что получают участники интенсива (демо, скринкасты, вебинары и даже теория с платных интерактивных курсов) а так называемое FAQ это банальные вопрос/ответ по проведению вебинаров чисто организационные.. никакого поучительного смысла в нем нет Если ничего не понимаете, то делайте домашки вместо того, чтобы писать такие комменты. Перед первым вебинаром нужно пройти интерактивный курс на их сайте. Там все понятно разжевано. |
|
|
|
Ddinamit12
Стаж: 9 лет 4 мес.
Сообщений: 56
Ratio: 5.01
13.72%
|
Отсутствующая ссылка из 3 раздела дополнительные материалыАльтернативный текст для изображенийhttp://prgssr.ru/development/alternativnyj-tekst-dlya-izobrazhenij.html |
|
|
|
ls2604
Стаж: 14 лет 1 мес.
Сообщений: 41
Ratio: 0.645
Поблагодарили: 442
15.61%
Откуда: Minsk
|
DepictWeb Планируется ли обновление курса, вторая половина 2018 года? (свежий поток). И есть ли там какие существенные изменения, либо можно смело отсматривать этот поток, всё актуально? |
|
|
|
4everfinding
Стаж: 13 лет 2 мес.
Сообщений: 8
Ratio: 0.632
4.62%
|
Я сейчас прохожу интенсив, который длится с 21 января по 24 марта. Больших различий в лекциях по сравнению с этой раздачей пока не заметил. В лекции про работу с графикой уже меньше времени уделяется фотошопу и больше его альтернативам (Zeplin, Avocode). Дополнительные материалы к лекциям обновляют, новые статейки, видео вебинаров и прочее. Макеты некоторые обновили, где-то упростили |
|
|
|
AlexanderPrib
Стаж: 5 лет
Сообщений: 2
Ratio: 1.366
0%
|
Неплохое видел, видел там спрашивали подходит ли он для новичка, соглашусь с авторами выше - не подходит. Если Вы уж новичок то советую посетить какие-то из этих ресурсов javaScript: http://learn.javascript.ru (только если знаете html + css ) все языки: https://www.w3schools.com/ ( правда на англ. ) html, css ( уже на русском ): http://coding-space.ru ( как раз для новичков ) ещё есть sololearn только он для новичков совсем (такая же шарманка, только на мобильные устройства на русском, а на десктоп только англ. ) Удачного изучения!!! |
|
|
|
bobowsinski2011
Стаж: 5 лет 4 мес.
Сообщений: 61
Ratio: 0.536
8.24%
|
DepictWeb Привет! Ты не знаешь, как в личном кабинете в htmlacademy скачать видео-лекции? Или знаешь тех, кто знает? Это вообще возможно? |
|
|
|
Kurenkiev_Timur
Стаж: 5 лет 2 мес.
Сообщений: 1
Ratio: 44.277
0%
|
Здравствуйте помогите пожалуйста. Не могу разобраться как выполнять задание с этого курса(В папке курсы есть скрины, но как после того как ты все прочитал перейти к заданию? Извиняюсь за такой вопрос) |
|
|
|
Shevgen
Стаж: 13 лет 1 мес.
Сообщений: 3
Ratio: 0.832
5.23%
Откуда: Omsk
|
Kurenkiev_Timur писал(а): | Здравствуйте помогите пожалуйста. Не могу разобраться как выполнять задание с этого курса(В папке курсы есть скрины, но как после того как ты все прочитал перейти к заданию? Извиняюсь за такой вопрос) |
Записаться на курсы HTML Academy и там проходить задания Это всего лишь скриншоты заданий, в общем достаточно прочитать теорию в них и не париться, основные моменты в последующих лекциях разбираются. Вводную лекцию вообще не рекомендую смотреть, чтобы не отбивать охоту дальше учиться. Ну и для новичков не рекомендую, подача информации в принципе не то чтобы сложная, но довольно быстрая. Не зная более менее базы очень тяжело сразу вьехать. Рекомендую сначала посмотреть три уровня от Специалиста - после них вы толком ничего не научитесь верстать , но базу получите, потом уже HTML Academy смотреть и выполнять задания после каждой лекции. |
|
|
|
Stanleygoo
Стаж: 12 лет 1 мес.
Сообщений: 55
Ratio: 18.303
100%
|
bobowsinski2011 писал(а): | DepictWeb Привет! Ты не знаешь, как в личном кабинете в htmlacademy скачать видео-лекции? Или знаешь тех, кто знает? Это вообще возможно? |
Присоединяюсь к вопросу. Как скачать видео-лекции в личном кабинете? |
|
|
|
bomberpok
Стаж: 12 лет 3 мес.
Сообщений: 306
Ratio: 29.556
Раздал: 15.81 TB
Поблагодарили: 821
31.08%
|
savefrom вроде может скачать. у меня получалось. |
|
|
|
|
|
|