В этот понедельник 22 мая стартует «Продвинутый HTML и CSS». Это последний перед летним перерывом курс — следующий будет уже осенью.

https://goo.gl/Sa68r2

Во время курса вы научитесь работать с методологией БЭМ, препроцессорами, адаптивностью и автоматизацией. Процесс работы на курсе максимально приближен к разработке в больших компаниях: вы познакомитесь с Гитхабом, научитесь делать форки, ветки и пулреквесты.

Отзыв одного из участников:

> Интенсив — замечательная вещь для тех, кто учится делая, потому что даже если что-то не поняли на слух или из прочитанного, необходимость сделать так или иначе, не оставит выбора и вы таки научитесь. С хорошим наставником научитесь даже больше, чем планировали. Конечно, многое можно нагуглить, но лично я всегда теряюсь от обилия мнений в неизвестных вещах, поэтому так здорово, когда можно получить базу от людей, которым доверяешь. Отдельное спасибо за непредвзятое отношение к инструментам, когда цель — не посвятить тебя в рыцари Gulp или Grunt, а научить выполнять поставленную задачу качественно и красиво. Было интересно, насыщенно и по делу.

Курс подойдёт выпускникам базовых интенсивов и верстальщикам, желающим поднять свои навыки.

Вас ожидает 20 часов живых вебинаров, 4 качественных макета дизайна и общение с личным наставником, который будет делиться секретами мастерства.

https://goo.gl/Sa68r2

#html #css #верстка #интенсив #htmlacademy

Открыта запись на осенний онлайн-курс «Продвинутый HTML и CSS», который будет проходить с 18 сентября по 25 октября. Минимальная стоимость участия до 27 июня.

https://goo.gl/Bh441w

Во время курса вы научитесь работать с методологией БЭМ, препроцессорами, адаптивностью и автоматизацией. Процесс работы на курсе максимально приближен к разработке в больших компаниях: вы познакомитесь с Гитхабом, научитесь делать форки, ветки и пулреквесты.

Что пишут выпускники:

> Интенсив здорово встряхивает мозги. Думаешь кодом, снится код, говоришь с людьми, а в голове код. После интенсива ты всё ещё продолжаешь жить в том ритме, только дел, оказывается, намного меньше и не нужно уже утром бежать к родной консольке, запуская проект, и думать над размещением блоков. Странное ощущение. Всем советую интенсив, мощная прокачка навыков в короткие сроки. Академия, вы круты.

> Интенсив очень крут. Помимо того, что после его окончания у меня появился огромный багаж знаний и практики, также я научился контролировать и распределять своё время для работы. Поначалу было невероятно трудно втянуться. Даже пару раз хотелось всё бросить, но спасибо моему наставнику, я прошёл этот путь до конца. Теперь понимаю, что всё дело было лишь в моей неорганизованности.

Курс подойдёт выпускникам базовых интенсивов и верстальщикам, желающим поднять свои навыки.

Вас ожидает 20 часов живых вебинаров, 4 качественных макета дизайна и общение с личным наставником, который будет делиться секретами мастерства.

https://goo.gl/Bh441w

#html #css #верстка #интенсив #htmlacademy

Фронтенд-новости 47. Совершенно точно настоящий, а не отправленный случайно нажатием enter в неподходящий момент времени, пока ещё не всё оформлено, дайджест новостей и полезных статей о фронтенде с 6 по 16 марта, хотя обычно он выходит по понедельникам, а сегодня пятница, но что уж теперь.

💫 Что нового

Chrome 111
- View Transitions API
- Поддержка CSS Color Level 4
- Новые инструменты на панели стилей

Chrome 112 beta и в нём Chrome DevTools

Отчет о производительности Astro, Gatsby, Next.js, Nuxt, Remix, и SvelteKit в 2023.

В Chrome появился headless mode. Узнайте, как его использовать.

🧬 HTML и CSS

Типографить станет чуть легче с новым CSS-свойством text-wrap: balance

Нам нужен нативный .visually-hidden

Полное руководство по медиавыражениям

ARIA против HTML. `<div role="heading" aria-level="1">`— это то же самое, что `<h1>` , но что использовать лучше?

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

Пять ошибок при написании альтернативного текста?

🏝️ JavaScript

🎥 Что почитать по JavaScript / Игорь Антонов с большим обзором книг по JavaScript

Распространенные ошибки новичков в React.

Были ли React Hooks ошибкой?

Как создать панель администратора React с помощью Mantine, Strapi и Refine

Vue 3.2 и прирост скорости.

12 самых популярных фреймворков Node.js в 2023 году


Подпишитесь на @html_blog, чтобы не пропустить новые выпуски.

Создаём галерею с красивой анимацией переключения слайдов в новом интерактивном туториале

https://htmlacademy.ru/demos/115

При переключении слайдов используются CSS-трансформации. Ключевую роль играют transform-origin и animation-fill-mode.

#туториалотhtmlacademy #html #css #javascript

Создаём простую и красивую анимацию волн в новом интерактивном туториале

https://htmlacademy.ru/demos/109

В реализации используются CSS-анимации. Ключевую роль для создания эффекта многослойности играет свойство opacity.

#туториалотhtmlacademy #html #css

Визуализация схлопывания и выпадания маргинов

#visualization #css #margin

Ещё больше визуализаций и интерактивных туториалов → https://htmlacademy.ru/demos

Визуализация flex-grow

#visualisation #css #flexbox #flexgrow

Ещё больше визуализаций и интерактивных туториалов → https://htmlacademy.ru/demos

Как сделать аккордеон на чистом HTML и CSS? Разбираемся в бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/177

Создаём вертикальный аккордеон на базе нативного элемента <details>. Разбираемся, с помощью какого атрибута "связывать" друг с другом "вкладки" аккордеона.

#туториалотhtmlacademy #frontend #html #css

CSS Container Queries — технология, которая изменит понятие адаптивности навсегда. Познакомьтесь с ней в новом бесплатном курсе!

https://htmlacademy.ru/demos/189

Мы создадим резиново-адаптивный чат и познакомится с основными возможностями выражений от контейнеров.

#туториалотhtmlacademy #frontend #html #css

Научитесь верстать по методологии Atomic CSS с помощью фреймворка mlut в новом бесплатном курсе:

https://htmlacademy.ru/demos/183

В первой главе курса мы познакомимся с основами методологии Atomic CSS. Также разберем базовые концепты инструмента mlut, который поможет эффективно верстать в этом подходе. Это официальный курс от автора фреймворка — Валентина Ульянова

#туториалотhtmlacademy #frontend #html #css #mlut

Секрет крутых CSS-теней: когда немного переборщил
#frontend #css #animation #coding

Пошагово показываем, как создать эффект фотозатвора на чистом CSS. Внутренние тени, переменные и пара хитрых приёмов с box-shadow — и эффект готов.

Попробуйте в действии → Демонстрация

Другие демки и сложные приёмы → Смотреть всё

Разбираем реальный продуктовый кейс использования CSS Container Queries во второй главе бесплатного курса.

https://htmlacademy.ru/demos/191

Продуктовые кейсы — самая ценная часть любого курса. Мы создадим настоящую карточку услуги со сложным резиновым поведением и адаптивностью от контейнера.

#туториалотhtmlacademy #frontend #html #css