Видеокурс "Настройка редактора SublimeText 3 - верстай с душой!"

Рубрика: Секреты верстки;
Метки:
Видеокурс "Настройка редактора SublimeText 3 - верстай с душой!"

Привет дорогие друзья. Ни для кого не секрет, что хороший инструмент для верстки сайтов - значительно повышает как ее качество, так и скорость работы. А инструмент, про который пойдет речь сегодня - замечательный редактор кода SublimeText 3 cool smile

Более года назад я случайно наткнулся на его. И знаете что: после первого же запуска этой программы я понял - вот это именно то, что мне нужно! С тех самых пор я ни разу ему "не изменил ему". И верстаю сайты только на редакторе SublimeText. Он понравился мне в первую очередь своим минимализмом и удобством. В делать в нем сайты - сплошное удовольствие! Поверьте мне smile

Тренинг по вёрстке сайта на HTML5 и CSS3

Но есть один недостаток - сначала этот редактор надо настроить под себя. Что бы он стал максимально удобен для верстки сайтов. Новичку в программе довольно трудно разобраться самому (это я утверждаю по своему опыту). Так как она на английском, имеет множество интересных фишек, и самое главное - дополняется за счет плагинов. Коих просто огромное количество - тысячи surprised

Согласитесь, разобраться во всем этом "буреломе" самому, не имея под носом пошагового руководства - довольно трудоемкая задача. Да здесь "черт ногу сломит" от такого разнообразия плюшек и дополнений! Поэтому, я решил записать пошаговый видеокурс, который так и называется:

Настройка редактора SublimeText 3

Верстай с душой!

Обложка видеокурса Настройка редактора SublimeText 3 - верстай с душой!


Обращаю внимание, что курс нацелен в первую очередь на настройку редактора для максимально удобной верстки сайтов. И рассчитан на новичков, так как начинаем мы в нем с "детского сайда", а именно - установки программы. И процессе - настроим ее и подключим много интересных плагинов, которые будут полезны именно верстальщикам.

В общем, весь свой опыт я выложил в уроках и залил их на YouTube в один плейлист:

Смотреть уроки

Показать список уроков

Показать материалы к курсу


Рекомендую пройти этот видеокурс своим ученикам. Так как очень скоро стартанет один интересный тренинг, и работать мы в нем будем именно на SublimeText 3!

PS: Если вы знаете интересные плагины, пишите в комментариях - запишу новые уроки с их разбором.

Комментариев: 88 RSS

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

Комментариев: 88
  •  Юрий Петрович | 4 апреля 2014 в 15:56:52

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

    А называются они так:

    Web Page Maker

    WYSIWYG Web Builder 9

    В этих конструкторах сайт можно создать за 5 минут. А создать сайт сможет даже ребёнок, который только научился писать и читать.

    На моей страничке есть видео ознакомительное и там же есть ссылка в описании на бесплатный виде-курс по программе, Web Page Maker

    WYSIWYG Web Builder 9, А в этой программе есть всё и CSS тоже и плагины и скрипты. Я создал 4 сайта с помощью этих программ.

    С уважением, Юрий Петрович.

    P.S кликните на мою аватарку и Вы перейдёте на мою страницу.

    •  Серёга | 4 апреля 2014 в 16:14:22
      Я посмотрел два видео

      Этим все сказано.

      для быстрой вёрстки сайтов есть замечательные русскоязычные редакторы ... эти конструкторы сайтов

      А редакторы где?

      Юрий Петрович. Так при чем здесь конструкторы сайтов и ровные руки? smile

    •  Владимир | 4 апреля 2014 в 20:52:35

      Жаль что на вашей странице нет места для вопросов, у меня общего характера. Не умею

      делать ничего конкретного не понимая его значения в общей задаче.

      •  Серёга | 5 апреля 2014 в 14:20:12

        Курс преднзначен для практиков, которые уже верстают. Если вы не занимаетесь этим - смотреть вам его еще рано. Надо изучить HTML 5 и CSS 3

    •  Георгий | 18 ноября 2015 в 17:12:12

      Жесть! Намучился я с такими сайтами на Web builder, нет я их не делал, но мне приходится иногда их редактировать, а так как этот тупой конструктор все строит в position:absolute, то без sublime например мне бы нужно было потратить несколько часов, чтобы только блоки переставить там или отредактировать. Никогда не пользуйтесь этим говном web builder. Ненавижу бывшего веб-мастера, который мне оставил 50 лендингов на этом конструкторе в наследство.

  •  Юрий Петрович | 4 апреля 2014 в 16:01:04

    А вот страница моего сайта:http://photocopilka.ru/COZDATCAIT.php созданная в программе WYSIWYG Web Builder 9

    •  Серёга | 4 апреля 2014 в 16:02:27

      Да вы еще и спамер :-( Ладно - давайте по теме:

      1. Во первых - курс для верстальщиков. А не людей который делают сайты на конструкторах.

      2. Конструктор и верстка совершенно разные вещи. И ни один конструктор не сможет сделать хороший сайт. Тем более - лучше, чем верстальщик.

      3. Конструктор оставляет много лишнего кода.

      4. Вы сильно ограничены конструтором. Не разбега для фантазии.

      4. У вас даже стили не вынесены - все склеено в один файл. Не гуд smile

      В общем - не хотел бы я себе иметь такой сайт как у вас.

    •  Alexxx119 | 5 сентября 2014 в 08:34:24

      Я посмотрел Ваш сайт http://photocopilka.ru/COZDATCAIT.php ну что сказать... Не впечатлят! Сайт простенький, верстка неадаптивная, область контента длинная и наполовину пустая при этом. Это уже прошлый век!

  •  VovaZ | 4 апреля 2014 в 16:15:43

    Серёга, свой сайт ты чем верстал? (Кроме рук и мозгов со знаниями)

  •  VovaZ | 4 апреля 2014 в 16:26:47

    Дада

    •  VovaZ | 4 апреля 2014 в 16:27:57

      И авторизация на сайте через вконтакт не работает у тебя..

      •  Серёга | 4 апреля 2014 в 16:57:03

        Этот шаблон я не помню уже на чем верстал. Да и от моего здесь только половина осталась. Я тремя программами до этого пользовался:

        1. PSPad вместе с TOPStyle

        2. Дрим.

        Авторизацию через вконтакте??? Так у меня ее и нет вроде smile

        Я вообще этот сайт уже хочу переделать и дизайн и верстку.

        •  VovaZ | 4 апреля 2014 в 17:35:20

          Диз хороший, приятный. Мне нравится.

          Если будешь переделывать, подгони этот диз мне)).

          ПС. Капча у тебя(на этом сайте) не рандомится.

          •  Серёга | 4 апреля 2014 в 20:01:58

            Это стандартная капча MaxSite. Пока у тебя кэш и айпи не поменялись - она тоже не изменится. Но вот у других пользователей уже будет другая.

            Если на сайте зарегистрирован - капчу вводить не надо.

            ПО поводу дизайна. Какие проблемы - предлагай варианты smile

  •  Татьяна | 4 апреля 2014 в 18:10:51

    Сереж, спасибо, изучим.

  •  Санек | 4 апреля 2014 в 19:02:15

    Если интерестно, есть руссификатор к Sublime Text 3. http://yadi.sk/d/YWoQ3VxHLoV5D Полностью русское меню. Еще есть плагин Color Highlighter. Определяет цвет.

    •  Серёга | 4 апреля 2014 в 20:03:55

      Саня - это русик от Димокса?

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

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

      За плагин спасибо - посмотрю.

  •  Санек | 4 апреля 2014 в 20:12:06

    Всегда пожалуйста. А на русском както привычнее. smile

    •  Серёга | 4 апреля 2014 в 20:13:18

      Привычнее только по началу. Потом наоборот smile

  •  Санек | 4 апреля 2014 в 20:12:40

    Руссик от Димокса.

  •  Олег | 4 апреля 2014 в 20:50:05

    Для Sublime Text 2 и Sublime Text 3 есть руссификаторы. ссылка http://yadi.sk/d/SM9btV9WLooaW

    С Sublime Text 2 работает отлично, с третьим еще не пробывал.

    •  Олег | 5 апреля 2014 в 01:10:27

      Дополнение

      на Sublime Text 3 работает .Будут вопросы пиши ol-deniska-64@yandex.ru

  •  Сергей | 4 апреля 2014 в 22:45:47

    Где взять код к 6-му уроку? Пожалуйста, поместите его хотя бы в комментариях...

    •  Серёга | 5 апреля 2014 в 01:07:13

      Сергей, код к 6 уроку я выложил в статье.

      Кликните на надпись: Показать материалы к курсу.

      После нажатия раскроются и ссылки и код, который я использовал в курсе.

  •  Сергей | 5 апреля 2014 в 00:22:01

    Конструкторы типа WYSIWYG Web Builder (и другие) - вообще ЗЛО! Хотите стать настоящим верстальщиком, пользуйтесь (изучайте)"блокноты" типа SublimeText, или Notepad++. Т.Е. ручками...

    Да, Серега, спасибо за уроки!

    •  Серёга | 5 апреля 2014 в 01:08:11

      Полностью поддерживаю. Базовый сайт еще получится сделать - не оптимизированный, с кучей ошибок и лишнего кода. А вот про нормальный адаптивный дизайн придется забыть. :(

      Пожалуйста.

  •  Гриша | 5 апреля 2014 в 10:30:13

    Почему у меня не работает плагин Emment. Написал в начале ( ! ) и нажал TAB и ничего ( много раз нажал таб...

    •  Гриша | 5 апреля 2014 в 10:42:14

      Я и перезагружал программу все равно и пробивал другие сокращение ничего

      •  Серёга | 5 апреля 2014 в 14:23:00

        Гриша привет. Скорее всего ты не проставил тип файла HTML. SublimeText изначально создает текстовый файл. В нем эммет не работает.

  •  Mikele | 5 апреля 2014 в 11:52:18

    Сережа, круто!

    Практически Adobe Dreamweaver! Ты вообще красава!!!

    Спасибо!

  •  Серёга | 5 апреля 2014 в 14:26:57

    Привет Миха. Да есть немного smile Рад что тебе понравилось.

  •  Игорь | 6 апреля 2014 в 09:58:07

    А все-таки notepad++ лучше!

  •  Елена | 11 апреля 2014 в 23:10:18

    Уроки прошла

    http://kentstar.myjino.ru/test/

  •  Асылан | 18 апреля 2014 в 19:42:12

    Cпасибо большое!

    Слышал раньше про ускоренную верстку, теперь буду применять.

    В твит добавил.

  •  Александр | 7 мая 2014 в 12:32:19

    Давно использую Sublime Text 3 в своей работе, кстати кому надо русифицированную версию программы https://cloud.mail.ru/public/d77e3625a29b/Sublime_Text_3059-x86+Rus+Crack.7z забирайте

  •  СергейТ | 22 мая 2014 в 17:13:38

    Приветствую Сергей. Есть вопрос по редактору "Sublime Text 3". При открытии редактора открываются и файлы работы в прошлый раз. Даже удаляя index and style.css Folders не удаляется. Как открыть редактор чистым?

    •  dignityinside | 10 июля 2014 в 00:42:37

      При завершении работы выберите File -> Close all Files.

      •  Серёга | 10 июля 2014 в 14:25:10

        Он наверное не это имел ввиду. А как убрать папки из сайдбара. Сергей я по моему ответил тебе на этот вопрос еще на канале YouTube

        •  Дмитрий | 6 октября 2015 в 11:32:56

          А не могли бы и тут ответить, а то вопрос у меня тоже такой возник)

          •  Ильнар | 27 февраля 2016 в 13:18:45

            1.Нажать правой кнопкой мыши на папку из сайдбара.

            2.Выбрать "Remove Folder from Project".

  •  dignityinside | 10 июля 2014 в 00:26:29

    Мне в этом редакторе не хватает поддержки ftp (есть платный плагин, но он как-то криво работает). Конечно можно filezilla использовать, но это как-то не True smile

    А так редактор супер, тоже его часто использую, в основном правда в небольших проектах. Для больших проектов использую IDE PhpStorm.

    Ты забыл ещё рассказать про замену в нескольких местах, то есть ставишь курсор в те места (зажимая Ctrl) где нужно изменить текст и одним разом всё меняешь (очень удобно).

    Видео курс прошел, почерпнул несколько интересных моментов, о которых не знал, спасибо.

  •  Серёга | 10 июля 2014 в 14:28:41
    Ты забыл ещё рассказать про замену в нескольких местах, то есть ставишь курсор в те места (зажимая Ctrl) где нужно изменить текст и одним разом всё меняешь (очень удобно).

    http://youtu.be/hU5M1hgrP_0 1:47 smile

    Спасибо за комменты и лайки!

  •  Серёга | 10 июля 2014 в 14:32:13
    Мне в этом редакторе не хватает поддержки ftp (есть платный плагин, но он как-то криво работает). Конечно можно filezilla использовать, но это как-то не True smile

    Скоро еще парочку редакторов рассмотрю. Есть 3 интересных варианта.

  •  Евгений | 24 июля 2014 в 05:05:31

    Помогите разобраться - открываю для редактирования файл html или php и у меня место русских букв кракозябры - не могу понять как сделать так что бы открывалось с нормальной кодировкой :-(

    Типа место ТЕГИ, пишеться - Òåãè

    Заранее спасибо grin

    •  Серёга | 26 июля 2014 в 16:13:50

      Обычно такая ситуевина возникает, когда файл открывается не в той кодировке.

      Попробуйте открыть файл с кракозяблами и затем выбарть пункт в редакторе:

      file -> reopen with encoding -> windows-1251

  •  Илхам | 15 августа 2014 в 00:38:13

    Хорошие уроки! Очень много полезной информации я для себя получил! Спасибо Сергей!

  •  Дмитрий | 17 августа 2014 в 01:08:10

    Очень режет слух название клавиши Ctrl - автор произносит как "Цетерел", это безграмотно, не плодите это в массы, называйте вещи своими именами - "кОнтрол".

    Хотя догадываюсь откуда это могло пойти, у меня в школе была учительница, она именно так нас и учила называтьsmile Но это неверно.

    •  Серёга | 20 августа 2014 в 10:22:56

      Да да, это старая школа smile Я иногда произншу правильно, но такие привычки очень тяжело победить.

  •  Николай | 10 октября 2014 в 19:10:13

    Предлагаю не ставить акцент на горячих клавишах, лучше показывать в какое меню зайти и на что нажать. Не все сидят на Windows, нужен путь из меню, горячие клавиши в том же меню можно самому посмотреть. Приходилось обращаться к Яше в некоторых моментах, например с вопросом как вызвать консоль. Правильного названия я не услышал, а горячие клавиши windows мне по барабану, на Mac OS сижу. Это была критика).

    Ну а вообще миникурс очень полезный. Перешел благодаря нему с Coda 2 на Sublime. Доволен безумно). А ведь я его и раньше видел, поставил, ничего не понял и удалил). Побольше таких полезных обзоров полезных программ!)

  •  Ольга | 28 октября 2014 в 21:58:17

    Помогите. у меня не получается установить плагины. Установка Package Control прошла нормально. Но при попытке установить другие плагины пишет: there are no packages available for installation

  •  Igor | 22 ноября 2014 в 13:29:18

    Прошу инструкцию как установить плагин вручную, в частность плагин Tag для Sublime Text 2.

    Спасибо.

  •  Виталий | 9 декабря 2014 в 12:52:51

    Помогите. Не получается подключить Package Control из 6 урока. Пишет zipfile.BadZipFile: File is not a zip file. В Preferences нет такой строки.

    •  Серёга | 9 декабря 2014 в 13:07:15

      У меня такое было, когда к редактору в пути были русские символы. И еще когда имя пользователя по русски. А не на латинице.

  •  Виталий | 9 декабря 2014 в 13:59:34

    Спасибо.

    Подскажите еще. "Ctrl ДУСТ пробел" Что такое ДУСТ?? Как включить подсказки? к уроку №2. Сначала были подсказки но теперь пропали((

    •  Серёга | 9 декабря 2014 в 14:04:25

      Ответил вам на ютубе smile Дикция хромает. Вот и получается такое... Сор. smile

  •  Мансур | 23 декабря 2014 в 13:14:36

    Как сделать так чтобы в font-family когда жмёшь :ctrl + пробел: выходил список шрифтов типа arial и другие, а то приходиться писать вручную?

  •  Nat | 25 декабря 2014 в 21:47:17

    Здравствуйте!

    С удовольствием посмотрела курс по ST3. Раньше работала в ST2, и все равно кое-что новое узнала, для новичков - самое то!

    У меня два вопроса по ходу изучения возникло:

    1. Есть для ST3 плагин для адаптивного дизайна (как в Brackets?)

    2. Если файлы сайта лежат на сервере (т.е. удаленно), можно к ним как-то подключиться и править из ST3?

    Было бы здорово послушать уроки по этим вопросам (или хотя бы ткните куда копать, плиз) smile

    •  Серёга | 5 января 2015 в 10:37:20

      Привет.

      1. Не видел такого.

      2. Там есть плагин FTP, но насколько я помню - он платный. Так что я его не использовал.

  •  Мансур | 5 января 2015 в 05:14:29

    Здравствуйте. Как сделать так чтобы в font-family когда жмёшь ctrl + пробел выходил список шрифтов типа arial и другие? а то приходиться писать вручную. Ели есть решение, ответьте пожалуйста.

    •  Серёга | 5 января 2015 в 10:38:27

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

      Как вариант, могу предложить - создайте свой сниппет. И туда внесите нужный шрифты.

  •  Мансур | 9 января 2015 в 13:31:23

    Спасибо.Ваши уроки очень помогают. Всё очень подробно, понятно.

  •  Александр | 19 июля 2015 в 15:30:01

    Спасибо за замечательный курс! Давно мечтал слезть с n++, но не знал на что) Хотелось что-то легкое, без лишнего визуального шума и стильное. Именно благодаря твоему курсу пересел на sublime. Тем более недавно пересел на linux, а там то n++ нет. Скопировал конфиги sublime и вуаля, все хоткеи и настройки как привык. Вроде все устраивает, но не могу уже давненько найти один плагин. Попробую своими словами описать что он делает - например у нас есть код <p>Текст</p> мы ставим курсор на слово - текст, а где-то внизу редактора пишется нечто подобное "div > p". Что-то наподобие как в девелоп тулзе в гугл хром.

    •  Александр | 19 июля 2015 в 15:33:45

      Дико извиняюсь Теги порезало, поэтому приложу пример http://jsfiddle.net/login2030/Lfsegc5w/

  •  Игорь | 8 сентября 2015 в 13:50:41

    Доброе время суток. Заинтересовал Ваш курс по верстке. Но оплатить не могу, так как

    "Ooops!.. Страницы с таким адресом не существует.

    Проверьте — возможно вы допустили ошибку при вводе. Или перейдите на главную страницу сайта."

  •  Игорь | 8 сентября 2015 в 13:51:39

    Доброе время суток. Заинтересовал Ваш курс по верстке. Но оплатить не могу, так как

    "Ooops!.. Страницы с таким адресом не существует.

    Проверьте — возможно вы допустили ошибку при вводе. Или перейдите на главную страницу сайта."

    P.S. Упсс, не в ту тему, извиняюсь.

  •  Dim | 7 ноября 2015 в 14:10:59

    Сергей, добрый день.Я только начинаю делать сайт первый раз.Ознакомился с HTML 5 и CSS 3, но практики не было. Хотел уточнить на данный момент Вы также советуете редактор кода SublimeText 3 или появилось что-то новое и лучшее?

  •  Мария | 12 ноября 2015 в 01:09:53

    У меня возникла проблема с установкой плагина. Выдает ошибку:

    Traceback (most recent call last):

    File "", line 1, in

    ImportError: No module named request

    Ссылка на скрин для наглядности: https://pp.vk.me/c628828/v628828904/20070/LEcRf6na3HU.jpg

    Как можно решить проблему? Заранее спасибо.

  •  Алексей | 10 декабря 2015 в 13:04:48

    Спасибо за уроки!

    Давно хотел перейти на ST3.

    Один только минус у этого редактора - не нашел плагина для поддержки по FTP,

    вот к примеру в phpDesigner оч.хорошо реализован данный момент.

    А для верстальщиков сами понимаете что редактирование кода "он-лайн" занимает достаточно большой % времени.

  •  Иван | 17 февраля 2016 в 11:28:27

    Подскажите пожалуйста.

    Плагин видно обновили, как теперь с ним работать?

    Установил в ST3 по видео скринhttp://savepic.ru/8698753.jpg

    Установил в Google плагин по ссылке, но он пишет вот чтоhttp://savepic.ru/8676225.jpg

    И еще установилась программа Emmet LiveStyle, но в ней пишет что плагин в ST3 не установленhttp://savepic.ru/8660865.jpg

    И ничего не работает))

    Что я не так делаю?

    •  WV | 27 октября 2016 в 23:16:45

      1. Не уверен, что Вам следует что-либо менять в настройках.

      2. Делаем так, как на видео, но c небольшим нюансом:

      После установки LiveStile смотрим в браузер -- если в браузере (в правом верхнем углу) иконка LiveStile серого цвета (если нет иконки в настройках браузера плагин включаем), то в sublimetext открываем css, далее кликаем по иконке LiveStile (выбираем name.css) и ползунок включить (enabled) в состояние on.

  •  Интересующаяся | 16 апреля 2016 в 14:59:39

    Подскажите пожалуйста, у меня в строке Package Control нет плагина Tag, когда я его набираю, не находит. как еще можно установить его? Спасибо

    •  WV | 27 октября 2016 в 22:48:07

      скачиваем c гит-хаба каталог: https://github.com/titoBouzout/Tag

      каталог tag сохраняем в папке Packages (внутри директории sublime): ../Data/Packages/

    •  Dron | 19 ноября 2016 в 07:37:11

      Вы решили эту проблему??? Я тоже с ней столкнулся

      •  БГ | 28 марта 2017 в 20:06:07

        Скачиваете с гит-хаба по ссылке выше zip файл. Его надо переименовать в "tag.sublime-package" и положить в папку "C:\Program Files\Sublime Text 3\Packages".

  •  Лариса | 3 ноября 2016 в 10:06:36

    Круто, за полчаса моя верстальщецкая жизнь изменилась!!!

    Только вот плагин Tag мой Package Control не нашел, какой есть аналог?

  •  Владимир | 20 ноября 2016 в 16:04:11

    По поводу того что редактор на английском, есть руссификатор http://dimox.name/sublime-text-russian-menu/ да и английский подучить тоже дело нужное, имхо!

  •  Nuri | 6 января 2017 в 06:07:04

    Здравствуйте, спасибо за ваши уроки.

    Когда я перехожу "посмотреть код"-"LiveStyle" выскакивает вот это ошибка:"Welcome to all-new Emmet LiveStyle!

    LiveStyle is finally reached v1.0. It no longer requires opened DevTools to work and its UI is moved to browser toolbar.

    Check out all exiting features, including LESS and SCSS support, at http://livestyle.io."

    Что делаю не так?

    И когда в редакторе меняю что-то, то не совсем меняет как в живом режиме.

  •  Евгений ЗЕН 42 | 15 января 2017 в 15:00:12

    Сергей, спасибо вам за курс. Усваивается гладко. В моем скачивании редактора нет запускающего файла Sublime Text.exe Возможно, что сегодня, в 2017, его состав уже не как у вас, в 2014. Все же я нашел запускающий файл просто под именем sublime и начал изучение.

    СПАСИБО !

    •  Dmitriy | 16 марта 2017 в 20:07:22

      Евгений, здравствуй незнаю решили ли вы вопрос с СабЛамом но я только что скачал его тут http://rainbowsky.ru/system/sublime-text/ и тут же русификатор для меню! Внимательно прочтите текстовый документ в архиве там четко указано куда скопировать файлы!

      Если поможет буду очень рад!

  •  Дмитрий | 14 марта 2017 в 20:00:20

    Здравствуйте, подскажите, а как саблайм текст3 подключить к плагину Emmet LiveStyle?