[X] Помощник

[TimurR Topic Starter]

 

* * *

Ходить по воде и разрабатывать программы согласно ТЗ очень просто, если они заморожены. E. Berard

 

* * *

 

1. Редакторы кода

1.1 NotePad ++



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

Поддерживает подсветку синтаксиса множества языков, в том числе JS, CSS, HTML, PHP и т.д.

Официальный сайт: http://notepad-plus-plus.org/

1.2 Brackets


Один из самых удобных на мой взгляд редакторов кода, который имеет встроенный каталог плагинов. Редактор имеет открытый исходный код и распространяется бесплатно. 

Один из плюсов - это возможность верстки в режиме реального времени. Данный редактор также поддерживает очень полезный плагин Emmet, о котором я позже расскажу. 

Кстати, очень классная вещь, можно из html файла, задавать стили по ID или классу, при этом правила CSS записываются в подключенный файл CSS.

Официальный сайт: http://brackets.io/

1.3 Sublime Text 


Является также очень мощным редактором кода. Поддерживает множество тем (внешнего оформления), имеет подсветку синтаксиса множества языков.

Тем не менее, он имеет несколько недостатков, относительно предыдущего редактора. Sublime Text является платным программным обеспечением. Установка плагинов тут немного мудреней, нежели в Brackets и нет возможности из коробки в потоковом редактировании документа. 

Официальный сайт: http://www.sublimetext.com/

1.4 Koding


Довольно мощный и бесплатный облачный редактор кода, который может пригодиться пользователям операционных Google Chrome OS. 

Имел небольшой опыт работы с данным редактором. После регистрации предоставляет бесплатный настроенный домен 3-го уровня с установленной CMS (есть все популярные бесплатные CMS в т.ч. WordPress). Файлы CMS можно удобно редактировать и в режиме online разрабатывать темы и плагины.

Официальный сайт: https://koding.com/

1.5 Codepen


Облачный бесплатный сервис, где можно делиться наработками по фронтенду. Вставленный, HTML, CSS и JS код сразу интерпретируется в окошке. Поддерживаются CSS препроцессоры LESS, Stylus и SASS. Также есть поддержка HAML, Slim, Jade и Markdown.

Официальный сайт: http://codepen.io/


Сообщение отредактировал TimurR - 12.2.2015, 11:24

[TimurR Topic Starter]

2. Q&A 

Часто случается, что нужно решить сложную задачку и на форумах ответа можно не получить. На помощь могут прийти Q&A сайты, то есть сайты, где можно задавать вопросы. Для фронтендеров и вообще айтишников есть крутые Q&A сайты:

2.1 Toster

Русскоязычный сайт, те кто читает хабру, с ним вероятно, уже знаком. Можно задавать различный вопросы из сферы айти, в том числе и верстке.
Ссылка: https://toster.ru/

2.2 Stack Overflow 

Один из самых крупных подобных сайтов, он англоязычный, поэтому знание английского для правильной формулировки своих вопросов приветствуется. 
Ссылка: http://stackoverflow.com/

[TimurR Topic Starter]

3. Сервисы

3.1 Ultimate CSS Gradient Generator -данный сервис позволяет генерировать градиент. Один из самых удобных сервисов для этой цели. Множество настроек, поддержка IE 9.
Ссылка: http://www.colorzilla.com/gradient-editor/

3.2 CSS3 Gen

Это универсальный сервис, который позволяет генерировать градиент, бордеры, тени для текста, CSS кнопки, анимацию и множество всего. В общем сервис очень интересный.
Ссылка: http://css3gen.com/

3.3 CSS Border Radius Generator - простой и удобный генератор скругления углов. Генерирует кроссбраузерный код.
Ссылка: http://border-radius.com/

3.4 HTML Table Generator - иногда бывает, что нужно быстро сгенерировать простую HTML таблицу. Для этого можно воспользоваться этим сервисом. 
Ссылка: http://www.rapidtables.com/web/tools/html-...e-generator.htm

[TimurR Topic Starter]

4. CSS фреймворки

4.1 Twitter Bootstrap - нельзя оставить этого монстра без внимания. Действительно мощный инструмент для создания адаптивной сетки для сайта и UI. Для тех, кто считает его слишком громадным, то можно просто брать некоторые куски кода, которые вам нужны и все.
Ссылка: http://getbootstrap.com/2.3.2/

4.2 960 Grid system - из названия понятно, что максимальная ширина шаблона, который можно использовать на этом фреймворке 960px. Хотя на самом деле, можно сделать как угодно, но так повелось, что это некий стандарт, со времен мониторов c с разрешением 1024x768.  
Ссылка: http://960.gs/

4.3 Less Framework 4 - навороченный фреймворк, который имеет множество возможностей, в которые я еще не вдавался и пока ничего конкретно сказать не могу. Если есть интерес, то можете попробовать самим разобраться.
Ссылка: http://lessframework.com/

[Layer]

ого знал и пользуюсь только  NotePad ++ :mellow: 

[TimurR Topic Starter]

Редактором огромная куча, самых разнообразных. Плюс многие поддерживают различные плагины. В том числе и NotePad++ 

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.