Как сделать круговой текст?

Попробуем реализовать эту задачу при помощи svg.

Формат SVG поддерживает отображение текста вдоль любого пути, в том числе и дуги окружности. Легче всего поместить текст в элемент textPath внутри элемента text, который ссылается на элемент path, определяющий форму пути.

<svg class="circle-text" viewBox="0 0 100 100">
  <path id="circle-text" d="M 0,50 a 50,50 0 1,1 0,1 z" />
  <text>
    <textPath xlink:href="#circle-text">
      Круговой текст
    </textPath>
  </text>
</svg>

Добавляем стили, цвет текста в данном случае будет задаваться через свойство fill:

.circle-text {
  display: block;
  overflow: visible;
  width: 100px;
  font-size: 28px;
  fill: red;
}
.circle-text path {
    fill: none;
}

#полезности

5 Советов для Ускорения HTML-верстки

Верстка — это не только про точность, но и про скорость работы. Если вы хотите писать код быстрее, но без потери качества, вот несколько простых и полезных советов:

1. Используйте Emmet для ускорения работы
Emmet — это встроенный инструмент большинства редакторов кода. Он позволяет создавать сложные структуры HTML за пару секунд.
Пример:

div.container>header+main+footer 

Расширяется в:

<div class="container">  
  <header></header>  
  <main></main>  
  <footer></footer>  
</div> 

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

2. Организуйте структуру проекта
Пишите код так, чтобы любой мог его понять:
Разделяйте стили и скрипты в отдельные файлы.
Придерживайтесь единого стиля именования классов (например, BEM).
Пример:

<div class="menu__item menu__item--active">Главная</div>  

3. Работайте с семантикой
Семантические теги (например, <header>, <article>, <nav>) делают ваш код понятнее и лучше для SEO. Используйте их вместо универсальных <div>.

4. Добавляйте комментарии
Комментарии помогут вам или вашим коллегам быстрее разобраться в коде. Например:

<!-- Главное меню сайта -->  
<nav>...</nav> 

5. Проверяйте верстку на всех устройствах
Обязательно тестируйте:
В браузерах: Chrome, Firefox, Safari.
На разных устройствах: телефонах, планшетах и ноутбуках.
Попробуйте бесплатные инструменты, такие как Chrome DevTools, чтобы посмотреть, как ваш сайт выглядит на экранах с разным разрешением.
Ваш HTML-код — это не просто текст, это фундамент любого сайта. Чем чище и качественнее он будет, тем проще с ним работать другим разработчикам.

#полезнаястатья

Selection и Range

Читать 👨‍💻

#js | #теория

Макет для тренировки (метры)

Перейти к макету 🧑‍💻

#практика | #макет

Задача: Фильтрация и сортировка списка пользователей

Описание:
У вас есть массив объектов, представляющих пользователей. Каждый объект содержит следующие свойства: name (имя пользователя), age (возраст пользователя) и isActive (булево значение, указывающее, активен ли пользователь).

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

const users = [
    { name: 'Alice', age: 25, isActive: true },
    { name: 'Bob', age: 30, isActive: false },
    { name: 'Charlie', age: 20, isActive: true },
    { name: 'David', age: 35, isActive: true },
    { name: 'Eve', age: 28, isActive: false }
];

Пример выходных данных:

['Charlie', 'Alice', 'David']

Указания:
Используйте метод filter() для фильтрации активных пользователей.
Используйте метод sort() для сортировки пользователей по возрасту.
Используйте метод map() для извлечения имён пользователей.

#домашка

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Сокращение текста на css
2. Советы для ускорения верстки
3. Selection and range

Лучшие фронтенд вакансии @job_webdev:
1. Frontend разработчик
2. Html верстальщик
3. Frontend разработчик

Лучшие дизайн вакансии @job_webdesign:
1. Web дизайнер
2. Дизайнер
3. UX/UI дизайнер

#лучшеезанеделю

Как сделать таймер обратного отсчета на js?

Читать 👨‍💻

#какэтосделать

Где брать заказы фрилансеру

Читать 👨‍💻

#фриланс

Макет для тренировки (EASYearn)
Средняя сложность. Лендинг и личный кабинет

Перейти к макету 🧑‍💻

#практика | #макет

JS Задача: Объедините два массива по ID

Описание:
Учитывая два массива arr1 и arr2, верните новый массив joinedArray. Все объекты в каждом из двух входных массивов будут содержать поле id, которое имеет целочисленное значение.
joinedArray - это массив, сформированный путем объединения arr1 и arr2 на основе их идентификационного ключа.
Длина joinedArray должна быть равна длине уникальных значений id. Возвращаемый массив должен быть отсортирован в порядке возрастания на основе идентификационного ключа.
Если данный идентификатор существует в одном массиве, но не в другом, то единственный объект с таким идентификатором должен быть включен в результирующий массив без изменений.
Если два объекта имеют общий идентификатор, их свойства должны быть объединены в один объект:
Если ключ существует только в одном объекте, эта единственная пара ключ-значение должна быть включена в объект.
Если ключ включен в оба объекта, значение в объекте из arr2 должно переопределять значение из arr1.

Пример:

Input: 
arr1 = [
    {"id": 1, "x": 1},
    {"id": 2, "x": 9}
], 
arr2 = [
    {"id": 3, "x": 5}
]
Output: 
[
    {"id": 1, "x": 1},
    {"id": 2, "x": 9},
    {"id": 3, "x": 5}
]

#домашка

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Где брать заказы фрилансеру
2. Макет для тренировки (EASYearn)
3. CSS анимации текста при скролле

Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend разработчик (React)
3. HTML-верстальщик на WP

Лучшие дизайн вакансии @job_webdesign:
1. Product Designer
2. Дизайнер UI/UX
3. Web-дизайнер

#лучшеезанеделю

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

Эффектная кнопка загрузки сделает ваш интерфейс более современным и приятным для пользователя. Вот простой способ её реализации:
HTML:

<button class="loading-button">
  <span class="loading-text">Загрузка...</span>
  <span class="spinner"></span>
</button>

.loading-button {
  position: relative;
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
}
.spinner {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 15px;
  height: 15px;
  border: 2px solid transparent;
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  transform: translateY(-50%);
}
@keyframes spin {
  0% { transform: rotate(0deg) translateY(-50%); }
  100% { transform: rotate(360deg) translateY(-50%); }
}

Теперь у вашей кнопки есть анимация загрузки, которая мгновенно привлекает внимание.

#какэтосделать