16 полезных атрибутов HTML, которые пригодятся всем

Не все HTML-теги такие самодостаточные, что их можно применять без всяких дополнений. Часто нужна дополнительная информация, чтобы тег был действительно полезным. Для этого разработчики используют атрибуты.

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

Конечно, есть ещё много полезных атрибутов. А узнать про атрибуты побольше и попробовать их в действии можно в бесплатном тренажёре «Основы HTML и CSS» от HTML Academy.

Подборка шпаргалок для начинающих веб-разработчиков

У нас в HTML Academy, кроме курсов и тренажёров, есть потрясающие инструкции по всему, что может понадобиться веб-разработчику. Ну, почти по всему.

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

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

Пиэмы, тимлиды, техлиды — как их вообще отличать? Пересказ подкаста

Во втором выпуске подкаста «Да как так-то?» Женя и Лёша поговорили с Дашей Владыко, которая работала тимлидом «Лиге А.», о том, кто занимается проектами, как наладить атмосферу в команде, и что нужно сделать, чтобы вырасти в тимлида. В статье главные моменты выпуска от первого лица.

Пока слушаете подкаст…
Ваш путь продолжается здесь. После регистрации будут доступны бесплатные тренажёры по веб-разработке — это отличное подспорье в будущем обучении.

5 книг по веб-разработке для начинающих

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

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

Хорошие книги — сила, но без практики никуда. Тренажёры по JavaScript дают навыки работы с живым кодом.

Шпаргалки про телеграм-бота

Бот — отличная тренировка для любого начинающего разработчика.

Во-первых, вы не просто трогаете JavaScript, но ещё и работаете с Node.js. Во-вторых, узнаёте, как работать с разными протоколами — например, с Телеграмом. Ну и наконец это просто полезно — можно сделать бота, который будет слать вам котиков по утрам.

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

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

P.S. Подборка заканчивается, а карьера только начинается. Попробуйте бесплатные тренажёры по веб-разработке и станьте профи.

Критерии качества вёрстки в 2021

За 6 лет с запуска профессиональных курсов HTML Academy в веб-разработке произошло много изменений: сначала пришли флексы, потом появились гриды, умер IE, все переехали из Фотошопа в Фигму, и много чего ещё. Каждое это изменение влияло на то, что должен уметь верстальщик, и какой должна быть хорошая вёрстка.

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

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

6 статей, чтобы написать свой первый сайт

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

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

P.S. Не знаете, какой код написать? Знакомство с веб-разработкой на интерактивных тренажёрах — бесплатно.

Бесплатный марафон по вёрстке для новичков

12 августа стартует бесплатный марафон по вёрстке «Заверстаю».

За четыре недели разберётесь в основах HTML и CSS, сверстаете свой первый макет и выложите его в интернет. Вас ждут увлекательные учебные материалы и онлайн-разбор домашних работ с наставниками!

Переходите по ссылке, чтобы узнать подробности и записаться на участие.

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

Цикл статей про базовые возможности Chrome DevTools

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

Вторая часть цикла статей про инструменты разработчика: Console, Sources, Network. Рассказ о том, как просмотреть список ресурсов на странице, понять, куда делись шрифты, и выяснить, почему страница так долго грузится.

Бонус — расскажем, как сделать скриншот всей страницы в Chrome без плагинов.

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

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

Когда: 4 августа 2021 в 13:00

На лайве расскажем о том, чем занимаются фронтенд-разработчики и что для этого нужно.

Также обсудим:

  • Кто может стать веб-разработчиком.
  • Насколько актуальна профессия фронтендера.
  • Что отличает востребованного специалиста от остальных.

Спикеры: Рома Ивойлов и Таня Власенко из HTML Academy.

Мероприятие будет доступно только в прямом эфире. Запись лайва сохранена не будет.

Запишитесь на лайв, чтобы не пропустить событие. Всем участникам подарим скидку на курсы и пришлём полезные материалы по теме.

Попробуйте тренажёры, пока ожидаете лайв. Знакомство с вёрсткой, JavaScript и PHP — бесплатно.

Графика для верстальщиков. 5 полезных статей

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

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

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

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

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

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

8 расширений VS Code для продуктивной работы

Редактор кода — часть вашего рабочего места и программа, в которой вы проводите больше всего времени во время работы (ну, не считая браузера со 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.

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

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.