Подготовка к работе в консоли

git

рас­пре­де­лен­ная сис­те­ма кон­тро­ля вер­сий

cmder

эму­ля­тор кон­со­ли для Windows

Python 2.7

не­об­хо­дим для уста­нов­ки не­ко­то­рых мо­ду­лей Node.js

Visual Studio Community

C++ из со­ста­ва не­об­хо­дим для уста­нов­ки не­ко­то­рых мо­ду­лей Node.js

Node.js

сре­да для вы­пол­не­ния JavaScript

npm

ме­нед­жер па­ке­тов для Node.js

Как ис­поль­зо­вать кон­соль в Windows

о на­строй­ке cmder (автор: Николай Громов)

Как ком­форт­но ра­бо­тать с GitHub в кон­со­ли Windows

SSH-url, SSH-ключ, passphrase (автор: Николай Громов)

Текстовые редакторы для верстки

Sublime Text 3

прос­той и мощ­ный за счет рас­ши­ре­ний

Brackets

текс­то­вый ре­дак­тор от ком­па­нии Adobe

Atom

текс­то­вый ре­дак­тор от ко­ман­ды GitHub

Notepad++

за­ме­на Notepad с под­держ­кой не­сколь­ких язы­ков (Windows)

Об­зор ре­дак­то­ров для вер­сталь­щи­ка

из бло­га HTML Academy

Луч­шие пла­ги­ны для Sublime Text

для уста­нов­ки с по­мощью Package Control

Package Control

ме­нед­жер па­ке­тов для Sublime Text 3

Colorsublime

те­мы оформ­ле­ния для Sublime Text 3

2 спо­со­ба пе­ре­но­са на­стро­ек Sublime Text

с по­мощью об­ла­ка, с по­мощью git. См. так­же на Хабре

Шпар­гал­ка нинд­зя

го­ря­чие кла­ви­ши в Sublime Text 3

Emmet Cheat Sheet

аб­бре­ви­а­ту­ры для быст­ро­го вво­да с по­мощью пла­ги­на Emmet

Браузеры

Firefox

и его рас­ши­ре­ния для раз­ра­бот­чи­ков

Chrome

и его рас­ши­ре­ния для раз­ра­бот­чи­ков

Opera

и ее рас­ши­ре­ния для раз­ра­бот­чи­ков

Safari

и его рас­ши­ре­ния для раз­ра­бот­чи­ков

Пакеты Grunt

Са­мые нуж­ные пла­ги­ны для Grunt

HTML, CSS, JavaScript, Unit те­с­ты, гра­фи­ка, ком­пи­ля­то­ры и др.

Grunt и Gulp

тас­ки для оп­ти­ми­за­ции про­из­во­ди­тель­нос­ти

grunt

The JavaScript Task Runner

grunt-cli

ин­тер­фейс ко­манд­ной стро­ки для Grunt

load-grunt-tasks

ав­то­ма­ти­чес­кая за­груз­ка за­дач Grunt, при­сут­ст­ву­ю­щих в package.json

time-grunt

вы­вод вре­ме­ни вы­пол­не­ния за­дач Grunt в кон­соль

CSS, HTML

grunt-postcss

CSS пост­про­цес­сор c под­клю­че­ни­ем пла­ги­нов (на­при­мер: autoprefixer, css-mqpacker)

grunt-contrib-less

ком­пи­ля­ция фай­лов пре­про­цес­со­ра LESS в CSS

grunt-csscomb

сор­ти­ров­ка свойств CSS се­лек­то­ра в опре­де­лен­ном по­ряд­ке

grunt-csso

ми­ни­фи­ка­ция CSS фай­лов

grunt-processhtml

об­ра­бот­ка HTML фай­лов при сбор­ке

Файловая система

grunt-contrib-clean

уда­ле­ние фай­лов и ди­рек­то­рий

grunt-contrib-concat

кон­ка­те­на­ция фай­лов

grunt-contrib-copy

ко­пи­ро­ва­ние фай­лов и ди­рек­то­рий

Графика

grunt-contrib-imagemin

ми­ни­фи­ка­ция изо­бра­же­ний

grunt-svgmin

ми­ни­фи­ка­ция SVG с по­мощью "SVG Optimizer"

grunt-svgstore

ге­не­ра­ция SVG спрай­тов

"Живой" локальный сервер

grunt-browser-sync

ло­каль­ный web-сер­вер с об­нов­ле­ни­ем стра­ни­цы в бра­у­зе­ре при из­ме­не­нии фай­лов

grunt-contrib-watch

от­сле­жи­ва­ние из­ме­не­ний в фай­лах и по­сле­ду­ю­щий за­пуск за­дач

Работа с удаленным сервером

grunt-scp

ко­пи­ро­ва­ние фай­лов на уда­лен­ный сер­вер

grunt-ssh

вы­пол­не­ние SSH и SFTP за­дач

grunt-gh-pages

от­прав­ка сбор­ки в вет­ку gh-pages на сер­ве­ре GitHub или ана­ло­гич­ные за­да­чи

Разное

grunt-contrib-uglify

ми­ни­фи­ка­ция скрип­тов JavaScript

grunt-typograf

об­ра­бот­ка текс­та ти­по­гра­фом

Онлайн инструменты

Dan's Tools

мно­го раз­ных по­лез­ных ин­ст­ру­мен­тов

Font Squirrel

ге­не­ра­тор веб-шриф­тов

Autoprefixer CSS

ге­не­ра­тор вен­дор­ных пре­фик­сов и инструкция к нему

Nu Html Checker

ва­ли­да­тор HTML

Fontello

ге­не­ра­тор ико­ноч­ных шриф­тов

Google Fonts

шриф­ты от Google: ска­чи­ва­ние и им­порт в CSS, он­лайн на­строй­ка

URL Decoder/Encoder

ко­ди­ро­ва­ние и де­ко­ди­ро­ва­ние web-ад­ре­сов

SVGOMG

GUI для "SVG Optimizer" (оп­ти­ми­за­ция SVG)

X-Icon Editor

гра­фи­чес­кий ре­дак­тор для со­зда­ния ико­нок

OnLine Hyphenator

сер­вис рас­ста­нов­ки "мяг­ких" пе­ре­но­сов

CSS Optimizer

ми­ни­фи­ка­тор для CSS

UglifyJS

ми­ни­фи­ка­тор для JavaScript

Can I use

опре­де­ле­ние воз­мож­нос­тей, ко­то­рые мож­но ис­поль­зо­вать в бра­у­зе­ре

CodePen, JSFiddle, CSSDesk

он­лайн-пе­соч­ни­цы

Emmet Re:view

рас­ши­ре­ние Chrome для тес­ти­ро­ва­ния адап­тив­ных сай­тов

WebPageTest

тес­ти­ро­ва­ние сай­тов на про­из­во­ди­тель­ность

PageSpeed Insights

тес­ти­ро­ва­ние сай­тов на про­из­во­ди­тель­ность

Скрипты, библиотеки, фреймворки

CSS Frontend Frameworks

спи­сок фрейм­вор­ков: об­зор, ссыл­ки, крос­с­б­ра­у­зер­ность, адап­тив­ность, под­держ­ка пре­про­цес­со­ров

jQuery

биб­лио­те­ка JavaScript, фо­ку­си­ру­ю­ща­я­ся на вза­и­мо­дейст­вии JavaScript и HTML

Normalize.css

"мяг­кая" аль­тер­на­ти­ва тра­ди­ци­он­но­му reset.css

Picturefill

по­ли­филл для под­держ­ки адап­тив­ной гра­фи­ки в ста­рых бра­у­зе­рах

GitHub Octicons

кол­лек­ция ико­нок от GitHub

Разное

FileZilla

FTP-кли­ент (а так­же сер­вер) для Windows и OS X

GIMP

бес­плат­ный гра­фи­чес­кий ре­дак­тор с от­кры­тым ис­ход­ным ко­дом

Avocode

ви­зу­аль­ный ре­дак­тор для верст­ки

Macaw

ви­зу­аль­ный ре­дак­тор для верст­ки

w3schools.com

HTML, CSS, JavaScript и мно­гое дру­гое

MDN: Веб-тех­но­ло­гии для раз­ра­бот­чи­ков

спра­воч­ни­ки от Mozilla Developer Network

WebReference.ru

спра­воч­ни­ки по HTML и CSS

CSS

Ин­лай­но­вый кон­текст фор­ма­ти­ро­ва­ния

кни­га о ви­зу­аль­ном фор­ма­ти­ро­ва­нии текс­та

Раскладка в CSS: FLOAT

ста­рая, но под­роб­ная статья про фло­аты

All About Floats

cтатья про фло­аты на ан­глий­ском

Борь­ба с про­бе­ла­ми меж­ду блоч­но-строч­ны­ми эле­мен­та­ми

из бло­га HTML Academy

Centering in CSS: A Complete Guide

со­ве­ты по вы­рав­ни­ва­нию эле­мен­тов (с при­ме­ра­ми)

Гра­ни­цы и от­сту­пы в по­то­ке

о про­бле­мах при рас­клад­ке (схло­пы­ва­ние, вы­ва­ли­ва­ние)

CSS-Guidelines

ос­нов­ные пра­ви­ла и прин­ци­пы на­пи­са­ния CSS

idiomatic-css

прин­ци­пы на­пи­са­ния од­но­род­но­го CSS-ко­да

Пол­ное ру­ко­водст­во по Flexbox

ста­тья на сай­те Frontender Magazine

Flexbox playground

ин­тер­ак­тив­ная де­мон­ст­ра­ция

Flexbox, те­перь по­нят­но

пре­зен­та­ция (Вадим Макеев, Opera Software)

What CSS to prefix?

пе­ре­чень CSS свойств тре­бу­ю­щих и нет пре­фик­со­ва­ния

JavaScript

Со­вре­мен­ный учеб­ник JavaScript

на­чи­ная с ос­нов, вклю­ча­ю­щий в се­бя мно­го тон­кос­тей и фи­шек JavaScript/DOM

Вы­ра­зи­тель­ный Javascript

автор: Marijn Haverbeke, перевод: Вячеслав Голованов

Улуч­ша­ем опыт вза­и­мо­дейст­вия с фор­ма­ми

автор: Алексей Симоненко

git

Pro Git

на­столь­ная кни­га о ра­бо­те с Git

GitHowTo

ин­тер­ак­тив­ный тур, ко­то­рый по­зна­ко­мит вас с ос­но­ва­ми

Как скле­ить ком­ми­ты и за­чем это нуж­но

из бло­га HTML Academy

Как оформ­лять ком­ми­ты, что­бы по­том не бы­ло боль­но

по ма­те­ри­а­лам кни­ги "Git For Humans"

first aid git

кол­лек­ция час­то за­да­ва­е­мых во­про­сов по git

Шпар­гал­ка по кон­соль­ным ко­ман­дам Git

автор: Николай Громов

Методологии

БЭМ

до­ку­мен­та­ция

БЭМ-методология

с че­го всё на­чи­на­лось и за­чем это всё нуж­но

Го­ло­во­кру­жи­тель­ное по­гру­же­ние в БЭМ

еще од­на статья по ос­но­вам ме­то­до­ло­гии

CSS-препроцессоры

Ор­га­ни­за­ция ко­да для CSS пре­про­цес­со­ров

ста­тья на сай­те Frontender Magazine

LESS

Language Features

LESS

пу­те­во­ди­тель для но­вич­ков

Автоматизация

Grunt

ру­ко­водст­во по ис­поль­зо­ва­нию для на­чи­на­ю­щих

Grunt

для тех, кто счи­та­ет шту­ки вро­де не­го стран­ны­ми и слож­ны­ми

Адаптивность

Ос­нов­ные прин­ци­пы "от­зыв­чи­во­го" веб-ди­зай­на

статья с при­ме­ра­ми на gif-ани­ма­ции

This Is Responsive

сбор­ник ре­сур­сов по адап­тив­нос­ти

Сказ о двух вью­пор­тах

увле­ка­тель­ное по­гру­же­ние во вью­порт от Пи­те­ра-По­ла Ко­ха в трёх час­тях

Вы­би­ра­ем ре­ше­ние для изо­бра­же­ний в от­зыв­чи­вом ди­зай­не

ста­тья на сай­те Frontender Magazine

От­зыв­чи­вые изо­бра­же­ния

при­ме­ры ис­поль­зо­ва­ния и до­ку­мен­ти­ро­ван­ные сни­пе­ты, что­бы вы мог­ли на­чать их ис­поль­зо­вать

SVG

SVG в вебе

прак­ти­чес­кое ру­ко­водст­во

Ещё один до­клад про SVG

автор: Анна Селезнёва

An Overview of SVG Sprite Creation Techniques

by Sara Soueidan

Tips for Creating and Exporting Better SVGs for the Web

by Sara Soueidan

Optimising SVGs for Web Use

by Andreas Larsen

Разное

Блог HTML Academy

те­ма­ти­чес­кие статьи Ака­де­мии, по­лез­ная рас­сыл­ка (в т.ч. ссыл­ки на ма­те­ри­а­лы со сто­рон­них ре­сур­сов)

Под­клю­че­ние не­стан­дарт­ных шриф­тов. Часть пер­вая

фор­ма­ты фай­лов, крос­с­б­ра­у­зер­ный @font-face, оп­ти­ми­за­ция, крос­с­до­мен­ность

Под­клю­че­ние не­стан­дарт­ных шриф­тов. Часть вто­рая

при­ме­не­ние font-weight\font-style

Progressive Enhancement, Graceful Degradation и еще одна статья

из бло­га HTML Academy

Прин­ци­пы ани­ма­ции для ве­ба

из бло­га HTML Academy

HTML Entity List

ко­ды сим­во­лов в HTML

keyCod.es

ко­ды кла­виш (на­при­мер, для ис­поль­зо­ва­ния в JavaScript)

Кодгайд: почему, зачем и как?

из бло­га HTML Academy, сам код­гайд Ака­де­мии и ссыл­ки на дру­гие код­гай­ды

Фотошоп для верстальщика

из бло­га HTML Academy