Верстаем сайт по графическому макету из олимпиады по фронтенду от 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 баллов.

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

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

Привет, кодеры! Готовы размять мозги? Сегодня день логики и взаимодействия — будем программировать, анализировать и создавать! Это идеальный момент погрузиться в JavaScript и потренировать своё мышление.

Сегодняшние тренажёры — это мощный заряд знаний по JavaScript. Мы начнём с азов программирования, разберёмся, как устроены структуры данных, и закрепим всё это на практике в задачах с браузером. Каждое задание — это ещё один шаг к тому, чтобы уверенно чувствовать себя в разработке интерактивных интерфейсов.

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

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

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

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

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

В программе:
37 заданий и 53 испытания. За их выполнение можно заработать 302 балла..

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

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

Мяу! Ну что, готовы к финальному рывку? Сегодня у нас день красоты — последний и самый стильный этап нашей недели! Этот день про эстетику, плавность и тот самый «вау-эффект», который заставляет интерфейсы сиять.

Сегодняшние задания станут яркой точкой вашей недели. Вы научитесь придавать интерфейсам не только функциональность, но и визуальную привлекательность. Трансформации, анимации и плавные переходы — всё, что делает код живым и выразительным.

В программе:
89 заданий и 3 испытания. За их выполнение можно заработать 104 балла.

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

Прямой эфир с ComonTECH: обучение под работодателя.

HTML Academy и ComonTECH запустили совместную программу, которая поможет вам вырасти с нуля до востребованного специалиста в команде компании. Обучение проходит в малых группах, а успешных выпускников приглашают в штат.

Приходите на лайв 10 декабря в 19:00, где мы расскажем о компании, программе обучения и ответим на все вопросы. Зарегистрируйтесь по ссылке — мы напомним о начале трансляции.

Ссылка

Подключайтесь уже через час к прямому эфиру с ComonTECH. Поговорим о компании, программе обучения и перспективах работы.

Эфир в YT | Рестрим в VK | Записаться