Выпустили навык «Вёрстка карточных элементов интерфейса»

Что научимся делать:
Список карточек и карточки товаров — очень распространённый интерфейсный паттерн. Он применяется в интернет-магазинах, лендингах и даже простых текстовых сайтах. Верстальщику при реализации таких элементов нужно учитывать неочевидные с первого взгляда вещи: переполнение контентом и замену графики при наполнении интерфейса из CMS, управление контролами карточек с клавиатуры, интеграцию с JavaScript.

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

Что входит в комплект:
— Методика
— 4 кейса лёгкого уровня
— 3 кейса среднего уровня
— 3 кейса сложного уровня
— Дополнительная теория

Кейсы полного комплекта сейчас находятся в разработке и будут доступны через некоторое время.

Подробнее здесь

Лайв 10 февраля «Что ждать от тестового задания фронтенд-разработчика» в 13:00

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

Рассмотрим реальные примеры тестовых заданий и подскажем, чему стоит уделить особое внимание.

Разобраться с темой поможет ведущий — Алексей Симоненко, директор по развитию HTML Academy с опытом в веб-разработке более 20 лет.

Записаться на лайв — https://tml.io/4h1v2

Стартует курс «React. Разработка сложных клиентских приложений»

На курсе научимся использовать React для создания современных фронтенд–приложений.

Вас ждут:

Лайвы с преподавателем
Лайвы проходят по понедельникам и четвергам с 19:00 до 21:00 по московскому времени. Запись доступна на следующий день.

Практика
После лайва вы выполняете домашнее задание, в котором работаете над своим проектом и закрепляете учебный материал.

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

Проекты
Учебный проект будет общим для всех, над ним вы будете работать вместе с преподавателем на лайвах. Это будет музыкальная онлайн-игра со встроенным аудиоплеером.

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

«Что посмотреть» — онлайн-кинотеатр нового поколения с возможностью выбирать фильмы по жанру, изучать их подробное описание и просматривать список похожих кинокартин.

Оплатить можно целиком или в рассрочку. Курс продлится с 1 февраля по 4 апреля.

Записаться

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

Читать 👇
https://tml.io/c5sob

Спросили наших наставников, почему они решили наставничать, зачем им этот опыт. Вот, что они нам рассказали 👇

Алексей Петров

Решил стать наставником, чтобы держать свои навыки в «подогретом» состоянии. Работая постоянно в одном и том же проекте, постепенно утрачиваешь кругозор, замыкаешься на одних и тех же технологиях. Вопросы студентов позволяют освежить в памяти базовые вещи, принимать архитектурные решения осознанно, а не делать по привычке. В процессе код-ревью решений студентов, при поиске информации для обоснования своих комментариев, нашёл и для себя кое-что новое.

Сергей Зубов

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

Мария Чернова

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

Дмитрий Мирошниченко

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

Выпустили новую главу «Микросетки».

Глава входит в тренажёр «Погружение в HTML и CSS». Вас ждёт 17 заданий и 2 испытания.

Узнаем, что такое микросетки и как тестировать вёрстку. Разберём, когда лучше использовать гриды, флексы, блочные и строчные боксы. Сверстаем блок навигации и список карточек.

Переходите по ссылке, чтобы начать обучение — https://tml.io/sjbhh

Собрали отзывы выпускников пятого потока курса «React. Разработка сложных клиентских приложений».

«...Этот курс для меня стал своеобразным активатором. На нём в единый мощный инструмент собрались полученные знания всех предыдущих интенсивов — это дало возможность без особых трудностей писать сложные интерактивные приложения...»

Прочитать остальные отзывы можно здесь 👇

https://telegra.ph/Otzyvy-vypusknikov-pyatogo-potoka-kursa-React-Razrabotka-slozhnyh-klientskih-prilozhenij-02-03

Префикс — можно перевести как «приставка».

Если посмотреть на стили какого-нибудь сайта, можно столкнуться со свойствами, содержащими впереди непонятные слова: -webkit, -moz, -ms.

Эти слова являются префиксами следующих браузеров:

-webkit-: браузеры Chrome, Safari, Opera;
-moz-: браузер Mozilla Firefox;
-ms-: браузер Internet Explorer.

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

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

Префиксы могут быть как у свойств, так и у значений:

display: -ms-grid;
display: grid;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Упоминание префикса говорит о том, в каком браузерном движке оно будет применено: webkit, gecko(-moz), trident(-ms).

Для правильного применения свойств с префиксами сначала нужно указать свойство с префиксом, а после без префикса:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Всё дело в том, что браузер применяет свойства сверху вниз. Если браузер понимает свойство с префиксом и без, то применится, то последнее в списке.

Не занимайтесь добавлением префиксов вручную. Для этого есть онлайн-сервис или есть пакеты для автоматизации: для gulp и webpack.
Укажите в настройках браузеры, которые поддерживаются в вашем проекте с помощью Browserlist. В этом случае будут подставляться только нужные префиксы, а не все возможные.

#неглупые_вопросы

В этой статье разбираемся, как ставить пустые ссылки.

Есть несколько способов указывать пустые ссылки. Рассмотрим, чем грозит использование того или иного способа.

https://tml.io/plyoh

Вы вбили запрос в адресной строке и нажали Enter, что дальше?

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

Публикация основана на переводе репозитория «What happens when…» Филлипа Джеймса.

https://tml.io/xe2e1

Рассказываем про навык «Экспорт параметров и графики из Figma».

Зачем нужен:
Многие дизайнеры сейчас используют именно Figma для работы над проектами, поэтому верстальщику важно уметь работать с этим редактором. Верстальщик получает макет и самостоятельно открывает его в браузере или же в графическом редакторе, извлекает информацию и графику, полученные параметры прописывает в HTML и CSS. Без этого умения готовую вёрстку просто не сделать.

Что входит в полный комплект:
— Методика.
— 2 кейса лёгкого уровня.
— 2 кейса среднего уровня.
— 2 кейса сложного уровня.
— Дополнительная теория.

Подробнее здесь — https://tml.io/kyx4k

История нашего выпускника Сергея Шершнёва.

Несколько лет назад Сергей бросил работу маркетолога и ушёл в веб-разработку. Пройдя курсы HTML Academy и набравшись опыта, он понял, что теперь сам готов преподавать. Сегодня Сергей наставничает на шести курсах HTML Academy и получает от студентов самые высокие оценки.

Прочитать полностью

В США сегодня празднуется день «Смейся и богатей», а у нас стартует розыгрыш навыков.

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

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

Подписаться на рассылку и принять участие в розыгрыше

Отзыв выпускника курса «HTML и CSS. Адаптивная вёрстка и автоматизация» #21 Артура Ткаченко.

В целом, очень достойный курс. Но полному новичку необходимо всё же сначала пройти курс «Профессиональная вёрстка», или хотя бы иметь какой-то опыт вёрстки; чтобы такие слова как «флексбокс», «сетки», «векторная графика» и многие другие не были для него чем-то новым, иначе будет сложновато. Этот курс рассчитан, скажем так, уже на подготовленного бойца.

Читать полностью 👇

https://telegra.ph/Otzyv-vypusknika-kursa-HTML-i-CSS-Adaptivnaya-vyorstka-i-avtomatizaciya-21-Artura-Tkachenko-02-09

Как подключить и оптимизировать нестандартные шрифты?

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

Но даже с нестандартными шрифтами можно избежать большинства проблем, если уделить внимание оптимизации.

Подробнее об этом в статье 👇
https://tml.io/3swlh

Где новичку набраться опыта, рассказываем про Акселератор.

При поиске работы шансы получить хорошую должность увеличиваются, если у вас есть опыт. Работодатель охотнее возьмёт того, кто не только знает теорию, но и уже выполнял реальные задачи. Поэтому при обучении студентов HTML Academy отводит особую роль практике, ведь нам важно подготовить людей к реальной разработке по максимуму. Так, освоение профессий «Фронтенд-разработчик» и «React-разработчик» делится на два этапа: обучение и производство.

Подробнее в статье