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

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

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

Задача: Сверстать и запрограммировать интерактивный светофор, который:

Имеет три круга (красный, жёлтый, зелёный).
При клике на кнопку «Старт» начинает переключать цвета в цикле:
Красный → Жёлтый → Зелёный → Жёлтый → Красный …
Каждый цвет горит заданное время:
Красный — 3 секунды
Жёлтый — 1 секунда
Зелёный — 3 секунды
После нажатия кнопки «Стоп» светофор останавливается на текущем цвете.
Перезапуск с кнопки «Старт» продолжает с текущего цвета, а не с начала.

Усложнение:
Сделать, чтобы при изменении размера окна светофор автоматически масштабировался и занимал 30% от ширины экрана, сохраняя правильные пропорции кругов и расстояния между ними.

#домашка

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

Лучшие статьи @free_html_lessons:
1. Фреймворк foundation
2. Как работать с форматом JSON в HTML и JavaScript?
3. Асинхронность js

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

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

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

Полезные сss функции 1 часть

Читать 👨‍💻

#css | #полезности

HTML <template> и <slot> — динамический контент без фреймворков

Раньше, чтобы повторно вставлять куски HTML, приходилось дублировать код или генерировать его в JS строками.
Но есть два тега, которые сильно упрощают задачу: <template> и <slot>.

1. <template> — заготовка для HTML
Этот тег не отображается на странице, пока вы явно не вставите его содержимое через JavaScript.
Пример:

<template id="card-template">
  <div class="card">
    <h3></h3>
    <p></p>
  </div>
</template>

<div id="container"></div>

<script>
  const template = document.getElementById('card-template');
  const container = document.getElementById('container');

  const data = [
    { title: "Карточка 1", text: "Первое описание" },
    { title: "Карточка 2", text: "Второе описание" }
  ];

  data.forEach(item => {
    const clone = template.content.cloneNode(true);
    clone.querySelector('h3').textContent = item.title;
    clone.querySelector('p').textContent = item.text;
    container.appendChild(clone);
  });
</script>

Что происходит:
template.content — это "невидимый" фрагмент HTML.
cloneNode(true) копирует весь его контент.
Мы изменяем текст и вставляем в DOM.

2. <slot> — динамическое содержимое в Web Components
<slot> используется внутри кастомных элементов, чтобы вставлять туда любой HTML снаружи.
Пример:

<template id="user-card">
  <div class="user-card">
    <slot name="avatar"></slot>
    <slot name="info"></slot>
  </div>
</template>
<script>
  class UserCard extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      const template = document.getElementById('user-card');
      shadow.appendChild(template.content.cloneNode(true));
    }
  }
  customElements.define('user-card', UserCard);
</script>

<user-card>
  <img slot="avatar" src="avatar.png" width="50">
  <div slot="info">Имя: Тигран</div>
</user-card>

Что происходит:
Создаём кастомный элемент <user-card>.
Внутри шаблона <slot> указывает, куда вставлять содержимое.
Атрибут slot у дочерних элементов определяет, в какой слот они попадут.
Когда применять
Генерация повторяющихся блоков (карточки, списки, таблицы).
Создание переиспользуемых UI-компонентов без библиотек.
В связке с Web Components для сложных интерфейсов.

#полезности #html

CSS @supports - что это и как использовать?

Читать 👨‍💻

#css | #полезности

Font-stretch css

Читать 👨‍💻

#css | #полезности

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

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

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

Задача: Генератор мемов (JS + HTML Canvas)

Создай веб-страницу, где пользователь загружает картинку (через <input type="file">), вводит текст для верхней и нижней части, а скрипт отрисовывает готовый мем в <canvas>.

Условия:
- Текст должен автоматически центрироваться по горизонтали.
- Размер шрифта подстраивается под ширину картинки.
- Готовый мем можно скачать кнопкой "Сохранить".

Подсказка:
Используй canvas.getContext('2d') для рисования изображения и текста. Метод drawImage — для вставки картинки, fillText — для текста.

#домашка

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

Лучшие статьи @free_html_lessons:
1. Font-stretch css
2. HTML <template> и <slot>
3. Полезные сss функции

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

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

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

JSON to Flowchart

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

#практика

Subgrid: расширенные возможности Grid для вложенных сеток

CSS Grid уже давно стал стандартом для построения сложных макетов. Но есть одна проблема: вложенные элементы не могут «наследовать» линии сетки родителя. Приходилось дублировать разметку или писать громоздкие правила.
Свойство subgrid решает эту задачу. Теперь дочерний grid может использовать сетку родителя, оставаясь при этом самостоятельным контейнером.

Когда это полезно
- Карточки внутри сетки должны выравниваться по тем же колонкам, что и заголовки/текст снаружи.
- Вложенные компоненты (например, таблицы или галереи) должны соблюдать общий ритм колонок.
- Когда нужен единый вертикальный ритм по всей странице.

Пример кода

<div class="wrapper">
  <header>Заголовок</header>
  <section class="content">
    <article>
      <h2>Карточка 1</h2>
      <p>Описание...</p>
    </article>
    <article>
      <h2>Карточка 2</h2>
      <p>Описание...</p>
    </article>
  </section>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* три колонки */
  gap: 1rem;
}

.content {
  display: grid;
  grid-template-columns: subgrid; /* наследуем родительскую сетку */
  grid-column: 1 / -1; /* растягиваемся на всю ширину */
  gap: 1rem;
}

.content article {
  background: #f3f3f3;
  padding: 1rem;
}

В этом примере .content использует ту же сетку, что и .wrapper. Карточки внутри аккуратно «подстраиваются» под общую колонку, а не создают собственную сетку с другими линиями.

Вывод
subgrid — это мощное расширение Grid, которое делает макеты чище и избавляет от хака с дублированием колонок. Уже сейчас можно экспериментировать, а в будущем это станет must-have для сложных адаптивных интерфейсов.

#css