Этот репозиторий создан на основе статьи.
Я бы хотел, чтобы у каждого была возможность внести свой вклад в список — добавить полезные ссылки, дополнить описание или добавить новые разделы. Так мы сможем поддерживать список в актуальном состоянии.
- Английский язык
- HTML и CSS
- Графические редакторы
- Инструменты разработчика в браузере
- Emmet
- Семантика и доступность
- Правильное именование
- Responsive/adaptive верстка
- jQuery
- Подключение шрифтов
- Сборка спрайтов
- Оптимизация изображений
- Работа с SVG
- SVG-спрайты
- CSS-анимации и плавные переходы
- CSS-методологии
- CSS-фреймворки
- Верстка писем
- Командная строка
- Git
- CSS-препроцессоры
- Шаблонизаторы
- Автоматизация: таск-раннеры
- Тестирование верстки
Очень важно уметь читать и понимать по-английски, чтобы иметь доступ к актуальной информации. Лишь небольшой процент статей переводится на русский язык, а документация к плагинам и инструментам в основном представлена на английском.
Это не блокирующий навык, можно вполне успешно учиться и работать без него, но он является огромным плюсом.
- Codecademy [en]
- Learn to Code HTML & CSS [en]
- HTML Dog: HTML Tutorials [en]
- HTML Dog: CSS Tutorials [en]
- Intro to HTML/CSS: Making webpages [en]
- Dash [en]
- w3schools [en]
- Уроки по HTML и CSS (бывший htmlbook) [ru]
- Самоучитель HTML4 [ru]
- Самоучитель CSS [ru]
- Основы CSS/CSS3 [ru]
- HTML Academy [ru]
Самые популярные: Photoshop и Sketch.
В ~90% случаев Photoshop'а будет достаточно, дизайнеры только недавно начали переходить на Sketch.
Sketch вообще под Windows не работает, но есть почти-решение в лице zeplin
Необходимый минимум, чтобы начать работать:
- нарезка и экспорт графических элементов;
- работа со стилями слоя;
- информация о тексте (размер, шрифт, цвет, межстрочный интервал и тд.).
- The Ultimate Front-End Developer's Guide to Photoshop [en]
- A Web Developer’s Guide to Photoshop [en]
- Photoshop Extensions for Front-end Developers [en]
- Sketch vs. Photoshop: why & how I moved to Sketch 3 and am not going back [en]
- Photoshop для кодера [ru]
- Photoshop для HTML‑верстальщика [ru]
- Photoshop экшены для верстальщика [ru]
- Photoshop - пример нарезки макета для верстки [ru]
- Нарезка в Photoshop — New Layer Based Slice [ru]
- Экспорт слоев из Photoshop в один клик! [ru]
Это набор инструментов, помогающих быстро найти и исправить ошибку. Верстальщиками часто используется для поиска ответа на вопросы: “почему не отображается?”, “откуда такие размеры?”, “я же его перекрасил” и тд.
Умение пользоваться этими инструментами сохранит вам кучу времени и нервов.
- Chrome DevTools [en]
- Курс от codeschool [en]
- DevTools Tips [en]
- 15 Must-Know Chrome DevTools Tips and Tricks [en]
- Chrome DevTools, в помощь верстальщику [ru]
- Инструменты разработчика Firefox [ru]
Набор сниппетов для HTML и CSS, дающий супер-скорость.
Лучше 1 раз почитать документацию и сразу начать использовать.
- Let’s Talk about Semantics [en]
- HTML5 Semantics [en]
- Extending Semantics & Accessibility [en]
- Accessibility in HTML5 [en]
- WebAIM [en]
- A Look Into Proper HTML5 Semantics [en]
- Семантическая вёрстка. Часть первая [ru]
- Искусство семантики HTML, часть 1 [ru]
- Семантический HTML — рекомендация с большими выгодами [ru]
- Продвинутая семантика и доступность [ru]
- Подстраховка web-доступности семантических областей HTML5 через роли WAI-ARIA [ru]
Имена должны нести в себе смысл. Цель — сделать код хорошо читаемым и легко поддерживаемым.
У новичков часто можно встретить <b class="b">, <div class="div13>" и все в таком духе. Это неправильно.
Также нельзя использовать транслитерацию <div class="shapka">.
Общепринятый язык для именования — английский.
- Слова, часто используемые в CSS-классах [ru]
- How to name CSS classes [en]
- Naming CSS Stuff Is Really Hard [en]
- Thoughts on semantic HTML class names and maintainability [en]
- What Makes For a Semantic Class Name? [en]
- On class names, semantics and accessibility [en]
Больше половины трафика в интернете приходится на мобильные телефоны и сделать адаптивный сайт порой намного проще и быстрее, чем разработать отдельную версию под мобильные. Очень важно уметь делать этот вид работ, чтобы быть конкурентноспособным.
Большое преимущество — умение релизовывать поведение на мобильных устройствах без наличия макетов от дизайнера.
- Адаптивно-отзывчивый: разбираемся в терминологии
- Наглядно для заказчика: адаптивный и отзывчивый сайт — в чем разница
- Делать ли мобильную версию? 5 распространенных проблем, которые решает адаптивная верстка. Опыт Яндекса
- The Difference Between Responsive and Adaptive Design
- Responsive Web Design
- Beginner’s Guide to Responsive Web Design
- Creating a Mobile-First Responsive Web Design
Вы должны знать jquery хотя бы на начальном уровне, чтобы подключать и настраивать тонны плагинов, написанные за многие годы популярности этой библиотеки.
- Учебник “jQuery для начинающих”
- A guide to the basics of jQuery
- Learning Center
- Learning jQuery
- jQuery Tutorial for Beginners: Nothing But the Goods
- Загрузка своего шрифта
- Как подключить шрифт
- Подключение шрифта к странице: как нужно делать сейчас
- Using @font-face
- Web Font Anti-Patterns
- USING WEB FONTS THE BEST WAY
- WEB FONT ANTI-PATTERN: DATA URIS
- CRITICAL WEB FONTS
Спрайт — графический файл, в котором сгруппировано много изображений небольшого размера. Такая организация графики позволяет минимизировать количество запросов за сервер и ускорить загрузку сайта.
- Введение в CSS спрайты для чайников
- Верстка с использованием CSS спрайтов
- CSS Sprites: Image Slicing’s Kiss of Death
- CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
- The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
Во времена быстрого интернета легко забыть о том, что нужно оптимизировать изображения. Недавно я проверял работу начинающего разработчика и прогнал изображения через оптимизатор. Картинки похудели на 86% (16 мегабайт). Вдумайтесь.
Также важно уметь выбрать оптимальный формат графики (jpg, png, gif, svg).
- Использование SVG
- SVG
- SVG в HTML — из иллюстратора в браузер
- Я ♥ SVG
- Using SVG
- SVG ON THE WEB — A Practical Guide
- THE BEST WAY TO ADD AN SVG IMAGE TO YOUR WEBSITE
- Using SVGs
- SVG-спрайты
- Масштабируем CSS спрайты с SVG, убивая сразу трех зайцев
- SVG спрайты — 4 способа использования векторных спрайтов
- Icon System with SVG Sprites
- An Overview of SVG Sprite Creation Techniques
- SVG Sprites and Icon Systems Are Super
- Плавные переходы (transition)
- Css Animation
- Очень простое руководство по CSS3-анимациям
- CSS3 Transitions 101: What are Transitions?
- How to create CSS animations and Transitions
- CSS Animation 101
- Transitions & Animations
- Bradshaw: CSS Transitions
- Bradshaw: CSS Animation
- CSS Transitions and Transforms for Beginners
Сотни их: OOCSS, BEM, SMACSS и тд. Не обязательно все использовать, но вы должны иметь представление о лучших практиках css-архитектуры.
- БЭМ
- SMACSS
- An Introduction To Object Oriented CSS (OOCSS)
- Методологии верстки: БЭМ, AMCSS, OOCSS, Atomic CSS, OPOR, MCSS, SMACSS, FUN, DoCSSa
- CSS Naming Conventions: Fewer Rules, more Fun
- BEM 101
Я не рекомендую верстать на базе фреймворков, они предназначены, в первую очередь, для прототипирования. Их полезно изучать и понимать как реализованы компоненты.
Ад мира HTML-верстки. Привет из нулевых. Тут свои правила и до сих пор верстка таблицами. Звучит плохо, на деле еще хуже.
- Верстка email рассылок от А до Я для чайников
- How-to: Правила вёрстки email-писем
- Основы профессиональной верстки электронных писем
- How to Code HTML Email Newsletters
- Creating a Simple Responsive HTML Email
- Your First Responsive Email Build With Foundation for Emails
Необходимый инструмент для доступа к радостям жизни: препроцессорам, компиляции шаблонов, запуску таск-раннеров, 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
Плох тот разработчик, который не тестирует свою работу.