Media is too big
VIEW IN TELEGRAM
Верстаем адаптивные версии промо-блока из олимпиады по фронтенду от HTML Academy и Яндекса.
https://htmlacademy.ru/demos/179
В седьмой части курса мы верстаем планшетную и мобильную версии компонента, добавляем адаптивную графику с помощью тега
#туториалотhtmlacademy #frontend #макет
https://htmlacademy.ru/demos/179
В седьмой части курса мы верстаем планшетную и мобильную версии компонента, добавляем адаптивную графику с помощью тега
<picture> и проверяем компонент на переполнение. Ссылка на макет компонента — внутри курса.#туториалотhtmlacademy #frontend #макет
❤9
Media is too big
VIEW IN TELEGRAM
CSS Container Queries — технология, которая изменит понятие адаптивности навсегда. Познакомьтесь с ней в новом бесплатном курсе!
https://htmlacademy.ru/demos/189
Мы создадим резиново-адаптивный чат и познакомится с основными возможностями выражений от контейнеров.
#туториалотhtmlacademy #frontend #html #css
https://htmlacademy.ru/demos/189
Мы создадим резиново-адаптивный чат и познакомится с основными возможностями выражений от контейнеров.
#туториалотhtmlacademy #frontend #html #css
🔥23 7❤3
Научитесь верстать по методологии Atomic CSS с помощью фреймворка mlut в новом бесплатном курсе:
https://htmlacademy.ru/demos/183
В первой главе курса мы познакомимся с основами методологии Atomic CSS. Также разберем базовые концепты инструмента mlut, который поможет эффективно верстать в этом подходе. Это официальный курс от автора фреймворка — Валентина Ульянова
#туториалотhtmlacademy #frontend #html #css #mlut
https://htmlacademy.ru/demos/183
В первой главе курса мы познакомимся с основами методологии Atomic CSS. Также разберем базовые концепты инструмента mlut, который поможет эффективно верстать в этом подходе. Это официальный курс от автора фреймворка — Валентина Ульянова
#туториалотhtmlacademy #frontend #html #css #mlut
👍10🔥3🤯2😱1
This media is not supported in your browser
VIEW IN TELEGRAM
Секрет крутых CSS-теней: когда немного переборщил
#frontend #css #animation #coding
Пошагово показываем, как создать эффект фотозатвора на чистом CSS. Внутренние тени, переменные и пара хитрых приёмов с
Попробуйте в действии → Демонстрация
Другие демки и сложные приёмы → Смотреть всё
#frontend #css #animation #coding
Пошагово показываем, как создать эффект фотозатвора на чистом CSS. Внутренние тени, переменные и пара хитрых приёмов с
box-shadow — и эффект готов.Попробуйте в действии → Демонстрация
Другие демки и сложные приёмы → Смотреть всё
🔥10⚡9 7❤🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Разбираем реальный продуктовый кейс использования CSS Container Queries во второй главе бесплатного курса.
https://htmlacademy.ru/demos/191
Продуктовые кейсы — самая ценная часть любого курса. Мы создадим настоящую карточку услуги со сложным резиновым поведением и адаптивностью от контейнера.
#туториалотhtmlacademy #frontend #html #css
https://htmlacademy.ru/demos/191
Продуктовые кейсы — самая ценная часть любого курса. Мы создадим настоящую карточку услуги со сложным резиновым поведением и адаптивностью от контейнера.
#туториалотhtmlacademy #frontend #html #css
🔥26❤🔥2
Media is too big
VIEW IN TELEGRAM
[Новинка] Разбираем продуктовый кейс использования CSS Container Queries в третьей главе бесплатного курса.https://htmlacademy.ru/demos/193
Мы создадим адаптивный список карточек, в котором количество карточек в ряду изменяется в зависимости от размера контейнера, а сами карточки тянутся.
#туториалотhtmlacademy #frontend #html #css
🔥18⚡6
This media is not supported in your browser
VIEW IN TELEGRAM
[Новинка] Станьте мастером создания бесконечных анимаций на чистом CSS в бесплатном курсе.
https://htmlacademy.ru/demos/185
Мы разберём приём, который позволяет создать анимированную карусель карточек с бесконечной прокруткой чистом CSS.
#туториалотhtmlacademy #frontend #html #css
https://htmlacademy.ru/demos/185
Мы разберём приём, который позволяет создать анимированную карусель карточек с бесконечной прокруткой чистом CSS.
#туториалотhtmlacademy #frontend #html #css
🔥32👍10
Media is too big
VIEW IN TELEGRAM
[Релиз!] Познакомьтесь с CSS-библиотекой от HTML Academy, которая кардинально упрощает создание и настройку инвертированных углов
https://htmlacademy.ru/demos/195
Углы работают даже на неоднородных фонах. Всё сделано на чистом CSS. Знакомьтесь с возможностями библиотеки и используйте с удовольствием!
#туториалотhtmlacademy #frontend #html #css
https://htmlacademy.ru/demos/195
Углы работают даже на неоднородных фонах. Всё сделано на чистом CSS. Знакомьтесь с возможностями библиотеки и используйте с удовольствием!
#туториалотhtmlacademy #frontend #html #css
🔥31👍11❤1
This media is not supported in your browser
VIEW IN TELEGRAM
[Новый курс] Погрузитесь в радиальные градиенты в новом бесплатном курсе. Наглядно, интерактивно, без воды!
htmlacademy.ru/demos/199
Познакомимся с функцией
#туториалотhtmlacademy #frontend #html #css
htmlacademy.ru/demos/199
Познакомимся с функцией
radial-gradient(), научимся создавать простые градиенты, управлять списком колорстопов и расположением центра градиента. А также разберёмся, что влияет на форму радиального градиента.#туториалотhtmlacademy #frontend #html #css
🔥28❤5
This media is not supported in your browser
VIEW IN TELEGRAM
[Новый курс] Погрузитесь в радиальные градиенты в новом бесплатном курсе. Наглядно, интерактивно, без воды!
https://htmlacademy.ru/demos/201
Продолжим разбираться с радиальными градиентами. Научимся принудительно задавать форму и управлять размерами градиентов. Разберёмся с ключевыми словами
#туториалотhtmlacademy #frontend #html #css
https://htmlacademy.ru/demos/201
Продолжим разбираться с радиальными градиентами. Научимся принудительно задавать форму и управлять размерами градиентов. Разберёмся с ключевыми словами
closest-side, farthest-side, closest-corner, farthest-corner.#туториалотhtmlacademy #frontend #html #css
🔥20👍2
Media is too big
VIEW IN TELEGRAM
[Новый курс] Конические градиенты — короли современных декоративных эффектов и анимаций! Ими обязан владеть каждый фрнтендер. Познайте же конические градиенты в новом бесплатном курсе.
https://htmlacademy.ru/demos/211
Изучим все возможности конических градиентов — от колорстопов до управления координатами центра, а затем разберём практический кейс.
P.S.: без конических градиентов даже рамку красивую сделать не получится, а реакт в этом не поможет, и тайпскрипт тоже не поможет
#туториалотhtmlacademy #frontend #html #css
https://htmlacademy.ru/demos/211
Изучим все возможности конических градиентов — от колорстопов до управления координатами центра, а затем разберём практический кейс.
P.S.: без конических градиентов даже рамку красивую сделать не получится, а реакт в этом не поможет, и тайпскрипт тоже не поможет
#туториалотhtmlacademy #frontend #html #css
🔥18👍7❤1
Media is too big
VIEW IN TELEGRAM
[Новый курс] Потрясающие декоративные эффекты на основе радиальных градиентов. Интерактивно, наглядно, без воды.
https://htmlacademy.ru/demos/223
В этой мастерской мы научимся использовать радиальные градиенты для создания потрясающих декоративных эффектов и разберёмся, как создать эффект пульсирующей градиентной заливки текста.
#туториалотhtmlacademy #frontend #html #css
https://htmlacademy.ru/demos/223
В этой мастерской мы научимся использовать радиальные градиенты для создания потрясающих декоративных эффектов и разберёмся, как создать эффект пульсирующей градиентной заливки текста.
#туториалотhtmlacademy #frontend #html #css
❤15🔥9
This media is not supported in your browser
VIEW IN TELEGRAM
Новый курс
Создайте карточку с потрясающим декоративным эффектом в мастерской, состоящей из 14 заданий-головоломок, и отточите свои навыки использования градиентов.
https://htmlacademy.ru/courses/425
Курс доступен по подписке. Бесплатно познакомиться с принципом создания этого декоративного эффекта можно в интерактивной демонстрации.
https://htmlacademy.ru/demos/223
#туториалотhtmlacademy #frontend #html #css
Создайте карточку с потрясающим декоративным эффектом в мастерской, состоящей из 14 заданий-головоломок, и отточите свои навыки использования градиентов.
https://htmlacademy.ru/courses/425
Курс доступен по подписке. Бесплатно познакомиться с принципом создания этого декоративного эффекта можно в интерактивной демонстрации.
https://htmlacademy.ru/demos/223
#туториалотhtmlacademy #frontend #html #css
1❤🔥11🔥9 3❤2🤯1
Media is too big
VIEW IN TELEGRAM
[Новый курс] Удивите коллег и работодателей мастерством создания потрясающих эффектов на чистом CSS, пройдя бесплатный курс:
https://htmlacademy.ru/demos/225
В этой мастерской мы продолжим использовать радиальные градиенты для создания потрясающих декоративных эффектов и разберёмся, как создать эффект сияющей иллюстрации взрыва.
#туториалотhtmlacademy #frontend #html #css
https://htmlacademy.ru/demos/225
В этой мастерской мы продолжим использовать радиальные градиенты для создания потрясающих декоративных эффектов и разберёмся, как создать эффект сияющей иллюстрации взрыва.
#туториалотhtmlacademy #frontend #html #css
🔥15⚡5 3❤🔥2❤1👏1
Media is too big
VIEW IN TELEGRAM
Курс с визуализациями про адаптивность отлично подходит для тех, кто начинает погружаться в эту сложную тему. Бесплатно, наглядно, без воды
https://htmlacademy.ru/demos/231
Вы узнаете, чем резиновая вёрстка отличается от адаптивной. С помощью визуализаций разберётесь с принципом работы медиавыражений.
#туториалотhtmlacademy #frontend #html #css
https://htmlacademy.ru/demos/231
Вы узнаете, чем резиновая вёрстка отличается от адаптивной. С помощью визуализаций разберётесь с принципом работы медиавыражений.
#туториалотhtmlacademy #frontend #html #css
🔥17❤🔥4👍4
Media is too big
VIEW IN TELEGRAM
Кайф от sibling-index()
Смотрите и наслаждайтесь тем, как
Удаляем ненавистные инлайновые индексы из разметки, заменяем переменные-индексы в стилях на sibling-index() и получаем рабочий компонент с чистейшим кодом.
#CSS #Frontend #код #siblingIndex
Смотрите и наслаждайтесь тем, как
sibling-index() упрощает вёрстку!Удаляем ненавистные инлайновые индексы из разметки, заменяем переменные-индексы в стилях на sibling-index() и получаем рабочий компонент с чистейшим кодом.
#CSS #Frontend #код #siblingIndex
🔥14❤🔥4⚡3
This media is not supported in your browser
VIEW IN TELEGRAM
Магия sibling-count() в действии!
Создаём динамический индикатор загрузки без единой строчки JavaScript.
#css #frontend
Создаём динамический индикатор загрузки без единой строчки JavaScript.
#css #frontend
🔥10👍4
Фронтенд-разработка — это не только инженерные выдумки, но и очень много кодинга: повторяющиеся задачи, тесты, документация. AI-агенты помогают экономить время и поддерживать качество кода. В статье разбираем пять типовых задач фронтенд-разработчика, где AI может радикально ускорить процесс, и показываем, как эти кейсы решаются на курсе «Фронтенд на автопилоте: AI-агенты на практике».
Кодинг вместе с AI-агентами — это не будущее, а настоящее фронтенд-разработки. Генерация кода, тестирование, рефакторинг, документация и интеграция API — везде AI экономит время и силы. #ai #frontend
☁️ Читать статью
Кодинг вместе с AI-агентами — это не будущее, а настоящее фронтенд-разработки. Генерация кода, тестирование, рефакторинг, документация и интеграция API — везде AI экономит время и силы. #ai #frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7❤🔥2🔥2
JSON (JavaScript Object Notation) — текстовый формат для представления структурированных данных. Его используют, чтобы передавать данные между клиентом и сервером, хранить конфигурации и сериализовать состояние приложений.
Пока все данные приходят идеальными, работа с JSON кажется простой. Но одна лишняя запятая — и приложение падает с
SyntaxError.В статье разбираем, как надёжно использовать
JSON.parse(): когда достаточно простого try…catch, как оформить безопасную обёртку со значением по умолчанию, зачем нужна функция-reviver, что делать с большими JSON и как аккуратно работать с fetch. Такой подход помогает сделать парсинг предсказуемым и не блокировать интерфейс. #js #frontend Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👍3❤2❤🔥2