Создаём JavaScript-компонент для имитации посимвольного ввода текста. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/163

А ещё познакомимся с рекурсией.

#туториалотhtmlacademy #frontend #javascript

⚡ Пока вы думаете, кто-то уже сделал шаг вперёд!

⏳ Осталось всего 𝟒 дня до конца «Чёрной пятницы», чтобы:
Новичкам — начать путь в программирование.
Мидл-специалистам — выйти на новый уровень карьеры.
И всё это со скидками до 𝟕𝟓%!

🎯 Выберите свой путь:
𝟕𝟎% — тренажёры и подписки для старта
𝟓𝟎% — пакеты мидл-курсов для прокачки
𝟕𝟓% — профессии лайт для нового этапа
𝟐𝟎% — профессия React-разработчик для работодателя Brew и Лига А

Будущее ваших навыков — за одним кликом.
👉 Успейте до 𝟑𝟎 ноября: tml.io/BF2024

Не ждите — действуйте!

Верстаем сайт по графическому макету из олимпиады по фронтенду от HTML Academy и Яндекса с учётом адаптивности и переполнения в новом интерактивном курсе.

https://htmlacademy.ru/demos/165

В первой части работаем над разметкой и базовой стилизацией шапки. Ссылка на макет компонента — внутри курса.

#туториалотhtmlacademy #frontend #макет

Продолжаем вёрстку макета из олимпиады по фронтенду от HTML Academy и Яндекса в новом интерактивном курсе.

https://htmlacademy.ru/demos/167

Во второй части работаем над сеткой десктопной версии шапки и проверяем её на переполнение. Ссылка на макет компонента — внутри курса.

#туториалотhtmlacademy #frontend #макет

Кодпен дня — отклеивалка

Джей Томпкинс сделал эту штуку на CSS, вообще без JS-кода.

Отвал всего в 368 строках CSS 👉 https://codepen.io/jh3y/pen/rNRdZMM

Открытая неделя началась! Доступ ко всем тренажёрам открыт.

С 2 по 8 декабря прокачайте навыки веб-разработки бесплатно. Выполняйте задания, зовите друзей, соревнуйтесь и выигрывайте крутые призы.

Переходите в бота и получайте доступ к открытой недели. Мы уже начали!

https://htmlacademy.ru/special/open-week/2024/december

2️⃣ День 2

Совсем забыл рассказать! Пока вы проходите тренажёры, я собрал для вас тренировочный план. Каждый день я буду скидывать вам тренажёры, на которых стоит сосредоточиться.

Сегодня у нас день структуры: разберёмся со всеми элементами, подробнее изучим формы и таблицы, а затем возьмёмся за раскладки. Готовьтесь, тренировка сегодня будет насыщенной! Не забывайте делать перерывы между заданиями и пить воду.

В программе у нас 161 задание и 16 испытаний. За их выполнение можно заработать 241 балл.

Подробнее | Правила акции

···

▷ Продвинутые возможности HTML · 19 заданий, 1 испытание
Вспомним, какие элементы входят в стандарт HTML, и научимся их правильно использовать. Попрактикуемся в добавлении на страницу аудио, видео и векторных изображений. Освоим подключение нестандартных шрифтов и познакомимся с крутыми возможностями CSS.

▷ Погружение в формы · 42 задания, 3 испытания
Разберём основы работы с формами: от базовых возможностей до продвинутых техник.

▷ Работа с таблицами · 20 заданий, 3 испытания
Изучим структуру таблиц: теги, количество строк и столбцов, объединение ячеек и оформление таблиц.

▷ Погружение в техники раскладок · 80 заданий, 9 испытания
Разберём основные методы создания раскладок: флексбоксы и гриды. Изучим основы, углубимся в детали и закрепим знания, сверстав несколько раскладок.

3️⃣ День 3, сообщение от Кекса

Доброе утро, команда! Проснулись, потянулись, почистили зубы, позавтракали — пора снова за тренажёры. Сегодня у нас день точности! Заданий немного, но они совсем не простые. Придётся как следует подумать.

День точности

Сегодня мы серьёзно погрузимся в CSS-селекторы. У нас будет всё: от ::before и ::after до :nth-last-of-type, :only-child, :required, :optional и :checked. Тренируем селекторы, пока они не начнут вам сниться! Так что запасайтесь шоколадом — он точно пригодится.

В программе:
50 заданий и 6 испытаний. За их выполнение можно заработать 80 баллов.

Подробнее | Правила акции

✒️ Кодпен дня — «типа реалистичный текст»

Лукас Беббер накодил забавную демку, в которой можно посмотреть на любой текст так, будто он напечатан в книге.

70 строк CSS и капля JS: https://codepen.io/lbebber/pen/OJWNZV

Продолжаем вёрстку макета из олимпиады по фронтенду от HTML Academy и Яндекса в новом интерактивном курсе.

https://htmlacademy.ru/demos/169

В третьей части работаем над состояниями интерактивных компонентов шапки, опираясь на стайлгайд. Ссылка на макет компонента — внутри курса.

#туториалотhtmlacademy #frontend #макет

4️⃣ День 4, сообщение от Кекса

Мяу! Надеюсь, вы уже проснулись, потому что сегодня нас ждёт день декора — время украсить ваши знания яркими и стильными техниками. Делитесь своими успехами и поддерживайте энергию фруктами и орехами.

На сегодня: 152 задания и 28 испытаний, а заработать можно 292 баллов.

Подробнее | Правила акции