منشورات Вёрстка сайтов | HTML, CSS, JS على Telegram

ResizeObserver

Читать 👨‍💻

#полезности

🚀 Представляем наш новый комплексный курс: "Полный путь web-разработчика: HTML, CSS, JavaScript, Node.js, SQL, APIs, Full-Stack проекты & AI".

Стань востребованным Full-Stack разработчиком с нуля!

🔥Чему вы научитесь:🔥
✔️Освоите весь стек современных web-технологий: от HTML и CSS до Node.js и SQL
✔️Создадите множество реальных проектов, включая Todo-приложение, трекер расходов, приложение-викторину
✔️Разработаете собственные API и полноценные Full-Stack приложения
✔️Изучите работу с Git, MongoDB, React, NextJS и многое другое

🔥Преимущества курса:🔥ㅤ
✔️Дистанционный формат обучения
✔️Практические задания после каждой темы
✔️Проекты для вашего портфолио
✔️Поддержка опытных менторов

🔥По окончании вы получите (один документ на выбор):🔥ㅤ
✔️Диплом о профессиональной переподготовке
✔️Удостоверение о повышении квалификации
✔️Диплом об освоении дополнительной общеразвивающей программы
✔️Сертификат о прохождении обучения

Не упустите возможность получить востребованную профессию и начать карьеру в IT!ㅤ

👉 Ссылка на курс: web.dms-it.ru

#реклама
О рекламодателе

Анимация border

Смотреть на codepen 👨‍💻

#практика

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

Лучшие статьи @free_html_lessons:
1. input[type=range] слайдер на чистом css
2. Как сделать обводку для текста?
3. Set js

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

Лучшие дизайн вакансии @job_webdesign:
1. Продуктовый дизайнер
2. Web-дизайнер
3. Web designer

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

Задача: Количество отличников и двоечников

Вам дан массив массивов, где каждый подмассив содержит оценки учеников одного класса за финальный экзамен.

Определите, сколько учеников сдали (оценка ≥ 3) и не сдали (оценка < 3) экзамен в каждом классе.
Оцените результативность класса по следующим критериям:
Если 95% и больше учеников получили 4 или 5 — результативность "Отличная".
Если менее 30% учеников получили 4 или 5 — результативность "Плохая".
В остальных случаях результативность "Средняя".
Реализуйте возможность менять пороги процентных значений результативности.

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

const scores = [
  [2, 4, 4, 5, 2, 3, 3, 1, 1],
  [3, 4, 2, 3, 3, 1, 5, 2, 4],
  [5, 3, 3, 4, 3, 2, 3, 5],
  [4, 2, 2, 4, 2]
];

Ожидаемый вывод:

Класс 1: Сдавших — X, Не сдавших — Y, Результативность — "Средняя"
Класс 2: Сдавших — X, Не сдавших — Y, Результативность — "Плохая"

#домашка

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

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

#макетдлятренировки

Set js

Читать 👨‍💻

#js | #теория

:indeterminate css

Читать 👨‍💻

#css | #теория

Как сделать обводку для текста?

Воспользуемся этим кодом:

<div class="text">Текст с обводкой.</div>

.text {
  font-size: 16px;
  -webkit-text-stroke: 1px red;
  -webkit-text-fill-color: transparent;
}

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

.text {
  font-size: 16px;
  color: #fff;
  text-shadow:
    -0  -1px  0   #000000,
    0   -1px  0   #000000,
    -0   1px  0   #000000,
    0    1px  0   #000000,
    -1px -0   0   #000000,
    1px  -0   0   #000000,
    -1px  0   0   #000000,
    1px   0   0   #000000,
    -1px -1px 0   #000000,
    1px  -1px 0   #000000,
    -1px  1px 0   #000000,
    1px   1px 0   #000000,
    -1px -1px 0   #000000,
    1px  -1px 0   #000000,
    -1px  1px 0   #000000,
    1px   1px 0   #000000;
}

#полезности

Задача: Количество цифр в числе

Напишите функцию, которая получает на вход целое число и возвращает количество его цифр.

Дополнительно:
Реализуйте два варианта решения:
С использованием строк
Без использования строк

Примеры:

console.log(countDigits(1234567)); // 7
console.log(countDigits(-987654)); // 6
console.log(countDigits(0));       // 1

Подумайте:
Как можно решить задачу, не преобразовывая число в строку?
Как обработать отрицательные числа?

#домашка