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

Как работать в Figma
Figma — удобный графический редактор для верстальщиков и их друзей-дизайнеров. По ссылке — подробное руководство, как установить, осмотреться, что-нибудь сделать и не сбежать обратно в Фотошоп в первые пять минут.

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

Какие бывают картинки
Фотографии, картинки, схемы, графики, банеры нужны или для декора, или для иллюстрации. Разбираемся, что ставить, куда и в каких случаях.

Чем растровая графика отличается от векторной
Великая битва SVG против JPG, PNG и GIF не закончится примерно никогда. Всем важно знать основные этапы и отличия растра и вектора, чтобы через пару месяцев в компании друзей (как на фото выше) блеснуть этим знанием.

Как создать и анимировать SVG
Ещё одно руководство по созданию и анимации векторных иллюстраций. Обязательно к изучению для верстальщиков и вообще всех, кто во фронтенде.

Редактор кода — часть вашего рабочего места и программа, в которой вы проводите больше всего времени во время работы (ну, не считая браузера со StackOverflow). А рабочее место должно не мешать продуктивно работать. Сам по себе редактор — просто поле для ввода текста, он не умеет экономить время. Но расширения вполне помогают сделать работу проще и эффективнее.

Мы спросили у фронтенд-разработчиков, какими плагинами VS Code они пользуются для продуктивной работы, и делимся подборкой с вами.
Подробности в статье.

P.S. Редактор — не главное
Главное — делать хорошо. Подробнее об этом в интерактивных курсах. Знакомство с HTML, CSS и JavaScript — бесплатно.

Как создать сайт, не умея кодить? Как создать сайт в три клика? Нужно ли верстальщикам искать новую работу?

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

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

Старт уже 28 июня.

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

В чём суть: за неделю в игровой форме вы изучите основы HTML и CSS и сверстаете страницу с нуля (даже без дримвивера!). Мы дадим макет в Фигме, а вы сделаете из него страницу.

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

Чему вы научитесь на спринте:

• Узнаете, что такое HTML и CSS.
• Разберётесь, как работать с кодом на компьютере.
• Узнаете, какие есть теги и за что они отвечают.
• Поработаете с оформлением сайта-портфолио.
• Научитесь ставить ссылки и различать форматы изображений.
• Разберётесь в базовых понятиях CSS.
• Попробуете оформить тексты с помощью CSS.
• Узнаете, как опубликовать сайт в интернете.

Хотите больше подробностей? Приходите на лайв 24 июня в 13:00 по мск. Виталий Зюзин, руководитель отдела образовательного контента, в прямом эфире расскажет, как устроены тренажёры по веб-разработке, и как успешно завершить спринт и побороться за годовой доступ к тренажёрам.

Записаться на спринт, чтобы больше никогда не смочь смотреть на тильду.

Все они делают сайты. Но есть нюанс.

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

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

В статье разбираемся кто есть кто, чем занимается и какие навыки необходимы.

P.S. Статьи о веб-разработке , карьере в IT — раз в неделю в редакторской рассылке HTML Academy.

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

Пока в жару мерещатся отгулы и бухи пишут план на отпуска, мы сравниваем boolean и null’ы — в итоге беспросветная тоска. Отвлечься бы от варов, ивент лупов, махнуть на Бали или до Афин. Но за окном Торжок и Мариуполь, а значит, приходите на эфир.

Эфиров три — про пыху, вью и даже вживую собеседуем джуна. Последнему, конечно, будет страшно, ведь вы смотреть подключитесь туда.

Как стать PHP-разработчиком с нуля

Когда: 9 июня в 16:00

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

Записаться

Зачем веб-разработчику нужен Vue.js

Когда: 16 июня в 13:00.

Расскажем, зачем нужен Vue.js для фронтенд-разработчиков, в чём его преимущества и недостатки. Обсудим особенности и сферу применения фреймворка.

На эти и многие другие вопросы ответит Михаил Устенко — соавтор курса по Vue.js и Senior Fullstack Developer at Sennder GmbH.

Кому точно пригодится: всем, кто уже выучил JavaScript (ну или почти), много работает с кодом и посматривает в сторону разных фреймворков.

Записаться

Онлайн-собеседование джуна-фронтендера

Когда: 30 июня в 14:00.

Вместе с карьерным сервисом Эйч проведём публичное собеседование выпускника Академии на позицию «джуниор фронтенд-разработчик».

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

Записаться

P.S. А если вы только начинаете свой путь в веб-разработке, то познакомьтесь на бесплатных тренажёрах с базовыми технологиями веб-разработки: HTML, CSS, JavaScript и PHP.

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

В статье разбираемся, как верстать под Pixel Perfect и что может пойти не так.

Материалы о фронтенде, вёрстке и карьере в IT — раз в неделю в редакторской рассылке HTML Academy.

Коротко: нет. Развернуто: scroll-snap не панацея, JavaScript — сила.

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

В статье разберёмся, как стоит их делать.

P.S. Делать ли слайдеры на CSS — неглупый вопрос.
Мы научим сразу делать правильно — попробуйте бесплатные тренажёры по HTML и CSS и научитесь всему на практике.

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

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