Видеокурс "Настройка редактора SublimeText 3 - верстай с душой!"
Привет дорогие друзья. Ни для кого не секрет, что хороший инструмент для верстки сайтов - значительно повышает как ее качество, так и скорость работы. А инструмент, про который пойдет речь сегодня - замечательный редактор кода SublimeText 3
Более года назад я случайно наткнулся на его. И знаете что: после первого же запуска этой программы я понял - вот это именно то, что мне нужно! С тех самых пор я ни разу ему "не изменил ему". И верстаю сайты только на редакторе SublimeText. Он понравился мне в первую очередь своим минимализмом и удобством. В делать в нем сайты - сплошное удовольствие! Поверьте мне
Но есть один недостаток - сначала этот редактор надо настроить под себя. Что бы он стал максимально удобен для верстки сайтов. Новичку в программе довольно трудно разобраться самому (это я утверждаю по своему опыту). Так как она на английском, имеет множество интересных фишек, и самое главное - дополняется за счет плагинов. Коих просто огромное количество - тысячи
Согласитесь, разобраться во всем этом "буреломе" самому, не имея под носом пошагового руководства - довольно трудоемкая задача. Да здесь "черт ногу сломит" от такого разнообразия плюшек и дополнений! Поэтому, я решил записать пошаговый видеокурс, который так и называется:
Настройка редактора SublimeText 3
Верстай с душой!
Обращаю внимание, что курс нацелен в первую очередь на настройку редактора для максимально удобной верстки сайтов. И рассчитан на новичков, так как начинаем мы в нем с "детского сайда", а именно - установки программы. И процессе - настроим ее и подключим много интересных плагинов, которые будут полезны именно верстальщикам.
В общем, весь свой опыт я выложил в уроках и залил их на YouTube в один плейлист:
Рекомендую пройти этот видеокурс своим ученикам. Так как очень скоро стартанет один интересный тренинг, и работать мы в нем будем именно на SublimeText 3!
PS: Если вы знаете интересные плагины, пишите в комментариях - запишу новые уроки с их разбором.
Я посмотрел два видео и хочу заметить, что редактор на английском языке, потом он годится только для программистов, а для тех кто не знает язык программирования этот редактор не нужен. для быстрой вёрстки сайтов есть замечательные русскоязычные редакторы в которых все эти коды писать не нужно, так как за Вас всё сделают эти конструкторы сайтов.
А называются они так:
Web Page Maker
WYSIWYG Web Builder 9
В этих конструкторах сайт можно создать за 5 минут. А создать сайт сможет даже ребёнок, который только научился писать и читать.
На моей страничке есть видео ознакомительное и там же есть ссылка в описании на бесплатный виде-курс по программе, Web Page Maker
WYSIWYG Web Builder 9, А в этой программе есть всё и CSS тоже и плагины и скрипты. Я создал 4 сайта с помощью этих программ.
С уважением, Юрий Петрович.
P.S кликните на мою аватарку и Вы перейдёте на мою страницу.
Этим все сказано.
А редакторы где?
Юрий Петрович. Так при чем здесь конструкторы сайтов и ровные руки?
Жаль что на вашей странице нет места для вопросов, у меня общего характера. Не умею
делать ничего конкретного не понимая его значения в общей задаче.
Курс преднзначен для практиков, которые уже верстают. Если вы не занимаетесь этим - смотреть вам его еще рано. Надо изучить HTML 5 и CSS 3
Жесть! Намучился я с такими сайтами на Web builder, нет я их не делал, но мне приходится иногда их редактировать, а так как этот тупой конструктор все строит в position:absolute, то без sublime например мне бы нужно было потратить несколько часов, чтобы только блоки переставить там или отредактировать. Никогда не пользуйтесь этим говном web builder. Ненавижу бывшего веб-мастера, который мне оставил 50 лендингов на этом конструкторе в наследство.
А вот страница моего сайта:https://photocopilka.ru/COZDATCAIT.php созданная в программе WYSIWYG Web Builder 9
Да вы еще и спамер :-( Ладно - давайте по теме:
1. Во первых - курс для верстальщиков. А не людей который делают сайты на конструкторах.
2. Конструктор и верстка совершенно разные вещи. И ни один конструктор не сможет сделать хороший сайт. Тем более - лучше, чем верстальщик.
3. Конструктор оставляет много лишнего кода.
4. Вы сильно ограничены конструтором. Не разбега для фантазии.
4. У вас даже стили не вынесены - все склеено в один файл. Не гуд
В общем - не хотел бы я себе иметь такой сайт как у вас.
Я посмотрел Ваш сайт https://photocopilka.ru/COZDATCAIT.php ну что сказать... Не впечатлят! Сайт простенький, верстка неадаптивная, область контента длинная и наполовину пустая при этом. Это уже прошлый век!
Серёга, свой сайт ты чем верстал? (Кроме рук и мозгов со знаниями)
Привет. Этот?
Дада
И авторизация на сайте через вконтакт не работает у тебя..
Этот шаблон я не помню уже на чем верстал. Да и от моего здесь только половина осталась. Я тремя программами до этого пользовался:
1. PSPad вместе с TOPStyle
2. Дрим.
Авторизацию через вконтакте??? Так у меня ее и нет вроде
Я вообще этот сайт уже хочу переделать и дизайн и верстку.
Диз хороший, приятный. Мне нравится.
Если будешь переделывать, подгони этот диз мне)).
ПС. Капча у тебя(на этом сайте) не рандомится.
Это стандартная капча MaxSite. Пока у тебя кэш и айпи не поменялись - она тоже не изменится. Но вот у других пользователей уже будет другая.
Если на сайте зарегистрирован - капчу вводить не надо.
ПО поводу дизайна. Какие проблемы - предлагай варианты
Сереж, спасибо, изучим.
Пожалуйста Татьяна.
Если интерестно, есть руссификатор к Sublime Text 3. https://yadi.sk/d/YWoQ3VxHLoV5D Полностью русское меню. Еще есть плагин Color Highlighter. Определяет цвет.
Саня - это русик от Димокса?
Да я про него знал. Но я считаю, если крутишься в этой теме - лучше работать на английском. Сначала жутко не удобно, за то как привыкнешь - русского и не хочется.
Все самые продвинутые знания, как обычно - у буржуев. Поэтому - английский только на пользу.
За плагин спасибо - посмотрю.
Всегда пожалуйста. А на русском както привычнее.
Привычнее только по началу. Потом наоборот
Руссик от Димокса.
Для Sublime Text 2 и Sublime Text 3 есть руссификаторы. ссылка https://yadi.sk/d/SM9btV9WLooaW
С Sublime Text 2 работает отлично, с третьим еще не пробывал.
Дополнение
на Sublime Text 3 работает .Будут вопросы пиши [email protected]
Где взять код к 6-му уроку? Пожалуйста, поместите его хотя бы в комментариях...
Сергей, код к 6 уроку я выложил в статье.
Кликните на надпись: Показать материалы к курсу.
После нажатия раскроются и ссылки и код, который я использовал в курсе.
Конструкторы типа WYSIWYG Web Builder (и другие) - вообще ЗЛО! Хотите стать настоящим верстальщиком, пользуйтесь (изучайте)"блокноты" типа SublimeText, или Notepad++. Т.Е. ручками...
Да, Серега, спасибо за уроки!
Полностью поддерживаю. Базовый сайт еще получится сделать - не оптимизированный, с кучей ошибок и лишнего кода. А вот про нормальный адаптивный дизайн придется забыть. :(
Пожалуйста.
Почему у меня не работает плагин Emment. Написал в начале ( ! ) и нажал TAB и ничего ( много раз нажал таб...
Я и перезагружал программу все равно и пробивал другие сокращение ничего
Гриша привет. Скорее всего ты не проставил тип файла HTML. SublimeText изначально создает текстовый файл. В нем эммет не работает.
Сережа, круто!
Практически Adobe Dreamweaver! Ты вообще красава!!!
Спасибо!
Привет Миха. Да есть немного Рад что тебе понравилось.
А все-таки notepad++ лучше!
И не в тему. А тренинг, что ты готовишь по MaxSite?
Нет
ммм.... чем??
Уроки прошла
https://kentstar.myjino.ru/test/
Cпасибо большое!
Слышал раньше про ускоренную верстку, теперь буду применять.
В твит добавил.
Давно использую Sublime Text 3 в своей работе, кстати кому надо русифицированную версию программы https://cloud.mail.ru/public/d77e3625a29b/Sublime_Text_3059-x86+Rus+Crack.7z забирайте
Приветствую Сергей. Есть вопрос по редактору "Sublime Text 3". При открытии редактора открываются и файлы работы в прошлый раз. Даже удаляя index and style.css Folders не удаляется. Как открыть редактор чистым?
При завершении работы выберите File -> Close all Files.
Он наверное не это имел ввиду. А как убрать папки из сайдбара. Сергей я по моему ответил тебе на этот вопрос еще на канале YouTube
А не могли бы и тут ответить, а то вопрос у меня тоже такой возник)
1.Нажать правой кнопкой мыши на папку из сайдбара.
2.Выбрать "Remove Folder from Project".
Мне в этом редакторе не хватает поддержки ftp (есть платный плагин, но он как-то криво работает). Конечно можно filezilla использовать, но это как-то не True
А так редактор супер, тоже его часто использую, в основном правда в небольших проектах. Для больших проектов использую IDE PhpStorm.
Ты забыл ещё рассказать про замену в нескольких местах, то есть ставишь курсор в те места (зажимая Ctrl) где нужно изменить текст и одним разом всё меняешь (очень удобно).
Видео курс прошел, почерпнул несколько интересных моментов, о которых не знал, спасибо.
https://youtu.be/hU5M1hgrP_0 1:47
Спасибо за комменты и лайки!
а точно сказал...
Скоро еще парочку редакторов рассмотрю. Есть 3 интересных варианта.
Попробуй PHPStorm.
Помогите разобраться - открываю для редактирования файл html или php и у меня место русских букв кракозябры - не могу понять как сделать так что бы открывалось с нормальной кодировкой :-(
Типа место ТЕГИ, пишеться - Òåãè
Заранее спасибо
Обычно такая ситуевина возникает, когда файл открывается не в той кодировке.
Попробуйте открыть файл с кракозяблами и затем выбарть пункт в редакторе:
file -> reopen with encoding -> windows-1251
Хорошие уроки! Очень много полезной информации я для себя получил! Спасибо Сергей!
Спасибо!
Очень режет слух название клавиши Ctrl - автор произносит как "Цетерел", это безграмотно, не плодите это в массы, называйте вещи своими именами - "кОнтрол".
Хотя догадываюсь откуда это могло пойти, у меня в школе была учительница, она именно так нас и учила называть Но это неверно.
Да да, это старая школа Я иногда произншу правильно, но такие привычки очень тяжело победить.
Предлагаю не ставить акцент на горячих клавишах, лучше показывать в какое меню зайти и на что нажать. Не все сидят на Windows, нужен путь из меню, горячие клавиши в том же меню можно самому посмотреть. Приходилось обращаться к Яше в некоторых моментах, например с вопросом как вызвать консоль. Правильного названия я не услышал, а горячие клавиши windows мне по барабану, на Mac OS сижу. Это была критика).
Ну а вообще миникурс очень полезный. Перешел благодаря нему с Coda 2 на Sublime. Доволен безумно). А ведь я его и раньше видел, поставил, ничего не понял и удалил). Побольше таких полезных обзоров полезных программ!)
Помогите. у меня не получается установить плагины. Установка Package Control прошла нормально. Но при попытке установить другие плагины пишет: there are no packages available for installation
Прошу инструкцию как установить плагин вручную, в частность плагин Tag для Sublime Text 2.
Спасибо.
Помогите. Не получается подключить Package Control из 6 урока. Пишет zipfile.BadZipFile: File is not a zip file. В Preferences нет такой строки.
У меня такое было, когда к редактору в пути были русские символы. И еще когда имя пользователя по русски. А не на латинице.
Спасибо.
Подскажите еще. "Ctrl ДУСТ пробел" Что такое ДУСТ?? Как включить подсказки? к уроку №2. Сначала были подсказки но теперь пропали((
Ответил вам на ютубе Дикция хромает. Вот и получается такое... Сор.
Как сделать так чтобы в font-family когда жмёшь :ctrl + пробел: выходил список шрифтов типа arial и другие, а то приходиться писать вручную?
Здравствуйте!
С удовольствием посмотрела курс по ST3. Раньше работала в ST2, и все равно кое-что новое узнала, для новичков - самое то!
У меня два вопроса по ходу изучения возникло:
1. Есть для ST3 плагин для адаптивного дизайна (как в Brackets?)
2. Если файлы сайта лежат на сервере (т.е. удаленно), можно к ним как-то подключиться и править из ST3?
Было бы здорово послушать уроки по этим вопросам (или хотя бы ткните куда копать, плиз)
Привет.
1. Не видел такого.
2. Там есть плагин FTP, но насколько я помню - он платный. Так что я его не использовал.
Здравствуйте. Как сделать так чтобы в font-family когда жмёшь ctrl + пробел выходил список шрифтов типа arial и другие? а то приходиться писать вручную. Ели есть решение, ответьте пожалуйста.
Привет, я с этим особо проблем никогда не испытывал. Всегда знаю какой шрифт буду использовать и какие есть аналогичные.
Как вариант, могу предложить - создайте свой сниппет. И туда внесите нужный шрифты.
Спасибо.Ваши уроки очень помогают. Всё очень подробно, понятно.
Спасибо за замечательный курс! Давно мечтал слезть с n++, но не знал на что) Хотелось что-то легкое, без лишнего визуального шума и стильное. Именно благодаря твоему курсу пересел на sublime. Тем более недавно пересел на linux, а там то n++ нет. Скопировал конфиги sublime и вуаля, все хоткеи и настройки как привык. Вроде все устраивает, но не могу уже давненько найти один плагин. Попробую своими словами описать что он делает - например у нас есть код <p>Текст</p> мы ставим курсор на слово - текст, а где-то внизу редактора пишется нечто подобное "div > p". Что-то наподобие как в девелоп тулзе в гугл хром.
Дико извиняюсь Теги порезало, поэтому приложу пример https://jsfiddle.net/login2030/Lfsegc5w/
Доброе время суток. Заинтересовал Ваш курс по верстке. Но оплатить не могу, так как
"Ooops!.. Страницы с таким адресом не существует.
Проверьте — возможно вы допустили ошибку при вводе. Или перейдите на главную страницу сайта."
Доброе время суток. Заинтересовал Ваш курс по верстке. Но оплатить не могу, так как
"Ooops!.. Страницы с таким адресом не существует.
Проверьте — возможно вы допустили ошибку при вводе. Или перейдите на главную страницу сайта."
P.S. Упсс, не в ту тему, извиняюсь.
Сергей, добрый день.Я только начинаю делать сайт первый раз.Ознакомился с HTML 5 и CSS 3, но практики не было. Хотел уточнить на данный момент Вы также советуете редактор кода SublimeText 3 или появилось что-то новое и лучшее?
У меня возникла проблема с установкой плагина. Выдает ошибку:
Traceback (most recent call last):
File "", line 1, in
ImportError: No module named request
Ссылка на скрин для наглядности: https://pp.vk.me/c628828/v628828904/20070/LEcRf6na3HU.jpg
Как можно решить проблему? Заранее спасибо.
Спасибо за уроки!
Давно хотел перейти на ST3.
Один только минус у этого редактора - не нашел плагина для поддержки по FTP,
вот к примеру в phpDesigner оч.хорошо реализован данный момент.
А для верстальщиков сами понимаете что редактирование кода "он-лайн" занимает достаточно большой % времени.
Подскажите пожалуйста.
Плагин видно обновили, как теперь с ним работать?
Установил в ST3 по видео скринhttps://savepic.ru/8698753.jpg
Установил в Google плагин по ссылке, но он пишет вот чтоhttps://savepic.ru/8676225.jpg
И еще установилась программа Emmet LiveStyle, но в ней пишет что плагин в ST3 не установленhttps://savepic.ru/8660865.jpg
И ничего не работает))
Что я не так делаю?
1. Не уверен, что Вам следует что-либо менять в настройках.
2. Делаем так, как на видео, но c небольшим нюансом:
После установки LiveStile смотрим в браузер -- если в браузере (в правом верхнем углу) иконка LiveStile серого цвета (если нет иконки в настройках браузера плагин включаем), то в sublimetext открываем css, далее кликаем по иконке LiveStile (выбираем name.css) и ползунок включить (enabled) в состояние on.
Подскажите пожалуйста, у меня в строке Package Control нет плагина Tag, когда я его набираю, не находит. как еще можно установить его? Спасибо
скачиваем c гит-хаба каталог: https://github.com/titoBouzout/Tag
каталог tag сохраняем в папке Packages (внутри директории sublime): ../Data/Packages/
Вы решили эту проблему??? Я тоже с ней столкнулся
Скачиваете с гит-хаба по ссылке выше zip файл. Его надо переименовать в "tag.sublime-package" и положить в папку "C:\Program Files\Sublime Text 3\Packages".
Круто, за полчаса моя верстальщецкая жизнь изменилась!!!
Только вот плагин Tag мой Package Control не нашел, какой есть аналог?
По поводу того что редактор на английском, есть руссификатор https://dimox.name/sublime-text-russian-menu/ да и английский подучить тоже дело нужное, имхо!
Здравствуйте, спасибо за ваши уроки.
Когда я перехожу "посмотреть код"-"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 https://livestyle.io."
Что делаю не так?
И когда в редакторе меняю что-то, то не совсем меняет как в живом режиме.
Сергей, спасибо вам за курс. Усваивается гладко. В моем скачивании редактора нет запускающего файла Sublime Text.exe Возможно, что сегодня, в 2017, его состав уже не как у вас, в 2014. Все же я нашел запускающий файл просто под именем sublime и начал изучение.
СПАСИБО !
Евгений, здравствуй незнаю решили ли вы вопрос с СабЛамом но я только что скачал его тут https://rainbowsky.ru/system/sublime-text/ и тут же русификатор для меню! Внимательно прочтите текстовый документ в архиве там четко указано куда скопировать файлы!
Если поможет буду очень рад!
Здравствуйте, подскажите, а как саблайм текст3 подключить к плагину Emmet LiveStyle?
Серёга привет, что делать если Sublime не работает так как у тебя в видео? Не подгружает файл со стилями, если копируешь Tag img, вместо картинки при просмотре серый квадрат, типа битое изображение...
Приветствую Сергей, подскажи пожалуйста по этому плагину, я его установил, нажимаю ctr+alt+m и он мне выдал что не найден у меня nodejs, я его установил, после нажатия клавиш он мне выдаёт вот это теперь:
Service discontinued
Service discontinued
<p>Keeping the uglify service running while somehow protecting my lightweight VM from (often unintentional) denial-of-service attacks by people sending lots of requests or really huge sources was too much of a burden. I've shut it down. You can install uglify-js locally with
npm install -g uglify-js
instead.</p>эту команду я выполнил npm install -g uglify-js // установился , но после повторного нажатия клавиш или через меню как ты показывал в видео всё равно выдаёт тоже самое, что выше. Что мне ещё сделать, чтоб он заработал? Очень нужен. Спасибо !
плагин для саблайма minifier
Посмотрела ваши уроки.
Большое спасибо!
Всё понятно объясняете.
Было очень интересно, когда в браузере открылась страница, тобой созданная.
Добавила уроки в закладки и, пока, возвращаюсь к ним.