Веб-разработчик должен не просто сверстать сайт по образцу, а сделать это близко к согласованному макету. Чтобы сайт как можно точнее совпадал с утвержденным дизайном, веб-разработчики придерживаются концепции Pixel Perfect.
В статье разбираемся, как верстать под Pixel Perfect и что может пойти не так.
Материалы о фронтенде, вёрстке и карьере в IT — раз в неделю в редакторской рассылке HTML Academy.
Коротко: нет. Развернуто: scroll-snap не панацея, JavaScript — сила.
Слайдер — блок на странице, в пределах которого пользователю показывают контент с определённой периодичностью. Например, когда на сайте вам показывают друг за другом несколько баннеров с акциями.
В статье разберёмся, как стоит их делать.
P.S. Делать ли слайдеры на CSS — неглупый вопрос.
Мы научим сразу делать правильно — попробуйте бесплатные тренажёры по HTML и CSS и научитесь всему на практике.
По словам службы поддержки хостинга, сайт htmlbook.ru подвергся DDOS-атаке, из-за чего некоторое время не работал. Сейчас работа сайта полностью восстановлена и предприняты меры, чтобы злоумышленники не смогли повторить свои действия.
Добавил новое руководство по тёмному режиму. Это перевод статьи автора Мохамеда Адхухама. Если интересует, как сделать тёмную тему и переключать со светлой темы на тёмную, читать обязательно.
Песочницы — это изолированное пространство, онлайн-редакторы кода. Их особенность в том, что вы можете сверстать страницу или написать программу и сразу же увидеть результат работы.
В статье рассказали про 5 самых популярный песочниц для веб-разработчиков.
P.S. Попробуйте песочницу со встроенной теорией. Мы так называем бесплатные тренажёры — они помогут понять, что вам больше всего нравится в веб-разработке.
Когда: 13 мая в 13:00.
Позовём в гости эксперта, которого вы давно ждали. Обсудим с ним, о чём забывают фронтенд-разработчики, и как можно улучшить свой код. Ответим на главный вопрос — можно ли добиться идеального кода, и зачем это нужно.
Когда: 19 мая в 16:00.
Сделаем разбор тестового задания студии Валерия Комягина на позицию «джуниор фронтенд-разработчик», дадим советы по его выполнению. Обсудим, какие хард и софт скиллы важны для устройства на работу.
Когда: 25 мая в 19:00.
Сравним специфику работы в продуктовой компании, диджитал агентстве и на фрилансе, обсудим, что лучше для джуна. Рассмотрим, какой порог входа для новичков, какие преимущества и недостатки у разных форматов работы.
P.S. А если вы только начинаете свой путь в разработке, то познакомьтесь на бесплатных тренажёрах с базовыми технологиями веб-разработки: HTML, CSS, JavaScript и PHP.
С последнего сражения город изменился и теперь столица мира тёмного интернета называется Тайпскрипт.
Вас ждут 1500 заданий и упражнений по веб-разработке, битвы с другими игроками и боссами города. Обучаясь и сражаясь, заработайте на чипы, дающие скидку на тренажёры и курсы HTML Academy или главную награду — 100% бесплатное обучение на курсе «HTML и CSS. Профессиональная вёрстка сайтов».
После регистрации система определит вас в банду. На странице банды есть ссылку на чат в Телеграме. Чтобы присоединиться к банде, переходи по ссылке и зови друзей.
30 апреля в 00:01 по московскому времени начнётся основное событие HTMLPUNK — осада Тайпскрипта.
ЭТО ДРУГОЙ МИР. ЭТО HTMLPUNK.
P.s. Что может пойти не так, когда, вообще-то, занимаешься обучением веб-разработке, но пытаешься сделать игру?
А пошло примерно всё (разве что, в отличие от настоящего CYBERPUNK 2077, релиз не перенесли). И перед тем, как начать второй сезон (хотфикс, если хотите), мы решили этим поделиться на Хабре, чтобы вы не повторяли наших ошибок.
Представьте, что вы верстальщик (если вы уже джаваскриптер, то промотайте). Вот перед вами макет, а там какая-то штука, куда надо бы жмакнуть, но выглядит как-то непонятно.
Внешне элементы бывают похожи, но их функции различаются, браузер реагирует на них по-разному.
Неправильный выбор может привести к ошибкам в работе веб-страницы. Чтобы стало понятнее, написали инструкцию, как отличить ссылки и кнопки на макетах.
В статье Кекс объяснит, что лучше использовать: ссылки или кнопки.
P.S. Ссылки и кнопки есть на каждом сайте. Поэтому лучше сразу научиться делать сайты. Попробуйте бесплатные тренажёры HTML Academy, а там дальше как пойдёт.
В HTML Academy вышел новый выпуск подкаста о веб-разработке, где гостем стала Даша Владыко, тимлид в «Лиге А.».Ребята обсудили зачем нужны менеджеры проектов, тимлиды, кто защищает разработчиков от заказчиков и многое другое.
Ведущие: Лёша Симоненко — директор по развитию в Академии, и Женя Шкляр, редактор.
Послушать подкаст можно на всех известных площадках, выбирайте по ссылке.
Вдохновились подкастом и решили попробовать себя в разработке? Разберитесь в основах программирования с HTML Academy — тренажёр «Знакомство с HTML, CSS, JavaScript и PHP» бесплатно.
Когда: 14 апреля в 19:00
Выпускник профессиональных курсов Стас Новиков расскажет про свой путь во фронтенд-разработку. Поделится, как прошло обучение на профессиональных курсах, и раскроет секрет достижения мечты — поменять жизнь и стать крутым веб-разработчиком. Лайв пройдёт в нашем Инстаграме.
Когда: 21 апреля в 13:00.
Устроим настоящие дебаты и разберёмся, кто круче — JavaScript-программисты или фронтенд-разработчики. Узнаем, в чём отличие профессий и насколько они актуальны.
Когда: 29 апреля в 13:00.
Обсудим, как составить и оформить хорошее и привлекательное резюме веб-разработчика. Проведём разбор трёх резюме соискателей и подробно расскажем о заполнении каждого из разделов.
P.S. А если вы только начинаете свой путь в разработке, то познакомитесь на бесплатных тренажёрах с базовыми технологиями веб-разработки: HTML, CSS, JavaScript и PHP.
Профессиональная разработка на JavaScript — тот этап в карьере, когда разработчик знает достаточно много и уже умеет пользоваться большим количеством технологий.
React ещё немного увеличивает список необходимых знаний, но при этом позволяет перейти на новый карьерный уровень и зарабатывать гораздо больше.
И для чего вообще может пригодиться React подробнее читайте в блоге HTML Academy.
Разберитесь в основах программирования с HTML Academy — «Знакомство с HTML, CSS, JavaScript и PHP» бесплатно.
В работе сайта произошли некоторые, на первый взгляд, незаметные изменения. Во-первых, движок сайта обновился до Drupal 9. Да-да, был Drupal 7 и сразу стал 9. Это повлекло за собой обновление и других компонент: PHP, Memcached, MySQL и др. Во-вторых, сайт переехал на другой хостинг, поскольку возможностей предыдущего стало уже не хватать. Спасибо компании IT Patrol, что приютила на несколько лет htmlbook, всё это время сайт прекрасно работал на их площадке.
Теперь сайт переехал на timeweb, использует VPS и за счёт этого должен загружаться и отображаться быстрее. Если же возникнут какие-то проблемы с работой, дайте мне знать на почту vlad@htmlbook.ru.
В 2011 году верстальщики разделились на две категории: одни — за флексы, вторые — за гриды. И те, и другие пытаются обосновать свою позицию и убедить коллег в том, что правы именно они.
Масло в огонь подливает то, что гридами и флексами можно решать одни и те же задачи. В статье рассказываем, когда использовать флексы, а когда гриды.
Ещё больше материалов о фронтенде, вёрстке и карьере в IT — еженедельно в редакторской рассылке HTML Academy.
А для всех тех, кто только начинает осваивать веб-разработку, тренажер “Знакомство с HTML, CSS, JavaScript и PHP” — бесплатно.
За последние несколько недель у нас, в HTML Academy, вышло много всего, потому что нас, в отличие от Твиттера, никто не замедлял. Спешим поделиться!
«Я никогда не научусь верстать» и другие мифы о разработке
Написали на Хабр о том, чего не стоит бояться, если вы хотите попробовать себя в программировании. Получился целый трактат об ошибках молодости и необходимости постоянно развиваться.
Что нужно уметь React-разработчику
И для чего вообще может пригодиться React.
Все научились программировать. А дальше-то что?
Резонный вопрос, который интересует всех новичков. В статье предлагаем несколько вариантов развития событий. Забирайте идеи и врывайтесь в мир разработки.
Тестовое задание для фронтендера
Вместе с «Лигой А.» рассказали, что должен сделать верстальщик в тестовом задании, чтобы всем понравиться — как верстать, как оформлять код и сборку. Если сейчас проходите курсы по вёрстке, добавьте статью в закладки, она пригодится при поиске работы.
Как менялся веб
Всё очень просто: он менялся от вёрстки таблицами до миллиона непонятных слов, одно из которых Babel, а другое монады. Статья вышла на tproger, но история от этого не становится менее интересной.
P.S. А еще можно начать с тренажёров. На практике и бесплатно познакомитесь с базовыми технологиями веб-разработки: HTML, CSS, JavaScript и PHP.
Если вы попробовали проходить тренажёры (кстати, первые 8 глав бесплатные), поняли, что вам интересно кодить и у вас уже что-то получается, пора двигаться дальше.
Теперь перед вами открылся дикий и огромный мир фронтенда, в котором есть языки разметки и программирования, много инструментов и программ.
И первое, что нужно понять: полностью всё это изучить невозможно. Сама веб-платформа, разные библиотеки и фреймворки развиваются, стареют, забываются, перерождаются во что-то новое. Поэтому «выучить» фронтенд раз и навсегда не получится. Придётся всё время держать себя в тонусе и следить за обновлениями.
Что нужно учитывать, как организовать обучение, и при этом, не сдаться на полпути, не покупая никакие курсы. — советы от руководителя направления цифровых продуктов в HTML Academy — Виталия Зюзина.
Подробности читайте в блоге HTML Academy.
Материалы о фронтенде, вёрстке и карьере в IT — раз в неделю в редакторской рассылке HTML Academy.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.