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

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

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

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

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

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

Псевдоэлементы — это абстрактные элементы документа. Псевдоэлементы не ограничены DOM-деревом, поэтому их можно использовать для выбора или стилизации части элемента, которые необязательно отображаются в DOM-дереве. Например, с помощью ::first-line можно выбрать первую строку текста. Неважно, какого она размера — при изменении ширины блока и переносе строки выбор первой строки будет происходить динамически.

Начнём с простого. Сколько двоеточий ставить — одно или два? В старой спецификации псевдоэлементы писали с одним (:), а в свежей — c двумя (::). Это даёт возможность визуально отличать псевдоклассы (:) от псевдоэлементов (::), даже не зная самих свойств.

Если увидите псевдоэлементы с одним (:), то смело меняйте на (::). А чтобы сохранить совместимость с IE8 и ниже используйте postcss плагин.

Можно ли управлять псевдоэлементами с помощью JavaScript? К сожалению, нет. Дело в том, что псевдоэлемент по-настоящему не находятся в DOM. Они всё же создаются в CSS. А то, что вы их видите в DevTools в Elements, это доработка производителей браузеров, чтобы разработчикам было удобнее взаимодействовать с псевдоэлементами. Поэтому все данные, которые вы хотите изменять с помощью JavaScript, помещайте в непосредственно разметку.

Важный момент — вы не можете добавить псевдоэлемент к <input>, <img>, <audio>, <video>, <canvas>, <embed>, <iframe>, <object>. Все перечисленные элементы относятся к категории embedded (замещаемых). Замещаемые элементы могут полностью заменить все отображение элемента, в том числе и их псевдоэлементы. Вот почему в замещаемых элементах не работают псевдоэлементы. Например, тег <img> в зависимости от загруженности картинки будет выглядеть абсолютно по-разному. С загруженным изображением он отобразится, а с незагруженным — покажется область с текстом из alt.

Подробнее о псевдоэлементах вы можете узнать с помощью главы «Селекторы» в наших тренажёрах: https://tml.io/7np54

Кошелёк или жизнь? Наш кот Кекс не отстаёт от трендов и тоже готовится к Хэллоуину. Он сменил привычный окрас и приготовил подарки для начинающих веб-разработчиков. Вместо конфет Кекс придумал кое-что поинтереснее: начиная с этой минуты действует скидка 6000 рублей на вечный доступ к тренажёрам! Акция продлится до 31 октября включительно.

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

Во время работы с коллекциями JavaScript можно столкнуться с поведением, которое покажется странным, если не знать один нюанс — они бывают живыми и неживыми.

Рассказываем, чем отличаются коллекции, и как их правильно использовать.

​Добрый вечер, коллеги! У нас кое-что изменилось на сайте. А теперь вопрос со звёздочкой. Что именно?

Продолжаем обновлять наши тренажёры. Добавили конспекты после каждой пройденной темы в курс «Продвинутый HTML и CSS». С их помощью вы сможете вернуться к теории в любой момент и закрепить полученные на практике знания.

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

​Если вы хотите стать профессиональным разработчиком, то вам поможет наш курс по профессии «Фронтенд-разработчик». Рассказываем, как устроено обучение, и сколько времени вам потребуется для устройства на первую работу.
⠀
Обучение профессии «Фронтенд-разработчик» занимает 6 месяцев. За это время студент осваивает курсы базовой верстки, курс адаптивной верстки и курс по JavaScript. У каждого студента есть личный наставник, вместе с которым он погружается в практику: по каждому из курсов студент выполняет и защищает от 1 до 2 проектов.
⠀
После обучения выпускник уже может работать младшим разработчиком. По окончании профессии также предусмотрена стажировка. Первый этап стажировки — акселерация. Здесь новичок получает учебный проект с настоящей командой, в которой есть проектный менеджер и тестировщик.
⠀
Затем выпускник попадает на трёхмесячную стажировку в наш фронтенд-аутсорс «Лига А.» и выполняет коммерческие проекты от реальных заказчиков. В каждой проектной команде новичков курирует наставник — он помогает найти ошибки и проводит код-ревью. Стажировка оплачивается и помогает получить первый реальный опыт.
⠀
По окончании стажировки у выпускника есть все необходимые навыки для полноценного трудоустройства.

​Напоминаем, что сегодня последний день, когда вы можете приобрести вечный доступ к тренажёрам со скидкой 6000 рублей.

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

​Запускаем спринт по вёрстке для школьников и студентов «Три недели верстальщика». Спринт рассчитан на новичков, у которых нет опыта в HTML и CSS.

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

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

​Осваивать новые технологии непросто: нужны мотивация, усидчивость и интерес к теме. С чего начать обучение, чтобы не потерять запал? Изучать документацию для новичка трудно, читать учебники — просто скучно. Но решение есть. Например, интерактивный тренажёр «Знакомство с HTML и CSS» разработан для тех, кто хочет попробовать технологию на практике и создавать простые странички.

Подготовили обзор тренажёра и рассказали об его особенностях.

С помощью веб-компонентов разработчики могут создавать собственные HTML-элементы.

Эта статья содержит подробное руководство о компонентах и рассказывает об их преимуществах.

​Давайте поговорим о приятном. Представим, что вы успешно закончили курс по профессии «Фронтенд-разработчик» и уже владеете всеми необходимыми навыками для устройства на первую работу. Возникают логичные вопросы — как найти работу, и что нужно делать для дальнейшего развития по профессии.
⠀
Есть несколько способов устроиться на работу.
📌 Остаться работать в компании, в которой проходили стажировку. Компании часто нанимают младших разработчиков, которые хорошо себя проявили.
📌 «Центр карьеры» HTML Academy — для выпускников профессиональных курсов.
📌 Разместить резюме на hh.ru и откликаться на вакансии.
⠀
А что дальше? На самом деле вариантов развития событий много.
📌 Можно начать работать на фрилансе, брать проекты и наращивать опыт самостоятельно.
📌 Устроиться в компанию на позицию джуниор-разработчика и выполнять типовые задачи. Получив нужный опыт, вы станете мидл-разработчиком, а после — сеньором или старшим разработчиком, который может решать самостоятельно архитектурные проблемы, курировать «мидлов» и «джунов». Каждая новая ступень означает более высокую зарплату и востребованность.
⠀
Другие возможные направления развития карьеры: освоить новый язык программирования, уйти в мобильную разработку, перейти в смежные профессии — стать тимлидом, scrum-мастером или перейти в продакт-менеджеры и управлять бизнес-процессами. Вариантов много, и точно спрогнозировать, какой именно вы выберете через полгода-год, невозможно. Но навыки, приобретенные за время обучения, сильно расширят профессиональные возможности в IT-сфере.
⠀
Помните, что многое зависит от вас. Учитесь не для сертификатов и оценок, а ради знаний и практических навыков. И самое главное — никогда не останавливайтесь на достигнутом.