Выпуск №77: CSS Minsk JS, сложности DevTools, Storage API в Firefox, DRM и W3C, чистка CSS, вброс и Шорты, гироскоп и драг-н-дроп, Xwebs Megabrowser — https://soundcloud.com/web-standards/episode-77

Анимированная открытка из Японии.

https://codepen.io/lgrqvst/pen/LLbPzx

Уже 7 августа стартует ближайший поток интенсива «Базовый HTML и CSS». Количество мест ограничено.

Программа этого курса переработана и обновлена: личные проекты на флексбоксах, больше внимания разметке и векторной графике, доступность, новые критерии качества и лучшие практики.

https://goo.gl/yQmP9R

Интенсив «Базовый HTML и CSS» — это пять недель работы над проектом. Лекции ведут четыре опытных преподавателя, а с работой над проектом помогает личный наставник — практикующий разработчик.

Курс рассчитан как на новичков и начинающих верстальщиков. Подойдёт он и для систематизации уже существующих знаний.

«Базовый HTML и CSS» — это более 20 часов онлайн-вебинаров, с возможностью задать вопрос лектору, 23 интерактивных демонстраций, на которых пошагово разбираются решения типовых задач, 12 скринкастов, объясняющих нюансы вёрстки, 6 дизайн-макетов разной степени сложности и еженедельные консультации с наставником, который поделится секретами мастерства.

Через месяц вы:

— Получите опыт создания веб-интерфейсов;
— Научитесь решать типовые задачи верстальщика;
— Освоите необходимые инструменты для работы;
— Начнёте карьеру с портфолио.

https://goo.gl/yQmP9R

Рассказываем, как прошла конференция pitercss_conf в июне.

Делимся фотографиями и атмосферой мероприятия. Может быть кто-то найдёт себя или знакомых. 😼

https://htmlacademy.ru/blog/201-academy-pitercss-conf

Используем CSS-фильтры для управления цветом изображений.

— grayscale() — бесцветность;
— hue-rotate(); — поворот цвета;
— saturate(); — насыщенность;
— sepia(); — сепия.

https://vanseodesign.com/css/4-css-filters-for-adjusting-color/

Подвели итоги одиннадцатого курса «Продвинутый HTML и CSS».

— Более 20 часов лекций, 4 преподавателя и 4 проекта.
— 26 наставников получили высшую оценку.
— 74 выпускника успешно защитили личные проекты.

В отчёте статистика потока и, конечно, отзывы участников.

> Записался, ждал этот интенсив и не прогадал: такого плотного графика в работе у меня никогда не было, даже в универе. Отличная подача материала на вебинарах, всё разжёвывается до мелочей. Критерии по вёрстке — очень дисциплинируют. Столько всего вкусного… Гитхаб, адаптивная графика, БЭМ, автоматизация, производительность и всё это в течение месяца с хвостиком. А, главное, теперь я это всё могу. Хотелось освоить препроцессоры и автоматизацию: теперь не знаю, как можно было без всего этого раньше. Невероятная прокачка навыков на интенсиве, спасибо Академия, было здорово.

https://htmlacademy.ru/blog/203-online-intensive-adaptive

Что использовать для сброса стилей: Reset CSS или Normalize.css?

Для начала разберёмся зачем это вообще нужно делать.

https://www.youtube.com/watch?v=KGYmOlNteas&list=PLQJNT2fdCJngOj0mGZaTcZRyfSBTCWHe1&index=1?

Задавайте вопросы на странице — htmlacademy.ru/shorts или в комментариях к видео. На самые интересные мы ответим в следующих выпусках.

— О Normalize.css — https://htmlacademy.ru/blog/64-about-normalize-css
— Default style sheet for HTML 4 — https://www.w3.org/TR/CSS21/sample.html
— HTML5 Rendering — https://www.w3.org/TR/html5/rendering.html
— Chrome html.css — https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/css/html.css
— Firefox html.css — https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css
— Reset CSS — https://meyerweb.com/eric/tools/css/reset/
— Normalize.css — https://necolas.github.io/normalize.css/
— CSS: all — https://developer.mozilla.org/en/docs/Web/CSS/all

Миниатюрная вселенная на CSS.

https://codepen.io/miocene/pen/dRLbGP

С помощью свойства transform, в CSS возможно масштабирование и поворот элемента целиком.

Но что, если вы хотите повернуть только фоновое изображение? Готового предложения в W3C для преобразования фонового изображения пока нет.

Автор предлагает выход из ситуации.

https://www.sitepoint.com/css3-transform-background-image/

Совместно фоновые градиенты и плавные переходы в CSS просто так не работают.

Автор предлагает обойти эту особенность и добиться эффекта перехода с помощью плавного изменения непрозрачности псевдоэлементов.

https://keithjgrant.com/posts/2017/07/transitioning-gradients/

Выпуск №78: Chrome 60, Stylo, Flash 1996—2020, статистика браузеров, сброс стилей, большой текст, подсказки, порядок, новинки ES, должен ли? — https://soundcloud.com/web-standards/episode-78

Руководство по разработке веб-интерфейсов от команды приложения Grab.

Новые инструменты, библиотеки, фреймворки и плагины появляются каждый день, не все разработчики, участвующие в проекте, успевают следить за изменениями в фронтенде.

Это учебное пособие, которое позволяет понять принципы разработки в компании и влиться в работу быстрее.

https://medium.freecodecamp.org/grabs-front-end-guide-for-large-teams-484d4033cc41

Обзор проекта интенсива «Базовый JavaScript» — https://htmlacademy.ru/intensive/javascript. Всего на выбор два проекта.

«Кексобукинг» — сервис размещения объявлений о сдаче в аренду недвижимости в центре Токио. Предполагается, что пользователи размещают свои объявления или могут просматривать чужие.

70% учеников прошлого потока выбрали именно его, в качестве личного проекта.

https://www.youtube.com/watch?v=g_GtH7At8hs&list=PLQJNT2fdCJnhoGNGl-kIVbxiiyJRZOmZZ