Изучаем Front-end с нуля

Сотни их: 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, часть 1
• Семантический HTML — рекомендация с большими выгодами
• Продвинутая семантика и доступность
• Подстраховка web-доступности семантических областей HTML5 через роли WAI-ARIA

Имена должны нести в себе смысл. Цель — сделать код хорошо читаемым и легко поддерживаемым.
У новичков часто можно встретить <b>, <div и все в таком духе. Это неправильно. Также нельзя использовать транслитерацию <div>.
Общепринятый язык для именования — английский.

• Слова, часто используемые в CSS-классах
• How to name CSS classes
• Naming CSS Stuff Is Really Hard
• Thoughts on semantic HTML class names and maintainability
• What Makes For a Semantic Class Name?
• On class names, semantics and accessibility

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

• Введение в 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

• Плавные переходы (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

Больше половины трафика в интернете приходится на мобильные телефоны и сделать адаптивный сайт порой намного проще и быстрее, чем разработать отдельную версию под мобильные. Очень важно уметь делать этот вид работ, чтобы быть конкурентноспособным.
Большое преимущество — умение релизовывать поведение на мобильных устройствах без наличия макетов от дизайнера.

• Адаптивно-отзывчивый: разбираемся в терминологии
• Наглядно для заказчика: адаптивный и отзывчивый сайт — в чем разница
• Делать ли мобильную версию? 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

Препроцессоры ускоряют работу, упрощают жизнь и позволяют использовать много возможностей, которые еще не реализованы в браузерах.

• Sass
• Stylus
• Less
• PostCSS + PreCSS (одна из связок)
• Как работать с CSS-препроцессорами и БЭМ

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

• Учебник “jQuery для начинающих”
• A guide to the basics of jQuery
• Learning Center
• Learning jQuery
• jQuery Tutorial for Beginners: Nothing But the Goods

Во времена быстрого интернета легко забыть о том, что нужно оптимизировать изображения. Недавно я проверял работу начинающего разработчика и прогнал изображения через оптимизатор. Картинки похудели на 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

Я не рекомендую верстать на базе фреймворков, они предназначены, в первую очередь, для прототипирования. Их полезно изучать и понимать как реализованы компоненты.

• Bootstrap
• Foundation
• Pure
• Skeleton

Необходимый инструмент для доступа к радостям жизни: препроцессорам, компиляции шаблонов, запуску таск-раннеров, 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 раз меньше работы.

• Pug (бывший Jade)
• HAML
• Twig
• Blade

Вся рутина должна быть автоматизирована. Примеры автоматизации — запуск препроцессоров и шаблонизаторов, оптимизация графики, сборка спрайтов, сжатие css и js.

• Gulp
• Скринкаст по Gulp
• Gulp for Beginners
• Getting started with gulp
• Продолжаем бороться с frontend-рутиной
• Grunt
• A Simple Guide to Getting Started With Grunt

Плох тот разработчик, который не тестирует свою работу.

• Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать
• Тестирование верстки
• Автоматизированное тестирование верстки веб-сайтов