HTML Academy

2021-03-11 15:30:09 Какой сегодня праздник?
 
— Праздник голубых слонов.
— День пандемии коронавируса.
— Всемирный день водопровода. 
 
И ещё много других праздников, которые мы хотим отметить распродажей проектов. До 13 марта скидка до 40% на избранные проекты по вёрстке и JavaScript.  
 
Эти проекты полностью идентичны тем проектам и задачам, которые вы будете получать, работая в реальной веб-студии или отделе веб-разработки.
 
Успейте купить — https://tml.io/tj2kk Открыть/Комментировать

2021-03-10 18:40:05 Критерии хорошей анимации.

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

Попробуем разобраться, какие могут быть критерии оценки анимации на сайте.

Первое, на что стоит обратить внимание — производительность.
Анимация должна соответствовать тем требования производительности, которые изначально были поставлены. Если это сложный интерфейс, в основном используется CSS-анимация, чтобы не перегружать и без того тяжёлый сайт.

Здесь важно заметить, что бывают сайты, которые делаются ради анимации. Например, чтобы показать, как круто с помощью анимаций можно раскрыть тему. В этом случае одной CSS-анимацией не обойтись.

Хорошая скорость анимации для обычных сайтов без большого количества контента — 120 fps. Для загруженных может быть — 60 fps.

fps — количество сменяемых кадров за единицу времени.

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

Как музыка в фильме — если вы заметили её и отвлеклись от сцены, то, возможно, музыка была выбрана неподходящая или её громкость была неправильно отрегулирована.

Вот небольшой список вопросов для пересмотра анимации перед финальной сдачей:

— Производительность.
Замедляет ли анимация скорость загрузки сайта? Если да, оправдано ли это?

— Адаптивность.
Анимация выглядит, как было задумано, на всех устройствах?

— Необходимость анимации.
Нет ли лишних движений на сайте?
У каждой анимации есть цель и она выполняется?
Анимация не избыточна и не чрезмерно сложная?

— Общая информативность анимации.
Делает ли анимация понятнее блок, в котором находится?
Нет наложения или перекрытия важных частей? Анимация не перекрывает кнопки или формы так, что на них нельзя нажать или заполнить?

— Общий вид.
Анимация выглядит уместной и живой?
Скорость анимации выставлена верно?
Нет слишком быстрых движений или, наоборот, медленных?
Не создаётся ли на сайте ощущения медленной загрузки?
Анимация не перетягивает на себя внимание?

Что прочитать про анимацию:
12 основных принципов анимации от Disney — в интернете есть переводы статьи.

Если статьи мало и хочется глубже изучить анимацию в вебе, приходите на наш курс «Анимация для фронтендеров».

Курс проходит в асинхронном формате. Это означает, что вы можете начать обучение в любое время и учиться в собственном темпе. Открыть/Комментировать

2021-03-10 18:40:04 Открыть/Комментировать

2021-03-10 14:00:10 Сколько времени у вас уходит на вёрстку лендинга? А шапки?

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

В статье рассказываем как и какие тайм-трекеры можно использовать разработчику — https://tml.io/lopmv Открыть/Комментировать

2021-03-09 14:00:16 Как учиться самостоятельно и не сдаться на полпути — советы от руководителя направления цифровых продуктов в HTML Academy — Виталия Зюзина.


Читать Открыть/Комментировать

2021-03-05 17:00:16 Вспоминаем юность Кекса и готовимся к собеседованию.

Представляем:
Кекс в молодости решил устроиться в офис junior фронтенд-разработчиком. Он ещё не такой умудрённый жизнью кот, его ещё можно чем-то удивить. Разбираемся, что ему нужно сделать, чтобы подготовиться к собеседованиям.

Шаг 1. Вспомнить про портфолио.
Да, опыта коммерческой разработки у него ещё нет, но это не значит, что ему нечего показать. Протерев ноутбук от пыли, он идёт причёсывать свои учебные проекты, а может, даже верстает новый проект — иногда сделать что-то с 0 легче, чем исправить старое.

Шаг 2. Проверить резюме.
Иногда Кекс может поддаться стремлению немного приукрасить историю, кто из нас не без греха. Смотрим, какие ключевые навыки указаны, точно ли это соответствует описанию. Сможет ли Кекс ответить на вопросы по технологии, если его спросят.

Шаг 3. Подумать над ответами.
HTML, CSS, JS — понятно, что об этом спросят и что ответит Кекс. Но сможет ли он рассказать, как работать с Git, что знает о фреймворках. А об адаптивности, кроссбраузерности, кроссплатформенности? А где он будет через 5 лет? Без шуток, важно сформулировать свои карьерные планы заранее. Это нужно, чтобы на собеседовании показать себя мотивированным развиваться, интересным и привлекательным котом.

Шаг 4. Изучить компанию перед собеседованием.
Кекс хочет получить опыт от более опытных специалистов, а значит ему нужно искать компанию, где коллектив активно общается и готов делиться советами.

Ещё Кекс обязательно обратит внимание на последние проекты компании. Если он откроет работы и увидит, что там всё разваливается или нет БЭМа, например, он соберёт лапы, усы, хвост и хорошо подумает, а надо ли это ему. Ведь проблема может быть не в плохих разработчиках, а в неграмотном менеджменте. Возможно, разработчикам не выделяют необходимых ресурсов.

Шаг 5. Вспомнить, что каждое собеседование — опыт.
Кекс в целом не склонен к расстройствам. Поэтому даже если с первого собеседования устроиться не удастся, он просто вкусно покушает, подумает, что можно улучшить на следующем собеседовании и будет двигаться дальше. Чего и вам желает.

Когда вы в последний раз ходили на собеседование? Как всё прошло? Открыть/Комментировать

2021-03-05 17:00:16 Открыть/Комментировать

2021-03-05 12:25:02 Флексы vs Гриды.

В 2011 году верстальщики разделились на две категории: одни — за флексы, вторые — за гриды. И те, и другие пытаются обосновать свою позицию и убедить коллег в том, что правы именно они.

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

Читать Открыть/Комментировать

2021-03-04 17:00:18 Давным-давно почти все делали сайты и не переживали о том, что под капотом. Но мы же с вами не из их числа?

Семантическая вёрстка помогает сделать ваш сайт более доступным для людей с трудностями со зрением, а ещё поднять его выше в поисковой выдаче.

Разбираемся, как сделать семантически верный сайт и что для этого нужно — https://tml.io/fueor Открыть/Комментировать

2021-03-04 14:30:07 Уже пробовали наш тренажёр «Основы SVG»?

В тренажёр входит:
— 3 части,
— 35 заданий,
— 15 испытаний.

Разберём базовые примитивы: линии, прямоугольники, окружности. Изучим правила оформления и масштабирования SVG-фигур. Научимся работать с атрибутами viewBox и preserveAspectRatio.

Попробуйте прямо сейчас — https://tml.io/yajy5 Открыть/Комментировать