Урок #1 (подготовка)
Bulat
Содержание:
Для открытия на компьютере без прокси и vpn - https://tgraph.io/Urok-1-05-25.
Введение, чтобы вы могли понять, что к чему
Приветствую вас на моем курсе: программирование - просто. Здесь мы будем вместе создавать сайты. Делать мы это будем через коды языков HTML и CSS. При этом мы будем разбирать каждую часть кода, и вы не просто напишите готовый проект, а научитесь писать подобные. У нашего курса нет ограничений по возрасту, ведь мы считаем, что научиться программировать может каждый. Программировать мы будем на языке гипертекстовой разметки HTML и на языке описания внешнего вида CSS. На этом курсе мы создадим такой сайт (на данный момент не работает доя просмотра).
Пожалуйста всегда обращайте внимание на выделенный таким образом текст. Он подсказывает какую-либо информацию, облегчающую верстку сайтов. Например такую: Такой текст - это всегда какой-либо элемент кода, кроме данного случая разумеется. А подчеркнутый - всегда является ссылкой. Обязательно переходите по ним, ведь я их для вас проставляю, тем более это поможет вам быстрее понять основы верстки сайтов. Ссылки в содержании - единственные, которые вас ничему новому не научат, а лишь помогут вам пробежаться по уроку, чего я крайне не советую делать, а по остальным обязательно переходите!Подготовка, чтобы было легко
Для программирования нужны 3 вещи: ноут, текстовый редактор и браузер. Да, конечно, он есть у всех вас. Вы можете пользоваться своим любимым браузером, но я рекомендую установить Chrome. Откройте эту статью на компьютере (https://telegra.ph/Urok-1-05-25). Теперь давайте скачаем и установим на ваш ноутбук текстовый редактор. Да, я знаю, что у вас есть блокнот, но программировать в блокноте не самая лучшая затея, поэтому давайте скачаем и установим Sublime text. Чтобы программировать как настоящий профессионал, Sublime нужно немного настроить. Возможно новичку это будет немного сложно, но я все тщательно объясню. Заходим в Sublime text. Вверху нажмите Вид (view), далее Показать консоль (Show console). Теперь вставьте в открывшееся снизу поле для ввода следующий текст:
import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; 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)
Не пугайтесь этого непонятного текста. Это код для установки Package Control. Мы будем использовать его для установки различных плагинов. Плагины нужны для упрощения процесса программирования. Ой, простите, отвлекся. Перезапустите Sublime text. Теперь зайдите в Глобальные параметры (Preferences), далее Package Control, выберите Package Control: Install Package. Через пару секунд у вас откроется окно, туда необходимо ввести Emmet. Выберите самый первый пункт (Emmet). После этого у вас откроется окно, которое сообщает, что плагин установлен. Как с ним работать и для чего он нужен, я расскажу на следующем уроке. Самые нетерпеливые могут посмотреть в интернете.
Учимся грамотно создавать файлы с кодом, чтобы потом не возвращаться
Создайте папку coding. Если не знаете некоторых вещей, например как создавать папку, пишите мне в телеграм. Откройте Sublime Text и сверните его. Теперь перетащите папку coding в Sublime. У вас должно получиться так:
Нажмите на папку coding в программе Sublime правой кнопкой мыши, а затем нажмите создать (new). Снизу откроется поле, куда следует ввести "index.html". Нажмите Enter. Теперь перейдите в папку coding и посмотрите, там должен появиться файл index.html, со значком браузера, который установлен у вас по умолчанию. Если это так, то я вас поздравляю, вы все сделали правильно!
Домашнее задание, чтобы закрепить
Установите другие плагины. Посмотрите в интернете, их очень много. Также вы можете установить какую-либо тему для Sublime, чтобы интерфейс выглядел не так скучно. Рекомендую Matherial Theme. Желаю вам, чтобы вы научились верстать сайты и вам это понравилось, удачного курса!