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.

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

Зачем PHP, смысл Vue.js и онлайн-собеседование джуна: мероприятия 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.

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

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

Стоит ли делать слайдеры на CSS

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

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

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

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

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