Этот репозиторий создан на основе статьи.
Я бы хотел, чтобы у каждого была возможность внести свой вклад в список — добавить полезные ссылки, дополнить описание или добавить новые разделы. Так мы сможем поддерживать список в актуальном состоянии.
- Английский язык
- HTML и CSS
- Графические редакторы
- Инструменты разработчика в браузере
- Emmet
- Семантика и доступность
- Правильное именование
- Responsive/adaptive верстка
- jQuery
- Подключение шрифтов
- Сборка спрайтов
- Оптимизация изображений
- Работа с SVG
- SVG-спрайты
- CSS-анимации и плавные переходы
- CSS-методологии
- CSS-фреймворки
- Верстка писем
- Командная строка
- Git
- CSS-препроцессоры
- Шаблонизаторы
- Автоматизация: таск-раннеры
- Тестирование верстки
Очень важно уметь читать и понимать по-английски, чтобы иметь доступ к актуальной информации. Лишь небольшой процент статей переводится на русский язык, а документация к плагинам и инструментам в основном представлена на английском.
Это не блокирующий навык, можно вполне успешно учиться и работать без него, но он является огромным плюсом.
- Уроки по HTML и CSS (бывший htmlbook)
- Самоучитель HTML4
- Самоучитель CSS
- Основы CSS/CSS3
- HTML Academy
- Codecademy
Самые популярные: Photoshop и Sketch.
В ~90% случаев Photoshop'а будет достаточно, дизайнеры только недавно начали переходить на Sketch.
Sketch вообще под Windows не работает, но есть почти-решение в лице zeplin
Необходимый минимум, чтобы начать работать:
- нарезка и экспорт графических элементов;
- работа со стилями слоя;
- информация о тексте (размер, шрифт, цвет, межстрочный интервал и тд.).
- Photoshop для кодера
- Photoshop для HTML‑верстальщика
- Photoshop экшены для верстальщика
- Photoshop - пример нарезки макета для верстки
- Нарезка в Photoshop — New Layer Based Slice
- Экспорт слоев из Photoshop в один клик!
- The Ultimate Front-End Developer's Guide to Photoshop
- A Web Developer’s Guide to Photoshop
Это набор инструментов, помогающих быстро найти и исправить ошибку. Верстальщиками часто используется для поиска ответа на вопросы: “почему не отображается?”, “откуда такие размеры?”, “я же его перекрасил” и тд.
Умение пользоваться этими инструментами сохранит вам кучу времени и нервов.
- Chrome DevTools
- Курс от codeschool
- Chrome DevTools, в помощь верстальщику
- Инструменты разработчика Firefox
Набор сниппетов для HTML и CSS, дающий супер-скорость.
Лучше 1 раз почитать документацию и сразу начать использовать.
- Семантическая вёрстка. Часть первая
- Искусство семантики HTML, часть 1
- Семантический HTML — рекомендация с большими выгодами
- Продвинутая семантика и доступность
- Подстраховка web-доступности семантических областей HTML5 через роли WAI-ARIA
Имена должны нести в себе смысл. Цель — сделать код хорошо читаемым и легко поддерживаемым.
У новичков часто можно встретить <b class="b">
, <div class="div13>"
и все в таком духе. Это неправильно.
Также нельзя использовать транслитерацию <div class="shapka">
.
Общепринятый язык для именования — английский.
Больше половины трафика в интернете приходится на мобильные телефоны и сделать адаптивный сайт порой намного проще и быстрее, чем разработать отдельную версию под мобильные. Очень важно уметь делать этот вид работ, чтобы быть конкурентноспособным.
Большое преимущество — умение релизовывать поведение на мобильных устройствах без наличия макетов от дизайнера.
- Адаптивно-отзывчивый: разбираемся в терминологии
- Наглядно для заказчика: адаптивный и отзывчивый сайт — в чем разница
- Beginner’s Guide to Responsive Web Design
Вы должны знать jquery хотя бы на начальном уровне, чтобы подключать и настраивать тонны плагинов, написанные за многие годы популярности этой библиотеки.
Спрайт — графический файл, в котором сгруппировано много изображений небольшого размера. Такая организация графики позволяет минимизировать количество запросов за сервер и ускорить загрузку сайта.
- Введение в CSS спрайты для чайников
- Верстка с использованием CSS спрайтов
- CSS Sprites: Image Slicing’s Kiss of Death
- CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
Во времена быстрого интернета легко забыть о том, что нужно оптимизировать изображения. Недавно я проверял работу начинающего разработчика и прогнал изображения через оптимизатор. Картинки похудели на 86% (16 мегабайт). Вдумайтесь.
Также важно уметь выбрать оптимальный формат графики (jpg, png, gif, svg).
- SVG-спрайты
- Масштабируем CSS спрайты с SVG, убивая сразу трех зайцев
- SVG спрайты — 4 способа использования векторных спрайтов
Сотни их: OOCSS, BEM, SMACSS и тд. Не обязательно все использовать, но вы должны иметь представление о лучших практиках css-архитектуры.
- БЭМ
- SMACSS
- An Introduction To Object Oriented CSS (OOCSS)
- Методологии верстки: БЭМ, AMCSS, OOCSS, Atomic CSS, OPOR, MCSS, SMACSS, FUN, DoCSSa
Я не рекомендую верстать на базе фреймворков, они предназначены, в первую очередь, для прототипирования. Их полезно изучать и понимать как реализованы компоненты.
Ад мира HTML-верстки. Привет из нулевых. Тут свои правила и до сих пор верстка таблицами. Звучит плохо, на деле еще хуже.
- Верстка email рассылок от А до Я для чайников
- How-to: Правила вёрстки email-писем
- Основы профессиональной верстки электронных писем
Необходимый инструмент для доступа к радостям жизни: препроцессорам, компиляции шаблонов, запуску таск-раннеров, git и другим полезным вещам.
- Как перестать беспокоиться и полюбить консоль на Windows
- Командная строка (cmd) для веб-мастера
- Как комфортно работать с GitHub в консоли Windows
Популярная система для хранения истории изменений и синхронизации результатов работы между участниками в проекте.
- Git - для новичков - #1 - основы
- Github Tutorial
- Atlassian Git Tutorials
- Git How To
- Моя шпаргалка по работе с Git
- Шпаргалка по консольным командам Git
- Pro Git, второе издание
- Коллекция часто задаваемых вопросов по Git с возможностью поиска
- Learn Git in 30 Minutes
Препроцессоры ускоряют работу, упрощают жизнь и позволяют использовать много возможностей, которые еще не реализованы в браузерах.
Представьте у вас 10 страниц и на каждой надо внести изменения в один и тот же блок. Это больно и долго.
Одна из возможностей шаблонизаторов — выделять повторяющиеся блоки в отдельные файлы. Вынесли блок, подключили на нужны страницах и все — теперь вы делаете в 10 раз меньше работы.
Вся рутина должна быть автоматизирована. Примеры автоматизации — запуск препроцессоров и шаблонизаторов, оптимизация графики, сборка спрайтов, сжатие css и js.
- Gulp
- Скринкаст по Gulp
- Gulp for Beginners
- Getting started with gulp
- Продолжаем бороться с frontend-рутиной
- Grunt
- A Simple Guide to Getting Started With Grunt
Плох тот разработчик, который не тестирует свою работу.