Первый урок. Введение

Этот курс имеет некоторые особенности. Мы будем разбирать только современную верстку и программирование. Старомодные приемы, где учитывается браузер Internet Explorer 6, табличная верстка или устаревшие методики — сразу выкидываем на помойку истории. Если верстка: то это flex, если браузер — то только последние две версии Хрома или FireFox. Именно поэтому я постарался оставить только ту информацию, которая реально будет востребована в вашей работе.

Используемые фреймворки и сайты

После вводных занятий, мы начнём пользоваться разными фреймворками и сайтами. Проверьте, чтобы у вас был к ним доступ, попробуйте для проверки скачать файлы (можно пока не устанавливать).

Для верстки и изучения CSS у нас будет UniCSS — css-фреймворк атомарного уровня. Сайт на английском, но вполне понятен, поскольку это техническая информация, да и я по ходу уроков буду объяснять что к чему.

Делать рабочие лэндинги (landing page) будем с использованием LPF (Landing Page Framework), который специально для этого предназначен. Ознакомьтесь с его лицензией, чтобы потом не возникло проблем.

В качестве тренировочной базы будем использовать Generator for Startup Framework: Create Landing Page.

Для публичного репозитория мы будем использовать github.com. Нужно будет там зарегистрироваться.

Ссылки на справочники и прочие сервисы я буду приводить уже по ходу уроков.

Цели курса

После курса и выполнения всех заданий, вы сможете самостоятельно верстать простые лэндинги. У вас будут хорошие базовые знания CSS и HTML.

Вы научитесь пользоваться классами UniCSS, что ускоряет верстку сайтов. С помощью LPF вы сможете создавать несложные сайты на несколько страниц и обеспечить их интерактивностью, вроде отправки формы.

Будут обзорные уроки по JavaScript/jQuery и PHP, но в минимальном объёме, чтобы показать как ими пользоваться. Изучение программирования в набор данного курса не входит.

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

Программы

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

В качестве сервера я рекомендую установить Open Server. Версии BASIC или PREMIUM будет вполне достаточно.

Текстовый редактор используйте Notepad++. Вы можете использовать любой другой редактор, какой нравится. Главное, чтобы он умел корректно работать с кодировкой UTF-8 (без сигнатуры BOM).

Для файлового менеджера можно использовать Total Commander. У него встроенный ftp-менеджер, что потребуется для загрузки файлов на сервер в будущем.

Браузер лучше использовать FireFox, поскольку в нём проще и удобней выполнять отладку.

Через какое-то время нужно будет установить Git — систему контроля версий. Современная разработка без гита уже не ведется. В качестве консоли я рекомендую программу ConEmu. Вопросам использования git будут посвящены отдельные занятия.

Для работы с CSS мы будем использовать css-препроцессор Sass. Сейчас ничего ставить не нужно, этому будет посвящен отдельный урок.

Задания (только для платных учеников)

Каждый урок будет сопровождаться заданиями. Вы можете отправлять выполненные задания мне на проверку. В ответе вы получите список замечаний по выполненной работе. Если решите исправить, то можете ещё раз выслать задание на проверку.

Старайтесь не пропускать выполнение заданий. Некоторые из них могут показаться сложными. Если вы не можете выполнить задание, то напишите на чём именно вы споткнулись и как пытались решить проблему. Код старайтесь набирать вручную, а не через copy/paste. Умение вручную набирать код — одно из важнейших умений вебмастера.

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

Урок считается пройденным только после выполнения всех его заданий.

Отправлять домашние задания нужно мне на электронную почту maxsite.org@gmail.com. Все файлы следует заархивировать zip. Желательно чтобы имя файла указывало на номер урока.

Если размер файла получается больше 1Мб, то такой файл нужно выложить на гугл-диск или в свой dropbox, а мне выслать только ссылку на загрузку. (Не выкладывайте файлы на яндекс-диск или другие файлообменники.)

По возможности используйте почтовый ящик гугла (gmail.com) — только с ним я гарантирую корректную работу.

Отвечаю я обычно сразу в течение нескольких часов. Если ответа нет больше суток, то напишие повторное письмо. (Проблемы могут быть если вы пишете с ящика яндекса или майл-ру.) Также можно со мной связаться через личные сообщения Твиттера — @maxsite или сообщения Telegram (адрес по запросу).

Когда мы дойдём до изучения git'а, то все свои задания нужно будет выкладывать на github.com, а мне присылать только ссылку для просмотра.

Первое домашнее задание

1. Необходимо установить и запустить локальный сервер Open Server. В браузере должен работать адрес http://localhost/ (вы увидите приветствие Open Server).

2. Создать файл hello.php в localhost с содержимым «Привет!». Он должен выводиться в браузере по адресу http://localhost/hello.php