Введение в веб-разработку, знакомство с редакторами Sublime Text и Brackets. Установка и настройка. 5 видео-уроков

Введение в веб-разработку, знакомство с редакторами Sublime Text и Brackets. Установка и настройка. Видео

Всем привет. В этом посте я предлагаю новичкам познакомиться с основными инструментами, которые используются для верстки сайтов. А именно с текстовыми редакторами кода. Я сделал видео-обзор редактора Sublime Text 3 и Brackets. Безусловно существует еще много других разных программ. Но для того что-бы начать, необходим один инструмент, а не десять. Поэтому предлагаю начать с самого популярного Sublime Text 3 или с более дружелюбного для новичков — Brackets от Adobe. В этих уроках мы установим, настроим и подготовим к работе главный инструмент верстальщика сайтов — редактор кода.

Сначала я сделаю сравнительный обзор двух текстовых реакторов, затем в ряде видео расскажу про работу в Sublime Text и в 4-м видео — про работу в Brackets. Если вы решили использовать Brackets — то можно посмотреть вводное видео, и сразу переходить к видео-касту №4 про Brackets. Если Sublime — то для него я записал несколько видео-уроков так как порог вхождения в него немного выше, и соответственно требует большего внимания.

Обзор текстовых редакторов Sublime Text 3 и Brackets

Если вы считаете себя уверенным пользователем ПК, и работа в программах с «командной строкой» вас не пугает, то смело начинайте работу с Sublime Text. Если вы хотите более дружелюбный интерфейс, или Sublime Text не зашел вам с первых попыток, тогда установите Brackets.

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

Скачать редакторы можно по ссылкам:
Sublime Text 3
Brackets

 

Видео 1. Установка и знакомство с редактором Sublime Text 3

В этом видео мы скачаем и установим Sublime Text 3. Познакомимся с его внешним видом (интерфейсом программы). И научимся полезным вещам — которые будут облегчать нашу работу. Научимся разделять рабочее пространство на сколько областей, чтобы одновременно работать с 2-мя или более файлами, что очень удобно при верстке. Когда в одном окне мы пишем html разметку, и в другом css стили. И назначим команду горячих клавиш для реиндентации — чтобы оформление нашей разметки было опрятным и хорошо читаемым.

Видео 2. Sublime Text 3: установка package control, плагины Emmet и AutoFileName

В этом видео мы установим специальное расширение package control, благодаря которому в Sublime Text можно устанавливать плагины (дополнительные расширения) которые расширяют его функционал. Подробно про настройку Sublime, и в частности про установку package сontrol я уже писал в статье Установка и настройка Sublime Text 3. Самая полная инструкция. Поэтому если вы лучше воспринимаете текстовую информацию, то можете провести всю настройку редактора по этой статье. Или воспользоваться записанными видео.

Для того чтобы установить package control в консоли редактора необходимо написать код с сайта https://packagecontrol.io/installation.

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

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

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

  • Emmet (ускорение написания html и css)
  • Hayaku (ускоение написание css)
  • LESS (syntax highlighting — подсветка кода less)
  • Prefixr (префиксы для CSS)
  • Placeholders (Lorem Ipsum наполнители для html файлов)

 

Видео 3. Установка темы Material Theme

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

Material Theme - цветовая тема для редактора Sublime Text 3

Material Theme — цветовая тема для редактора Sublime Text 3

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

"theme": "Material-Theme.sublime-theme",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
"line_padding_top": 3,
"line_padding_bottom": 3,
// On retina Mac
"font_options": [ "gray_antialias" ],
"always_show_minimap_viewport": true,
"bold_folder_labels": true,
// Highlight active indent
"indent_guide_options": [ "draw_normal", "draw_active" ]

 

Видео 4. Работа с редактором Brackets от Adobe. Плагины, работа с фотошоп макетами — PSD файлами.

В этом видео я покажу все необходимое чтобы установить, настроить и начать использовать редактор Brackets. Его интерфейс более дружелюбный, и поэтому вся информация по этому редактору помещена в рамки одного видео-урока, в отличие от Sublime Text.

Следует сказать что редактор Brackets был разработан специально, для верстки сайтов. В то время как другие редакторы разрабатывались просто как универсальные инструменты, Brackets — нацелен на одну задачу — быть основным помощником для верстальщика сайтов, фронт-энд специалиста.

В уроке мы установим редактор, установим плагины (Emmet), познакомимся с внешним видом редактора. И самое главное рассмотрим работу расширение Extract (preview) from Adobe. Это расширение позволяет экспортировать графику из photoshop файлов .psd формата прямо в редакторе. А также брать всю необходимую информацию из макета, такую как размер текста, цвет, гарнитура шрифта, размер фигур, отступы и многое другое прямо в редакторе и сразу же прописывать эти значение в html разметке или css стилях. Что является очень серьезным преимуществом редактора Brackets.

 

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

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

 

Записаться на открытый вебинар по веб-разработке

Посмотреть полную программу и описание курса

Записаться на обучение

  • Степан

    Здравствуйте. Спасибо за статью.

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

    Наверное у вас такой вопрос вызовет улыбку, но у меня все творчество остановилось) Программка есть, а результат выполнения посмотреть не могу.

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

    • Добрый день. Для того чтобы создать html страницу достаточно в редакторе создать файл и сохранить его скажем под именем index.html

      index — это имя — может быть любым, но лучше на латиницие. .html — это расширение файла. HTML страницы имеют расширения .html или .htm . Рекомендую использовать .html

      После того как страницу сохранили, открывайте ее в браузере. Ваша ОС (Windows) по идее сама должна открыть эту страницу в интернет браузере. И вы увидите все что написали внутри этой страницы.

      • Степан

        Понятно. Буду пробовать.
        Спасибо за помощь.