HTML Academy
10.8K subscribers
4.99K photos
119 videos
4 files
3.06K links
Курсы по веб-разработке: вёрстка, программирование, работа и комьюнити.
Наш секретный бот @HTMLAcademyKeksobot.

Вопросы по обучению @htmlacademy_sales

Ролики на YT https://www.youtube.com/@HTMLAcademyTV
Ролики на VK https://vkvideo.ru/@htmlacademy
Download Telegram
Используем CSS-фильтры для управления цветом изображений.

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

http://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 просто так не работают.

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

http://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
Анимированный телескоп на CSS.

https://codepen.io/Malek094/pen/QvPmYx
Опыт разработки лендинга для набора инструментов Connect командой Stripe.

Применение CSS-гридов, 3D, анимации и других современных технологий.

https://stripe.com/blog/connect-front-end-experience
Обзор второго проекта интенсива «Базовый JavaScript» — https://htmlacademy.ru/intensive/javascript.

«Кекстаграм» — сервис просмотра изображений. Пользователи загружают свои фотографии или просматривают чужие.

Его выбрали 30% учеников прошлого потока.

https://www.youtube.com/watch?v=02O-70qjxxg&list=PLQJNT2fdCJnhoGNGl-kIVbxiiyJRZOmZZ
Опыт разработки веб-приложения для видеоконференций MeetSpace.

Собрав требования и проведя анализ навыков команды было принято решение использовать JavaScript без сторонних фреймворков.

Что из этого получилось и как.

https://www.smashingmagazine.com/2017/05/why-no-framework/