Начнем со своего рабочего места, которое нужно обустроить для написания сайта. Рабочее место будет состоять из двух программ, на мой взгляд самые простые для понимания и написания кода. Первая программа называется "Sublime text 3"
скачать вы его сможете по это ссылке: https://download.sublimetext.com/sublime_text_build_4126_x64_setup.exe. После открытия ссылки, у вас автоматически пойдет закачка программы. После мы ее устанавливаем, открываем и переходим к ее настройке.
Сразу скажу что программа платная, но не спеши удалять ее или проклинать тот день когда ты наткнулся на эту статью. Все что будет отличать обычную программу от платной это окошко, которое будет время от времени всплывать. Закрыть это окно нам не составит труда, чтобы работать с этой программой дальше.
Первым делом настроим внешний вид программы. Отобразим боковую панель, где будут находится наши файлы. Для этого переходим во вкладку "View" > "Side bar" > "Show open files".
Далее нам нужно установить "установщик пакетов" для sublime. Нажимаем сочетание клавиш "ctrl + shift+p" у нас появляется окно, где вводим слово "install" пока не появится следующая строка > "Package control: install package" выбираем ее и наживаем "Enter". Установщик установлен.
После этого у нас появляется список всех дополнений, которые можно установить на sublime, но нам нужны не все, а именно: "AutoFileName",чтобы не прописывать вручную путь к нашим папкам, документам, фото или видео из sublime.
Дальше нам потребуется плагин "Bracket Highliter" - подсветка кавычек. Теперь в нашем коде будет подсвечиваться начальный и конечный элемент. Нажимаем сочетание клавиш "ctrl + shift+p" водим слово "install" пока не появится следующая строка > "Package control: install package" выбираем ее и наживаем "Enter" так нужно делать каждый раз чтобы установить плагины на sublime. В окне вводим наш плагин и нажимаем "Enter".
Дальше устанавливаем плагин "Emmet" он ускорит нашу работу над кодом, к примеру чтобы не писать вручную стандартный "index.html" мы нажимаем знак восклицательного знака нажимаем "Tab" и нам выдается готовый код начальной страницы.
Последний плагин - "Tag", который нужно будет установить вручную. Переходим по этой ссылке https://fls.guru/files/Tag.zip, у вас сразу скачивается файл, распаковать нужно в следующую папку =>(Win 10) - C:\Users\ Твое имя пользователя \AppData\Roaming\Sublime Text 3\Packages. После перезапускаем программу.
Открываем "key bindings" и вводим слева вот такое значение, обязательно в квадратных скобках => { "keys": ["ctrl+`"], "command": "tag_classes" },. Чтобы было также как и на картинке, дальше мы нажимаем сочетание "ctrl + s" и перезапускаем приложение.
Эта команда позволит нам не писать вручную все классы, которые есть в html документе, для этого мы выделяем все те классы с которыми мы будем взаимодействовать в css нажимаем сочетание "ctrl + `(эта буква ё)" переходим в сss файл и нажимаем сочетание "ctrl + v" все классы, которые мы скопировали, готовы к работе!