From 99a7476ef56e69319e5810f4e0622b395a713f3f Mon Sep 17 00:00:00 2001
From: Nikita <nks.off@gmail.com>
Date: Sat, 28 Nov 2015 08:14:29 +0300
Subject: [PATCH 1/4] add jekyll

---
 .gitignore                                    |  21 +
 404.md                                        |   7 +
 _config.yml                                   |  40 ++
 _layouts/lesson.html                          |  43 ++
 _layouts/page.html                            |  22 +
 .../index.html => _lessons/lesson-01.html     | 246 +++++-----
 .../index.html => _lessons/lesson-02.html     | 130 +++---
 .../index.html => _lessons/lesson-03.html     | 223 +++++----
 .../index.html => _lessons/lesson-04.html     | 285 +++++++-----
 .../index.html => _lessons/lesson-05.html     | 202 ++++----
 .../index.html => _lessons/lesson-06.html     | 155 ++++---
 .../index.html => _lessons/lesson-07.html     | 247 +++++-----
 .../index.html => _lessons/lesson-08.html     | 190 ++++----
 .../index.html => _lessons/lesson-09.html     | 295 ++++++------
 .../index.html => _lessons/lesson-10.html     | 255 ++++++-----
 .../index.html => _lessons/lesson-11.html     | 185 ++++----
 .../index.html => _lessons/lesson-12.html     | 189 ++++----
 .../index.html => _lessons/lesson-13.html     | 193 ++++----
 _lessons/lesson-14.html                       | 310 +++++++++++++
 .../index.html => _lessons/lesson-15.html     | 231 ++++++----
 .../index.html => _lessons/lesson-16.html     | 143 +++---
 .../index.html => _lessons/lesson-17.html     | 191 ++++----
 {css => assets/css}/highlight/agate.css       |   0
 .../css}/highlight/androidstudio.css          |   0
 {css => assets/css}/highlight/arta.css        |   0
 {css => assets/css}/highlight/ascetic.css     |   0
 .../css}/highlight/atelier-cave.dark.css      |   0
 .../css}/highlight/atelier-cave.light.css     |   0
 .../css}/highlight/atelier-dune.dark.css      |   0
 .../css}/highlight/atelier-dune.light.css     |   0
 .../css}/highlight/atelier-estuary.dark.css   |   0
 .../css}/highlight/atelier-estuary.light.css  |   0
 .../css}/highlight/atelier-forest.dark.css    |   0
 .../css}/highlight/atelier-forest.light.css   |   0
 .../css}/highlight/atelier-heath.dark.css     |   0
 .../css}/highlight/atelier-heath.light.css    |   0
 .../css}/highlight/atelier-lakeside.dark.css  |   0
 .../css}/highlight/atelier-lakeside.light.css |   0
 .../css}/highlight/atelier-plateau.dark.css   |   0
 .../css}/highlight/atelier-plateau.light.css  |   0
 .../css}/highlight/atelier-savanna.dark.css   |   0
 .../css}/highlight/atelier-savanna.light.css  |   0
 .../css}/highlight/atelier-seaside.dark.css   |   0
 .../css}/highlight/atelier-seaside.light.css  |   0
 .../highlight/atelier-sulphurpool.dark.css    |   0
 .../highlight/atelier-sulphurpool.light.css   |   0
 {css => assets/css}/highlight/brown_paper.css |   0
 .../css}/highlight/brown_papersq.png          | Bin
 .../css}/highlight/codepen-embed.css          |   0
 .../css}/highlight/color-brewer.css           |   0
 {css => assets/css}/highlight/dark.css        |   0
 {css => assets/css}/highlight/darkula.css     |   0
 {css => assets/css}/highlight/default.css     |   0
 {css => assets/css}/highlight/docco.css       |   0
 {css => assets/css}/highlight/far.css         |   0
 {css => assets/css}/highlight/foundation.css  |   0
 {css => assets/css}/highlight/github-gist.css |   0
 {css => assets/css}/highlight/github.css      |   0
 {css => assets/css}/highlight/googlecode.css  |   0
 {css => assets/css}/highlight/hybrid.css      |   0
 {css => assets/css}/highlight/idea.css        |   0
 {css => assets/css}/highlight/ir_black.css    |   0
 {css => assets/css}/highlight/kimbie.dark.css |   0
 .../css}/highlight/kimbie.light.css           |   0
 {css => assets/css}/highlight/magula.css      |   0
 {css => assets/css}/highlight/mono-blue.css   |   0
 {css => assets/css}/highlight/monokai.css     |   0
 .../css}/highlight/monokai_sublime.css        |   0
 {css => assets/css}/highlight/obsidian.css    |   0
 .../css}/highlight/paraiso.dark.css           |   0
 .../css}/highlight/paraiso.light.css          |   0
 {css => assets/css}/highlight/pojoaque.css    |   0
 {css => assets/css}/highlight/pojoaque.jpg    | Bin
 {css => assets/css}/highlight/railscasts.css  |   0
 {css => assets/css}/highlight/rainbow.css     |   0
 {css => assets/css}/highlight/school_book.css |   0
 {css => assets/css}/highlight/school_book.png | Bin
 .../css}/highlight/solarized_dark.css         |   0
 .../css}/highlight/solarized_light.css        |   0
 {css => assets/css}/highlight/sunburst.css    |   0
 .../css}/highlight/tomorrow-night-blue.css    |   0
 .../css}/highlight/tomorrow-night-bright.css  |   0
 .../highlight/tomorrow-night-eighties.css     |   0
 .../css}/highlight/tomorrow-night.css         |   0
 {css => assets/css}/highlight/tomorrow.css    |   0
 {css => assets/css}/highlight/vs.css          |   0
 {css => assets/css}/highlight/xcode.css       |   0
 {css => assets/css}/highlight/zenburn.css     |   0
 css/index.css => assets/css/lesson.css        |   3 +
 assets/css/page.scss                          | 430 ++++++++++++++++++
 {js => assets/js}/highlight.pack.js           |   0
 {js => assets/js}/init.js                     |   0
 index.html                                    |  17 +
 lesson-14/index.html                          | 283 ------------
 lesson-1/lesson1.pdf => pdf/lesson-01.pdf     | Bin
 lesson-2/lesson2.pdf => pdf/lesson-02.pdf     | Bin
 lesson-3/lesson3.pdf => pdf/lesson-03.pdf     | Bin
 lesson-4/lesson4.pdf => pdf/lesson-04.pdf     | Bin
 lesson-5/lesson5.pdf => pdf/lesson-05.pdf     | Bin
 lesson-6/lesson6.pdf => pdf/lesson-06.pdf     | Bin
 lesson-7/lesson7.pdf => pdf/lesson-07.pdf     | Bin
 lesson-8/lesson8.pdf => pdf/lesson-08.pdf     | Bin
 lesson-9/lesson9.pdf => pdf/lesson-09.pdf     | Bin
 lesson-10/lesson10.pdf => pdf/lesson-10.pdf   | Bin
 lesson-11/lesson11.pdf => pdf/lesson-11.pdf   | Bin
 lesson-12/lesson12.pdf => pdf/lesson-12.pdf   | Bin
 lesson-13/lesson13.pdf => pdf/lesson-13.pdf   | Bin
 lesson-14/lesson14.pdf => pdf/lesson-14.pdf   | Bin
 lesson-15/lesson15.pdf => pdf/lesson-15.pdf   | Bin
 lesson-16/lesson16.pdf => pdf/lesson-16.pdf   | Bin
 lesson-17/lesson17.pdf => pdf/lesson-17.pdf   | Bin
 .../lesson-01}/hypelinks.xml                  |   0
 .../lesson-01}/hyperlinks.png                 | Bin
 .../lesson-01}/network.png                    | Bin
 .../lesson-01}/network.xml                    |   0
 .../lesson-02}/classic_web.png                | Bin
 .../lesson-02}/classic_web.xml                |   0
 .../lesson-02}/modern_web.png                 | Bin
 .../lesson-02}/modern_web.xml                 |   0
 .../pictures => pictures/lesson-03}/table.png | Bin
 .../lesson-04}/boxmodel.png                   | Bin
 .../lesson-04}/boxmodel.xml                   |   0
 .../pictures => pictures/lesson-04}/grid1.png | Bin
 .../lesson-04}/lorem.jpeg                     | Bin
 .../lesson-05}/dnsreq.png                     | Bin
 .../lesson-05}/dnsreq.xml                     |   0
 .../lesson-05}/domains.png                    | Bin
 .../lesson-05}/domains.xml                    |   0
 .../pictures => pictures/lesson-05}/stack.png | Bin
 .../pictures => pictures/lesson-05}/stack.xml |   0
 .../pictures => pictures/lesson-05}/tcp.png   | Bin
 .../pictures => pictures/lesson-05}/tcp.xml   |   0
 .../lesson-05}/telnet.png                     | Bin
 .../pictures => pictures/lesson-05}/tls.png   | Bin
 .../pictures => pictures/lesson-05}/tls.xml   |   0
 .../pictures => pictures/lesson-05}/zones.png | Bin
 .../pictures => pictures/lesson-05}/zones.xml |   0
 .../lesson-06}/netflow.png                    | Bin
 .../lesson-06}/netflow.xml                    |   0
 .../lesson-06}/netflow2.png                   | Bin
 .../lesson-06}/netflow2.xml                   |   0
 .../pictures => pictures/lesson-07}/cycle.png | Bin
 .../pictures => pictures/lesson-07}/cycle.xml |   0
 .../pictures => pictures/lesson-07}/io.png    | Bin
 .../pictures => pictures/lesson-07}/io.xml    |   0
 .../lesson-07}/nonblock.png                   | Bin
 .../lesson-07}/nonblock.xml                   |   0
 .../lesson-07}/servers.png                    | Bin
 .../pictures => pictures/lesson-08}/cgi.png   | Bin
 .../pictures => pictures/lesson-08}/cgi.xml   |   0
 .../lesson-08}/fastcgi.png                    | Bin
 .../lesson-08}/fastcgi.xml                    |   0
 .../lesson-08}/front_back.png                 | Bin
 .../lesson-08}/front_back.xml                 |   0
 .../pictures => pictures/lesson-08}/wsgi.png  | Bin
 .../pictures => pictures/lesson-08}/wsgi.xml  |   0
 .../lesson-09}/frameworks.png                 | Bin
 .../pictures => pictures/lesson-09}/mvc.png   | Bin
 .../pictures => pictures/lesson-09}/mvc.xml   |   0
 .../lesson-10}/mockup.png                     | Bin
 .../pictures => pictures/lesson-11}/db.png    | Bin
 .../pictures => pictures/lesson-11}/db.xml    |   0
 .../pictures => pictures/lesson-11}/table.png | Bin
 .../pictures => pictures/lesson-11}/table.xml |   0
 .../pictures => pictures/lesson-14}/csrf.png  | Bin
 .../pictures => pictures/lesson-14}/csrf.xml  |   0
 .../pictures => pictures/lesson-14}/forms.png | Bin
 .../pictures => pictures/lesson-14}/forms.xml |   0
 .../lesson-14}/redirect.png                   | Bin
 .../lesson-14}/redirect.xml                   |   0
 .../pictures => pictures/lesson-15}/basic.png | Bin
 .../pictures => pictures/lesson-15}/basic.xml |   0
 .../lesson-15}/cookieauth.png                 | Bin
 .../lesson-15}/cookieauth.xml                 |   0
 .../pictures => pictures/lesson-16}/cors.png  | Bin
 .../pictures => pictures/lesson-16}/cors.xml  |   0
 .../pictures => pictures/lesson-17}/arch.png  | Bin
 .../pictures => pictures/lesson-17}/arch.xml  |   0
 .../pictures => pictures/lesson-17}/comet.png | Bin
 .../pictures => pictures/lesson-17}/comet.xml |   0
 .../lesson-17}/polling.png                    | Bin
 .../lesson-17}/polling.xml                    |   0
 .../pictures => pictures/lesson-17}/push.png  | Bin
 .../pictures => pictures/lesson-17}/push.xml  |   0
 .../pictures => pictures/lesson-17}/ws.png    | Bin
 .../pictures => pictures/lesson-17}/ws.xml    |   0
 186 files changed, 2814 insertions(+), 1722 deletions(-)
 create mode 100644 .gitignore
 create mode 100644 404.md
 create mode 100644 _config.yml
 create mode 100644 _layouts/lesson.html
 create mode 100644 _layouts/page.html
 rename lesson-1/index.html => _lessons/lesson-01.html (72%)
 rename lesson-2/index.html => _lessons/lesson-02.html (71%)
 rename lesson-3/index.html => _lessons/lesson-03.html (82%)
 rename lesson-4/index.html => _lessons/lesson-04.html (71%)
 rename lesson-5/index.html => _lessons/lesson-05.html (71%)
 rename lesson-6/index.html => _lessons/lesson-06.html (79%)
 rename lesson-7/index.html => _lessons/lesson-07.html (74%)
 rename lesson-8/index.html => _lessons/lesson-08.html (73%)
 rename lesson-9/index.html => _lessons/lesson-09.html (68%)
 rename lesson-10/index.html => _lessons/lesson-10.html (79%)
 rename lesson-11/index.html => _lessons/lesson-11.html (79%)
 rename lesson-12/index.html => _lessons/lesson-12.html (75%)
 rename lesson-13/index.html => _lessons/lesson-13.html (75%)
 create mode 100644 _lessons/lesson-14.html
 rename lesson-15/index.html => _lessons/lesson-15.html (78%)
 rename lesson-16/index.html => _lessons/lesson-16.html (78%)
 rename lesson-17/index.html => _lessons/lesson-17.html (78%)
 rename {css => assets/css}/highlight/agate.css (100%)
 rename {css => assets/css}/highlight/androidstudio.css (100%)
 rename {css => assets/css}/highlight/arta.css (100%)
 rename {css => assets/css}/highlight/ascetic.css (100%)
 rename {css => assets/css}/highlight/atelier-cave.dark.css (100%)
 rename {css => assets/css}/highlight/atelier-cave.light.css (100%)
 rename {css => assets/css}/highlight/atelier-dune.dark.css (100%)
 rename {css => assets/css}/highlight/atelier-dune.light.css (100%)
 rename {css => assets/css}/highlight/atelier-estuary.dark.css (100%)
 rename {css => assets/css}/highlight/atelier-estuary.light.css (100%)
 rename {css => assets/css}/highlight/atelier-forest.dark.css (100%)
 rename {css => assets/css}/highlight/atelier-forest.light.css (100%)
 rename {css => assets/css}/highlight/atelier-heath.dark.css (100%)
 rename {css => assets/css}/highlight/atelier-heath.light.css (100%)
 rename {css => assets/css}/highlight/atelier-lakeside.dark.css (100%)
 rename {css => assets/css}/highlight/atelier-lakeside.light.css (100%)
 rename {css => assets/css}/highlight/atelier-plateau.dark.css (100%)
 rename {css => assets/css}/highlight/atelier-plateau.light.css (100%)
 rename {css => assets/css}/highlight/atelier-savanna.dark.css (100%)
 rename {css => assets/css}/highlight/atelier-savanna.light.css (100%)
 rename {css => assets/css}/highlight/atelier-seaside.dark.css (100%)
 rename {css => assets/css}/highlight/atelier-seaside.light.css (100%)
 rename {css => assets/css}/highlight/atelier-sulphurpool.dark.css (100%)
 rename {css => assets/css}/highlight/atelier-sulphurpool.light.css (100%)
 rename {css => assets/css}/highlight/brown_paper.css (100%)
 rename {css => assets/css}/highlight/brown_papersq.png (100%)
 rename {css => assets/css}/highlight/codepen-embed.css (100%)
 rename {css => assets/css}/highlight/color-brewer.css (100%)
 rename {css => assets/css}/highlight/dark.css (100%)
 rename {css => assets/css}/highlight/darkula.css (100%)
 rename {css => assets/css}/highlight/default.css (100%)
 rename {css => assets/css}/highlight/docco.css (100%)
 rename {css => assets/css}/highlight/far.css (100%)
 rename {css => assets/css}/highlight/foundation.css (100%)
 rename {css => assets/css}/highlight/github-gist.css (100%)
 rename {css => assets/css}/highlight/github.css (100%)
 rename {css => assets/css}/highlight/googlecode.css (100%)
 rename {css => assets/css}/highlight/hybrid.css (100%)
 rename {css => assets/css}/highlight/idea.css (100%)
 rename {css => assets/css}/highlight/ir_black.css (100%)
 rename {css => assets/css}/highlight/kimbie.dark.css (100%)
 rename {css => assets/css}/highlight/kimbie.light.css (100%)
 rename {css => assets/css}/highlight/magula.css (100%)
 rename {css => assets/css}/highlight/mono-blue.css (100%)
 rename {css => assets/css}/highlight/monokai.css (100%)
 rename {css => assets/css}/highlight/monokai_sublime.css (100%)
 rename {css => assets/css}/highlight/obsidian.css (100%)
 rename {css => assets/css}/highlight/paraiso.dark.css (100%)
 rename {css => assets/css}/highlight/paraiso.light.css (100%)
 rename {css => assets/css}/highlight/pojoaque.css (100%)
 rename {css => assets/css}/highlight/pojoaque.jpg (100%)
 rename {css => assets/css}/highlight/railscasts.css (100%)
 rename {css => assets/css}/highlight/rainbow.css (100%)
 rename {css => assets/css}/highlight/school_book.css (100%)
 rename {css => assets/css}/highlight/school_book.png (100%)
 rename {css => assets/css}/highlight/solarized_dark.css (100%)
 rename {css => assets/css}/highlight/solarized_light.css (100%)
 rename {css => assets/css}/highlight/sunburst.css (100%)
 rename {css => assets/css}/highlight/tomorrow-night-blue.css (100%)
 rename {css => assets/css}/highlight/tomorrow-night-bright.css (100%)
 rename {css => assets/css}/highlight/tomorrow-night-eighties.css (100%)
 rename {css => assets/css}/highlight/tomorrow-night.css (100%)
 rename {css => assets/css}/highlight/tomorrow.css (100%)
 rename {css => assets/css}/highlight/vs.css (100%)
 rename {css => assets/css}/highlight/xcode.css (100%)
 rename {css => assets/css}/highlight/zenburn.css (100%)
 rename css/index.css => assets/css/lesson.css (90%)
 create mode 100644 assets/css/page.scss
 rename {js => assets/js}/highlight.pack.js (100%)
 rename {js => assets/js}/init.js (100%)
 create mode 100644 index.html
 delete mode 100644 lesson-14/index.html
 rename lesson-1/lesson1.pdf => pdf/lesson-01.pdf (100%)
 rename lesson-2/lesson2.pdf => pdf/lesson-02.pdf (100%)
 rename lesson-3/lesson3.pdf => pdf/lesson-03.pdf (100%)
 rename lesson-4/lesson4.pdf => pdf/lesson-04.pdf (100%)
 rename lesson-5/lesson5.pdf => pdf/lesson-05.pdf (100%)
 rename lesson-6/lesson6.pdf => pdf/lesson-06.pdf (100%)
 rename lesson-7/lesson7.pdf => pdf/lesson-07.pdf (100%)
 rename lesson-8/lesson8.pdf => pdf/lesson-08.pdf (100%)
 rename lesson-9/lesson9.pdf => pdf/lesson-09.pdf (100%)
 rename lesson-10/lesson10.pdf => pdf/lesson-10.pdf (100%)
 rename lesson-11/lesson11.pdf => pdf/lesson-11.pdf (100%)
 rename lesson-12/lesson12.pdf => pdf/lesson-12.pdf (100%)
 rename lesson-13/lesson13.pdf => pdf/lesson-13.pdf (100%)
 rename lesson-14/lesson14.pdf => pdf/lesson-14.pdf (100%)
 rename lesson-15/lesson15.pdf => pdf/lesson-15.pdf (100%)
 rename lesson-16/lesson16.pdf => pdf/lesson-16.pdf (100%)
 rename lesson-17/lesson17.pdf => pdf/lesson-17.pdf (100%)
 rename {lesson-1/pictures => pictures/lesson-01}/hypelinks.xml (100%)
 rename {lesson-1/pictures => pictures/lesson-01}/hyperlinks.png (100%)
 rename {lesson-1/pictures => pictures/lesson-01}/network.png (100%)
 rename {lesson-1/pictures => pictures/lesson-01}/network.xml (100%)
 rename {lesson-2/pictures => pictures/lesson-02}/classic_web.png (100%)
 rename {lesson-2/pictures => pictures/lesson-02}/classic_web.xml (100%)
 rename {lesson-2/pictures => pictures/lesson-02}/modern_web.png (100%)
 rename {lesson-2/pictures => pictures/lesson-02}/modern_web.xml (100%)
 rename {lesson-3/pictures => pictures/lesson-03}/table.png (100%)
 rename {lesson-4/pictures => pictures/lesson-04}/boxmodel.png (100%)
 rename {lesson-4/pictures => pictures/lesson-04}/boxmodel.xml (100%)
 rename {lesson-4/pictures => pictures/lesson-04}/grid1.png (100%)
 rename {lesson-4/pictures => pictures/lesson-04}/lorem.jpeg (100%)
 rename {lesson-5/pictures => pictures/lesson-05}/dnsreq.png (100%)
 rename {lesson-5/pictures => pictures/lesson-05}/dnsreq.xml (100%)
 rename {lesson-5/pictures => pictures/lesson-05}/domains.png (100%)
 rename {lesson-5/pictures => pictures/lesson-05}/domains.xml (100%)
 rename {lesson-5/pictures => pictures/lesson-05}/stack.png (100%)
 rename {lesson-5/pictures => pictures/lesson-05}/stack.xml (100%)
 rename {lesson-5/pictures => pictures/lesson-05}/tcp.png (100%)
 rename {lesson-5/pictures => pictures/lesson-05}/tcp.xml (100%)
 rename {lesson-5/pictures => pictures/lesson-05}/telnet.png (100%)
 rename {lesson-5/pictures => pictures/lesson-05}/tls.png (100%)
 rename {lesson-5/pictures => pictures/lesson-05}/tls.xml (100%)
 rename {lesson-5/pictures => pictures/lesson-05}/zones.png (100%)
 rename {lesson-5/pictures => pictures/lesson-05}/zones.xml (100%)
 rename {lesson-6/pictures => pictures/lesson-06}/netflow.png (100%)
 rename {lesson-6/pictures => pictures/lesson-06}/netflow.xml (100%)
 rename {lesson-6/pictures => pictures/lesson-06}/netflow2.png (100%)
 rename {lesson-6/pictures => pictures/lesson-06}/netflow2.xml (100%)
 rename {lesson-7/pictures => pictures/lesson-07}/cycle.png (100%)
 rename {lesson-7/pictures => pictures/lesson-07}/cycle.xml (100%)
 rename {lesson-7/pictures => pictures/lesson-07}/io.png (100%)
 rename {lesson-7/pictures => pictures/lesson-07}/io.xml (100%)
 rename {lesson-7/pictures => pictures/lesson-07}/nonblock.png (100%)
 rename {lesson-7/pictures => pictures/lesson-07}/nonblock.xml (100%)
 rename {lesson-7/pictures => pictures/lesson-07}/servers.png (100%)
 rename {lesson-8/pictures => pictures/lesson-08}/cgi.png (100%)
 rename {lesson-8/pictures => pictures/lesson-08}/cgi.xml (100%)
 rename {lesson-8/pictures => pictures/lesson-08}/fastcgi.png (100%)
 rename {lesson-8/pictures => pictures/lesson-08}/fastcgi.xml (100%)
 rename {lesson-8/pictures => pictures/lesson-08}/front_back.png (100%)
 rename {lesson-8/pictures => pictures/lesson-08}/front_back.xml (100%)
 rename {lesson-8/pictures => pictures/lesson-08}/wsgi.png (100%)
 rename {lesson-8/pictures => pictures/lesson-08}/wsgi.xml (100%)
 rename {lesson-9/pictures => pictures/lesson-09}/frameworks.png (100%)
 rename {lesson-9/pictures => pictures/lesson-09}/mvc.png (100%)
 rename {lesson-9/pictures => pictures/lesson-09}/mvc.xml (100%)
 rename {lesson-10/pictures => pictures/lesson-10}/mockup.png (100%)
 rename {lesson-11/pictures => pictures/lesson-11}/db.png (100%)
 rename {lesson-11/pictures => pictures/lesson-11}/db.xml (100%)
 rename {lesson-11/pictures => pictures/lesson-11}/table.png (100%)
 rename {lesson-11/pictures => pictures/lesson-11}/table.xml (100%)
 rename {lesson-14/pictures => pictures/lesson-14}/csrf.png (100%)
 rename {lesson-14/pictures => pictures/lesson-14}/csrf.xml (100%)
 rename {lesson-14/pictures => pictures/lesson-14}/forms.png (100%)
 rename {lesson-14/pictures => pictures/lesson-14}/forms.xml (100%)
 rename {lesson-14/pictures => pictures/lesson-14}/redirect.png (100%)
 rename {lesson-14/pictures => pictures/lesson-14}/redirect.xml (100%)
 rename {lesson-15/pictures => pictures/lesson-15}/basic.png (100%)
 rename {lesson-15/pictures => pictures/lesson-15}/basic.xml (100%)
 rename {lesson-15/pictures => pictures/lesson-15}/cookieauth.png (100%)
 rename {lesson-15/pictures => pictures/lesson-15}/cookieauth.xml (100%)
 rename {lesson-16/pictures => pictures/lesson-16}/cors.png (100%)
 rename {lesson-16/pictures => pictures/lesson-16}/cors.xml (100%)
 rename {lesson-17/pictures => pictures/lesson-17}/arch.png (100%)
 rename {lesson-17/pictures => pictures/lesson-17}/arch.xml (100%)
 rename {lesson-17/pictures => pictures/lesson-17}/comet.png (100%)
 rename {lesson-17/pictures => pictures/lesson-17}/comet.xml (100%)
 rename {lesson-17/pictures => pictures/lesson-17}/polling.png (100%)
 rename {lesson-17/pictures => pictures/lesson-17}/polling.xml (100%)
 rename {lesson-17/pictures => pictures/lesson-17}/push.png (100%)
 rename {lesson-17/pictures => pictures/lesson-17}/push.xml (100%)
 rename {lesson-17/pictures => pictures/lesson-17}/ws.png (100%)
 rename {lesson-17/pictures => pictures/lesson-17}/ws.xml (100%)

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..23109ec
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,21 @@
+# Project
+_site
+.sass-cache
+
+# Linux / Unix
+!.gitkeep
+!.gitignore
+*~
+
+# Mac OS
+.DS_Store
+.AppleDouble
+.LSOverride
+Icon
+._*
+.Spotlight-V100
+.Trashes
+
+# Windows
+Thumbs.db
+Desktop.ini
diff --git a/404.md b/404.md
new file mode 100644
index 0000000..a27f956
--- /dev/null
+++ b/404.md
@@ -0,0 +1,7 @@
+---
+title: 404 Not Found
+permalink: /404.html
+layout: page
+---
+
+<p>Страница не найдена. <a href="{{ site.baseurl }}/">Вернуться на главную &rarr;</a></p>
diff --git a/_config.yml b/_config.yml
new file mode 100644
index 0000000..b3b20ea
--- /dev/null
+++ b/_config.yml
@@ -0,0 +1,40 @@
+# Basic
+name:               "Web технологии"
+
+# URL
+baseurl:            "/tp-stepic"
+permalink:          /:title/
+
+# Markdown
+markdown:           kramdown
+
+# Sass
+sass:
+  style:            :compressed
+
+# URL for static files
+assets_url:         "/tp-stepic/assets"
+pictures_url:       "/tp-stepic/pictures"
+
+# these files will be copied to destination
+keep_files:         ["assets", "node_modules", "pdf", "pictures"]
+
+# Collections
+collections:
+  lessons:
+    output: true
+    permalink:      /:name/
+
+# Scopes
+defaults:
+  -
+    scope:
+      path:         ""
+      type:         "lessons"
+    values:
+      layout:       "lesson"
+
+# Site info
+author:
+  name: "Дмитрий Смаль"
+  url: "https://github.com/mialinx/"
diff --git a/_layouts/lesson.html b/_layouts/lesson.html
new file mode 100644
index 0000000..66bf208
--- /dev/null
+++ b/_layouts/lesson.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <title>{{ site.name }}</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=792, user-scalable=no">
+        <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <link rel="stylesheet" href="{{ site.baseurl }}/node_modules/shower-bright/styles/screen.css">
+        <link rel="stylesheet" href="{{ site.assets_url }}/css/highlight/github.css">
+        <link rel="stylesheet" href="{{ site.assets_url }}/css/lesson.css">
+    </head>
+    <body class="list">
+        <header class="caption">
+            <h1><a class="link-no-line link-no-color" href="{{ site.baseurl }}/">{{ site.name }}</a></h1>
+            <p>
+                {% comment %} prev/next page [hack for old jekyll v2.4.0 on GH pages] {% endcomment %}
+                {% assign lessons = site.lessons | sort:'num' %}
+
+                {% for lesson in lessons %}{% if lesson.num == page.num %}
+
+                {% unless forloop.first%}{% assign prev_i = forloop.index0 | minus: 1 %}
+                    <a class="link-no-line" href="{{ site.baseurl }}{{ lessons[prev_i].url }}" title="{{ lessons[prev_i].num }}. {{ lessons[prev_i].title }}">&larr;</a>
+                {% endunless %}
+                
+                {{ page.num }}. {{ page.title }}
+
+                {% unless forloop.last %}{% assign next_i = forloop.index0 | plus: 1 %}
+                    <a class="link-no-line" href="{{ site.baseurl }}{{ lessons[next_i].url }}" title="{{ lessons[next_i].num }}. {{ lessons[next_i].title }}">&rarr;</a>
+                {% endunless %}
+
+                {% endif %}{% endfor %}
+            </p>
+            <p><a href="{{ site.author.url }}">{{ site.author.name }}</a></p>
+        </header>
+
+        {{ content }}
+
+        <div class="progress"><div></div></div>
+        <script src="{{ site.assets_url }}/js/highlight.pack.js"></script>
+        <script src="{{ site.baseurl }}/node_modules/shower-core/shower.min.js"></script>
+        <script src="{{ site.assets_url }}/js/init.js"></script>
+    </body>
+</html>
diff --git a/_layouts/page.html b/_layouts/page.html
new file mode 100644
index 0000000..762eaf0
--- /dev/null
+++ b/_layouts/page.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>{% if page.title %}{{ page.title }}{% else %}{{ site.name }}{% endif %}</title>
+        <link rel="stylesheet" href="{{ site.assets_url }}/css/page.css">
+    </head>
+    <body>
+        <div class="container">
+            <header class="masthead">
+                <h1 class="masthead-title">
+                    <a href="{{ site.baseurl }}/">{{ site.name }}</a>
+                </h1>
+                <nav class="masthead-nav">
+                    <a href="{{ site.author.url }}">{{ site.author.name }}</a>
+                </nav>
+            </header>
+            {{ content }}
+        </div>
+    </body>
+</html>
diff --git a/lesson-1/index.html b/_lessons/lesson-01.html
similarity index 72%
rename from lesson-1/index.html
rename to _lessons/lesson-01.html
index f18cb18..19284ff 100644
--- a/lesson-1/index.html
+++ b/_lessons/lesson-01.html
@@ -1,41 +1,30 @@
-<!DOCTYPE HTML>
-<html lang="en">
-<head>
-    <title>Web технологии</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=792, user-scalable=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <link rel="stylesheet" href="../node_modules/shower-bright/styles/screen.css">
-    <link rel="stylesheet" href="../css/highlight/github.css">
-    <link rel="stylesheet" href="../css/index.css">
-</head>
-<body class="list">
-    <header class="caption">
-        <h1>Web технологии</h1>
-        <p><a href="https://github.com/mialinx/">Дмитрий Смаль</a></p>
-    </header>
-
-    <section class="slide shout"><div>
+---
+num: 1
+title: Архитектура Web приложений.
+description: "Понятие URL и документа. Виды документов: HTML, CSS, JS, JSON. Абсолютные и относительные URL. Правила разрешения URL-ов. Гиперссылки. Клиент-серверная архитектура."
+---
+
+<section class="slide shout">
+    <div>
         <h2>Web технологии</h2>
-    </div></section>
+</div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Web технологии</h2>
         <ul>
-            <li>
-                <a href="https://github.com/mialinx/tp-stepic/">https://github.com/mialinx/tp-stepic/</a>
-            </li>
-            <li>
-                <a href="https://park.mail.ru/blog/show/154/">https://park.mail.ru/blog/show/154/</a>
-            </li>
-            <li><a href="smal@corp.mail.ru">smal@corp.mail.ru</a></li>
-            <li><a href="a.bekbulatov@corp.mail.ru">a.bekbulatov@corp.mail.ru</a></li>
-            <li><a href="n.meleshenko@corp.mail.ru">n.meleshenko@corp.mail.ru</a></li>
+            <li><a href="https://github.com/mialinx/tp-stepic/">https://github.com/mialinx/tp-stepic/</a> </li>
+            <li><a href="https://park.mail.ru/blog/show/154/">https://park.mail.ru/blog/show/154/</a> </li>
+            <li><a href="mailto:smal@corp.mail.ru">smal@corp.mail.ru</a></li>
+            <li><a href="mailto:a.bekbulatov@corp.mail.ru">a.bekbulatov@corp.mail.ru</a></li>
+            <li><a href="mailto:n.meleshenko@corp.mail.ru">n.meleshenko@corp.mail.ru</a></li>
         </ul>
+    </div>
+</section>
 
-    </div></section>
-
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>О чем этот курс ?</h2>
         <ul>
             <li>Общая архитектура WWW</li>
@@ -44,9 +33,11 @@ <h2>О чем этот курс ?</h2>
             <li>Актуальные технологии и ПО</li>
             <li>«Best practices»</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Какие знания потребуются ?</h2>
         <ul>
             <li>Общие навыки программирование</li>
@@ -54,22 +45,27 @@ <h2>Какие знания потребуются ?</h2>
             <li>Использование Linux - на уровне пользователя</li>
             <li>Желательно: опыт HTML верстки</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Что останется за рамками курса ?</h2>
         <ul>
             <li>Сетевые технологии</li>
             <li>Все используемые языки программирования</li>
             <li>Frontend разработка</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout"><div>
         <h2>Internet vs WWW</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Internet</h2>
         <p>Internet - глобальная сеть передачи данных</p>
         <h3>Протоколы</h3>
@@ -79,23 +75,30 @@ <h3>Протоколы</h3>
             <li>TCP - надежная последовательная передача данных</li>
             <li>IP - глобальная адресация, передача в гетерогенной среде</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>World Wide Web</h2>
         <p>WWW - множество <b>взаимосвязанных документов</b>, располагающихся на машинах подключенных к Internet</p>
         <p>WWW - набор протоколов, серверного и клиентского ПО, позволяющих получать доступ к документам</p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
-        <img src="pictures/hyperlinks.png" class="place"/>
-    </div></section>
+<section class="slide">
+    <div>
+        <img src="{{ site.pictures_url }}/lesson-01/hyperlinks.png" class="place"/>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout"><div>
         <h2>Документы</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Типы документов (MIME-типы)</h2>
         <div class="lr">
             <div class="c5">
@@ -116,9 +119,11 @@ <h2>Типы документов (MIME-типы)</h2>
             </div>
         </div>
         <p><small>Расширения файлов играют второстепенную роль</small></p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>text/html</h2>
         <script type="snippet" lang="html">
             <html>
@@ -132,23 +137,30 @@ <h2>text/html</h2>
             </body>
             </html>
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>text/css</h2>
         <script type="snippet" lang="css">
+            
             .hljs-subst,
             .hljs-title,
             .json .hljs-value {
               font-weight: normal;
               color: #000;
             }
+            
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>text/xml</h2>
         <script type="snippet" lang="xml">
+            
             <response status="ok">
                 <friends>
                     <friend id="1" name="v.pupkin"/>
@@ -156,10 +168,13 @@ <h2>text/xml</h2>
                     <friend id="3" name="n.tesla"/>
                 </friends>
             </response>
+            
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>application/json</h2>
         <script type="snippet" lang="json">
             {
@@ -171,9 +186,11 @@ <h2>application/json</h2>
                 ]
             }
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Документы могут быть</h2>
         <ul>
             <li><b>Статические</b>
@@ -190,13 +207,16 @@ <h2>Документы могут быть</h2>
                 </ul>
             </li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout"><div>
         <h2>URL</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>URL - unified resource locator</h2>
         <code>http://server.org:8080/path/doc.html?a=1&b=2#part1</code>
         <ul>
@@ -207,9 +227,11 @@ <h2>URL - unified resource locator</h2>
             <li>a=1&b=2 - опции запроса<br></li>
             <li>part1 - якорь, положение на странице<br></li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Абсолютные и относительные URL</h2>
         <ul>
             <li><code>http://server.org/1.html</code> - абсолютный</li>
@@ -219,9 +241,11 @@ <h2>Абсолютные и относительные URL</h2>
             <li><code>?a=1&amp;b=2</code> - относительный (от URL текущего документа)</li>
             <li><code>#part2</code> - относительный (в пределах текущего документа)</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Правила разрешения URL</h2>
         <code>https://site.com/path/page.html</code> - основной документ<br>
         + <code>http://wikipedia.org</code> = <code>http://wikipedia.org</code><br>
@@ -230,21 +254,26 @@ <h2>Правила разрешения URL</h2>
         + <code>another.html</code> = <code><b>https://site.com/path/</b>another.html</code><br>
         + <code>?full=1</code> = <code><b>https://site.com/path/page.html</b>?full=1</code><br>
         + <code>#chapter2</code> = <code><b>https://site.com/path/page.html</b>#chaprer2</code><br>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout"><div>
         <h2>Как документы могут ссылаться друг на друга?</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>HTML - гиперссылки</h2>
         <script type="snippet" lang="html">
             Список товаров в <a href="/cart.php">корзине</a>
         </script>
         <p>Список товаров в <a href="/cart.php">корзине</a></p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>HTML - формы</h2>
         <script type="snippet" lang="html">
             <form action="https://duckduckgo.com/">
@@ -258,22 +287,23 @@ <h2>HTML - формы</h2>
             <input type="text" name="q" value="">
             <button type="submit">Найти</a>
         </form>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>HTML - ресурсы</h2>
-        <script type="snippet" lang="html">
+        <script type="snippet" lang="html"> 
             <link rel="stylesheet" href="/css/index.css">
             <script src="http://code.jquery.com/jquery-2.1.4.js">
             </scr&#8203;ipt>
-            <img src="pictures/network.png" width="200" >
-        </script>
-        <link rel="stylesheet" href="/css/style.css">
-        <script src="http://code.jquery.com/jquery-2.1.4.js"></script>
-        <img src="pictures/network.png" width="200" >
-    </div></section>
+            <img src="pictures/network.png" width="200" />
+         </script>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>CSS - ресурсы</h2>
         <script type="snippet" lang="css">
             .slide {
@@ -284,9 +314,11 @@ <h2>CSS - ресурсы</h2>
                 src: url(fonts/terminus.ttf);
             }
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>JavaScript - прямое указание URL</h2>
         <script type="snippet" lang="javascript">
             var saveApiUrl = '/items/save/';
@@ -297,25 +329,32 @@ <h2>JavaScript - прямое указание URL</h2>
                 data: { id: 10, title: newTitle }
             });
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout"><div>
         <h2>Клиент-серверная архитектура</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Клиент-серверная архитектура</h2>
         <p>Web-клиенты работают на компьютерах конечных пользователей.
-           Задача Web-клиентов состоит в получении и отображении документов.</p>
+            Задача Web-клиентов состоит в получении и отображении документов.</p>
         <p>Web-сервера работают (как правило) на серверах в датацентрах.
-           Их задача заключается в хранении (или генерации) и отдачи документов.</p>
-    </div></section>
-
-    <section class="slide"><div>
-        <img src="pictures/network.png" class="place"/>
-    </div></section>
-
-    <section class="slide"><div>
+            Их задача заключается в хранении (или генерации) и отдачи документов.</p>
+    </div>
+</section>
+
+<section class="slide">
+    <div>
+        <img src="{{ site.pictures_url }}/lesson-01/network.png" class="place"/>
+    </div>
+</section>
+
+<section class="slide">
+    <div>
         <h2>Преимущества подхода</h2>
         <ul>
             <li>Открытый протокол</li>
@@ -323,12 +362,7 @@ <h2>Преимущества подхода</h2>
             <li>Прозрачный способ взаимодействия приложений</li>
             <li>Распределенная и масштабируемая система</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <!-- http://www.evolutionoftheweb.com -->
-    <div class="progress"><div></div></div>
-    <script src="../js/highlight.pack.js"></script>
-    <script src="../node_modules/shower-core/shower.min.js"></script>
-    <script src="../js/init.js"></script>
-</body>
-</html>
+<!-- http://www.evolutionoftheweb.com -->
diff --git a/lesson-2/index.html b/_lessons/lesson-02.html
similarity index 71%
rename from lesson-2/index.html
rename to _lessons/lesson-02.html
index 120655a..36f160a 100644
--- a/lesson-2/index.html
+++ b/_lessons/lesson-02.html
@@ -1,25 +1,16 @@
-<!DOCTYPE HTML>
-<html lang="en">
-<head>
-    <title>Web технологии</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=792, user-scalable=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <link rel="stylesheet" href="../node_modules/shower-bright/styles/screen.css">
-    <link rel="stylesheet" href="../css/highlight/github.css">
-    <link rel="stylesheet" href="../css/index.css">
-</head>
-<body class="list">
-    <header class="caption">
-        <h1>Web технологии</h1>
-        <p><a href="https://github.com/mialinx/">Дмитрий Смаль</a></p>
-    </header>
-
-    <section class="slide shout"><div>
+---
+num: 2
+title: Web-клиенты.
+description: "Консольные утилиты. Telnet. Библиотеки в ЯП. libcurl, urllib. Браузер. Фичи браузера: куки, сессии, Referer. Основной сценарий работы. Классические web приложения. One-page приложения."
+---
+
+<section class="slide shout"><div>
         <h2>Web клиенты</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Разновидности web-клиентов</h2>
         <ul>
             <li>Библиотеки в ЯП: libcurl, urllib, и т.д.</li>
@@ -32,9 +23,11 @@ <h2>Разновидности web-клиентов</h2>
                 </ul>
             </li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Особенности библиотек web-клиентов</h2>
         <ul>
             <li>Предоставляют максимум опций для работы с HTTP</li>
@@ -42,9 +35,11 @@ <h2>Особенности библиотек web-клиентов</h2>
             <li>Перенаправления, куки - опционально</li>
         </ul>
         <p>Назначение: используются внутри других программ для простой работы c HTTP</p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Пример использования urllib</h2>
         <script type="snippet" lang="python">
             import urllib
@@ -58,24 +53,30 @@ <h2>Пример использования urllib</h2>
             response = urllib2.urlopen(req)
             result = response.read()
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Назначение консольных клиентов</h2>
         <ul>
             <li>Автоматизация в shell-скриптах</li>
             <li>Создание "статической копии сайта" </li>
             <li>Отладка web-приложений</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Telnet</h2>
         <p>Telnet - это простейшее средство отладки. telnet открывает tcp соединение 
-           и связывает его с консолью, позволяя общаться с web-сервером напрямую с клавиатуры.</p>
-    </div></section>
+            и связывает его с консолью, позволяя общаться с web-сервером напрямую с клавиатуры.</p>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <script type="snippet" lang="plain">
             [nuf@nuftop tmp]$ telnet www.ru 80
             Trying 217.112.35.75...
@@ -92,28 +93,35 @@ <h2>Telnet</h2>
             Connection: keep-alive
             Keep-Alive: timeout=20
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Еще примеры отладки</h2>
         <p>GET запрос к серверу с отображением всех заголовков:<br>
             <code>curl -vv 'http://api.site.com/method/?arg=1'</code></p>
         <p>POST запрос к серверу с авторизацией и передачей доп. заголовков:<br>
             <code>curl -vv -d 'arg=1' -H'X-Token: 123' 'http://api.site.com/method/'</code></p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout"><div>
         <h2>Браузер</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <p>Основное назначение - отображение HTML страниц.<br>
-           Однако, возможности современных браузеров огромны.<br>
-           Существуют операционные системы и 3D-игры, работающие внутри браузеров!</p>
+            Однако, возможности современных браузеров огромны.<br>
+            Существуют операционные системы и 3D-игры, работающие внутри браузеров!</p>
         <p><a href="http://www.evolutionoftheweb.com/">www.evolutionoftheweb.com</a></p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Сценарий работы web приложения</h2>
         <ul>
             <li>Пользователь вводит URL</li>
@@ -123,13 +131,17 @@ <h2>Сценарий работы web приложения</h2>
             <li>Пользователь переходит по гиперссылке или отправляет форму</li>
             <li>Цикл повторяется</li>
         </ul>
-    </div></section>
+    </div>
+</section>
+
+<section class="slide">
+    <div>
+        <img src="{{ site.pictures_url }}/lesson-02/classic_web.png" class="place">
+    </div>
+</section>
 
-    <section class="slide"><div>
-        <img src="pictures/classic_web.png" class="place">
-    </div></section>
-    
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Сценарий работы современного приложения</h2>
         <ul>
             <li>Браузер загружает Web страницу, ресурсы и отображает ее</li>
@@ -138,13 +150,17 @@ <h2>Сценарий работы современного приложения<
             <li>Пользователь взаимодействуюет с UI, что приводит к вызову JavaScript обработчиков</li>
             <li>JavaScript обновляет данные на сервере или загружает новые данные, используя AJAX</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
-        <img src="pictures/modern_web.png" class="place">
-    </div></section>
+<section class="slide">
+    <div>
+        <img src="{{ site.pictures_url }}/lesson-02/modern_web.png" class="place">
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Особенности современных Web-приложений</h2>
         <ul>
             <li>UI находится на 1 или нескольких страницах (one-page)</li>
@@ -153,11 +169,5 @@ <h2>Особенности современных Web-приложений</h2>
             <li>Используется шаблонизация в JavaScript</li>
             <li>Application сервер возвращает чистые данные (JSON или XML, а не HTML)</li>
         </ul>
-    </div></section>
-
-    <div class="progress"><div></div></div>
-    <script src="../js/highlight.pack.js"></script>
-    <script src="../node_modules/shower-core/shower.min.js"></script>
-    <script src="../js/init.js"></script>
-</body>
-</html>
+    </div>
+</section>
diff --git a/lesson-3/index.html b/_lessons/lesson-03.html
similarity index 82%
rename from lesson-3/index.html
rename to _lessons/lesson-03.html
index a838ccb..120a2c3 100644
--- a/lesson-3/index.html
+++ b/_lessons/lesson-03.html
@@ -1,25 +1,17 @@
-<!DOCTYPE HTML>
-<html lang="en">
-<head>
-    <title>Web технологии</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=792, user-scalable=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <link rel="stylesheet" href="../node_modules/shower-bright/styles/screen.css">
-    <link rel="stylesheet" href="../css/highlight/github.css">
-    <link rel="stylesheet" href="../css/index.css">
-</head>
-<body class="list">
-    <header class="caption">
-        <h1>Web технологии</h1>
-        <p><a href="https://github.com/mialinx/">Дмитрий Смаль</a></p>
-    </header>
+---
+num: 3
+title: HTML. Основы разметки.
+description: "DOCTYPE. Картинки, стили, скрипты и другие ресурсы. Блочные и строчные тэги. Таблицы и списки. Гиперссылки и формы."
+---
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>HTML</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <script type="snippet" lang="html">
             <!DOCTYPE html> 
             <html> 
@@ -36,9 +28,11 @@ <h2>HTML</h2>
               </body> 
             </html>
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Особенности HTML разметки</h2>
         <ul>
             <li>Произвольный регистр: &lt;BR&gt; == &lt;br&gt; </li>
@@ -48,9 +42,11 @@ <h2>Особенности HTML разметки</h2>
             <li>Перестановки тэгов: &lt;b&gt;&lt;i&gt;&lt;/b&gt;&lt;/i&gt; </li>
             <li>&laquo;Свои&raquo; тэги:  &lt;magic&gt;&lt;/magic&gt; </li>
         </ul>
-    </div></section>
-    
-    <section class="slide"><div>
+    </div>
+</section>
+
+<section class="slide">
+    <div>
         <h2>Особенности XHTML разметки</h2>
         <ul>
             <li>Только нижний регистр тэгов</li>
@@ -61,37 +57,47 @@ <h2>Особенности XHTML разметки</h2>
             <li>id вместо name</li>
             <li>Необходим DOCTYPE</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>DOCTYPE</h2>
         <p>DOCTYPE уточняет тип содержимого, указывает HTML парсеру как правильно разбирать данный документ.</p>
         <h3>XHTML 1.1</h3>
         <code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;</code>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>DOCTYPE</h2>
         <h3>HTML 4 Transitional</h3>
         <code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;</code><br><br>
         <h3>HTML5</h3>
         <code>&lt;!DOCTYPE html&gt;</code>
-    </div></section>
-    
-    <section class="slide shout"><div>
+    </div>
+</section>
+
+<section class="slide shout">
+    <div>
         <h2>HTML тэги</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Тэги верхнего уровня</h2>
         <ul>
             <li><code>html</code> - обертка</li>
             <li><code>head</code> - заголовок страницы, не отображается</li>
             <li><code>body</code> - тело страницы, то, что видит пользователь</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Тэги внутри head</h2>
         <ul>
             <li><code>title</code> - отображается в заголовке окна браузера</li>
@@ -100,9 +106,11 @@ <h2>Тэги внутри head</h2>
                 <code>&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;</code>
             </li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Тэги внутри head (2)</h2>
         <ul>
             <li><code>link</code> - указание связанных ресурсов, например CSS<br>
@@ -113,21 +121,27 @@ <h2>Тэги внутри head (2)</h2>
                 <code>&lt;script src="./jquery.js" charset="windows-1251" async&gt;&lt;/script&gt;</code>
             </li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Рекомендацим по link и script</h2>
         <p>Загрузку CSS (тэг <code>link</code>) рекомендуется ставить в тэге <code>head</code>,
             а загрузку JavaScript (тэг <code>script</code>) - наоборот ближе к концу странице.
             Это повышает скорость отрисовки страницы.
         </p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Блочные и строчные тэги</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Блочные тэги</h2>
         <ul>
             <li><code>h1</code> - <code>h6</code> ― различные уровни заголовков</li>
@@ -137,16 +151,20 @@ <h2>Блочные тэги</h2>
             <li><code>blockquote</code> ― цитирование длинного блока текста</li>
             <li><code>div</code> ― абстрактный блочный контейнер</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Пример</h2>
         <p>Верстка этого слайда сделана в HTML и является отличным примером использования блочных тэгов.</p>
         <h2>Подзаголовок</h2>
         <p>Хотя из-за стилей оформления презентации это не так очевидно.</p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Строчные тэги</h2>
         <ul>
             <li><code>a</code> ― гиперссылки</li>
@@ -157,26 +175,35 @@ <h2>Строчные тэги</h2>
             <li><code>sup</code> ― верхний индекс</li>
             <li><code>span</code> ― абстрактный строчный контейнер</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Списки и таблицы</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Списки в HTML</h2>
         <p><code>ul</code>, <code>ol</code>, <code>li</code> - маркированные списки</p>
         <script type="snippet" lang="html">
+            
             <ul>
                 <li><code>a</code> ― гиперссылки</li>
                 <li><code>em</code> ― акцентирование</li>
             </ul>
+            
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Таблицы в HTML</h2>
         <script type="snippet" lang="html">
+            
             <table border="1">
                 <caption>квартальный отчет</caption>
                 <thead> 
@@ -195,19 +222,26 @@ <h2>Таблицы в HTML</h2>
                     </tr>
                 </tbody>
             </table> 
+            
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Таблицы в HTML</h2>
-        <img src="pictures/table.png">
-    </div></section>
+        <img src="{{ site.pictures_url }}/lesson-03/table.png">
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Гиперссылки</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Гиперссылки</h2>
         <script type="snippet" lang="html">
             <a href="http://duckduckgo.com" target="_blank">
@@ -219,9 +253,11 @@ <h2>Гиперссылки</h2>
             <li><code>target</code> - в каком окне открывать ссылку</li>
             <li><code>name</code> - имя якоря, вместо <code>href</code></li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Действия браузера при переходе</h2>
         <p>
             Поведение браузера зависит от протокола в URL
@@ -232,15 +268,19 @@ <h2>Действия браузера при переходе</h2>
                 <li><code>#anchor</code> - прокрутка текущей страницы</li>
             </ul>
         </p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Формы</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Формы</h2>
-        <script type="snippet" lang="html">
+        <script type="snippet" lang="html"> 
             <form method="POST" action="/add/" 
                   enctype="multipart/form-data" target="frame3">
               <input name="image" type="file">
@@ -251,10 +291,12 @@ <h2>Формы</h2>
                  Все равно отправить
               </button>
             </form> 
-        </script>
-    </div></section>
+         </script>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Аттрибуты формы</h2>
         <ul>
             <li><code>action</code> - URL, на который будет отправлена форма</li>
@@ -264,9 +306,11 @@ <h2>Аттрибуты формы</h2>
                 Если форма содержит поля для ввода файлов, то должно быть <code>multipart/form-data</code>
             </li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>application/x-www-form-urlencoded</h2>
         <p>
             Это способ кодирования данных формы для передачи через URL.<br>
@@ -279,13 +323,17 @@ <h2>application/x-www-form-urlencoded</h2>
             В закодированном виде это буде выглядеть так:
             <code>id=3&name=%D0%92%D0%B0%D1%81%D1%8F&friend=4&friend=5</code>
         </p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Поля ввода данных</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Элементы ввода формы</h2>
         <ul>
             <li><code>input</code> - универсальное поле, может быть:
@@ -299,9 +347,11 @@ <h2>Элементы ввода формы</h2>
             <li><code>textarea</code> - многострочное поле ввода</li>
             <li><code>select</code>,<code>option</code> - выпадающий список</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Атрибуты элементов ввода</h2>
         <script type="snippet" lang="html">
             <input type="text" name="username" 
@@ -313,19 +363,14 @@ <h2>Атрибуты элементов ввода</h2>
             <li><code>value</code> - начальное знаечение, пользователь может изменить</li>
             <li><code>placeholder</code> - подсказка для пользователя</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Подробное руководство</h2>
         <p>
             <h2><a href="http://htmlbook.ru/">htmlbook.ru</a></h2>
         </p>
-    </div></section>
-
-    <!-- http://www.evolutionoftheweb.com -->
-    <div class="progress"><div></div></div>
-    <script src="../js/highlight.pack.js"></script>
-    <script src="../node_modules/shower-core/shower.min.js"></script>
-    <script src="../js/init.js"></script>
-</body>
-</html>
+    </div>
+</section>
diff --git a/lesson-4/index.html b/_lessons/lesson-04.html
similarity index 71%
rename from lesson-4/index.html
rename to _lessons/lesson-04.html
index e948d59..bf9e082 100644
--- a/lesson-4/index.html
+++ b/_lessons/lesson-04.html
@@ -1,33 +1,27 @@
-<!DOCTYPE HTML>
-<html lang="en">
-<head>
-    <title>Web технологии</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=792, user-scalable=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <link rel="stylesheet" href="../node_modules/shower-bright/styles/screen.css">
-    <link rel="stylesheet" href="../css/highlight/github.css">
-    <link rel="stylesheet" href="../css/index.css">
-</head>
-<body class="list">
-    <header class="caption">
-        <h1>Web технологии</h1>
-        <p><a href="https://github.com/mialinx/">Дмитрий Смаль</a></p>
-    </header>
+---
+num: 4
+title: CSS.
+description: "Синтаксис, селекторы, псевдоклассы и псевдоэлементы, приоритеты стилей и каскадирование, основные стили, позиционирование, box-model."
+---
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>CSS</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Как задать оформление страницы ?</h2>
         <p>HTML, в отличие от XML, обладает семантикой, т.е. браузер знает как отображать тот или иной HTML тэг. 
             В HTML есть тэги для управления внешним видом (<code>color</code>, <code>font</code>, <code>big</code>, ...),
             но их возможности явно недостаточны.</p>
         <p>Решение - описывать внешний вид отдельно от структуры документа c помощью языка <b>Cascading Style Sheets</b>.</p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Синтаксис CSS</h2>
         <script type="snippet" lang="css">
             .mid-play { 
@@ -42,9 +36,11 @@ <h2>Синтаксис CSS</h2>
             } 
             /* комментарии: cелектор { имя_стиля1: значение1; } */
         </script>
-    </div></section>
-    
-    <section class="slide"><div>
+    </div>
+</section>
+
+<section class="slide">
+    <div>
         <h2>Где могут быть заданы стили?</h2>
         <ul>
             <li>Встроенные в браузер стили</li>
@@ -55,9 +51,11 @@ <h2>Где могут быть заданы стили?</h2>
             <li>Стили могут быть привязаны к конкретному тэгу<br>
                 <code>&lt;img style="margin: 3px" src="..."&gt;</code></li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Какие бывают стили ?</h2>
         <ul>
             <li><code>width</code>, <code>height</code> ― размеры элемента</li>
@@ -68,13 +66,17 @@ <h2>Какие бывают стили ?</h2>
             <li><code>font</code> ― управление шрифтом</li>
             <li><code>text-align</code> ― выравнивание текста</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>CSS селекторы</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Классы и идентификаторы</h2>
         <script type="snippet" lang="html">
             <div id="userpic"><img src="..."></div>
@@ -85,9 +87,11 @@ <h2>Классы и идентификаторы</h2>
             <li><code>id</code> - идентификатор элемента, должен быть уникален на странице</li>
             <li><code>class</code> - список классов элемента, классы могут повторяться</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Базовые селекторы</h2>
         <ul>
 
@@ -104,9 +108,11 @@ <h2>Базовые селекторы</h2>
                 <code>#userpic { padding: 10px }</code>
             </li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Сложные селекторы</h2>
         <ul> 
             <li>контекстные (вложенные)<br>
@@ -118,9 +124,11 @@ <h2>Сложные селекторы</h2>
             <li>группировка<br>
                 <code>h1, h2 { color: red }</code></li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Псевдоклассы</h2>
         <ul id="demo">
             <li><code>a:visited</code> ― посещенная ссылка</li>
@@ -132,9 +140,11 @@ <h2>Псевдоклассы</h2>
         <style>
             #demo li:first-child { color: red }
         </style>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Псевдоэлементы</h2>
         <ul>
             <li><code>#el:after</code> ― виртуальный элемент сразу после <code>#el</code></li>
@@ -146,13 +156,17 @@ <h2>Псевдоэлементы</h2>
                 display: inline;
             }
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Наследование и приоритеты</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Наследование стилей</h2>
         <script type="snippet" lang="html">
             <head> 
@@ -166,17 +180,21 @@ <h2>Наследование стилей</h2>
             </body> 
         </script>
         <p>Не все стили наследуются.</p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Приоритеты стилей</h2>
         <p>В случае, если два разных стиля конфликтуют между собой, применяется тот, 
             что обладает большей <b>специфичностью</b>. Если специфичность двух стилей
             совпадает, применяется тот, что расположен <b>ниже</b> в HTML/CSS коде.</p>
         <p>Указание в значение стиля флага <code>!important</code> позволяет перекрыть проверку специфичности.</p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Правила расчета специфичности</h2>
         <ul>
             <li>id – 100</li>
@@ -184,14 +202,18 @@ <h2>Правила расчета специфичности</h2>
             <li>тэги и псевдоэлементы – 1</li>
         </ul>
         <p>Так, например, селектор <code>ul.info ol + li</code> обладает специфичностью 13,
-        а селектор <code>li.red.level</code> специфичностью 21 балл</p>
-    </div></section>
+            а селектор <code>li.red.level</code> специфичностью 21 балл</p>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Отображение элементов</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Режимы отображения элементов</h2>
         <ul>
             <li><code>display: none</code> ― элемент невидим, не занимает места</li>
@@ -199,9 +221,11 @@ <h2>Режимы отображения элементов</h2>
             <li><code>display: inline</code> ― элемент занимает минимальную ширину, и не прерывает строку, игнорирует width, height</li>
             <li><code>display: inline-block</code> ― блочный элемент, но не разрывает строку, примерно как <code>img</code></li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>DIV vs. SPAN</h2>
         <div class="lr">
             <div class="c7">
@@ -211,7 +235,7 @@ <h2>DIV vs. SPAN</h2>
                     <span class="t">ONE</span> 
                     <span class="t">2</span> 
                     <style> 
-                     .t { 
+                    .t { 
                         width: 150px; height: 100px; 
                         background: red; color: white; 
                         margin: 30px; padding: 4px; 
@@ -226,39 +250,43 @@ <h2>DIV vs. SPAN</h2>
                     <span class="t">ONE</span> 
                     <span class="t">2</span> 
                     <style> 
-                     .t { 
-                        width: 150px; height: 100px; 
-                        background: #b85450; color: white; 
-                        margin: 30px; padding: 4px; 
-                    } 
-                    .tbrd {
-                        border: solid 2px gray;
-                    }
+                        .t { 
+                            width: 150px; height: 100px; 
+                            background: #b85450; color: white; 
+                            margin: 30px; padding: 4px; 
+                        } 
+                        .tbrd {
+                            border: solid 2px gray;
+                        }
                     </style> 
                 </div>
             </div>
         </div>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>float & clear</h2>
         <p>
-            <img src="pictures/lorem.jpeg" style="float: left; margin-right: 30px; width: 150px; height: 130px;">
+            <img src="{{ site.pictures_url }}/lesson-04/lorem.jpeg" style="float: left; margin-right: 30px; width: 150px; height: 130px;">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor iaculis massa. Fusce sollicitudin purus viverra erat sollicitudin placerat sit amet ut diam. Vivamus malesuada tristique elit. Proin nec eros tempor.
         </p>
         <p><code>float: left</code> - всплывание влево, <code>float: right</code> - всплывание вправо, <code>clear: both</code> - отменяет всплывание, &laquo;проводит черту&raquo;</p>
-    </div></section>  
+    </div>
+</section>  
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>float & clear</h2>
         <div class="lr">
             <div class="c7">
                 <script type="snippet" lang="html">
                     <div class="outer"> 
-                      <div class="sqr fl"></div> ... 
-                      <div class="clr"></div> 
-                      <div class="sqr fr"></div> ... 
-                    </div> 
+                    <div class="sqr fl"></div> ... 
+                        <div class="clr"></div> 
+                    <div class="sqr fr"></div> ... 
+                        </div> 
                     <style> 
                     .outer { float: left; width:300px }
                     .sqr { width: 70px; height: 70px }
@@ -270,28 +298,30 @@ <h2>float & clear</h2>
             </div>
             <div class="c3">
                 <div class="outer"> 
-                  <div class="sqr fl"></div>
-                  <div class="sqr fl"></div>
-                  <div class="sqr fl"></div>
-                  <div class="sqr fl"></div>
-                  <div class="clr"></div> 
-                  <div class="sqr fr"></div>
-                  <div class="sqr fr"></div>
-                  <div class="sqr fr"></div>
-                  <div class="sqr fr"></div>
+                    <div class="sqr fl"></div>
+                    <div class="sqr fl"></div>
+                    <div class="sqr fl"></div>
+                    <div class="sqr fl"></div>
+                    <div class="clr"></div> 
+                    <div class="sqr fr"></div>
+                    <div class="sqr fr"></div>
+                    <div class="sqr fr"></div>
+                    <div class="sqr fr"></div>
                 </div> 
                 <style> 
-                .outer { float: left; width:300px; border: solid 2px gray; }
-                .sqr { width: 70px; height: 70px; background: #b85450; margin: 10px }
-                .fl { float: left; } 
-                .fr { float: right; } 
-                .clr { clear: both; } 
+                    .outer { float: left; width:300px; border: solid 2px gray; }
+                    .sqr { width: 70px; height: 70px; background: #b85450; margin: 10px }
+                    .fl { float: left; } 
+                    .fr { float: right; } 
+                    .clr { clear: both; } 
                 </style> 
             </div>
         </div>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Позиционирование</h2>
         <ul>
             <li><code>position: static</code> ― обычное расположение</li>
@@ -300,17 +330,21 @@ <h2>Позиционирование</h2>
             <li><code>position: fixed</code> ― относительно окна браузера</li>
             <li><code>top/right/bottom/left</code> - отступы, могут быть отрицательными</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Отступы и box-model</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Отступы</h2>
         <div class="lr">
             <div class="c5">
-                <img src="pictures/boxmodel.png">
+                <img src="{{ site.pictures_url }}/lesson-04/boxmodel.png">
             </div>
             <div class="c5">
                 Способы задания отступов:
@@ -327,44 +361,45 @@ <h2>Отступы</h2>
                 </ul>
             </div>
         </div>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Bootstrap</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Что такое Bootstrap?</h2>
         <p>Bootstrap - это готовая библиотека стилей (CSS-фреймворк) от Twitter.
-           Bootstrap позволяет быстро разработать приемлемый дизайн даже при базовых знаниях CSS.</p>
+            Bootstrap позволяет быстро разработать приемлемый дизайн даже при базовых знаниях CSS.</p>
     </section>
 
-    <section class="slide"><div>
-        <h2>Что включает в себя Bootstrap?</h2>
-        <ul>
-            <li>Шаблон страниц</li>
-            <li>Сетка</li>
-            <li>Современные «стили по умолчанию»</li>
-            <li>Верстка: таблицы, формы, списки, кнопки, … </li>
-            <li>Компоненты: навигация, меню, пагинатор, …</li>
-            <li>JavaScript плагины</li>
-        </ul>
-    </div></section>
-
-    <section class="slide"><div>
-        <h2>Сетка Bootstrap</h2>
-        <script type="snippet" lang="html">
-            <div class="row">
-            <div class="col-md-4 col-lg-2">LEFT</div>
-            <div class="col-md-8 col-lg-10">CONTENT</div>
-            </div>
-        </script>
-        <img src="pictures/grid1.png" width="100%">
-    </div></section>
+    <section class="slide">
+        <div>
+            <h2>Что включает в себя Bootstrap?</h2>
+            <ul>
+                <li>Шаблон страниц</li>
+                <li>Сетка</li>
+                <li>Современные «стили по умолчанию»</li>
+                <li>Верстка: таблицы, формы, списки, кнопки, … </li>
+                <li>Компоненты: навигация, меню, пагинатор, …</li>
+                <li>JavaScript плагины</li>
+            </ul>
+        </div>
+    </section>
 
-    <div class="progress"><div></div></div>
-    <script src="../js/highlight.pack.js"></script>
-    <script src="../node_modules/shower-core/shower.min.js"></script>
-    <script src="../js/init.js"></script>
-</body>
-</html>
+    <section class="slide">
+        <div>
+            <h2>Сетка Bootstrap</h2>
+            <script type="snippet" lang="html">
+                <div class="row">
+                <div class="col-md-4 col-lg-2">LEFT</div>
+                <div class="col-md-8 col-lg-10">CONTENT</div>
+                </div>
+            </script>
+            <img src="{{ site.pictures_url }}/lesson-04/grid1.png" width="100%">
+        </div>
+    </section>
diff --git a/lesson-5/index.html b/_lessons/lesson-05.html
similarity index 71%
rename from lesson-5/index.html
rename to _lessons/lesson-05.html
index 8fa1185..bbe68bc 100644
--- a/lesson-5/index.html
+++ b/_lessons/lesson-05.html
@@ -1,25 +1,17 @@
-<!DOCTYPE HTML>
-<html lang="en">
-<head>
-    <title>Web технологии</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=792, user-scalable=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <link rel="stylesheet" href="../node_modules/shower-bright/styles/screen.css">
-    <link rel="stylesheet" href="../css/highlight/github.css">
-    <link rel="stylesheet" href="../css/index.css">
-</head>
-<body class="list">
-    <header class="caption">
-        <h1>Web технологии</h1>
-        <p><a href="https://github.com/mialinx/">Дмитрий Смаль</a></p>
-    </header>
-
-    <section class="slide shout"><div>
+---
+num: 5
+title: Сетевые протоколы.
+description: "DNS. Домены и зоны, делегирование. Рекурсивные запросы. TCP. Понятие порта. TCP handshake. TCP клиент и сервер. TLS."
+---
+
+<section class="slide shout">
+    <div>
         <h2>Как происходит HTTP запрос ?</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Как происходит HTTP запрос ?</h2>
         <ul>
             <li>Браузер анализирует введенный URL и извлекает имя хоста</li>
@@ -30,43 +22,59 @@ <h2>Как происходит HTTP запрос ?</h2>
             <li>Браузер закрывает соединение (для HTTP/1.0)</li>
             <li>Далее процесс парсинга и отображения документа ...</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
-        <img src="pictures/stack.png" class="place" >
-    </div></section>
+<section class="slide">
+    <div>
+        <img src="{{ site.pictures_url }}/lesson-05/stack.png" class="place" >
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>DNS</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Domain Name System</h2>
         <p>DNS - это распределенная база данных, хранящая информацию о доменах, в первую очередь
-           отображение доменных имен на IP адреса машин, обслуживающих эти домены</p>
-    </div></section>
+            отображение доменных имен на IP адреса машин, обслуживающих эти домены</p>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Пространство доменных имен</h2>
-        <img src="pictures/domains.png" >
-    </div></section>
+        <img src="{{ site.pictures_url }}/lesson-05/domains.png" >
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Домены и зоны</h2>
         <p>База DNS разделена на <b>зоны</b>. Каждая зона находится под единым административным контролем. 
-           Проще говоря обслуживается одной организацией.</p>
+            Проще говоря обслуживается одной организацией.</p>
         <p>Хранение информации о доменах более высокого уровня может быть <b>делегировано</b> другим зонам.</p>
-    </div></section>
-
-    <section class="slide"><div>
-        <img src="pictures/zones.png" class="place" >
-    </div></section>
-
-    <section class="slide"><div>
-        <img src="pictures/dnsreq.png" class="place" >
-    </div></section>
-
-    <section class="slide"><div>
+    </div>
+</section>
+
+<section class="slide">
+    <div>
+        <img src="{{ site.pictures_url }}/lesson-05/zones.png" class="place" >
+    </div>
+</section>
+
+<section class="slide">
+    <div>
+        <img src="{{ site.pictures_url }}/lesson-05/dnsreq.png" class="place" >
+    </div>
+</section>
+
+<section class="slide">
+    <div>
         <h2>Что содержит зона DNS сервера ?</h2>
         <ul>
             <li>A - IPv4 адрес(а) для данного домена</li>
@@ -74,32 +82,40 @@ <h2>Что содержит зона DNS сервера ?</h2>
             <li>NS - адрес(a) DNS серверов обслуживающих данную зону</li>
             <li>MX - адрес(а) почтовых серверов для данного домена</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>TCP</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Зачем нужен TCP ?</h2>
         <p>TCP - протокол, обеспечивающий надежную последовательную доставку данных. 
-        Фактически, TCP предоставляет интерфейс, похожий на файловый ввод/вывод для сетевых соединений.</p>
+            Фактически, TCP предоставляет интерфейс, похожий на файловый ввод/вывод для сетевых соединений.</p>
         <ul>
             <li>Надежная доставка</li>
             <li>Полнодуплексная передача</li>
             <li>Контроль потока - защита от переполнения</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>TCP порты</h2>
         <p>TCP порт - это &laquo;адрес&raquo; сетевого соединения в пределах одного хоста. 
             TCP порты позволяют поддерживать множество открытых соединений на одной машине.</p>
         <p>Номер порта - целое число, не больше 65535. Порты ниже 1024 требуют 
             привилегий суперпользователя для использования.</p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Стандартные TCP порты</h2>
         <ul>
             <li>20,21 - FTP</li>
@@ -108,14 +124,18 @@ <h2>Стандартные TCP порты</h2>
             <li>80 - HTTP</li>
             <li>443 - HTTPS</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Установление TCP соединения</h2>
-        <img src="pictures/tcp.png">
-    </div></section>
+        <img src="{{ site.pictures_url }}/lesson-05/tcp.png">
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Пример TCP клиента</h2>
         <script type="snippet" lang="python">
             import socket
@@ -126,9 +146,11 @@ <h2>Пример TCP клиента</h2>
             rsp = s.recv(1024)
             s.close()
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Пример TCP сервера</h2>
         <script type="snippet" lang="python">
             import socket
@@ -143,9 +165,11 @@ <h2>Пример TCP сервера</h2>
                     conn.send(data)
                 conn.close()
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Как правильно читать данные из сокета ?</h2>
         <script type="snippet" lang="python">
             def myreceive(sock, msglen):
@@ -157,9 +181,11 @@ <h2>Как правильно читать данные из сокета ?</h2>
                     msg = msg + chunk
                 return msg
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Как правильно записывать данные в сокет ?</h2>
         <script type="snippet" lang="python">
             def mysend(sock, msg):
@@ -170,14 +196,18 @@ <h2>Как правильно записывать данные в сокет ?<
                         raise RuntimeError("broken")
                     totalsent = totalsent + sent
         </script>
-    </div></section>
+    </div>
+</section>
 
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>TLS</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>TLS - Transport Layer Security</h2>
         <p>TLS (а ранее SSL) - криптографический протокол, обеспечивающий безопасную передачу данных между хостами в Internet.</p>
         <ul>
@@ -185,14 +215,18 @@ <h2>TLS - Transport Layer Security</h2>
             <li>Шифрование и сжатие передаваемой информации</li>
             <li>Защита от подмены и проверка целостности сообщений</li>
         </ul>
-    </div></section>
-    
-    <section class="slide"><div>
+    </div>
+</section>
+
+<section class="slide">
+    <div>
         <h2>Установление TLS соединения</h2>
-        <img src="pictures/tls.png">
-    </div></section>
+        <img src="{{ site.pictures_url }}/lesson-05/tls.png">
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <ul>
             <li>ClientHello - клиент указывает желаемые опции соединения</li>
             <li>ServerHello - сервер подтверждает опции соединения</li>
@@ -201,19 +235,13 @@ <h2>Установление TLS соединения</h2>
             <li>ClientKeyExchange - клиент отправляет серверу ключ симметричного шифрования (или параметры для его генерации)</li>
             <li>Finished - сервер подтверждает завершение рукопожатия</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Неутешительный вывод</h2>
         <p>Установление TCP и TLS соединения требует существенного времени. Минимум 1 RTT для TCP соединения и 1-2 RTT для TLS соединения.</p>
         <p>Под RTT понимается Round Trip Time - время, необходимое для передачи IP дейтаграммы к серверу и обратно.</p>
-    </div></section>
-
-    <!-- TODO: -->
-
-    <div class="progress"><div></div></div>
-    <script src="../js/highlight.pack.js"></script>
-    <script src="../node_modules/shower-core/shower.min.js"></script>
-    <script src="../js/init.js"></script>
-</body>
-</html>
+    </div>
+</section>
diff --git a/lesson-6/index.html b/_lessons/lesson-06.html
similarity index 79%
rename from lesson-6/index.html
rename to _lessons/lesson-06.html
index 0e59131..5463b8a 100644
--- a/lesson-6/index.html
+++ b/_lessons/lesson-06.html
@@ -1,25 +1,17 @@
-<!DOCTYPE HTML>
-<html lang="en">
-<head>
-    <title>Web технологии</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=792, user-scalable=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <link rel="stylesheet" href="../node_modules/shower-bright/styles/screen.css">
-    <link rel="stylesheet" href="../css/highlight/github.css">
-    <link rel="stylesheet" href="../css/index.css">
-</head>
-<body class="list">
-    <header class="caption">
-        <h1>Web технологии</h1>
-        <p><a href="https://github.com/mialinx/">Дмитрий Смаль</a></p>
-    </header>
-
-    <section class="slide shout"><div>
+---
+num: 6
+title: Протокол HTTP.
+description: "Назначение и ключевые особенности. Синтаксис запроса и ответа. Методы запросов. HTTP заголовки. Коды ответа. Управление соединением."
+---
+
+<section class="slide shout">
+    <div>
         <h2>HTTP</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Какие задачи решает HTTP?</h2>
         <ul>
             <li>Передача документов</li>
@@ -30,13 +22,17 @@ <h2>Какие задачи решает HTTP?</h2>
             <li>Согласование содержимого (negotiation)</li>
             <li>Управление соединением</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
-        <img src="pictures/netflow.png" class="place"/>
-    </div></section>
+<section class="slide">
+    <div>
+        <img src="{{ site.pictures_url }}/lesson-06/netflow.png" class="place"/>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Ключевые особенности HTTP</h2>
         <ul>
             <li>Работает поверх TCP/TLS</li>
@@ -45,9 +41,11 @@ <h2>Ключевые особенности HTTP</h2>
             <li><b>Текстовый</b> протокол</li>
             <li>Расширяемый протокол</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>HTTP/1.0 запрос</h2>
         <script type="snippet" lang="plain">
             GET http://www.ru/robots.txt HTTP/1.0
@@ -56,9 +54,11 @@ <h2>HTTP/1.0 запрос</h2>
             If-Modified-Since: Fri, 24 Jul 2015 22:53:05 GMT
         </script>
         <p>Перевод строки - <code>\r\n</code></p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>HTTP/1.1 запрос</h2>
         <script type="snippet" lang="plain">
             GET /robots.txt HTTP/1.1        
@@ -69,9 +69,11 @@ <h2>HTTP/1.1 запрос</h2>
             Host: www.ru
             User-Agent: Mozilla/5.0 Gecko/20100101 Firefox/39.0
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>HTTP/1.1 ответ</h2>
         <script type="snippet" lang="plain">
             HTTP/1.1 404 Not Found
@@ -83,9 +85,11 @@ <h2>HTTP/1.1 ответ</h2>
             <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
             <HTML><HEAD>...
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>HTTP запрос состоит из</h2>
         <ul>
             <li>строка запроса
@@ -98,9 +102,11 @@ <h2>HTTP запрос состоит из</h2>
             <li>заголовки</li>
             <li>тело запроса</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>HTTP методы</h2>
         <ul>
             <li><b>GET</b> - получение документа</li>
@@ -111,9 +117,11 @@ <h2>HTTP методы</h2>
             <li>CONNECT, TRACE, OPTIONS - используются редко (*)</li>
             <li>COPY, MOVE, MKCOL - расширения WebDAV (*)</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>HTTP ответ состоит из</h2>
         <ul>
             <li>строка ответа
@@ -126,9 +134,11 @@ <h2>HTTP ответ состоит из</h2>
             <li>заголовки</li>
             <li>тела ответа - документ</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>HTTP коды ответа</h2>
         <ul>
             <li>1xx - информационные</li>
@@ -137,9 +147,11 @@ <h2>HTTP коды ответа</h2>
             <li>4xx - ошибка на стороне клиента</li>
             <li>5xx - ошибка на стороне сервера</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>HTTP коды ответа (1)</h2>
         <ul>
             <li>200 OK - запрос успешно выполнен</li>
@@ -148,9 +160,11 @@ <h2>HTTP коды ответа (1)</h2>
             <li>302 Found - повторить запрос по другому URL</li>
             <li>304 Not Modified - документ не изменился, использовать кеш</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>HTTP коды ответа (2)</h2>
         <ul>
             <li>400 Bad Request - неправильный синтаксис запроса</li>
@@ -161,9 +175,11 @@ <h2>HTTP коды ответа (2)</h2>
             <li>502 Bad Gateway - проксируемый сервер отвечает с ошибкой</li>
             <li>504 Gateway Timeout - проксируемый сервер не отвечает</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Заголовки HTTP (общие)</h2>
         <p>Для управления соединением и форматом сообщения (документа)</p>
         <ul>
@@ -174,9 +190,11 @@ <h2>Заголовки HTTP (общие)</h2>
             <li>Connection - управление соединением</li>
             <li>Upgrade - смена протокола</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Заголовки HTTP запросов</h2>
         <ul>
             <li>Authorization - авторизация, чаще всего логин/пароль</li>
@@ -186,9 +204,11 @@ <h2>Заголовки HTTP запросов</h2>
             <li>If-Modified-Since - условный GET запрос</li>
             <li>Accept-* - согласование (negotiation) содержимого</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Заголовки HTTP ответов</h2>
         <ul>
             <li>Location - новый URL документа при перенаправлениях</li>
@@ -197,23 +217,31 @@ <h2>Заголовки HTTP ответов</h2>
             <li>Date - Дата на сервере, для согласования кешей</li>
             <li>Server - описание web-сервера, название и версия</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>HTTP/1.1 управление соединением</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
-        <img src="pictures/netflow2.png" class="place"/>
-    </div></section>
+<section class="slide">
+    <div>
+        <img src="{{ site.pictures_url }}/lesson-06/netflow2.png" class="place"/>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Общие принципы</h2>
         <p>Протокол HTTP/1.0 предполагает закрытие TCP соединения сразу после ответа сервера.</p>
         <p>Протокол HTTP/1.1 предполагает удержание TCP соединения, если не было заголовка <code>Connection: close</code>.</p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Логика управления в HTTP/1.1</h2>
         <p>Соединение должно быть закрыто, если:</p>
         <ul>
@@ -222,12 +250,5 @@ <h2>Логика управления в HTTP/1.1</h2>
             <li>по истечении таймаута (обычно небольшой, около 10с)</li>
         </ul>
         <p>Иначе соединение остается открытым для последующих запросов.</li>
-    </div></section>
-    
-    <!-- http://www.evolutionoftheweb.com -->
-    <div class="progress"><div></div></div>
-    <script src="../js/highlight.pack.js"></script>
-    <script src="../node_modules/shower-core/shower.min.js"></script>
-    <script src="../js/init.js"></script>
-</body>
-</html>
+    </div>
+</section>
diff --git a/lesson-7/index.html b/_lessons/lesson-07.html
similarity index 74%
rename from lesson-7/index.html
rename to _lessons/lesson-07.html
index e8c0d25..e23f5a0 100644
--- a/lesson-7/index.html
+++ b/_lessons/lesson-07.html
@@ -1,29 +1,23 @@
-<!DOCTYPE HTML>
-<html lang="en">
-<head>
-    <title>Web технологии</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=792, user-scalable=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <link rel="stylesheet" href="../node_modules/shower-bright/styles/screen.css">
-    <link rel="stylesheet" href="../css/highlight/github.css">
-    <link rel="stylesheet" href="../css/index.css">
-</head>
-<body class="list">
-    <header class="caption">
-        <h1>Web технологии</h1>
-        <p><a href="https://github.com/mialinx/">Дмитрий Смаль</a></p>
-    </header>
+---
+num: 7
+title: Web-сервера.
+description: "Файлы и процессы сервера. Внутренняя архитектура сервера. Примеры конфигурации. Понятие location. Методы обработки сетевых соединений."
+---
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Web сервера</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
-        <img src="pictures/servers.png" class="place">
-    </div></section>
+<section class="slide">
+    <div>
+        <img src="{{ site.pictures_url }}/lesson-07/servers.png" class="place">
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Запуск web сервера</h2>
         <ul>
             <li>Команда на запуск<br>
@@ -36,9 +30,11 @@ <h2>Запуск web сервера</h2>
             <li>Запуск дочерних процессов/потоков (*)</li>
             <li>Готов к обработке запроса</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Файлы web сервера</h2>
         <ul>
             <li>Конфиг <code>/etc/nginx/nginx.conf</code><br>
@@ -48,9 +44,11 @@ <h2>Файлы web сервера</h2>
             <li>Error-лог <code>/var/log/nginx/error.log</code></li>
             <li>Access-лог <code>/var/log/nginx/access.log</code></li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Процессы web сервера</h2>
         <ul>
             <li>Master (root, 1 процесс)
@@ -67,13 +65,17 @@ <h2>Процессы web сервера</h2>
                 </ul>
             </li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
-        <img src="pictures/cycle.png" class="place">
-    </div></section>
+<section class="slide">
+    <div>
+        <img src="{{ site.pictures_url }}/lesson-07/cycle.png" class="place">
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Модульная архитектура</h2>
         <ul>
             <li>web сервер – не монолитный</li>
@@ -82,44 +84,52 @@ <h2>Модульная архитектура</h2>
             <li>Дополнительные директивы, контексты</li>
             <li>Примеры: mod_mime, mod_mime_magic, mod_autoindex, mod_rewrite, mod_cgi, mod_perl, mod_gzip</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Конфигурация web сервера</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Терминология</h2>
         <p><b>virtual host</b>, <b>вирт. хост</b> - секция конфига web сервера, отвечающая за обслуживание определенного домена</p>
         <p><b>location</b> - секция конфига, отвечающая за обслуживание определенной группы URL</p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <script type="snippet" lang="nginx">
             user  www www;
             error_log  /var/log/nginx.error_log  info;
             http {
-              include       conf/mime.types;
-              default_type  application/octet-stream;
-              log_format    simple '$remote_addr $request $status';
-              server {
-                listen        one.example.com;
-                server_name   one.example.com www.one.example.com;
-                access_log    /var/log/nginx.access_log simple;
-                location / {
-                  root        /www/one.example.com;
+                include       conf/mime.types;
+                default_type  application/octet-stream;
+                log_format    simple '$remote_addr $request $status';
+                server {
+                    listen        one.example.com;
+                    server_name   one.example.com www.one.example.com;
+                    access_log    /var/log/nginx.access_log simple;
+                    location / {
+                        root        /www/one.example.com;
+                    }
+                    location ~* ^.+\.(jpg|jpeg|gif)$ {
+                        root        /www/images;
+                        access_log  off;
+                        expires     30d;
+                    }
                 }
-                location ~* ^.+\.(jpg|jpeg|gif)$ {
-                  root        /www/images;
-                  access_log  off;
-                  expires     30d;
-                }
-              }
             }
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Секции и директивы</h2>
         <ul>
             <li><code>http</code> ― конфигурация для HTTP сервера</li>
@@ -130,9 +140,11 @@ <h2>Секции и директивы</h2>
             <li><code>error_log</code> ― лог ошибок сервера</li>
             <li><code>access_log</code> ― лог запросов</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Приоритеты location в nginx</h2>
         <ul>
             <li><code>location = /img/1.jpg</code></li>
@@ -141,9 +153,11 @@ <h2>Приоритеты location в nginx</h2>
             <li><code>location /img/</code></li>
         </ul>
         При одинаковом приоритете используется тот location, что находится <b>выше</b> в конфиге.
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Отдача статических документов</h2>
         <script type="snippet" lang="nginx">
             location ~* ^.+\.(jpg|jpeg|gif|png)$ {
@@ -155,9 +169,11 @@ <h2>Отдача статических документов</h2>
         </script>
         <code>/2015/10/ae2b5.png</code> → <code>/www/images/2015/10/ae2b5.png</code><br>
         <code>/sitemap/index.xml</code> → <code>/home/www/generated/index.xml</code><br>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Атрибуты файлов и процессов</h2>
         <div class="lr">
             <div class="c4">
@@ -176,26 +192,30 @@ <h2>Атрибуты файлов и процессов</h2>
                 </ul>
             </div>
         </div>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Как узнать атрибуты ?</h2>
         <script type="snippet" lang="plain">
-        $ ps -o pid,euser,egroup,comm,args -C nginx
-          PID EUSER    EGROUP   COMMAND
-        29731 root     root     nginx: master process /usr/sbin/nginx
-        29732 www-data www-data nginx: worker process
-        29733 www-data www-data nginx: worker process
-        29734 www-data www-data nginx: worker process
-        29737 www-data www-data nginx: worker process
+            $ ps -o pid,euser,egroup,comm,args -C nginx
+              PID EUSER    EGROUP   COMMAND
+            29731 root     root     nginx: master process /usr/sbin/nginx
+            29732 www-data www-data nginx: worker process
+            29733 www-data www-data nginx: worker process
+            29734 www-data www-data nginx: worker process
+            29737 www-data www-data nginx: worker process
         </script>
         <script type="snippet" lang="plain">
-        $ ls -lah www/index.html
-        -rw-r--r-- 1 nuf users 156K Feb  6 21:15 www/index.html
+            $ ls -lah www/index.html
+            -rw-r--r-- 1 nuf users 156K Feb  6 21:15 www/index.html
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Проверка доступа</h2>
         <p>Для того, чтобы открыть файл, необходимо иметь права на чтение <code>r</code> самого файла
             и на исполнение <code>x</code> директорий, в которых он находится. Наличие прав проверяется следующим образом:
@@ -205,13 +225,17 @@ <h2>Проверка доступа</h2>
                 <li>Иначе <code>-rw-r--<font color="red">r--</font></code></li>
             </ul>
         </p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Модели обработки сетевых соединений</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Простейший TCP сервер</h2>
         <script type="snippet" lang="python">
             import socket
@@ -226,23 +250,29 @@ <h2>Простейший TCP сервер</h2>
                 conn.sendall(data)
                 file.close(); conn.close()
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Блокирующий ввод-вывод</h2>
-        <img src="pictures/io.png">
-    </div></section>
+        <img src="{{ site.pictures_url }}/lesson-07/io.png">
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Решение проблемы</h2>
         <ul>
             <li>множество потоков - multithreading</li>
             <li>множество процессов - prefork, pool of workers</li>
             <li>комбинированный подход</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Плюсы и минусы prefork</h2>
         <p>
             <plus>простота разработки</plus>
@@ -250,9 +280,11 @@ <h2>Плюсы и минусы prefork</h2>
             <minus>большое потребление памяти: 1 клиент = 1 процесс</minus>
             <minus>проблема с долгоживущими соединениями</minus>
         </p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Плюсы и минусы multithreading</h2>
         <p>
             По сравнению с prefork,<br>
@@ -260,14 +292,18 @@ <h2>Плюсы и минусы multithreading</h2>
             <minus>требует аккуратной работы с памятью</minus>
             <minus>как следствие, накладывает ограничение на выбор библиотек</minus>
         </p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Неблокирующий ввод-вывод</h2>
-        <img src="pictures/nonblock.png">
-    </div></section>
+        <img src="{{ site.pictures_url }}/lesson-07/nonblock.png">
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Мультиплексирование</h2>
         <script type="snippet" lang="python">
             readsocks, writesocks = [...], [...] # сокеты
@@ -282,18 +318,22 @@ <h2>Мультиплексирование</h2>
                     else:
                         print('\tgot', data, 'on', id(sockobj))
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Event-driven разработка</h2>
         <ul>
             <li>множество открытых файлов</li>
             <li>select, kqueue, epoll, aio...</li>
             <li>последовательное исполнение → события</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Плюсы и минусы</h2>
         <p>
             <plus>быстро, программа не блокируется</plus>
@@ -303,9 +343,11 @@ <h2>Плюсы и минусы</h2>
             <minus>тяжело программировать</plus>
             <minus>использование блокирующих вызовов все портит</plus>
         </p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Кто есть кто</h2>
         <ul>
             <li><b>Apache</b> – prefork, worker, threads, С</li>
@@ -314,12 +356,5 @@ <h2>Кто есть кто</h2>
             <li><b>Nginx</b>, <b>Lighttpd</b> – асинхронные, С</li>
             <li><b>Node.JS</b>, <b>Tornado</b> – асинхронные, языки высокого уровня</li>
         </ul>
-    </div></section>
-
-    <div class="progress"><div></div></div>
-    <script src="../js/highlight.pack.js"></script>
-    <script src="../node_modules/shower-core/shower.min.js"></script>
-    <script src="../js/init.js"></script>
-
-</body>
-</html>
+    </div>
+</section>
diff --git a/lesson-8/index.html b/_lessons/lesson-08.html
similarity index 73%
rename from lesson-8/index.html
rename to _lessons/lesson-08.html
index e31089d..21134ca 100644
--- a/lesson-8/index.html
+++ b/_lessons/lesson-08.html
@@ -1,30 +1,24 @@
-<!DOCTYPE HTML>
-<html lang="en">
-<head>
-    <title>Web технологии</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=792, user-scalable=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <link rel="stylesheet" href="../node_modules/shower-bright/styles/screen.css">
-    <link rel="stylesheet" href="../css/highlight/github.css">
-    <link rel="stylesheet" href="../css/index.css">
-</head>
-<body class="list">
-    <header class="caption">
-        <h1>Web технологии</h1>
-        <p><a href="https://github.com/mialinx/">Дмитрий Смаль</a></p>
-    </header>
-
-    <section class="slide shout"><div>
+---
+num: 8
+title: Архитектура frontend - backend.
+description: "Задачи frontend сервера . Reverse proxy. Проксирование запросов. Application сервера. Протоколы CGI, FastCGI, WSGI."
+---
+
+<section class="slide shout">
+    <div>
         <h2>Frontend и Backend</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Общая архитектура</h2>
-        <img src="pictures/front_back.png" class="center" >
-    </div></section>
+        <img src="{{ site.pictures_url }}/lesson-08/front_back.png" class="center" >
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Задачи Frontend (web) сервера</h2>
         <ul>
             <li>отдача статических документов</li>
@@ -34,9 +28,11 @@ <h2>Задачи Frontend (web) сервера</h2>
             <li>сборка SSI</li>
             <li>авторизация, SSL, нарезка картинок, gzip</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Reverse proxy</h2>
         <ul>
             <li>frontend (медленно) читает запрос от клиента</li>
@@ -46,13 +42,17 @@ <h2>Reverse proxy</h2>
             <li>frontend (медленно) возвращает ответ клиенту</li>
         </ul>
         Результат: backend занят минимально возможное время.
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Настройка проксирования в nginx</h2>
-    </div></section>
-    
-    <section class="slide"><div>
+    </div>
+</section>
+
+<section class="slide">
+    <div>
         <h2>Настройка проксирования в nginx</h2>
         <script type="snippet" lang="plain">
             proxy_set_header Host      $host;
@@ -67,9 +67,11 @@ <h2>Настройка проксирования в nginx</h2>
                 root /www/static;
             }
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Настройка upstream в nginx</h2>
         <script type="snippet" lang="plain">
             upstream backend  {
@@ -80,19 +82,25 @@ <h2>Настройка upstream в nginx</h2>
                 server backup2.example.com:8080 backup;
             }
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Application сервер</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Backend (application) сервер</h2>
         <p>Роль application сервера заключается в исполнении бизнес-логики приложения и генерации динамических документов.</p>
         <p>На каждый HTTP запрос application сервер запускает некоторый обработчик в приложении. Это может быть функция, класс или программа, в зависимости от технологии.</p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Протоколы запуска приложения</h2>
         <ul>
             <li>Servlets и др. специализированные API</li>
@@ -102,13 +110,17 @@ <h2>Протоколы запуска приложения</h2>
             <li>SCGI</li>
             <li>PSGI, <b>WSGI</b>, Rack</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>CGI</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>CGI - Common Gateway Interface</h2>
         <ul>
             <li>Метод, QueryString, заголовки запроса - через <b>переменные окружения</b></li>
@@ -117,13 +129,17 @@ <h2>CGI - Common Gateway Interface</h2>
             <li>HTTP код ответа передается через псевдозаголовок <b>Status</b></li>
             <li>Поток ошибок <b>STDERR</b> направляется в лог ошибок сервера</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
-        <img src="pictures/cgi.png" class="place">
-    </div></section>
+<section class="slide">
+    <div>
+        <img src="{{ site.pictures_url }}/lesson-08/cgi.png" class="place">
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Переменные окружения CGI</h2>
         <ul>
             <li><code>REQUEST_METHOD</code> - метод запроса</li>
@@ -134,37 +150,49 @@ <h2>Переменные окружения CGI</h2>
             <li><code>HTTP_COOKIE</code> - Заголовок <code>Cookie</code></li>
             <li><code>HTTP_ANY_HEADER_NAME</code> - любой другой HTTP заголовок</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>FastCGI и SCGI</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>FastCGI и SCGI</h2>
         <p>Основная проблема CGI - низкая производительность. Протоколы FastCGI и SCGI 
             призваны решить эту проблему путем демонизации приложения. 
             Иногда это возможно сделать даже без изменения кода CGI приложения.
         </p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
-        <img src="pictures/fastcgi.png" class="place">
-    </div></section>
+<section class="slide">
+    <div>
+        <img src="{{ site.pictures_url }}/lesson-08/fastcgi.png" class="place">
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>WSGI</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>WSGI - актуальный протокол</h2>
         <p><b>WSGI</b>, PSGI, Rack - протоколы вызова функции обработчика из application сервера.
-           Сам application server при этом может выполняться в отдельном процессе или совпадать с web сервером.
-           Как правило, при использовании этих протоколов в качестве application сервера выступает отдельный легковесный процесс.
-       </p>
-    </div></section>
+            Сам application server при этом может выполняться в отдельном процессе или совпадать с web сервером.
+            Как правило, при использовании этих протоколов в качестве application сервера выступает отдельный легковесный процесс.
+        </p>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>WSGI - обработчик</h2>
         <script type="snippet" lang="python">
             def wsgi_application(environ, start_response):
@@ -177,9 +205,11 @@ <h2>WSGI - обработчик</h2>
                 start_response(status, headers )
                 return [ body ]
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Web Server Gateway Interface</h2>
         <ul>
             <li>Обработчик - функция или класс (callable)</li>
@@ -189,9 +219,11 @@ <h2>Web Server Gateway Interface</h2>
             <li>Тело ответа возвращается в виде списка (iterable) из обработчика</li>
             <li>Поток ошибок должен быть направлен в file-handle <b>wsgi.stderr</b></li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Переменные environ</h2>
         <ul>
             <li>CGI-like переменные: <code>REQUEST_URI</code>, ...</li>
@@ -202,14 +234,18 @@ <h2>Переменные environ</h2>
             <li><code>wsgi.multithreaded</code> - ...</li>
             <li><code>wsgi.multiprocess</code> - ...</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Развертывание WSGI</h2>
-        <img src="pictures/wsgi.png">
-    </div></section>
+        <img src="{{ site.pictures_url }}/lesson-08/wsgi.png">
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Что ложится на приложение ?</h2>
         <ul>
             <li>Анализ <code>PATH_INFO</code> и выбор конкретного обработчика</li>
@@ -223,11 +259,5 @@ <h2>Что ложится на приложение ?</h2>
             </li>
             <li>Вывод правильных заголовков ответа</li>
         </ul>
-    </div></section>
-
-    <div class="progress"><div></div></div>
-    <script src="../js/highlight.pack.js"></script>
-    <script src="../node_modules/shower-core/shower.min.js"></script>
-    <script src="../js/init.js"></script>
-</body>
-</html>
+    </div>
+</section>
diff --git a/lesson-9/index.html b/_lessons/lesson-09.html
similarity index 68%
rename from lesson-9/index.html
rename to _lessons/lesson-09.html
index 65972b2..bd084b6 100644
--- a/lesson-9/index.html
+++ b/_lessons/lesson-09.html
@@ -1,25 +1,17 @@
-<!DOCTYPE HTML>
-<html lang="en">
-<head>
-    <title>Web технологии</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=792, user-scalable=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <link rel="stylesheet" href="../node_modules/shower-bright/styles/screen.css">
-    <link rel="stylesheet" href="../css/highlight/github.css">
-    <link rel="stylesheet" href="../css/index.css">
-</head>
-<body class="list">
-    <header class="caption">
-        <h1>Web технологии</h1>
-        <p><a href="https://github.com/mialinx/">Дмитрий Смаль</a></p>
-    </header>
-
-    <section class="slide shout"><div>
+---
+num: 9
+title: MVC фреймворки (1)
+description: "Компоненты MVC. Django как пример MVC фреймворка. Структура Django проекта. Модульность в Djnago: приложения. Конфигурация проектов. Маршрутизация URL. Обратная маршрутизация URL."
+---
+
+<section class="slide shout">
+    <div>
         <h2>Web приложения</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Основные типы запросов</h2>
         <ul>
             <li><font color="gray">Запросы статических документов</font></li>
@@ -29,9 +21,11 @@ <h2>Основные типы запросов</h2>
             <li>Запросы к API сайта</li>
             <li><font color="gray">Персистентные соединения</font></li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Основные задачи</h2>
         <ul>
             <li>Маршрутизация URL</li>
@@ -41,17 +35,23 @@ <h2>Основные задачи</h2>
             <li>Работа с базами данных</li>
             <li>Генерация HTML страницы или JSON ответа</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>MVC</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
-        <img src="pictures/mvc.png" class="place">
-    </div></section>
+<section class="slide">
+    <div>
+        <img src="{{ site.pictures_url }}/lesson-09/mvc.png" class="place">
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Роли компонентов MVC</h2>
         <ul>
             <li>Router - выбор конкретного controller по URL</li>
@@ -59,13 +59,17 @@ <h2>Роли компонентов MVC</h2>
             <li>Controller - работа с HTTP, связь controller и view </li>
             <li>View - генерация HTML или другого представления</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
-        <img src="pictures/frameworks.png" class="place">
-    </div></section>
+<section class="slide">
+    <div>
+        <img src="{{ site.pictures_url }}/lesson-09/frameworks.png" class="place">
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Плюсы фреймворков</h2>
         <ul>
             <plus>Готовая архитектура</plus>
@@ -75,13 +79,17 @@ <h2>Плюсы фреймворков</h2>
             <plus>Проще найти программистов</plus>
             <plus>Проще обучать программистов</plus>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Django</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Соглашение о именовании</h2>
         <table>
             <tr><th>MVC</th><th>Django</th></tr>
@@ -90,9 +98,11 @@ <h2>Соглашение о именовании</h2>
             <tr><td>Controller</td><td>views</td></tr>
             <tr><td>View</td><td>templates</td></tr>
         </table>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Структура проекта</h2>
         <code>django-admin startproject project</code> - создание проекта.
         <script type="snippet" lang="plain">
@@ -103,13 +113,15 @@ <h2>Структура проекта</h2>
             │   └── views.py
             ├── manage.py
             └── project
-                ├── settings.py
-                ├── urls.py
-                └── wsgi.py
+            ├── settings.py
+            ├── urls.py
+            └── wsgi.py
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Основные файлы проекта</h2>
         <ul>
             <li><code>manage.py</code> - скрипт управления проектом</li>
@@ -118,54 +130,64 @@ <h2>Основные файлы проекта</h2>
             <li><code>project/wsgi.py</code> - WSGI приложение, точка входа</li>
             <li><code>crm</code> - Django - приложение</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Структура не-open-source проекта</h2>
         <script type="snippet" lang="python">
-        anyname
-        ├── project
-        │   ├── crm
-        │   ├── blog
-        │   ├── manage.py
-        │   └── project
-        │       ├── settings.py
-        │       ├── urls.py
-        │       └── wsgi.py
-        ├── templates
-        └── static
+            anyname
+            ├── project
+            │   ├── crm
+            │   ├── blog
+            │   ├── manage.py
+            │   └── project
+            │       ├── settings.py
+            │       ├── urls.py
+            │       └── wsgi.py
+            ├── templates
+            └── static
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Django приложения</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Django приложения</h2>
         <p><b>Приложения</b> - способ распространения кода в Django инфраструктуре.
-        В случае, если вы не планируете публиковать ваш код, приложения - это просто способ логической организации кода.</p>
+            В случае, если вы не планируете публиковать ваш код, приложения - это просто способ логической организации кода.</p>
         <p><code>./manage.py startapp crm</code> - создание нового приложения с именем <code>crm</code>. 
             Нужно вызывать из директории проекта.</p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Структура приложения</h2>
         <script type="snippet" lang="plain">
-        ├── templates
-        ├── static
-        ├── templatetags
-        ├── management
-        │   └── commands
-        ├── migrations
-        ├── models.py
-        ├── tests.py
-        ├── urls.py
-        └── views.py
-    </script>
-    </div></section>
-
-    <section class="slide"><div>
+            ├── templates
+            ├── static
+            ├── templatetags
+            ├── management
+            │   └── commands
+            ├── migrations
+            ├── models.py
+            ├── tests.py
+            ├── urls.py
+            └── views.py
+        </script>
+    </div>
+</section>
+
+<section class="slide">
+    <div>
         <h2>Основные файлы приложения</h2>
         <ul>
             <li><code>models.py</code> - файл с моделями, бизнес-логика</li>
@@ -176,13 +198,17 @@ <h2>Основные файлы приложения</h2>
             <li><code>static</code> - CSS, JavaScript, картинки</li>
             <li><code>migrations</code> - миграции для обновления базы данных</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Конфигурация Django</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Конфиг - просто python модуль</h2>
         <script type="snippet" lang="python">
             # project/project/settings.py
@@ -197,24 +223,28 @@ <h2>Конфиг - просто python модуль</h2>
                 BASE_DIR + '/templates',
             )
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Пути в конфиге</h2>
-            Проблемы:
-            <ul>
-                <li>Проект может быть развернут в любой директории</li>
-                <li>Несколько копий проекта на одном сервере</li>
-            </ul>
-            Решения:
-            <ul>
-                <li>Абсолютные пути в каждом конфиге</li>
-                <li>Переменные окружения, <code>$PROJECT_PATH</code></li>
-                <li>Относительные пути</li>
-            </ul>
-    </div></section>
-
-    <section class="slide"><div>
+        Проблемы:
+        <ul>
+            <li>Проект может быть развернут в любой директории</li>
+            <li>Несколько копий проекта на одном сервере</li>
+        </ul>
+        Решения:
+        <ul>
+            <li>Абсолютные пути в каждом конфиге</li>
+            <li>Переменные окружения, <code>$PROJECT_PATH</code></li>
+            <li>Относительные пути</li>
+        </ul>
+    </div>
+</section>
+
+<section class="slide">
+    <div>
         <h2>Относительные пути</h2>
         <script type="snippet" lang="python">
             import os.path
@@ -227,9 +257,11 @@ <h2>Относительные пути</h2>
             )
             STATIC_ROOT = BASE_DIR + '/static'
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Паттерн local_settings.py</h2>
         <script type="snippet" lang="python">
             # в конце project/settings.py
@@ -238,23 +270,29 @@ <h2>Паттерн local_settings.py</h2>
             except ImportError:
                 pass
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Маршрутизация URL</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Порядок поиска контроллера</h2>
         <ul>
             <li>Django начинает поиск с файла <code>ROOT_URLCONF</code> из настроек</li>
             <li>Загрузив файл, Django использует переменную <code>urlpatterns</code></li>
             <li>Django проходит по всем паттернам до первого совпадения</code></li>
-            <li>Если совпадения не найдено - будет возвращен код <nobr><code>404 Not Found</code></nobr></li>
-        </ul>
-    </div></section>
+        <li>Если совпадения не найдено - будет возвращен код <nobr><code>404 Not Found</code></nobr></li>
+    </ul>
+</div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Маршрутизация в проекте</h2>
         <script type="snippet" lang="python">
             # project/project/urls.py
@@ -265,9 +303,11 @@ <h2>Маршрутизация в проекте</h2>
                 url(r'^admin/', include('admin.site.urls')),
             ]
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Маршрутизация в приложении</h2>
         <script type="snippet" lang="python">
             # project/blog/urls.py
@@ -281,18 +321,22 @@ <h2>Маршрутизация в приложении</h2>
                             name='post-detail'),
             )
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Используемые функции</h2>
         <ul>
             <li><code>url</code> - для передачи именованных параметров</li>
             <li><code>patterns</code> - для добавления префикса к именам</li>
             <li><code>include</code> - включение одного urls.py внутрь другого</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Особенности маршрутизации в Django</h2>
         <ul>
             <li>Слеш (<code>/</code>) в начале роутов не указывается</li>
@@ -302,9 +346,11 @@ <h2>Особенности маршрутизации в Django</h2>
             <li>Можно и нужно создавать именованные роуты</li>
             <li>Одно действие – один роут – один контроллер</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Reverse routing</h2>
         В python коде:
         <script type="snippet" lang="python">
@@ -314,15 +360,8 @@ <h2>Reverse routing</h2>
             reverse('post-detail', kwargs={'pk': 7})
         </script>
         В шаблоне:
-        <script type="snippet" lang="django">
+        <script type="snippet" lang="django"> {% raw %}
             {% url 'question-view' question.id %}
-        </script>
-    </div></section>
-
-    <div class="progress"><div></div></div>
-    <script src="../js/highlight.pack.js"></script>
-    <script src="../node_modules/shower-core/shower.min.js"></script>
-    <script src="../js/init.js"></script>
-
-</body>
-</html>
+        {% endraw %} </script>
+    </div>
+</section>
diff --git a/lesson-10/index.html b/_lessons/lesson-10.html
similarity index 79%
rename from lesson-10/index.html
rename to _lessons/lesson-10.html
index 8522d92..4ed3a37 100644
--- a/lesson-10/index.html
+++ b/_lessons/lesson-10.html
@@ -1,25 +1,17 @@
-<!DOCTYPE HTML>
-<html lang="en">
-<head>
-    <title>Web технологии</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=792, user-scalable=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <link rel="stylesheet" href="../node_modules/shower-bright/styles/screen.css">
-    <link rel="stylesheet" href="../css/highlight/github.css">
-    <link rel="stylesheet" href="../css/index.css">
-</head>
-<body class="list">
-    <header class="caption">
-        <h1>Web технологии</h1>
-        <p><a href="https://github.com/mialinx/">Дмитрий Смаль</a></p>
-    </header>
-
-    <section class="slide shout"><div>
+---
+num: 10
+title: MVC фреймворки (2)
+description: "Контроллеры в Django. Объекты HttpRequest и HttpResponse. Получение GET и POST параметров. Работа с HTTP заголовками в Django. Декораторы. Шаблонизация в Django. Наследование шаблонов. Context processors."
+---
+
+<section class="slide shout">
+    <div>
         <h2>Django Views</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Django Views</h2>
         <p>
             Контроллеры в Django - это обычные функции, которые:
@@ -28,9 +20,11 @@ <h2>Django Views</h2>
                 <li>возвращают объект <code>django.http.HttpResponse</code></li>
             </ul>
         </p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Django Views</h2>
         <script type="snippet" lang="python">
             # /blog/post_text/?id=123
@@ -43,9 +37,11 @@ <h2>Django Views</h2>
                 return HttpResponse(obj.text, 
                         content_type='text/plain')
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Захват параметров из URL</h2>
         <script type="snippet" lang="python">
             # blog/urls.py
@@ -54,9 +50,11 @@ <h2>Захват параметров из URL</h2>
 
             url(r'^(?P<pk>\d+)/$', 'post_detail')
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Захват параметров из URL (2)</h2>
         <script type="snippet" lang="python">
             # blog/views.py
@@ -71,13 +69,17 @@ <h2>Захват параметров из URL (2)</h2>
                 pk = args[0]
                 pk = kwargs['pk']
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>HttpRequest и HttpResponse</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>HttpRequest</h2>
         <ul>
             <li><code>request.method</code> - метод запроса</li>
@@ -89,9 +91,11 @@ <h2>HttpRequest</h2>
             <li><code>request.session</code> - словарь-сессия (*)</li>
             <li><code>request.user</code> - текущий пользователь (*)</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>HttpResponse</h2>
         <script type="snippet" lang="python">
             from django.http import HttpResponse
@@ -106,9 +110,11 @@ <h2>HttpResponse</h2>
                 status = 404,
             )
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Специальные типы ответов</h2>
         <script type="snippet" lang="python">
             from django.http import HttpResponseRedirect, \
@@ -120,9 +126,11 @@ <h2>Специальные типы ответов</h2>
             response = HttpResponseNotFound()             # 404
             response = HttpResponseForbidden()            # 403
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Получение GET и POST параметров</h2>
         <script type="snippet" lang="python">
             order = request.GET['sort'] # опасно!
@@ -134,9 +142,11 @@ <h2>Получение GET и POST параметров</h2>
             except ValueError:
                 return HttpResponseBadRequest()
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>GET и POST - объекты QueryDict</h2>
         <p><code>/path/?id=3&id=4&id=5</code></p>
         Получение множественных значений
@@ -149,9 +159,11 @@ <h2>GET и POST - объекты QueryDict</h2>
             qs = request.GET.urlencode()
             # qs is 'id=3&id=4&id=5'
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Получение и установка HTTP заголовков</h2>
         <script type="snippet" lang="python">
             user_agent = request.META.get('HTTP_USER_AGENT')
@@ -165,9 +177,11 @@ <h2>Получение и установка HTTP заголовков</h2>
             response['Content-Disposition'] = \
                 'attachment; filename="foo.xls"'
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Получение и установка Cookie</h2>
         <script type="snippet" lang="python">
             response = HttpResponse(html)
@@ -176,13 +190,17 @@ <h2>Получение и установка Cookie</h2>
         <script type="snippet" lang="python">
             is_visited = request.COOKIES.get('visited')
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Декораторы</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Декораторы в Python</h2>
         <p>Декоратор – функция, преобразующая одну функцию в другую.</p>
         <script type="snippet" lang="python">
@@ -195,9 +213,11 @@ <h2>Декораторы в Python</h2>
             def mult(a, b): 
                 return a*b
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Декораторы в Django</h2>
         <script type="snippet" lang="python">
             from django.views.decorators.http import require_POST
@@ -211,13 +231,17 @@ <h2>Декораторы в Django</h2>
             <li><code>@login_required(login_url='/login/')</code></li>
             <li><code>@csrf_exempt</code> – отключить проверку CSRF</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Шаблонизация</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Неправильный подход</h2>
         <script type="snippet" lang="python">
             def header():
@@ -232,22 +256,26 @@ <h2>Неправильный подход</h2>
                    '<p>' + data['text'] + '</p>' + \
                    footer()
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Правильный подход</h2>
         <p>Необходимо отделить данные (<b>контекст</b>) от представления (<b>шаблона</b>). Для этого используются <b>шаблонизаторы</b>.</p>
-            <ul>
-                <plus>Разделение работы web-мастера и программиста</plus>
-                <plus>Повторное использование HTML кода</plus>
-                <plus>Более чистый python код</plus>
-            </ul>
-        </p>
-    </div></section>
+        <ul>
+            <plus>Разделение работы web-мастера и программиста</plus>
+            <plus>Повторное использование HTML кода</plus>
+            <plus>Более чистый python код</plus>
+        </ul>
+    </p>
+</div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Синтаксис шаблонов</h2>
-        <script type="snippet" lang="django">
+        <script type="snippet" lang="django"> {% raw %}
             <!-- templates/blog/post_details.html -->
             <html>
                 <head>...</head>
@@ -259,10 +287,12 @@ <h1>{{ post.title|truncatechars:80 }}</h1>
                     {% endfor %}
                 </body>
             </html>
-        </script>
-    </div></section>
+        {% endraw %}</script>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Вызов шаблонизатора</h2>
         <script type="snippet" lang="python">
             # project/blog/views.py
@@ -278,55 +308,68 @@ <h2>Вызов шаблонизатора</h2>
                 'comments': comments,
             })
         </script>
-    </div></section>
-    
-    <section class="slide"><div>
+    </div>
+</section>
+
+<section class="slide">
+    <div>
         <h2>Возможности шаблонизатора</h2>
-        <ul>
+        <ul> {% raw %}
             <li><code>{% for item in list %}{% endfor %}</code> - итерация по списку</li>
             <li><code>{% if var %}{% endif %}</code> - условное отображение</li>
             <li><code>{% include "tpl.html" %}</code> - включение подшаблона</li>
             <li><code>{{ var }}</code> - вывод переменной</li>
             <li><code>{{ var|truncatechars:9 }}</code> - применение фильтров</li>
             <li><code>{# comment #}</code>, <code>{% comment %}{% endcomment %}</code> - комментарии</li>
-        </ul>
-    </div></section>
+        {% endraw %} </ul>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Доступ к свойствам и методам</h2>
         Через точку можно получить свойство, метод, ключ либо индекс объекта:
-        <script type="snippet" lang="django">
+        <script type="snippet" lang="django"> {% raw %}
             {{ object.content }}
             {{ name.strip }}
             {{ info.avatar }}
             {{ post_list.0 }}
-        </script>
+        {% endraw %} </script>
         Передавать параметры методам запрещено:
-        <script type="snippet" lang="django">
+        <script type="snippet" lang="django"> {% raw %}
             {{ post_list.order_by('id') }} <!-- ошибка -->
             {{ post_list.delete }}
-        </script>
-    </div></section>
+        {% endraw %} </script>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Особенности шаблонизатора</h2>
         <ul>
             <li>Шаблоны автоматически экранируют HTML сущности</li>
             <li>Шаблонизатор можно расширять своими фильтрами и тэгами</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Наследование шаблонов</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
-        <img src="pictures/mockup.png" class="place">
-    </div></section>
+<section class="slide">
+    <div>
+        <img src="{{ site.pictures_url }}/lesson-10/mockup.png" class="place">
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Базовый шаблон base.html</h2>
         <script type="snippet" lang="django">
+            {% raw %}
             <!DOCTYPE HTML>
             <html>
             <head>
@@ -338,12 +381,15 @@ <h1>Вопросы и ответы</h1>
                 {% block content %}{% endblock %}
             </body>
             </html>
+            {% endraw %}
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Шаблон главной страницы</h2>
-        <script type="snippet" lang="django">
+        <script type="snippet" lang="django"> {% raw %}
             {% extends "base.html" %}
             {% block title %}
               {{ block.super }} – главная
@@ -356,14 +402,18 @@ <h2>Шаблон главной страницы</h2>
                 </div>
                 {% endfor %}
             {% endblock %}
-        </script>
-    </div></section>
+        {% endraw %}</script>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Context processors</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Context processors</h2>
         <p>Context processors - это функции, которые вызываются перед отрисовкой шаблона и могут добавить данных в контекст.</p>
         Настройка <code>TEMPLATE_CONTEXT_PROCESSORS</code>:
@@ -373,18 +423,13 @@ <h2>Context processors</h2>
             <li><code>django.core.context_processors.static</code> (STATIC_URL)</li>
             <li><code>django.contrib.auth.context_processors.auth</code> (user, perms)</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Когда не вызываются context processors ?</h2>
         <p><code>render(request, template_name, context)</code> - вызывает.</p>
         <p><code>render_to_response(template_name, context)</code> - не вызывает.</p>
-    </div></section>
-
-    <div class="progress"><div></div></div>
-    <script src="../js/highlight.pack.js"></script>
-    <script src="../node_modules/shower-core/shower.min.js"></script>
-    <script src="../js/init.js"></script>
-
-</body>
-</html>
+    </div>
+</section>
diff --git a/lesson-11/index.html b/_lessons/lesson-11.html
similarity index 79%
rename from lesson-11/index.html
rename to _lessons/lesson-11.html
index c176666..3a8fd22 100644
--- a/lesson-11/index.html
+++ b/_lessons/lesson-11.html
@@ -1,25 +1,17 @@
-<!DOCTYPE HTML>
-<html lang="en">
-<head>
-    <title>Web технологии</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=792, user-scalable=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <link rel="stylesheet" href="../node_modules/shower-bright/styles/screen.css">
-    <link rel="stylesheet" href="../css/highlight/github.css">
-    <link rel="stylesheet" href="../css/index.css">
-</head>
-<body class="list">
-    <header class="caption">
-        <h1>Web технологии</h1>
-        <p><a href="https://github.com/mialinx/">Дмитрий Смаль</a></p>
-    </header>
-
-    <section class="slide shout"><div>
+---
+num: 11
+title: Реляционные базы данных.
+description: "Работа с СУБД. Реляционная модель данных. Проектирование баз данных. Работа с СУБД в Python. Работа с СУБД в Django. Понятие ORM, модели Django. Описание таблиц и связей в модели Django. Типы полей в моделях."
+---
+
+<section class="slide shout">
+    <div>
         <h2>Реляционные базы данных</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Решаемые проблемы</h2>
         <ul>
             <li>Структура хранения</li>
@@ -29,21 +21,27 @@ <h2>Решаемые проблемы</h2>
             <li>Атомарные операции - транзакции</li>
             <li>Язык управления базой и данными - <b>SQL</b></li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Реляционная модель данных</h2>
         <p>Данные хранятся в виде таблиц. У каждой таблицы фиксированное число столбцов. Все данные в столбце одного типа.</p>
-        <img src="pictures/table.png" class="center">
-    </div></section>
+        <img src="{{ site.pictures_url }}/lesson-11/table.png" class="center">
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Проектирование базы данных</h2>
         <p>Основная задача проектирования - сокращение избыточности и дублирования данных.</p>
         <p>Существуют формальные правила проверки схемы базы данных на &laquo;правильность&raquo; - <b>нормальные формы</b> базы данных.</p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Проектирование на практике</h2>
         <ul>
             <li>Логическое разделение сущностей</li>
@@ -52,13 +50,17 @@ <h2>Проектирование на практике</h2>
             <li>Связи N:M реализуются через промежуточную таблицу</li>
             <li>Атрибут с фиксированным числом значений – внешняя таблица либо поле типа enum</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Базы данных в Python</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Подключение к базе</h2>
         <p>Полное интерфейса для работы с СУБД в <a href="https://www.python.org/dev/peps/pep-0249/">PEP-0249</a></p>
         <script type="snippet" lang="python">
@@ -70,9 +72,11 @@ <h2>Подключение к базе</h2>
         db.commit()
         db.close()
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Выполнение запросов</h2>
         <script type="snippet" lang="python">
             cursor.execute("""
@@ -87,25 +91,29 @@ <h2>Выполнение запросов</h2>
             """, (name,))
             user = cursor.fetchone()
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Вставка многих записей</h2>
         <script type="snippet" lang="python">
             cursor.executemany(
-                  "INSERT INTO users (name, age) VALUES (%s, %s)",
-                  [
-                      ("Igor", 18 ),
-                      ("Petr", 16 ),
-                      ("Dasha", 17 )
-                  ]
+                "INSERT INTO users (name, age) VALUES (%s, %s)",
+                [
+                    ("Igor", 18 ),
+                    ("Petr", 16 ),
+                    ("Dasha", 17 )
+                ]
             )
             db.commit()
             db.close()
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Placeholders</h2>
         <script type="snippet" lang="python">
             email = "' OR '1'='1"
@@ -119,13 +127,17 @@ <h2>Placeholders</h2>
                 email
             )
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Базы данных в Django</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Прямой доступ к базе</h2>
         <script type="snippet" lang="python">
             from django.db import connection, connections
@@ -138,9 +150,11 @@ <h2>Прямой доступ к базе</h2>
             another_cur = connections['another'].cursor()
             another_cur.execute("select * from tbl2 limit 10")
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Полезные утилиты</h2>
         <ul>
             <li><code>./manage.py validate</code> - проверить структуру моделей</li>
@@ -148,9 +162,11 @@ <h2>Полезные утилиты</h2>
             <li><code>./manage.py shell</code> - запустить python shell</li>
             <li><code>./manage.py dbshell</code> - запустить клиент базы данных</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Django Models</h2>
         <p><b>ORM</b> - Object relational mapping - библиотек предоставляющая объектно-ориентированный интерфейс к 
             реляционной базе данных. <b>Django Models</b> - библиотека ORM в Djnago.
@@ -161,9 +177,11 @@ <h2>Django Models</h2>
             <tr><td>объект модели</td><td>строка таблицы</td></tr>
             <tr><td>QuerySet</td><td>запрос</td></tr>
         </table>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>ORM vs SQL</h2>
         <script type="snippet" lang="python">
             cursor.execute('select * from users where age > 18')
@@ -175,9 +193,11 @@ <h2>ORM vs SQL</h2>
             for user in User.objects.filter(age__gt=18):
                 print user.name
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Модели Django</h2>
         <script type="snippet" lang="python">
             class Post(models.Model):
@@ -192,9 +212,11 @@ <h2>Модели Django</h2>
                     db_table = 'blogposts'
                     ordering = ['-creation_date']
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Типы полей</h2>
         <table>
             <tr><th>Django</th><th>MySQL</th></tr>
@@ -206,9 +228,11 @@ <h2>Типы полей</h2>
             <tr><td>DateField</td><td>DATE</td></tr>
             <tr><td>DateTimeField</td><td>DATETIME</td></tr>
         </table>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Свойства полей</h2>
         <ul>
             <li><code>blank</code> - поле может быть пустым</li>
@@ -220,13 +244,17 @@ <h2>Свойства полей</h2>
             <li><code>default</code> - значение по-умолчанию</li>
             <li><code>choices</code> - варианты значений</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Связи между моделями</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Связи между моделями</h2>
         <script type="snippet" lang="python">
             class Post(models.Model):
@@ -240,14 +268,18 @@ <h2>Связи между моделями</h2>
 
                 tags = models.ManyToManyField(Tag)
         </script>       
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Реализация в СУБД</h2>
-        <img src="pictures/db.png" class="center">
-    </div></section>
+        <img src="{{ site.pictures_url }}/lesson-11/db.png" class="center">
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Ограничения внешних ключей</h2>
         Применимо к полям типа <code>ForeignKey</code>, <code>OneToOneField</code>
         <ul>
@@ -256,9 +288,11 @@ <h2>Ограничения внешних ключей</h2>
             <li><code>SET NULL</code> → <code>models.SET_NULL</code></li>
             <li><code>NO ACTION</code> → <code>models.DO_NOTHING</code></li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Использование отношений в коде</h2>
         <script type="snippet" lang="python">
             # прямое использование
@@ -273,12 +307,5 @@ <h2>Использование отношений в коде</h2>
             category.post_set.all()        # [ Post ]
             tag.post_set.all()             # [ Post ]
         </script>
-    </div></section>
-
-    <div class="progress"><div></div></div>
-    <script src="../js/highlight.pack.js"></script>
-    <script src="../node_modules/shower-core/shower.min.js"></script>
-    <script src="../js/init.js"></script>
-
-</body>
-</html>
+    </div>
+</section>
diff --git a/lesson-12/index.html b/_lessons/lesson-12.html
similarity index 75%
rename from lesson-12/index.html
rename to _lessons/lesson-12.html
index d4d477d..b89b33b 100644
--- a/lesson-12/index.html
+++ b/_lessons/lesson-12.html
@@ -1,25 +1,17 @@
-<!DOCTYPE HTML>
-<html lang="en">
-<head>
-    <title>Web технологии</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=792, user-scalable=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <link rel="stylesheet" href="../node_modules/shower-bright/styles/screen.css">
-    <link rel="stylesheet" href="../css/highlight/github.css">
-    <link rel="stylesheet" href="../css/index.css">
-</head>
-<body class="list">
-    <header class="caption">
-        <h1>Web технологии</h1>
-        <p><a href="https://github.com/mialinx/">Дмитрий Смаль</a></p>
-    </header>
-
-    <section class="slide shout"><div>
+---
+num: 12
+title: API моделей Django.
+description: "Создание и изменение объектов. Загрузка данных из базы. QuerySet. ModelManagers. Расширение ModelManagers. Миграции баз данных."
+---
+
+<section class="slide shout">
+    <div>
         <h2>Django Models API</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Создание и изменение объектов</h2>
         <script type="snippet" lang="python">
             from blog.models import Category, Post
@@ -34,13 +26,15 @@ <h2>Создание и изменение объектов</h2>
             c.title="About Python"
             c.save()
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Создание объектов со связями</h2>
         <script type="snippet" lang="python">
             from blog.models import Category, Post
-            
+
             t = Tag(title="easy"); t.save()
             c = Category(title="Python"); c.save()
 
@@ -51,9 +45,11 @@ <h2>Создание объектов со связями</h2>
             p.tags.add(t)
             p.save()
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Загрузка объекта из базы</h2>
         <script type="snippet" lang="python">
             # по ключу
@@ -68,9 +64,11 @@ <h2>Загрузка объекта из базы</h2>
             except  MultipleObjectsReturned:
                 post = None
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Выборка нескольких объектов</h2>
         <script type="snippet" lang="python">
             all_posts = Post.objects.all()
@@ -84,22 +82,28 @@ <h2>Выборка нескольких объектов</h2>
             css_posts = css_posts.order_by('-rating')
             css_posts = css_posts[10:20]
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>QuerySets</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>QuerySet</h2>
         <p>
             <b>QuerySet</b> - объекты, представляющие собой запрос к базе данных. Именно <b>запрос</b>, а не его результаты.
             QuerySet являются <b>ленивыми (lazy)</b> объектами. Это значит, что запрос осуществляется не в момент 
             создания QuerySet, а в момент <b>итерации по нему</b>, либо вызова метода, возвращающего результат.
         </p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Chaining</h2>
         <script type="snippet" lang="python">
             posts = Post.objects                     # ModelManager
@@ -109,9 +113,11 @@ <h2>Chaining</h2>
             posts = posts.reverse()                  # QuerySet
             posts = posts[0:10]                      # [ Post ]
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Методы QuerySet (chaining)</h2>
         <ul>
             <li><code>filter</code>,<code>exclude</code> - фильтрация, в SQL это <code>WHERE</code></li>
@@ -121,9 +127,11 @@ <h2>Методы QuerySet (chaining)</h2>
             <li><code>distinct</code> - выборка уникальных значений</li>
             <li><code>select_related</code>,<code>prefetch_related</code> - выборка из нескольких таблиц</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Методы QuerySet (результат)</h2>
         <ul>
             <li><code>create</code> - создание нового объекта</li>
@@ -133,26 +141,32 @@ <h2>Методы QuerySet (результат)</h2>
             <li><code>count</code> - выборка количества <code>COUNT(*)</code></li>
             <li><code>get_or_create</code> - выборка объекта или его создание</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Синтаксис условий в QuerySet</h2>
         <p>В методах <code>filter</code> и <code>exclude</code>:
-        <ul>
-            <li><code>field = value</code> - точное совпадение</li>
-            <li><code>field__contains = value</code> - суффикс оператора <code>LIKE</code></li>
-            <li><code>field__isnull</code>, <code>field__gt</code>, <code>field__lte</code></li>
-            <li><code>relation__field = value</code> - условие по связанной таблице</code></li>
+            <ul>
+                <li><code>field = value</code> - точное совпадение</li>
+                <li><code>field__contains = value</code> - суффикс оператора <code>LIKE</code></li>
+                <li><code>field__isnull</code>, <code>field__gt</code>, <code>field__lte</code></li>
+                <li><code>relation__field = value</code> - условие по связанной таблице</code></li>
             <li><code>category__title__contains = "Perl"</code></li>
         </ul>
         Названия полей и таблиц не могут содержать <code>__</code>!</p>
-    </div></section>
+</div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>ModelManager</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>ModelManager</h2>
         <p>
             В модели содержатся методы для работы с одним объектом (одной строкой).
@@ -160,9 +174,11 @@ <h2>ModelManager</h2>
             <b>ModelManager</b> &laquo;по-умолчанию&raquo; содержит все те же методы что <b>QuerySet</b> 
             и используется для создания <b>QuerySet</b> объектов связанных с данной моделью.
         </p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>ModelManager &laquo;по-умолчанию&raquo;</h2>
         <script type="snippet" lang="python">
             class Post(models.Model):
@@ -173,9 +189,11 @@ <h2>ModelManager &laquo;по-умолчанию&raquo;</h2>
             posts = Post.objects.all()             # QuerySet
             posts = Post.objects.filter(id__gt=10) # QuerySet
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Свой ModelManager</h2>
         <script type="snippet" lang="python">
             class PostManager(models.Manager):
@@ -193,9 +211,11 @@ <h2>Свой ModelManager</h2>
 
             posts = Post.objects   # PostManager
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>RelatedManager</h2>
         <script type="snippet" lang="python">
             class Post(models.Model):
@@ -205,10 +225,12 @@ <h2>RelatedManager</h2>
             p1 = Post.objects.get(pk=3)
             tags = p1.tags  # RelatedManager
         </script>
-        <p><b>RelatedManager</b> связан с конкретным объектом Post и во все выборки будет добавлять условие <code>post=p1</code>
-    </div></section>
+        <p><b>RelatedManager</b> связан с конкретным объектом Post и во все выборки будет добавлять условие <code>post=p1</code></p>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Методы RelatedManager</h2>
         <ul>
             <li><code>create(**kwargs)</code> - создание нового тэга, связанного с постом</li>
@@ -216,19 +238,25 @@ <h2>Методы RelatedManager</h2>
             <li><code>remove(t2)</code> -  отвязка существующего тэга <code>t2</code> от текущего поста</li>
             <li><code>clear()</code> - очистка списка тэгов у текущего поста</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Миграции</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Миграции</h2>
         <p><b>Миграция</b> - это процедура изменения схемы базы данных для приведения ее в соответствие с моделями.</p>
         <p>Начиная с версии 1.7 Django поддерживает миграции на уровне фреймворка.</p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Django миграции</h2>
         <ul>
             <li><code>./manage.py makemigrations</code> - анализ изменений в моделях и создание миграций.</li>
@@ -237,9 +265,11 @@ <h2>Django миграции</h2>
             <plus>прямые и обратные миграции</plus>
             <minus>на практике часто неудобные или недостаточные</minus>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Свои миграции</h2>
         <code>project/migration/2015-08-08-more-post-fields.py</code>
         <script type="snippet" lang="python">
@@ -253,25 +283,22 @@ <h2>Свои миграции</h2>
                 alter table blog_post add column is_best tinyint(1)
             """);
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Best practices</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Fat controller</h2>
         <p>Типичная проблема начинающих разработчиков - размещение логики в контроллерах.
-           Это плохое решение, у которого есть имя - антипаттерн <b>Fat Controller</b>.<br>
-           Размещение логики в контроллере лишает вас возможности использовать ее повторно.
-           Всю бизнес-логику приложения следует размещать в <b>моделях</b>.
+            Это плохое решение, у которого есть имя - антипаттерн <b>Fat Controller</b>.<br>
+            Размещение логики в контроллере лишает вас возможности использовать ее повторно.
+            Всю бизнес-логику приложения следует размещать в <b>моделях</b>.
         </p>
-    </div></section>
-
-    <div class="progress"><div></div></div>
-    <script src="../js/highlight.pack.js"></script>
-    <script src="../node_modules/shower-core/shower.min.js"></script>
-    <script src="../js/init.js"></script>
-
-</body>
-</html>
+    </div>
+</section>
diff --git a/lesson-13/index.html b/_lessons/lesson-13.html
similarity index 75%
rename from lesson-13/index.html
rename to _lessons/lesson-13.html
index 72b8c1a..7cc2b5e 100644
--- a/lesson-13/index.html
+++ b/_lessons/lesson-13.html
@@ -1,25 +1,17 @@
-<!DOCTYPE HTML>
-<html lang="en">
-<head>
-    <title>Web технологии</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=792, user-scalable=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <link rel="stylesheet" href="../node_modules/shower-bright/styles/screen.css">
-    <link rel="stylesheet" href="../css/highlight/github.css">
-    <link rel="stylesheet" href="../css/index.css">
-</head>
-<body class="list">
-    <header class="caption">
-        <h1>Web технологии</h1>
-        <p><a href="https://github.com/mialinx/">Дмитрий Смаль</a></p>
-    </header>
+---
+num: 13
+title: Отображение данных.
+description: "Отображение страницы объекта. 404-страницы. Отображение связанных сущностей. Отображение списка объектов. Постраничное отображение. Progressive loading."
+---
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Типичные сценарии web-приложений</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Типичные сценарии</h2>
         <ul>
             <li>Отображение объекта</li>
@@ -29,13 +21,17 @@ <h2>Типичные сценарии</h2>
             <li>Запуск фоновых процессов</li>
             <li>Интеграция с внешними системами</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Отображение объекта</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Маршрут в urls.py</h2>
         <script type="snippet" lang="python">
             # blog/urls.py
@@ -50,9 +46,11 @@ <h2>Маршрут в urls.py</h2>
             Часто на объекты ссылаются не по <b>id</b>, а по <b>slug</b>.
             Это позволяет строить более запоминающиеся для человека URL.
         </p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Базовый view</h2>
         <script type="snippet" lang="python">
             from django.http import Http404
@@ -67,9 +65,11 @@ <h2>Базовый view</h2>
                     'post':     post,
                 })
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Использование shortcut'ов</h2>
         <script type="snippet" lang="python">
             from django.shortcuts import render, get_object_or_404
@@ -82,9 +82,11 @@ <h2>Использование shortcut'ов</h2>
                     'post':     post,
                 })
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Связанные сущности</h2>
         <script type="snippet" lang="python">
             def post_details(request, slug):
@@ -100,19 +102,23 @@ <h2>Связанные сущности</h2>
                     'vote':     vote,
                 })
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Связанные сущности</h2>
-        <script type="snippet" lang="django">
+        <script type="snippet" lang="django"> {% raw %}
             <h1>{{ post.category.title }} - {{ post.title }}</h1>
             {% for tag in post.tags.all %}
                 <a href="{{ tag.get_url }}">{{ tag }}</a>
             {% endfor %}
-        </script>
-    </div></section>
+        {% endraw %} </script>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Методы в моделях</h2>
         <script type="snippet" lang="python">
             from django.core.urlresolvers import reverse
@@ -128,13 +134,17 @@ <h2>Методы в моделях</h2>
                 def __unicode__(self):
                     return self.title
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Отображение списка объектов</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Постраничное отображение</h2>
         <script type="snippet" lang="python">
             from django.core.paginator import Paginator
@@ -150,11 +160,13 @@ <h2>Постраничное отображение</h2>
                     'paginator': paginator, 'page': page,
                 })
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Шаблон paginator</h2>
-        <script type="snippet" lang="django">
+        <script type="snippet" lang="django"> {% raw %}
             <nav><ul class="pagination">
             {% for p in paginator.page_range %}
               {% if p.number == page.number %}
@@ -167,10 +179,12 @@ <h2>Шаблон paginator</h2>
               </li>
             {% endfor %}
             </ul></nav>
-        </script>
-    </div></section>
+        {% endraw %} </script>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>django.core.paginator.Paginator</h2>
         <h3>Свойства</h3>
         <ul>
@@ -182,9 +196,11 @@ <h3>Методы</h3>
         <ul>
             <li><code>page(n)</code> - получить n-тый объект <code>Page</code></li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>django.core.paginator.Page</h2>
         <h3>Свойства</h3>
         <ul>
@@ -197,9 +213,11 @@ <h3>Методы</h3>
             <li><code>next_page_number()</code>/<code>previous_page_number()</code></li>
             <li><code>start_index()</code>/<code>end_index()</code> - номера первого и последнего объектов на странице</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Best practices</h2>
         <ul>
             <li>Проверять валидность параметров <code>page</code> и <code>limit</code></li>
@@ -207,9 +225,11 @@ <h2>Best practices</h2>
             <li>Ограничивать максимальное значение <code>limit</code> &lt;= 1000</li>
             <li>Обрабатывать &laquo;пустую&raquo; последнюю страницу</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <script type="snippet" lang="python">
             def paginate(request, qs):
                 try:
@@ -229,42 +249,50 @@ <h2>Best practices</h2>
                     page = paginator.page(paginator.num_pages)
                 return page
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Progressive loading</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Progressive loading</h2>
         <p><b>Постраничная загрузка</b> хорошо работает в тех случаях, когда легко определить число объектов, подходящих
             под поисковый запрос. Другими словами - когда можно составить эффективный SQL запрос.</p>
         <p>Иногда это сделать сложно, например: &laquo;отображать все посты в порядке добавления, но не больше одного поста из одной категории подряд&raquo;.</p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Свой ModelManager</h2>
         <p style="font-size: 85%">
-        <script type="snippet" lang="python">
-            class PostManager(models.Manager):
-                def main(self, since, limit=10):
-                    qs = self.order_by('-id')
-                    res = []
-                    if since is not None:
-                        qs = qs.filter('id__lt'=since)
-                    for p in qs[:1000]:
-                        if len(res):
-                            res.append(p)        
-                        elif res[-1].category != p.category:
-                            res.append(p)
-                        if len(res) >= limit:
-                            break
-                    return res
-        </script>
+            <script type="snippet" lang="python">
+                class PostManager(models.Manager):
+                    def main(self, since, limit=10):
+                        qs = self.order_by('-id')
+                        res = []
+                        if since is not None:
+                            qs = qs.filter('id__lt'=since)
+                        for p in qs[:1000]:
+                            if len(res):
+                                res.append(p)        
+                            elif res[-1].category != p.category:
+                                res.append(p)
+                            if len(res) >= limit:
+                                break
+                        return res
+            </script>
         </p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>view и шаблон</h2>
         <script type="snippet" lang="python">
             def post_list_main(request):
@@ -275,15 +303,8 @@ <h2>view и шаблон</h2>
                     'since': posts[-1].id,
                 })
         </script>
-        <script type="snippet" lang="python">
+        <script type="snippet" lang="python"> {% raw %}
             <a href="/blog/main/?since={{ since }}">Далее</a>
-        </script>
-    </div></section>
-
-    <div class="progress"><div></div></div>
-    <script src="../js/highlight.pack.js"></script>
-    <script src="../node_modules/shower-core/shower.min.js"></script>
-    <script src="../js/init.js"></script>
-
-</body>
-</html>
+        {% endraw %} </script>
+    </div>
+</section>
diff --git a/_lessons/lesson-14.html b/_lessons/lesson-14.html
new file mode 100644
index 0000000..7ed14a0
--- /dev/null
+++ b/_lessons/lesson-14.html
@@ -0,0 +1,310 @@
+---
+num: 14
+title: Обработка форм.
+description: "GET и POST формы. Общий сценарий обработки. Перенаправления в HTTP. Описание форм в Django. Типы полей в формах Django. Валидация данных. Использование форм в контроллерах и шаблонах. CSRF"
+---
+
+<section class="slide shout">
+    <div>
+        <h2>Обработка форм</h2>
+    </div>
+</section>
+
+<section class="slide">
+    <div>
+        <h2>GET / POST формы</h2>
+        <p>
+            <b>GET</b> - метод для <b>получения</b> данных. GET запросы могут быть закешированны промежуточными серверами.
+            <b>GET</b> должен применяться только в <b>поисковых</b> формах.
+        </p>
+        <p>
+            <b>POST</b> - метод для изменения данных. POST запросы никогда не кешируются промежуточными серверами.
+            <b>POST</b> должен применяться в формах, <b>изменяющих данные</b> на сервере.
+        </div>
+    </section>
+
+    <section class="slide">
+        <div>
+            <h2>Общий сценарий обработки</h2>
+            <img src="{{ site.pictures_url }}/lesson-14/forms.png" class="center">
+        </div>
+    </section>
+
+    <section class="slide">
+        <div>
+            <h2>Best practice</h2>
+            <ul>
+                <li><b>Всегда</b> проверять пользовательские данные</li>
+                <li>Для форм, изменяющих данные, использовать метод <b>POST</b></li>
+                <li>Не заставлять вводить данные повторно</li>
+                <li>Сообщать об ошибках детально - по полям</li>
+                <li>Сообщать об успешном сохранении формы</li>
+                <li>При успешном сохранении делать перенаправление</li>
+            </ul>
+        </div>
+    </section>
+
+    <section class="slide shout">
+        <div>
+            <h2>HTTP Redirect</h2>
+        </div>
+    </section>
+
+    <section class="slide">
+        <div>
+            <h2>Перенаправления в HTTP</h2>
+            <img src="{{ site.pictures_url }}/lesson-14/redirect.png" class="center">
+        </div>
+    </section>
+
+    <section class="slide">
+        <div>
+            <h2>Перенаправления в HTTP</h2>
+            <ul>
+                <li><code>302 Found</code> - временное перенаправление</li>
+                <li><code>301 Moved Permanently</code> - постоянное перенаправление (кешируется в браузере)</li>
+                <li><code>Location: url</code> - URL для повторного запроса. Может быть как абсолютным, так и относительным.</li>
+            </ul>
+        </div>
+    </section>
+
+    <section class="slide">
+        <div>
+            <h2>Перенаправления в Django</h2>
+            <script type="snippet" lang="python">
+                from django.http import HttpResponseRedirect
+
+                def some_view(request):
+                    # logic..
+                    return HttpResponseRedirect('/new_url/')
+
+                # уязвимость open redirect
+                def dangerous_view(request):
+                    url = request.GET.get('continue')
+                    return HttpResponseRedirect(url)
+            </script>
+        </div>
+    </section>
+
+    <section class="slide shout">
+        <div>
+            <h2>Django forms</h2>
+        </div>
+    </section>
+
+    <section class="slide">
+        <div>
+            <h2>Описание форм</h2>
+            <script type="snippet" lang="python">
+                from django import forms
+
+                class FeedbackForm(forms.Form):
+                    email = forms.EmailField(max_length=100)
+                    message = forms.CharField(widget=forms.Textarea)
+
+                    def clean(self):
+                        if is_spam(self.clean_data):
+                            raise forms.ValidationError(
+                                u'Сообщение похоже на спам',
+                                code='spam'
+                            )
+            </script>
+        </div>
+    </section>
+
+    <section class="slide">
+        <div>
+            <script type="snippet" lang="python">
+                class AddPostForm(forms.Form):
+                    title = forms.CharField(max_length=100)
+                    message = forms.CharField(widget=forms.Textarea)
+
+                    def clean_message(self):
+                        message = self.cleaned_data['message']
+                        if not is_ethic(message):
+                            raise forms.ValidationError(
+                                u'Сообщение не корректно', code=12)
+                        return message + \
+                               "\nThank you for your attention."
+
+                    def save(self):
+                        post = Post(**self.cleaned_data)
+                        post.save()
+                        return post
+            </script>
+        </div>
+    </section>
+
+    <section class="slide">
+        <div>
+            <h2>Типы полей</h2>
+            <ul>
+                <li><code>BooleanField</code> - флажок</li>
+                <li><code>CharField</code> - текстовое поле ввода</li>
+                <li><code>EmailField</code> - текстовое поле, Email</li>
+                <!--li><code>PasswordField</code> - текстовое поле, пароль</li-->
+                <li><code>ChoiceField</code> - выбор из нескольких вариантов</li>
+                <li><code>DateField</code> - выбор даты</li>
+                <li><code>DateTimeField</code> - выбор даты и времени</li>
+                <li><code>FileField</code> - загрузка файлов</li>
+            </ul>
+        </div>
+    </section>
+
+    <section class="slide">
+        <div>
+            <h2>Валидация данных</h2>
+            <ul>
+                <li>По типу поля, например <code>EmailField</code></li>
+                <li><code>clean_xxx</code> - доп. проверка поля xxx, может изменить значение</li>
+                <li><code>clean</code> - доп. проверка всех полей формы</li>
+            </ul>
+            <p>
+                Методы <code>clean</code> и <code>clean_xxx</code> должны использовать <code>self.cleaned_data</code>
+                для получения данных формы и поднять <code>ValidationError</code> в случае некорректных данных.
+            </p>
+        </ul>
+    </div>
+</section>
+
+<section class="slide">
+    <div>
+        <h2>Использование во view</h2>
+        <script type="snippet" lang="python">
+            def post_add(request):
+                if request.method == "POST":
+                    form = AddPostForm(request.POST)
+                    if form.is_valid():
+                        post = form.save()
+                        url = post.get_url()
+                        return HttpResponseRedirect(url)
+                else:
+                    form = AddPostForm()
+                return render(request, 'blog/post_add.html', {
+                    'form': form
+                })
+        </script>
+    </div>
+</section>
+
+<section class="slide">
+    <div>
+        <h2>Использование в шаблонах</h2>
+        {% raw %}
+        <script type="snippet" lang="django">
+            {{ form.as_ul }}
+        </script>
+        <script type="snippet" lang="django">
+            {{ form.as_p }}
+        </script>
+        <script type="snippet" lang="django">
+            {{ form.as_table }}
+        </script>
+        {% endraw %}
+    </div>
+</section>
+
+<section class="slide">
+    <div>
+        <script type="snippet" lang="django"> {% raw %}
+            {% for e in form.non_field_errors %}
+              <div class="alert alert-danger">{{ e }}</div>
+            {% endif %}
+            <form class="form-horizontal" method="post" action="/blog/add/">
+              <fieldset>
+                {% for field in form %}
+                  <div class="control-group 
+                    {% if field.errors %}has-error{% endif %}">
+                    <label class="control-label">{{ field.label }}</label>
+                    <div class="controls">{{ field }}</div>
+                  </div>
+                {% endfor %}
+              </fieldset>
+              <div class="form-actions">
+                <button type="submit" class="btn btn-primary">
+                Сохранить</button>
+              </div>
+            </form>
+        {% endraw %} </script>
+    </div>
+</section>
+
+<section class="slide">
+    <div>
+        <h2>Model forms</h2>
+        <script type="snippet" lang="python">
+            from django.forms import ModelForm
+
+            class ArticleForm(ModelForm):
+                class Meta:
+                    model = Post
+                    fields = ['title', 'content', 
+                              'category', 'tags']
+        </script>
+        <p>Метод <code>save</code> уже определен и сохраняет модель <code>Meta.model</code></p>
+    </div>
+</section>
+
+<section class="slide shout">
+    <div>
+        <h2>Безопасность</h2>
+    </div>
+</section>
+
+<section class="slide">
+    <div>
+        <h2>Проверка пользователя</h2>
+        <script type="snippet" lang="python">
+            class AddPostForm(forms.Form):
+                # ... поля ...
+                def __init__(self, user, **kwargs):
+                    self._user = user
+                    super(AddPostForm, self).__init__(**kwargs)
+                def clean(self):
+                    if self._user.is_banned:
+                        raise ValidationError(u'Доступ ограничен')
+                def save(self):
+                    self.cleaned_data['author'] = self._user
+                    return Post.objects.create(**self.cleaned_data)
+        </script>
+    </div>
+</section>
+
+<section class="slide">
+    <div>
+        <h2>Проверка пользователя (2)</h2>
+        <script type="snippet" lang="python">
+            from django.contrib.auth.decorators \
+                import login_required
+
+            @login_required
+            def post_add(request):
+                form = AddPostForm(request.user, request.POST)
+                if form.is_valid():
+                    post = form.save()
+        </script>
+    </div>
+</section>
+
+<section class="slide">
+    <div>
+        <h2>Cross Site Resource Forgery</h2>
+        <img src="{{ site.pictures_url }}/lesson-14/csrf.png" class="center">
+    </div>
+</section>
+
+<section class="slide">
+    <div>
+        <h2>Методы борьбы с CSRF</h2>
+        <ul>
+            <li>Проверка метода <code>@require_POST</code></li>
+            <li>Проверка заголовка <code>Referer</code></li>
+            <li>Проверка CSRF-токенов</li>
+        </ul>
+        <script type="snippet" lang="django"> {% raw %}
+            <form method="POST" action="/blog/add">
+                {% csrf_token %}
+            </form>
+        {% endraw %} </script>
+    </div>
+</section>
diff --git a/lesson-15/index.html b/_lessons/lesson-15.html
similarity index 78%
rename from lesson-15/index.html
rename to _lessons/lesson-15.html
index 0878bb3..9bc2830 100644
--- a/lesson-15/index.html
+++ b/_lessons/lesson-15.html
@@ -1,41 +1,39 @@
-<!DOCTYPE HTML>
-<html lang="en">
-<head>
-    <title>Web технологии</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=792, user-scalable=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <link rel="stylesheet" href="../node_modules/shower-bright/styles/screen.css">
-    <link rel="stylesheet" href="../css/highlight/github.css">
-    <link rel="stylesheet" href="../css/index.css">
-</head>
-<body class="list">
-    <header class="caption">
-        <h1>Web технологии</h1>
-        <p><a href="https://github.com/mialinx/">Дмитрий Смаль</a></p>
-    </header>
-
-    <section class="slide shout"><div>
+---
+num: 15
+title: Сессии и Авторизация.
+description: "Basic HTTP Authorization. Механизм Cookie. Установка и получение cookie в HTTP. Авторизация с использованием cookie. Сценарий входа: login. Сценарий проверки сессии. Middleware в Django. Безопасное хранение паролей. Безопасность сессий."
+---
+
+<section class="slide shout">
+    <div>
         <h2>Авторизация в Web-приложениях</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Авторизация в Web-приложениях</h2>
         <p>HTTP - <b>stateless</b> протокол, т.е. не предполагает поддержания соединения между клиентом и сервером.
-           Это значит, что сервер не может связать информацию о пользователе с конкретным соединением и вынужден
-           загружать ее при каждом запросе.</p>
-    </div></section>
+            Это значит, что сервер не может связать информацию о пользователе с конкретным соединением и вынужден
+            загружать ее при каждом запросе.</p>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Basic HTTP Authorization</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Basic HTTP Authorization</h2>
-        <img src="pictures/basic.png" class="center">
-    </div></section>
+        <img src="{{ site.pictures_url }}/lesson-15/basic.png" class="center">
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Заголовки и коды ответа</h2>
         <ul>
             <li><code>401 Unauthorized</code> - для доступа к ресурсу нужна авторизация</li>
@@ -45,9 +43,11 @@ <h2>Заголовки и коды ответа</h2>
             <li><code>403 Forbidden</code> - логин/пароль не подходят</li>
             <li><code>REMOTE_USER</code> - CGI переменная с именем авторизованного пользователя</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Достоинства и недостатки</h2>
         <ul>
             <plus>Простота и надежность</plus>
@@ -57,13 +57,17 @@ <h2>Достоинства и недостатки</h2>
             <minus>Невозможно изменить дизайн формы входа</minus>
             <minus>Невозможно &laquo;сбросить&raquo; авторизацию</minus>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Cookies</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Cookies</h2>
         <p><b>Cookies</b> - небольшие фрагменты данных, которые браузер хранит на стороне клиента 
             и передает на сервер при каждом запросе. <b>Cookies</b> привязаны к доменам, поэтому 
@@ -72,9 +76,11 @@ <h2>Cookies</h2>
             состояния (state management) в протоколе HTTP и, в частности, для авторизации.
         </p>
         <!-- RFC: 6265 -->
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Атрибуты Cookie</h2>
         <ul>
             <li><code>name=value</code> - имя и значение cookie</li>
@@ -84,9 +90,11 @@ <h2>Атрибуты Cookie</h2>
             <li><code>Secure</code> - cookie должна передаваться только по https</li>
             <li><code>HttpOnly</code> - cookie не доступна из JavaScript</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Установка и удаление Cookies</h2>
         <script type="snippet" lang="plain">
             Set-Cookie: sessid=d232rn38jd1023e1nm13r25z; 
@@ -100,18 +108,22 @@ <h2>Установка и удаление Cookies</h2>
                 Expires=Sun, 06 Nov 1994 08:49:37 GMT
         </script>
         <p>Для удаления cookie, сервер устанавливает <code>Expires</code> в прошлом.</p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Получение Cookies</h2>
         <script type="snippet" lang="plain">
             Cookie: sessid=d232rn38jd1023e1nm13r25z; lang=ru;
                 csrftoken=vVqoyo5vzD3hWRHQDRpIHzVmKLfBQIGD; 
         </script>
         <p>При каждом запросе браузер выбирает подходящие cookies и отправляет только их значения.</p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Правила выбора Cookies</h2>
         Пусть URL=<code>http://my.app.site.com/blog/post/12</code><br>
         Браузер выберет все cookies, у которых:
@@ -125,9 +137,11 @@ <h2>Правила выбора Cookies</h2>
             </li>
             <li>Не стоит флага <code>Secure</code></li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Работа с cookie в Django</h2>
         <script type="snippet" lang="python">
             # установка
@@ -143,18 +157,24 @@ <h2>Работа с cookie в Django</h2>
             request.COOKIES                # все cookies
             request.COOKIES.get('sessid')  # одна cookie
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Cookie-based авторизация</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Cookie-based авторизация</h2>
-        <img src="pictures/cookieauth.png" class="center">
-    </div></section>
+        <img src="{{ site.pictures_url }}/lesson-15/cookieauth.png" class="center">
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Необходимые модели</h2>
         <script type="snippet" lang="python">
             class User(models.Model):
@@ -167,22 +187,26 @@ <h2>Необходимые модели</h2>
                 user = models.ForeignKey(User)
                 expires = models.DateTimeField()
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Вход на сайт</h2>
         <p>
-        URL = <code>/login/</code>
-        <ul>
-            <li>Клиент отправляет login / password на сервер</li>
-            <li>Сервер проверяет login / password и создает <b>сессию</b></li>
-            <li>Сервер устанавливает cookie, содержащий <b>ключ сессии</b></li>
-            <li>Сервер делает перенаправление на целевую страницу</li>
-        </ul>
+            URL = <code>/login/</code>
+            <ul>
+                <li>Клиент отправляет login / password на сервер</li>
+                <li>Сервер проверяет login / password и создает <b>сессию</b></li>
+                <li>Сервер устанавливает cookie, содержащий <b>ключ сессии</b></li>
+                <li>Сервер делает перенаправление на целевую страницу</li>
+            </ul>
         </p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <script type="snippet" lang="python">
             def login(request):
                 error = ''
@@ -202,9 +226,11 @@ <h2>Вход на сайт</h2>
                         error = u'Неверный логин / пароль'
                 return render(request, 'login.html', {'error': error })
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <script type="snippet" lang="python">
             def do_login(login, password):
                 try:
@@ -221,9 +247,11 @@ <h2>Вход на сайт</h2>
                 session.save()
                 return session.key
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Проверка сессии</h2>
         <p>
             При запросе по любому URL:
@@ -234,9 +262,11 @@ <h2>Проверка сессии</h2>
             </ul>
             Как правило, для проверки сессии используются <code>middleware</code>.
         </p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Middleware в Django</h2>
         <p><b>Middleware</b> - это Python класс, в котором есть один из указанных ниже методов.
             Список всех активных middleware указан в настройке <code>MIDDLEWARE_CLASSES</code>.
@@ -247,9 +277,11 @@ <h2>Middleware в Django</h2>
                 <li><code>process_exception(request, exception)</code></li>
             </ul>
         </p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <script type="snippet" lang="python">
             # project/project/middleware.py
             class CheckSessionMiidleware(class): 
@@ -266,9 +298,11 @@ <h2>Middleware в Django</h2>
                         request.session = None
                         request.user = None
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Выход из приложения</h2>
         <p>Для выхода из приложения достаточно удалить объект сессии:</p>
         <script type="snippet" lang="python">
@@ -279,17 +313,21 @@ <h2>Выход из приложения</h2>
                 url = request.GET.get('continue', '/')
                 return HttpResponseRedirect(url)
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Встроенная авторизация Django</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>django.contrib.sessions</h2>
         <p>Предоставляет поддержку сессий, в том числе <b>анонимных</b>. 
-           Позволяет хранить в сессии произвольные данные, а не только ID пользователя.
-           Позволяет хранить сессии в различных хранилищах, например <b>Redis</b> или <b>Memcached</b>.
+            Позволяет хранить в сессии произвольные данные, а не только ID пользователя.
+            Позволяет хранить сессии в различных хранилищах, например <b>Redis</b> или <b>Memcached</b>.
         </p>
         <script type="snippet" lang="python">
             def some_view(request):
@@ -297,9 +335,11 @@ <h2>django.contrib.sessions</h2>
                 request.session.flush()
                 request.session['some_name'] = 'val2'
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>django.contrib.auth</h2>
         <p>Предоставляет готовую модель <code>User</code>, готовую систему разделения прав, 
             view для регистрации / входа / выхода. Используется другими приложениями, например <code>django.contrib.admin</code>
@@ -312,13 +352,17 @@ <h2>django.contrib.auth</h2>
                 else:
                     pass # анонимный пользователь
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Безопасность</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Безопасность паролей</h2>
         <p>
             Главная задача - максимально затруднить доступ злоумышленника к исходному паролю пользователя.
@@ -329,9 +373,11 @@ <h2>Безопасность паролей</h2>
                 <li>Защита от перебора в форме логина, например <b>captcha</b></li>
             </ul>
         </p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Безопасность сессий</h2>
         <p>
             Основное направление атаки - кража cookie, хранящей ключ сессии, т.е. кража авторизации.
@@ -344,12 +390,5 @@ <h2>Безопасность сессий</h2>
                 <li>Запрос пароля при критических действиях: смене пароля и т.д.</li>
             </ul>
         </p>
-    </div></section>
-
-    <div class="progress"><div></div></div>
-    <script src="../js/highlight.pack.js"></script>
-    <script src="../node_modules/shower-core/shower.min.js"></script>
-    <script src="../js/init.js"></script>
-
-</body>
-</html>
+    </div>
+</section>
diff --git a/lesson-16/index.html b/_lessons/lesson-16.html
similarity index 78%
rename from lesson-16/index.html
rename to _lessons/lesson-16.html
index 5e24258..7bc555e 100644
--- a/lesson-16/index.html
+++ b/_lessons/lesson-16.html
@@ -1,34 +1,28 @@
-<!DOCTYPE HTML>
-<html lang="en">
-<head>
-    <title>Web технологии</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=792, user-scalable=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <link rel="stylesheet" href="../node_modules/shower-bright/styles/screen.css">
-    <link rel="stylesheet" href="../css/highlight/github.css">
-    <link rel="stylesheet" href="../css/index.css">
-</head>
-<body class="list">
-    <header class="caption">
-        <h1>Web технологии</h1>
-        <p><a href="https://github.com/mialinx/">Дмитрий Смаль</a></p>
-    </header>
-
-    <section class="slide shout"><div>
+---
+num: 16
+title: Технология AJAX.
+description: "AJAX на стороне клиента. AJAX запросы с использованием jQuery. Передача HTML и JSON в AJAX запросах. Особенности контроллеров для AJAX. Cross Origin Resource Sharing."
+---
+
+<section class="slide shout">
+    <div>
         <h2>AJAX</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Asynchronous JavaScript And XML</h2>
         <p><b>AJAX</b> - технология загрузки данных / отправки форм без обновления WEB страницы.</p>
         <p>
-           XML - совершенно не обязателен, возможны отправка и прием данных любого типа.
-           Чаще всего вместо XML используется HTML либо JSON для загрузки сырых данных.
+            XML - совершенно не обязателен, возможны отправка и прием данных любого типа.
+            Чаще всего вместо XML используется HTML либо JSON для загрузки сырых данных.
         </p>
-    </div></section>
-    
-    <section class="slide"><div>
+    </div>
+</section>
+
+<section class="slide">
+    <div>
         <h2>AJAX на стороне клиента</h2>
         <script type="snippet" lang="javascript">
             var xhr = new XMLHttpRequest();
@@ -42,9 +36,11 @@ <h2>AJAX на стороне клиента</h2>
             };
             xhr.send("a=5&b=4");
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>AJAX при помощи jQuery</h2>
         <script type="snippet" lang="javascript">
             $.ajax({
@@ -59,9 +55,11 @@ <h2>AJAX при помощи jQuery</h2>
                 console.log('http error')
             });
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Особенности и ограничения AJAX</h2>
         <ul>
             <li><b>Same Origin Policy</b> - AJAX запросы можно отправлять только на свой домен. В современных браузерах есть CORS.</li>
@@ -69,9 +67,11 @@ <h2>Особенности и ограничения AJAX</h2>
             <li>AJAX на стороне сервера не отличим от обычного запроса. jQuery добавляет заголовок <code>X-Requested-With: XMLHttpRequest</code></li>
             <li>Результаты запроса передаются в JavaScript функцию поэтому стандартные методы обработки ошибок - не работают.</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Загрузка HTML данных</h2>
         <script type="snippet" lang="python">
             def comments_list(request):
@@ -83,9 +83,11 @@ <h2>Загрузка HTML данных</h2>
                 })
         </script>
         <p>В <code>blog/comments.html</code> отображается только HTML код комментариев, без окружающей страницы.</p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Обмен данными в JSON</h2>
         <script type="snippet" lang="javascript">
             {
@@ -100,9 +102,11 @@ <h2>Обмен данными в JSON</h2>
                 "message":"вы не авторизованы"
             }
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>HttpResponseAjax</h2>
         <script type="snippet" lang="python">
             import json
@@ -120,9 +124,11 @@ <h2>HttpResponseAjax</h2>
                         status = 'error', code = code, message = message
                     )
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Использование HttpResponseAjax</h2>
         <script type="snippet" lang="python">
             @login_required_ajax
@@ -137,9 +143,11 @@ <h2>Использование HttpResponseAjax</h2>
                         message = form.errors.as_text(), 
                     )
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Проверка авторизации в AJAX</h2>
         <script type="snippet" lang="python">
             def login_required_ajax(view):
@@ -155,25 +163,33 @@ <h2>Проверка авторизации в AJAX</h2>
                         redirect('/login/?continue=' + request.get_full_path())
                 return view2
         </script> 
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>CORS</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Cross Origin Resource Sharing</h2>
         <p>Браузер выполняет AJAX запросы даже к чужому домену, но в этом случае не вызывает функцию-callback в JavaScript, т.е. 
-           не дает использовать данные, загруженные с чужого домена.</p>
+            не дает использовать данные, загруженные с чужого домена.</p>
         <p><b>CORS</b> позволяет серверу явно разрешить использование данных при кросс-доменных запросах.</p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Cross Origin Resource Sharing</h2>
-        <img src="pictures/cors.png" class="center">
-    </div></section>
+        <img src="{{ site.pictures_url }}/lesson-16/cors.png" class="center">
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Заголовки CORS</h2>
         <ul>
             <li><code>Origin</code> - указывает URL запрашивающего приложения</li>
@@ -181,9 +197,11 @@ <h2>Заголовки CORS</h2>
                 <code>origin</code> должен либо совпадать с загловком <code>Origin</code> в запросе, либо <code>*</code>.</li>
             <li><code>Access-Control-Allow-Credentials</code> - позволяет использовать данные, если были переданы cookies.</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Использование CORS</h2>
         <p>
             Не следует разрешать CORS для всех запросов (<code>*</code>).<br>
@@ -193,9 +211,11 @@ <h2>Использование CORS</h2>
                 <li>Проверка домена по списку доверенных</li>
             </ul>
         </p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>CORS на клиенте</h2>
         <script type="snippet" lang="javascript">
             $.ajax({
@@ -210,9 +230,11 @@ <h2>CORS на клиенте</h2>
                 // ...
             });
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>CORS на сервере</h2>
         <script type="snippet" lang="python">
             def allow_cors(view):
@@ -227,12 +249,5 @@ <h2>CORS на сервере</h2>
                     return response
                 return view2
         </script> 
-    </div></section>
-
-    <div class="progress"><div></div></div>
-    <script src="../js/highlight.pack.js"></script>
-    <script src="../node_modules/shower-core/shower.min.js"></script>
-    <script src="../js/init.js"></script>
-
-</body>
-</html>
+    </div>
+</section>
diff --git a/lesson-17/index.html b/_lessons/lesson-17.html
similarity index 78%
rename from lesson-17/index.html
rename to _lessons/lesson-17.html
index 9985a52..48293b8 100644
--- a/lesson-17/index.html
+++ b/_lessons/lesson-17.html
@@ -1,25 +1,17 @@
-<!DOCTYPE HTML>
-<html lang="en">
-<head>
-    <title>Web технологии</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=792, user-scalable=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <link rel="stylesheet" href="../node_modules/shower-bright/styles/screen.css">
-    <link rel="stylesheet" href="../css/highlight/github.css">
-    <link rel="stylesheet" href="../css/index.css">
-</head>
-<body class="list">
-    <header class="caption">
-        <h1>Web технологии</h1>
-        <p><a href="https://github.com/mialinx/">Дмитрий Смаль</a></p>
-    </header>
+---
+num: 17
+title: Real-time сообщения.
+description: "Общая архитектура. Polling. Long-polling (comet). Server-push. WebSocket. Механизм обновления (Upgrade) соединений."
+---
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Real Time сообщения</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Примеры использования</h2>
         <ul>
             <li>Чаты и мессенджеры</li>
@@ -28,15 +20,19 @@ <h2>Примеры использования</h2>
             <li>Push уведомления</li>
             <li>Сетевой обмен в играх на HTML</li>
         </ul>
-    </div></section>
-    
-    <section class="slide"><div>
+    </div>
+</section>
+
+<section class="slide">
+    <div>
         <h2>Архитектура</h2>
         <p>&nbsp;</p>
-        <img src="pictures/arch.png" class="center">
-    </div></section>
+        <img src="{{ site.pictures_url }}/lesson-17/arch.png" class="center">
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Решения</h2>
         <ul>
             <li><b>Polling</b> - периодический опрос сервера</li>
@@ -44,18 +40,24 @@ <h2>Решения</h2>
             <li><b>Server Push</b> - бесконечный запрос</li>
             <li><b>WebSocket</b> - специализированный протокол</li>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Polling</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Polling - периодический опрос</h2>
-        <img src="pictures/polling.png" class="center">
-    </div></section>
+        <img src="{{ site.pictures_url }}/lesson-17/polling.png" class="center">
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Polling на клиенте</h2>
         <script type="snippet" lang="javascript" scale="auto">
             var since = 0;
@@ -73,9 +75,11 @@ <h2>Polling на клиенте</h2>
                 });
             }, 5000);
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Polling на сервере</h2>
         <script type="snippet" lang="python">
             def get_messages(request):
@@ -88,9 +92,11 @@ <h2>Polling на сервере</h2>
                 messages = [ m.as_data() for m in messages ]
                 return HttpResponseAjax(messages = messages)
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Плюсы и минусы Polling</h2>
         <ul>
             <plus>Простота и надежность реализации</plus>
@@ -99,18 +105,24 @@ <h2>Плюсы и минусы Polling</h2>
             <minus>Избыточное число HTTP запросов <code>RPS=CCU/N</code></minus>
             <minus>Ограничение по числу пользователей</minus>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Comet</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Comet - долгоживущие запросы</h2>
-        <img src="pictures/comet.png" class="center">
-    </div></section>
+        <img src="{{ site.pictures_url }}/lesson-17/comet.png" class="center">
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Comet на клиенте</h2>
         <script type="snippet" lang="javascript" scale="auto">
             function getComet() {
@@ -127,9 +139,11 @@ <h2>Comet на клиенте</h2>
             }
             getComet();
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Comet на сервере</h2>
         <p>
             В технологии <b>comet</b> сервер должен поддерживать одновременно открытыми большое количество соединений,
@@ -137,9 +151,11 @@ <h2>Comet на сервере</h2>
             классический application-сервер в роли comet-сервера. Для comet-сервера необходима отдельная технология, 
             например <b>nginx + mod_push</b>.
         </p>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Nginx + mod_push</h2>
         <script type="snippet" lang="nginx">
             location /publish/ { 
@@ -157,9 +173,11 @@ <h2>Nginx + mod_push</h2>
                 push_subscriber;               # включаем доставку
             }
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Отправка сообщений</h2>
         <script type="snippet" lang="python">
             import urllib2
@@ -176,9 +194,11 @@ <h2>Отправка сообщений</h2>
                 else:
                     return HttpResponseAjaxError(code=response.getcode())
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Плюсы и минусы Comet</h2>
         <ul>
             <plus>Поддержка всеми браузерами</plus>
@@ -187,18 +207,24 @@ <h2>Плюсы и минусы Comet</h2>
             <minus>Избыточные HTTP запросы</minus>
             <minus>Half-duplex</minus>
         </ul>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>Server push</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Server push - бесконечный запрос</h2>
-        <img src="pictures/push.png" class="center">
-    </div></section>
+        <img src="{{ site.pictures_url }}/lesson-17/push.png" class="center">
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Server push на клиенте</h2>
         <script type="snippet" lang="plain">
             <script>
@@ -212,18 +238,24 @@ <h2>Server push на клиенте</h2>
         <script type="snippet" lang="plain">
             <script>parent.handle({ message: 'hello' })</scr&#8203;ipt>
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide shout"><div>
+<section class="slide shout">
+    <div>
         <h2>WebSocket</h2>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>WebSocket</h2>
-        <img src="pictures/ws.png" class="center">
-    </div></section>
+        <img src="{{ site.pictures_url }}/lesson-17/ws.png" class="center">
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>WebSocket handshake</h2>
         <script type="snippet" lang="http">
             GET /chat HTTP/1.1
@@ -241,9 +273,11 @@ <h2>WebSocket handshake</h2>
             Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
             Sec-WebSocket-Protocol: chat
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>WebSocket на стороне клиента</h2>
         <script type="snippet" lang="javascript">
             var socket = new WebSocket('ws://host/echo');
@@ -261,9 +295,11 @@ <h2>WebSocket на стороне клиента</h2>
                 console.log('ws closed')
             };
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>WebSocket на стороне сервера</h2>
         <script type="snippet" lang="python">
             class EchoWebSocket(tornado.websocket.WebSocketHandler):
@@ -276,9 +312,11 @@ <h2>WebSocket на стороне сервера</h2>
                 def on_close(self):
                     print("WebSocket closed")
         </script>
-    </div></section>
+    </div>
+</section>
 
-    <section class="slide"><div>
+<section class="slide">
+    <div>
         <h2>Плюсы и минусы WebSocket</h2>
         <ul>
             <plus>Минимальный объем трафика</plus>
@@ -289,12 +327,5 @@ <h2>Плюсы и минусы WebSocket</h2>
             <minus>Требуется специальный WebSocket-сервер</minus>
             <minus>Плохо работает с прокси-серверами</minus>
         </ul>
-    </div></section>
-
-    <div class="progress"><div></div></div>
-    <script src="../js/highlight.pack.js"></script>
-    <script src="../node_modules/shower-core/shower.min.js"></script>
-    <script src="../js/init.js"></script>
-
-</body>
-</html>
+    </div>
+</section>
diff --git a/css/highlight/agate.css b/assets/css/highlight/agate.css
similarity index 100%
rename from css/highlight/agate.css
rename to assets/css/highlight/agate.css
diff --git a/css/highlight/androidstudio.css b/assets/css/highlight/androidstudio.css
similarity index 100%
rename from css/highlight/androidstudio.css
rename to assets/css/highlight/androidstudio.css
diff --git a/css/highlight/arta.css b/assets/css/highlight/arta.css
similarity index 100%
rename from css/highlight/arta.css
rename to assets/css/highlight/arta.css
diff --git a/css/highlight/ascetic.css b/assets/css/highlight/ascetic.css
similarity index 100%
rename from css/highlight/ascetic.css
rename to assets/css/highlight/ascetic.css
diff --git a/css/highlight/atelier-cave.dark.css b/assets/css/highlight/atelier-cave.dark.css
similarity index 100%
rename from css/highlight/atelier-cave.dark.css
rename to assets/css/highlight/atelier-cave.dark.css
diff --git a/css/highlight/atelier-cave.light.css b/assets/css/highlight/atelier-cave.light.css
similarity index 100%
rename from css/highlight/atelier-cave.light.css
rename to assets/css/highlight/atelier-cave.light.css
diff --git a/css/highlight/atelier-dune.dark.css b/assets/css/highlight/atelier-dune.dark.css
similarity index 100%
rename from css/highlight/atelier-dune.dark.css
rename to assets/css/highlight/atelier-dune.dark.css
diff --git a/css/highlight/atelier-dune.light.css b/assets/css/highlight/atelier-dune.light.css
similarity index 100%
rename from css/highlight/atelier-dune.light.css
rename to assets/css/highlight/atelier-dune.light.css
diff --git a/css/highlight/atelier-estuary.dark.css b/assets/css/highlight/atelier-estuary.dark.css
similarity index 100%
rename from css/highlight/atelier-estuary.dark.css
rename to assets/css/highlight/atelier-estuary.dark.css
diff --git a/css/highlight/atelier-estuary.light.css b/assets/css/highlight/atelier-estuary.light.css
similarity index 100%
rename from css/highlight/atelier-estuary.light.css
rename to assets/css/highlight/atelier-estuary.light.css
diff --git a/css/highlight/atelier-forest.dark.css b/assets/css/highlight/atelier-forest.dark.css
similarity index 100%
rename from css/highlight/atelier-forest.dark.css
rename to assets/css/highlight/atelier-forest.dark.css
diff --git a/css/highlight/atelier-forest.light.css b/assets/css/highlight/atelier-forest.light.css
similarity index 100%
rename from css/highlight/atelier-forest.light.css
rename to assets/css/highlight/atelier-forest.light.css
diff --git a/css/highlight/atelier-heath.dark.css b/assets/css/highlight/atelier-heath.dark.css
similarity index 100%
rename from css/highlight/atelier-heath.dark.css
rename to assets/css/highlight/atelier-heath.dark.css
diff --git a/css/highlight/atelier-heath.light.css b/assets/css/highlight/atelier-heath.light.css
similarity index 100%
rename from css/highlight/atelier-heath.light.css
rename to assets/css/highlight/atelier-heath.light.css
diff --git a/css/highlight/atelier-lakeside.dark.css b/assets/css/highlight/atelier-lakeside.dark.css
similarity index 100%
rename from css/highlight/atelier-lakeside.dark.css
rename to assets/css/highlight/atelier-lakeside.dark.css
diff --git a/css/highlight/atelier-lakeside.light.css b/assets/css/highlight/atelier-lakeside.light.css
similarity index 100%
rename from css/highlight/atelier-lakeside.light.css
rename to assets/css/highlight/atelier-lakeside.light.css
diff --git a/css/highlight/atelier-plateau.dark.css b/assets/css/highlight/atelier-plateau.dark.css
similarity index 100%
rename from css/highlight/atelier-plateau.dark.css
rename to assets/css/highlight/atelier-plateau.dark.css
diff --git a/css/highlight/atelier-plateau.light.css b/assets/css/highlight/atelier-plateau.light.css
similarity index 100%
rename from css/highlight/atelier-plateau.light.css
rename to assets/css/highlight/atelier-plateau.light.css
diff --git a/css/highlight/atelier-savanna.dark.css b/assets/css/highlight/atelier-savanna.dark.css
similarity index 100%
rename from css/highlight/atelier-savanna.dark.css
rename to assets/css/highlight/atelier-savanna.dark.css
diff --git a/css/highlight/atelier-savanna.light.css b/assets/css/highlight/atelier-savanna.light.css
similarity index 100%
rename from css/highlight/atelier-savanna.light.css
rename to assets/css/highlight/atelier-savanna.light.css
diff --git a/css/highlight/atelier-seaside.dark.css b/assets/css/highlight/atelier-seaside.dark.css
similarity index 100%
rename from css/highlight/atelier-seaside.dark.css
rename to assets/css/highlight/atelier-seaside.dark.css
diff --git a/css/highlight/atelier-seaside.light.css b/assets/css/highlight/atelier-seaside.light.css
similarity index 100%
rename from css/highlight/atelier-seaside.light.css
rename to assets/css/highlight/atelier-seaside.light.css
diff --git a/css/highlight/atelier-sulphurpool.dark.css b/assets/css/highlight/atelier-sulphurpool.dark.css
similarity index 100%
rename from css/highlight/atelier-sulphurpool.dark.css
rename to assets/css/highlight/atelier-sulphurpool.dark.css
diff --git a/css/highlight/atelier-sulphurpool.light.css b/assets/css/highlight/atelier-sulphurpool.light.css
similarity index 100%
rename from css/highlight/atelier-sulphurpool.light.css
rename to assets/css/highlight/atelier-sulphurpool.light.css
diff --git a/css/highlight/brown_paper.css b/assets/css/highlight/brown_paper.css
similarity index 100%
rename from css/highlight/brown_paper.css
rename to assets/css/highlight/brown_paper.css
diff --git a/css/highlight/brown_papersq.png b/assets/css/highlight/brown_papersq.png
similarity index 100%
rename from css/highlight/brown_papersq.png
rename to assets/css/highlight/brown_papersq.png
diff --git a/css/highlight/codepen-embed.css b/assets/css/highlight/codepen-embed.css
similarity index 100%
rename from css/highlight/codepen-embed.css
rename to assets/css/highlight/codepen-embed.css
diff --git a/css/highlight/color-brewer.css b/assets/css/highlight/color-brewer.css
similarity index 100%
rename from css/highlight/color-brewer.css
rename to assets/css/highlight/color-brewer.css
diff --git a/css/highlight/dark.css b/assets/css/highlight/dark.css
similarity index 100%
rename from css/highlight/dark.css
rename to assets/css/highlight/dark.css
diff --git a/css/highlight/darkula.css b/assets/css/highlight/darkula.css
similarity index 100%
rename from css/highlight/darkula.css
rename to assets/css/highlight/darkula.css
diff --git a/css/highlight/default.css b/assets/css/highlight/default.css
similarity index 100%
rename from css/highlight/default.css
rename to assets/css/highlight/default.css
diff --git a/css/highlight/docco.css b/assets/css/highlight/docco.css
similarity index 100%
rename from css/highlight/docco.css
rename to assets/css/highlight/docco.css
diff --git a/css/highlight/far.css b/assets/css/highlight/far.css
similarity index 100%
rename from css/highlight/far.css
rename to assets/css/highlight/far.css
diff --git a/css/highlight/foundation.css b/assets/css/highlight/foundation.css
similarity index 100%
rename from css/highlight/foundation.css
rename to assets/css/highlight/foundation.css
diff --git a/css/highlight/github-gist.css b/assets/css/highlight/github-gist.css
similarity index 100%
rename from css/highlight/github-gist.css
rename to assets/css/highlight/github-gist.css
diff --git a/css/highlight/github.css b/assets/css/highlight/github.css
similarity index 100%
rename from css/highlight/github.css
rename to assets/css/highlight/github.css
diff --git a/css/highlight/googlecode.css b/assets/css/highlight/googlecode.css
similarity index 100%
rename from css/highlight/googlecode.css
rename to assets/css/highlight/googlecode.css
diff --git a/css/highlight/hybrid.css b/assets/css/highlight/hybrid.css
similarity index 100%
rename from css/highlight/hybrid.css
rename to assets/css/highlight/hybrid.css
diff --git a/css/highlight/idea.css b/assets/css/highlight/idea.css
similarity index 100%
rename from css/highlight/idea.css
rename to assets/css/highlight/idea.css
diff --git a/css/highlight/ir_black.css b/assets/css/highlight/ir_black.css
similarity index 100%
rename from css/highlight/ir_black.css
rename to assets/css/highlight/ir_black.css
diff --git a/css/highlight/kimbie.dark.css b/assets/css/highlight/kimbie.dark.css
similarity index 100%
rename from css/highlight/kimbie.dark.css
rename to assets/css/highlight/kimbie.dark.css
diff --git a/css/highlight/kimbie.light.css b/assets/css/highlight/kimbie.light.css
similarity index 100%
rename from css/highlight/kimbie.light.css
rename to assets/css/highlight/kimbie.light.css
diff --git a/css/highlight/magula.css b/assets/css/highlight/magula.css
similarity index 100%
rename from css/highlight/magula.css
rename to assets/css/highlight/magula.css
diff --git a/css/highlight/mono-blue.css b/assets/css/highlight/mono-blue.css
similarity index 100%
rename from css/highlight/mono-blue.css
rename to assets/css/highlight/mono-blue.css
diff --git a/css/highlight/monokai.css b/assets/css/highlight/monokai.css
similarity index 100%
rename from css/highlight/monokai.css
rename to assets/css/highlight/monokai.css
diff --git a/css/highlight/monokai_sublime.css b/assets/css/highlight/monokai_sublime.css
similarity index 100%
rename from css/highlight/monokai_sublime.css
rename to assets/css/highlight/monokai_sublime.css
diff --git a/css/highlight/obsidian.css b/assets/css/highlight/obsidian.css
similarity index 100%
rename from css/highlight/obsidian.css
rename to assets/css/highlight/obsidian.css
diff --git a/css/highlight/paraiso.dark.css b/assets/css/highlight/paraiso.dark.css
similarity index 100%
rename from css/highlight/paraiso.dark.css
rename to assets/css/highlight/paraiso.dark.css
diff --git a/css/highlight/paraiso.light.css b/assets/css/highlight/paraiso.light.css
similarity index 100%
rename from css/highlight/paraiso.light.css
rename to assets/css/highlight/paraiso.light.css
diff --git a/css/highlight/pojoaque.css b/assets/css/highlight/pojoaque.css
similarity index 100%
rename from css/highlight/pojoaque.css
rename to assets/css/highlight/pojoaque.css
diff --git a/css/highlight/pojoaque.jpg b/assets/css/highlight/pojoaque.jpg
similarity index 100%
rename from css/highlight/pojoaque.jpg
rename to assets/css/highlight/pojoaque.jpg
diff --git a/css/highlight/railscasts.css b/assets/css/highlight/railscasts.css
similarity index 100%
rename from css/highlight/railscasts.css
rename to assets/css/highlight/railscasts.css
diff --git a/css/highlight/rainbow.css b/assets/css/highlight/rainbow.css
similarity index 100%
rename from css/highlight/rainbow.css
rename to assets/css/highlight/rainbow.css
diff --git a/css/highlight/school_book.css b/assets/css/highlight/school_book.css
similarity index 100%
rename from css/highlight/school_book.css
rename to assets/css/highlight/school_book.css
diff --git a/css/highlight/school_book.png b/assets/css/highlight/school_book.png
similarity index 100%
rename from css/highlight/school_book.png
rename to assets/css/highlight/school_book.png
diff --git a/css/highlight/solarized_dark.css b/assets/css/highlight/solarized_dark.css
similarity index 100%
rename from css/highlight/solarized_dark.css
rename to assets/css/highlight/solarized_dark.css
diff --git a/css/highlight/solarized_light.css b/assets/css/highlight/solarized_light.css
similarity index 100%
rename from css/highlight/solarized_light.css
rename to assets/css/highlight/solarized_light.css
diff --git a/css/highlight/sunburst.css b/assets/css/highlight/sunburst.css
similarity index 100%
rename from css/highlight/sunburst.css
rename to assets/css/highlight/sunburst.css
diff --git a/css/highlight/tomorrow-night-blue.css b/assets/css/highlight/tomorrow-night-blue.css
similarity index 100%
rename from css/highlight/tomorrow-night-blue.css
rename to assets/css/highlight/tomorrow-night-blue.css
diff --git a/css/highlight/tomorrow-night-bright.css b/assets/css/highlight/tomorrow-night-bright.css
similarity index 100%
rename from css/highlight/tomorrow-night-bright.css
rename to assets/css/highlight/tomorrow-night-bright.css
diff --git a/css/highlight/tomorrow-night-eighties.css b/assets/css/highlight/tomorrow-night-eighties.css
similarity index 100%
rename from css/highlight/tomorrow-night-eighties.css
rename to assets/css/highlight/tomorrow-night-eighties.css
diff --git a/css/highlight/tomorrow-night.css b/assets/css/highlight/tomorrow-night.css
similarity index 100%
rename from css/highlight/tomorrow-night.css
rename to assets/css/highlight/tomorrow-night.css
diff --git a/css/highlight/tomorrow.css b/assets/css/highlight/tomorrow.css
similarity index 100%
rename from css/highlight/tomorrow.css
rename to assets/css/highlight/tomorrow.css
diff --git a/css/highlight/vs.css b/assets/css/highlight/vs.css
similarity index 100%
rename from css/highlight/vs.css
rename to assets/css/highlight/vs.css
diff --git a/css/highlight/xcode.css b/assets/css/highlight/xcode.css
similarity index 100%
rename from css/highlight/xcode.css
rename to assets/css/highlight/xcode.css
diff --git a/css/highlight/zenburn.css b/assets/css/highlight/zenburn.css
similarity index 100%
rename from css/highlight/zenburn.css
rename to assets/css/highlight/zenburn.css
diff --git a/css/index.css b/assets/css/lesson.css
similarity index 90%
rename from css/index.css
rename to assets/css/lesson.css
index d9b061a..ac066b5 100644
--- a/css/index.css
+++ b/assets/css/lesson.css
@@ -23,3 +23,6 @@ img.center { display: block; margin: auto; }
 plus, minus { display: list-item; list-style-type: none; }
 plus:before { display: inline; content: "➕"; font-weight: bold; margin-right: 0.5em; color: green }
 minus:before { display: inline; content: "➖"; font-weight: bold; margin-right: 0.5em; color: red }
+
+.link-no-line { background: none; }
+.link-no-color { color: rgb(85, 85, 85); }
diff --git a/assets/css/page.scss b/assets/css/page.scss
new file mode 100644
index 0000000..c9c130d
--- /dev/null
+++ b/assets/css/page.scss
@@ -0,0 +1,430 @@
+---
+---
+
+* {
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 18px;
+  font-weight: 300;
+  line-height: 1.6;
+  
+  @media (min-width: 38em) {
+    font-size: 20px;
+  }
+}
+
+body {
+  color: #515151;
+  background-color: #fff;
+  -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+}
+
+a {
+  color: #268bd2;
+  text-decoration: none;
+  
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: .5rem;
+  font-weight: 600;
+  line-height: 1.1;
+  color: #333;
+  letter-spacing: -.025rem;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+h2 {
+  font-size: 1.6rem;
+}
+
+h3 {
+  font-size: 1.3rem;
+}
+
+h4, h5, h6 {
+  font-size: 1rem;
+}
+
+p {
+  margin: 0 0 1rem;
+}
+
+ul, ol, dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-bottom: .5rem;
+}
+
+ul {
+  list-style: inside circle;
+  padding-left: 0;
+  
+  li {
+    margin-bottom: .25rem;
+  }
+  
+  ul,
+  ol {
+    margin-top: .25rem;
+    margin-bottom: .5rem;
+  }
+}
+
+ol {
+  list-style: inside decimal;
+  padding-left: 0;
+  
+  li {
+    margin-bottom: .25rem;
+  }
+  
+  ul,
+  ol {
+    margin-top: .25rem;
+    margin-bottom: .5rem;
+  }
+}
+
+p + h1,
+p + h2,
+p + h3,
+ul + h1,
+ul + h2,
+ul + h3,
+ol + h1,
+ol + h2,
+ol + h3 {
+  margin-top: 1.5rem;
+}
+
+hr {
+  border: 0;
+  border-top: .5px solid #eee;
+  border-bottom: .5px solid #eee;
+  margin: 1.5rem auto;
+}
+
+strong {
+  color: #333;
+  font-weight: 600;
+}
+
+abbr {
+  font-size: 85%;
+  font-weight: bold;
+  color: #555;
+}
+
+abbr[title] {
+  cursor: help;
+  border-bottom: 1px dotted #e5e5e5;
+}
+
+blockquote {
+  padding: 0 0 0 1.5rem;
+  margin: 0 2rem 1rem 0;
+  color: #999;
+  border-left: .5rem solid #e5e5e5;
+  
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+code,
+pre {
+  font-family: Menlo, Monaco, "Courier New", monospace;
+}
+
+code {
+  padding: .25em .5em;
+  font-size: 85%;
+  color: #bf616a;
+  background-color: #f9f9f9;
+  border-radius: 3px;
+}
+
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  padding: 1rem;
+  font-size: .8rem;
+  line-height: 1.4;
+  white-space: pre;
+  white-space: pre-wrap;
+  word-break: break-all;
+  // word-wrap: break-word;
+  background-color: #f9f9f9;
+}
+
+pre code {
+  padding: 0;
+  font-size: 100%;
+  color: inherit;
+  background-color: transparent;
+}
+
+.highlight {
+  margin-bottom: 1rem;
+  border-radius: 4px;
+}
+
+.highlight pre {
+  margin-bottom: 0;
+}
+
+.gist .gist-file {
+  font-family: Menlo, Monaco, "Courier New", monospace !important;
+}
+
+.gist .markdown-body {
+  padding: 15px;
+}
+
+.gist pre {
+  padding: 0;
+  background-color: transparent;
+}
+
+.gist .gist-file .gist-data {
+  font-size: .8rem !important;
+  line-height: 1.4;
+}
+
+.gist code {
+  padding: 0;
+  color: inherit;
+  background-color: transparent;
+  border-radius: 0;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  margin: 0 0 1rem;
+  border-radius: 5px;
+}
+
+table {
+  margin-bottom: 1rem;
+  width: 100%;
+  border: 1px solid #e5e5e5;
+  border-collapse: collapse;
+}
+
+td,
+th {
+  padding: .25rem .5rem;
+  border: 1px solid #e5e5e5;
+}
+
+tbody tr:nth-child(odd) td,
+tbody tr:nth-child(odd) th {
+  background-color: #f9f9f9;
+}
+
+.lead {
+  font-size: 1.25rem;
+}
+
+.container {
+  max-width: 38rem;
+  padding: 2rem 1.5rem;
+  margin-left:  auto;
+  margin-right: auto;
+  
+  @media (min-width: 38rem){
+    padding: 5rem 1rem;
+  }
+}
+
+.masthead {
+
+  &-title {
+    font-weight: 300;
+    
+    a {
+      color: #333;
+      
+      &:hover,
+      &:focus {
+        text-decoration: none;
+      }
+    }
+    
+    span {
+      color: #ddd;
+    }
+    
+  }
+  
+  &-title--small {
+    margin-bottom: .75rem;
+    font-size: .75rem;
+    font-weight: 600;
+    
+    a {
+      color: #333;
+      
+      &:hover,
+      &:focus {
+        text-decoration: none;
+      }
+    }
+  }
+  
+  .masthead-nav {
+    margin-bottom: 2rem;
+    
+    a {
+      color: #aaa;
+      font-weight: 300;
+      -webkit-transition: all .2s ease;
+         -moz-transition: all .2s ease;
+              transition: all .2s ease;
+
+      &:hover,
+      &:focus {
+        color: #333;
+        text-decoration: none;
+      }
+
+      + a {
+        margin-left: .25rem;
+      }
+    }
+  }
+
+}
+
+.page {
+  &-title {
+    margin-bottom: 2rem;
+  }
+}
+
+.post {
+  &-title {
+    margin-bottom: .25rem;
+  }
+  &-date {
+    margin-bottom: 2rem;
+    font-size: .75rem;
+  }
+}
+
+.list {
+  &-post-title {
+    margin-bottom: .25rem;
+    
+    a {
+      color: #333;
+      
+      &:hover,
+      &:focus {
+        text-decoration: none;
+      }
+    }
+  }
+  &-post-date {
+    margin-bottom: 1rem;
+    font-size: .75rem;
+  }
+}
+
+.projects-list {
+  a {
+    color: #333;
+  }
+}
+
+.highlight .hll { background-color: #ffffcc }
+.highlight .c { color: #999988; font-style: italic } /* Comment */
+.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.highlight .k { color: #000000; font-weight: bold } /* Keyword */
+.highlight .o { color: #000000; font-weight: bold } /* Operator */
+.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
+.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #aa0000 } /* Generic.Error */
+.highlight .gh { color: #999999 } /* Generic.Heading */
+.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #555555 } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
+.highlight .gt { color: #aa0000 } /* Generic.Traceback */
+.highlight .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
+.highlight .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #009999 } /* Literal.Number */
+.highlight .s { color: #d01040 } /* Literal.String */
+.highlight .na { color: #008080 } /* Name.Attribute */
+.highlight .nb { color: #0086B3 } /* Name.Builtin */
+.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
+.highlight .no { color: #008080 } /* Name.Constant */
+.highlight .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
+.highlight .ni { color: #800080 } /* Name.Entity */
+.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
+.highlight .nl { color: #990000; font-weight: bold } /* Name.Label */
+.highlight .nn { color: #555555 } /* Name.Namespace */
+.highlight .nt { color: #000080 } /* Name.Tag */
+.highlight .nv { color: #008080 } /* Name.Variable */
+.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #009999 } /* Literal.Number.Float */
+.highlight .mh { color: #009999 } /* Literal.Number.Hex */
+.highlight .mi { color: #009999 } /* Literal.Number.Integer */
+.highlight .mo { color: #009999 } /* Literal.Number.Oct */
+.highlight .sb { color: #d01040 } /* Literal.String.Backtick */
+.highlight .sc { color: #d01040 } /* Literal.String.Char */
+.highlight .sd { color: #d01040 } /* Literal.String.Doc */
+.highlight .s2 { color: #d01040 } /* Literal.String.Double */
+.highlight .se { color: #d01040 } /* Literal.String.Escape */
+.highlight .sh { color: #d01040 } /* Literal.String.Heredoc */
+.highlight .si { color: #d01040 } /* Literal.String.Interpol */
+.highlight .sx { color: #d01040 } /* Literal.String.Other */
+.highlight .sr { color: #009926 } /* Literal.String.Regex */
+.highlight .s1 { color: #d01040 } /* Literal.String.Single */
+.highlight .ss { color: #990073 } /* Literal.String.Symbol */
+.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #008080 } /* Name.Variable.Class */
+.highlight .vg { color: #008080 } /* Name.Variable.Global */
+.highlight .vi { color: #008080 } /* Name.Variable.Instance */
+.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
diff --git a/js/highlight.pack.js b/assets/js/highlight.pack.js
similarity index 100%
rename from js/highlight.pack.js
rename to assets/js/highlight.pack.js
diff --git a/js/init.js b/assets/js/init.js
similarity index 100%
rename from js/init.js
rename to assets/js/init.js
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8cc283f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,17 @@
+---
+layout: page
+---
+<div class="content list">
+    {% assign items = site.lessons | sort:'num' %}
+    {% for lesson in items %}
+    <div class="list-item">
+        <h2 class="list-post-title">
+            <a href="{{ site.baseurl }}{{ lesson.url }}">{{ lesson.num }}. {{ lesson.title }}</a>
+        </h2>
+        <div class="list-post-date">
+            {{ lesson.description }}
+            <a href="{{ site.baseurl}}/pdf/{{ lesson.url | slugify }}.pdf"><small>&darr; pdf</small></a>
+        </div>
+    </div>
+    {% endfor %}
+</div>
diff --git a/lesson-14/index.html b/lesson-14/index.html
deleted file mode 100644
index ab6e004..0000000
--- a/lesson-14/index.html
+++ /dev/null
@@ -1,283 +0,0 @@
-<!DOCTYPE HTML>
-<html lang="en">
-<head>
-    <title>Web технологии</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=792, user-scalable=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <link rel="stylesheet" href="../node_modules/shower-bright/styles/screen.css">
-    <link rel="stylesheet" href="../css/highlight/github.css">
-    <link rel="stylesheet" href="../css/index.css">
-</head>
-<body class="list">
-    <header class="caption">
-        <h1>Web технологии</h1>
-        <p><a href="https://github.com/mialinx/">Дмитрий Смаль</a></p>
-    </header>
-
-    <section class="slide shout"><div>
-        <h2>Обработка форм</h2>
-    </div></section>
-
-    <section class="slide"><div>
-        <h2>GET / POST формы</h2>
-        <p>
-            <b>GET</b> - метод для <b>получения</b> данных. GET запросы могут быть закешированны промежуточными серверами.
-            <b>GET</b> должен применяться только в <b>поисковых</b> формах.
-        </p>
-        <p>
-            <b>POST</b> - метод для изменения данных. POST запросы никогда не кешируются промежуточными серверами.
-            <b>POST</b> должен применяться в формах, <b>изменяющих данные</b> на сервере.
-    </div></section>
-
-    <section class="slide"><div>
-        <h2>Общий сценарий обработки</h2>
-        <img src="pictures/forms.png" class="center">
-    </div></section>
-
-    <section class="slide"><div>
-        <h2>Best practice</h2>
-        <ul>
-            <li><b>Всегда</b> проверять пользовательские данные</li>
-            <li>Для форм, изменяющих данные, использовать метод <b>POST</b></li>
-            <li>Не заставлять вводить данные повторно</li>
-            <li>Сообщать об ошибках детально - по полям</li>
-            <li>Сообщать об успешном сохранении формы</li>
-            <li>При успешном сохранении делать перенаправление</li>
-        </ul>
-    </div></section>
-
-    <section class="slide shout"><div>
-        <h2>HTTP Redirect</h2>
-    </div></section>
-
-    <section class="slide"><div>
-        <h2>Перенаправления в HTTP</h2>
-        <img src="pictures/redirect.png" class="center">
-    </div></section>
-
-    <section class="slide"><div>
-        <h2>Перенаправления в HTTP</h2>
-        <ul>
-            <li><code>302 Found</code> - временное перенаправление</li>
-            <li><code>301 Moved Permanently</code> - постоянное перенаправление (кешируется в браузере)</li>
-            <li><code>Location: url</code> - URL для повторного запроса. Может быть как абсолютным, так и относительным.</li>
-        </ul>
-    </div></section>
-
-    <section class="slide"><div>
-        <h2>Перенаправления в Django</h2>
-        <script type="snippet" lang="python">
-            from django.http import HttpResponseRedirect
-
-            def some_view(request):
-                # logic..
-                return HttpResponseRedirect('/new_url/')
-
-            # уязвимость open redirect
-            def dangerous_view(request):
-                url = request.GET.get('continue')
-                return HttpResponseRedirect(url)
-        </script>
-    </div></section>
-
-    <section class="slide shout"><div>
-        <h2>Django forms</h2>
-    </div></section>
-
-    <section class="slide"><div>
-        <h2>Описание форм</h2>
-        <script type="snippet" lang="python">
-            from django import forms
-
-            class FeedbackForm(forms.Form):
-                email = forms.EmailField(max_length=100)
-                message = forms.CharField(widget=forms.Textarea)
-
-                def clean(self):
-                    if is_spam(self.clean_data):
-                        raise forms.ValidationError(
-                            u'Сообщение похоже на спам',
-                            code='spam'
-                        )
-        </script>
-    </div></section>
-
-    <section class="slide"><div>
-        <script type="snippet" lang="python">
-            class AddPostForm(forms.Form):
-                title = forms.CharField(max_length=100)
-                message = forms.CharField(widget=forms.Textarea)
-
-                def clean_message(self):
-                    message = self.cleaned_data['message']
-                    if not is_ethic(message):
-                        raise forms.ValidationError(
-                            u'Сообщение не корректно', code=12)
-                    return message + \
-                           "\nThank you for your attention."
-
-                def save(self):
-                    post = Post(**self.cleaned_data)
-                    post.save()
-                    return post
-        </script>
-    </div></section>
-
-    <section class="slide"><div>
-        <h2>Типы полей</h2>
-        <ul>
-            <li><code>BooleanField</code> - флажок</li>
-            <li><code>CharField</code> - текстовое поле ввода</li>
-            <li><code>EmailField</code> - текстовое поле, Email</li>
-            <!--li><code>PasswordField</code> - текстовое поле, пароль</li-->
-            <li><code>ChoiceField</code> - выбор из нескольких вариантов</li>
-            <li><code>DateField</code> - выбор даты</li>
-            <li><code>DateTimeField</code> - выбор даты и времени</li>
-            <li><code>FileField</code> - загрузка файлов</li>
-        </ul>
-    </div></section>
-
-    <section class="slide"><div>
-        <h2>Валидация данных</h2>
-        <ul>
-            <li>По типу поля, например <code>EmailField</code></li>
-            <li><code>clean_xxx</code> - доп. проверка поля xxx, может изменить значение</li>
-            <li><code>clean</code> - доп. проверка всех полей формы</li>
-        </ul>
-        <p>
-            Методы <code>clean</code> и <code>clean_xxx</code> должны использовать <code>self.cleaned_data</code>
-            для получения данных формы и поднять <code>ValidationError</code> в случае некорректных данных.
-        </p>
-        </ul>
-    </div></section>
-
-    <section class="slide"><div>
-        <h2>Использование во view</h2>
-        <script type="snippet" lang="python">
-            def post_add(request):
-                if request.method == "POST":
-                    form = AddPostForm(request.POST)
-                    if form.is_valid():
-                        post = form.save()
-                        url = post.get_url()
-                        return HttpResponseRedirect(url)
-                else:
-                    form = AddPostForm()
-                return render(request, 'blog/post_add.html', {
-                    'form': form
-                })
-        </script>
-    </div></section>
-
-    <section class="slide"><div>
-        <h2>Использование в шаблонах</h2>
-        <script type="snippet" lang="django">
-            {{ form.as_ul }}
-        </script>
-        <script type="snippet" lang="django">
-            {{ form.as_p }}
-        </script>
-        <script type="snippet" lang="django">
-            {{ form.as_table }}
-        </script>
-    </div></section>
-
-    <section class="slide"><div>
-        <script type="snippet" lang="django">
-            {% for e in form.non_field_errors %}
-              <div class="alert alert-danger">{{ e }}</div>
-            {% endif %}
-            <form class="form-horizontal" method="post" action="/blog/add/">
-              <fieldset>
-                {% for field in form %}
-                  <div class="control-group 
-                    {% if field.errors %}has-error{% endif %}">
-                    <label class="control-label">{{ field.label }}</label>
-                    <div class="controls">{{ field }}</div>
-                  </div>
-                {% endfor %}
-              </fieldset>
-              <div class="form-actions">
-                <button type="submit" class="btn btn-primary">
-                Сохранить</button>
-              </div>
-            </form>
-        </script>
-    </div></section>
-
-    <section class="slide"><div>
-        <h2>Model forms</h2>
-        <script type="snippet" lang="python">
-            from django.forms import ModelForm
-
-            class ArticleForm(ModelForm):
-                class Meta:
-                    model = Post
-                    fields = ['title', 'content', 
-                              'category', 'tags']
-        </script>
-        <p>Метод <code>save</code> уже определен и сохраняет модель <code>Meta.model</code></p>
-    </div></section>
-
-    <section class="slide shout"><div>
-        <h2>Безопасность</h2>
-    </div></section>
-
-    <section class="slide"><div>
-        <h2>Проверка пользователя</h2>
-        <script type="snippet" lang="python">
-            class AddPostForm(forms.Form):
-                # ... поля ...
-                def __init__(self, user, **kwargs):
-                    self._user = user
-                    super(AddPostForm, self).__init__(**kwargs)
-                def clean(self):
-                    if self._user.is_banned:
-                        raise ValidationError(u'Доступ ограничен')
-                def save(self):
-                    self.cleaned_data['author'] = self._user
-                    return Post.objects.create(**self.cleaned_data)
-        </script>
-    </div></section>
-
-    <section class="slide"><div>
-        <h2>Проверка пользователя (2)</h2>
-        <script type="snippet" lang="python">
-            from django.contrib.auth.decorators \
-                import login_required
-
-            @login_required
-            def post_add(request):
-                form = AddPostForm(request.user, request.POST)
-                if form.is_valid():
-                    post = form.save()
-        </script>
-    </div></section>
-
-    <section class="slide"><div>
-        <h2>Cross Site Resource Forgery</h2>
-        <img src="pictures/csrf.png" class="center">
-    </div></section>
-
-    <section class="slide"><div>
-        <h2>Методы борьбы с CSRF</h2>
-        <ul>
-            <li>Проверка метода <code>@require_POST</code></li>
-            <li>Проверка заголовка <code>Referer</code></li>
-            <li>Проверка CSRF-токенов</li>
-        </ul>
-        <script type="snippet" lang="django">
-            <form method="POST" action="/blog/add">
-                {% csrf_token %}
-            </form>
-        </script>
-    </div></section>
-
-    <div class="progress"><div></div></div>
-    <script src="../js/highlight.pack.js"></script>
-    <script src="../node_modules/shower-core/shower.min.js"></script>
-    <script src="../js/init.js"></script>
-
-</body>
-</html>
diff --git a/lesson-1/lesson1.pdf b/pdf/lesson-01.pdf
similarity index 100%
rename from lesson-1/lesson1.pdf
rename to pdf/lesson-01.pdf
diff --git a/lesson-2/lesson2.pdf b/pdf/lesson-02.pdf
similarity index 100%
rename from lesson-2/lesson2.pdf
rename to pdf/lesson-02.pdf
diff --git a/lesson-3/lesson3.pdf b/pdf/lesson-03.pdf
similarity index 100%
rename from lesson-3/lesson3.pdf
rename to pdf/lesson-03.pdf
diff --git a/lesson-4/lesson4.pdf b/pdf/lesson-04.pdf
similarity index 100%
rename from lesson-4/lesson4.pdf
rename to pdf/lesson-04.pdf
diff --git a/lesson-5/lesson5.pdf b/pdf/lesson-05.pdf
similarity index 100%
rename from lesson-5/lesson5.pdf
rename to pdf/lesson-05.pdf
diff --git a/lesson-6/lesson6.pdf b/pdf/lesson-06.pdf
similarity index 100%
rename from lesson-6/lesson6.pdf
rename to pdf/lesson-06.pdf
diff --git a/lesson-7/lesson7.pdf b/pdf/lesson-07.pdf
similarity index 100%
rename from lesson-7/lesson7.pdf
rename to pdf/lesson-07.pdf
diff --git a/lesson-8/lesson8.pdf b/pdf/lesson-08.pdf
similarity index 100%
rename from lesson-8/lesson8.pdf
rename to pdf/lesson-08.pdf
diff --git a/lesson-9/lesson9.pdf b/pdf/lesson-09.pdf
similarity index 100%
rename from lesson-9/lesson9.pdf
rename to pdf/lesson-09.pdf
diff --git a/lesson-10/lesson10.pdf b/pdf/lesson-10.pdf
similarity index 100%
rename from lesson-10/lesson10.pdf
rename to pdf/lesson-10.pdf
diff --git a/lesson-11/lesson11.pdf b/pdf/lesson-11.pdf
similarity index 100%
rename from lesson-11/lesson11.pdf
rename to pdf/lesson-11.pdf
diff --git a/lesson-12/lesson12.pdf b/pdf/lesson-12.pdf
similarity index 100%
rename from lesson-12/lesson12.pdf
rename to pdf/lesson-12.pdf
diff --git a/lesson-13/lesson13.pdf b/pdf/lesson-13.pdf
similarity index 100%
rename from lesson-13/lesson13.pdf
rename to pdf/lesson-13.pdf
diff --git a/lesson-14/lesson14.pdf b/pdf/lesson-14.pdf
similarity index 100%
rename from lesson-14/lesson14.pdf
rename to pdf/lesson-14.pdf
diff --git a/lesson-15/lesson15.pdf b/pdf/lesson-15.pdf
similarity index 100%
rename from lesson-15/lesson15.pdf
rename to pdf/lesson-15.pdf
diff --git a/lesson-16/lesson16.pdf b/pdf/lesson-16.pdf
similarity index 100%
rename from lesson-16/lesson16.pdf
rename to pdf/lesson-16.pdf
diff --git a/lesson-17/lesson17.pdf b/pdf/lesson-17.pdf
similarity index 100%
rename from lesson-17/lesson17.pdf
rename to pdf/lesson-17.pdf
diff --git a/lesson-1/pictures/hypelinks.xml b/pictures/lesson-01/hypelinks.xml
similarity index 100%
rename from lesson-1/pictures/hypelinks.xml
rename to pictures/lesson-01/hypelinks.xml
diff --git a/lesson-1/pictures/hyperlinks.png b/pictures/lesson-01/hyperlinks.png
similarity index 100%
rename from lesson-1/pictures/hyperlinks.png
rename to pictures/lesson-01/hyperlinks.png
diff --git a/lesson-1/pictures/network.png b/pictures/lesson-01/network.png
similarity index 100%
rename from lesson-1/pictures/network.png
rename to pictures/lesson-01/network.png
diff --git a/lesson-1/pictures/network.xml b/pictures/lesson-01/network.xml
similarity index 100%
rename from lesson-1/pictures/network.xml
rename to pictures/lesson-01/network.xml
diff --git a/lesson-2/pictures/classic_web.png b/pictures/lesson-02/classic_web.png
similarity index 100%
rename from lesson-2/pictures/classic_web.png
rename to pictures/lesson-02/classic_web.png
diff --git a/lesson-2/pictures/classic_web.xml b/pictures/lesson-02/classic_web.xml
similarity index 100%
rename from lesson-2/pictures/classic_web.xml
rename to pictures/lesson-02/classic_web.xml
diff --git a/lesson-2/pictures/modern_web.png b/pictures/lesson-02/modern_web.png
similarity index 100%
rename from lesson-2/pictures/modern_web.png
rename to pictures/lesson-02/modern_web.png
diff --git a/lesson-2/pictures/modern_web.xml b/pictures/lesson-02/modern_web.xml
similarity index 100%
rename from lesson-2/pictures/modern_web.xml
rename to pictures/lesson-02/modern_web.xml
diff --git a/lesson-3/pictures/table.png b/pictures/lesson-03/table.png
similarity index 100%
rename from lesson-3/pictures/table.png
rename to pictures/lesson-03/table.png
diff --git a/lesson-4/pictures/boxmodel.png b/pictures/lesson-04/boxmodel.png
similarity index 100%
rename from lesson-4/pictures/boxmodel.png
rename to pictures/lesson-04/boxmodel.png
diff --git a/lesson-4/pictures/boxmodel.xml b/pictures/lesson-04/boxmodel.xml
similarity index 100%
rename from lesson-4/pictures/boxmodel.xml
rename to pictures/lesson-04/boxmodel.xml
diff --git a/lesson-4/pictures/grid1.png b/pictures/lesson-04/grid1.png
similarity index 100%
rename from lesson-4/pictures/grid1.png
rename to pictures/lesson-04/grid1.png
diff --git a/lesson-4/pictures/lorem.jpeg b/pictures/lesson-04/lorem.jpeg
similarity index 100%
rename from lesson-4/pictures/lorem.jpeg
rename to pictures/lesson-04/lorem.jpeg
diff --git a/lesson-5/pictures/dnsreq.png b/pictures/lesson-05/dnsreq.png
similarity index 100%
rename from lesson-5/pictures/dnsreq.png
rename to pictures/lesson-05/dnsreq.png
diff --git a/lesson-5/pictures/dnsreq.xml b/pictures/lesson-05/dnsreq.xml
similarity index 100%
rename from lesson-5/pictures/dnsreq.xml
rename to pictures/lesson-05/dnsreq.xml
diff --git a/lesson-5/pictures/domains.png b/pictures/lesson-05/domains.png
similarity index 100%
rename from lesson-5/pictures/domains.png
rename to pictures/lesson-05/domains.png
diff --git a/lesson-5/pictures/domains.xml b/pictures/lesson-05/domains.xml
similarity index 100%
rename from lesson-5/pictures/domains.xml
rename to pictures/lesson-05/domains.xml
diff --git a/lesson-5/pictures/stack.png b/pictures/lesson-05/stack.png
similarity index 100%
rename from lesson-5/pictures/stack.png
rename to pictures/lesson-05/stack.png
diff --git a/lesson-5/pictures/stack.xml b/pictures/lesson-05/stack.xml
similarity index 100%
rename from lesson-5/pictures/stack.xml
rename to pictures/lesson-05/stack.xml
diff --git a/lesson-5/pictures/tcp.png b/pictures/lesson-05/tcp.png
similarity index 100%
rename from lesson-5/pictures/tcp.png
rename to pictures/lesson-05/tcp.png
diff --git a/lesson-5/pictures/tcp.xml b/pictures/lesson-05/tcp.xml
similarity index 100%
rename from lesson-5/pictures/tcp.xml
rename to pictures/lesson-05/tcp.xml
diff --git a/lesson-5/pictures/telnet.png b/pictures/lesson-05/telnet.png
similarity index 100%
rename from lesson-5/pictures/telnet.png
rename to pictures/lesson-05/telnet.png
diff --git a/lesson-5/pictures/tls.png b/pictures/lesson-05/tls.png
similarity index 100%
rename from lesson-5/pictures/tls.png
rename to pictures/lesson-05/tls.png
diff --git a/lesson-5/pictures/tls.xml b/pictures/lesson-05/tls.xml
similarity index 100%
rename from lesson-5/pictures/tls.xml
rename to pictures/lesson-05/tls.xml
diff --git a/lesson-5/pictures/zones.png b/pictures/lesson-05/zones.png
similarity index 100%
rename from lesson-5/pictures/zones.png
rename to pictures/lesson-05/zones.png
diff --git a/lesson-5/pictures/zones.xml b/pictures/lesson-05/zones.xml
similarity index 100%
rename from lesson-5/pictures/zones.xml
rename to pictures/lesson-05/zones.xml
diff --git a/lesson-6/pictures/netflow.png b/pictures/lesson-06/netflow.png
similarity index 100%
rename from lesson-6/pictures/netflow.png
rename to pictures/lesson-06/netflow.png
diff --git a/lesson-6/pictures/netflow.xml b/pictures/lesson-06/netflow.xml
similarity index 100%
rename from lesson-6/pictures/netflow.xml
rename to pictures/lesson-06/netflow.xml
diff --git a/lesson-6/pictures/netflow2.png b/pictures/lesson-06/netflow2.png
similarity index 100%
rename from lesson-6/pictures/netflow2.png
rename to pictures/lesson-06/netflow2.png
diff --git a/lesson-6/pictures/netflow2.xml b/pictures/lesson-06/netflow2.xml
similarity index 100%
rename from lesson-6/pictures/netflow2.xml
rename to pictures/lesson-06/netflow2.xml
diff --git a/lesson-7/pictures/cycle.png b/pictures/lesson-07/cycle.png
similarity index 100%
rename from lesson-7/pictures/cycle.png
rename to pictures/lesson-07/cycle.png
diff --git a/lesson-7/pictures/cycle.xml b/pictures/lesson-07/cycle.xml
similarity index 100%
rename from lesson-7/pictures/cycle.xml
rename to pictures/lesson-07/cycle.xml
diff --git a/lesson-7/pictures/io.png b/pictures/lesson-07/io.png
similarity index 100%
rename from lesson-7/pictures/io.png
rename to pictures/lesson-07/io.png
diff --git a/lesson-7/pictures/io.xml b/pictures/lesson-07/io.xml
similarity index 100%
rename from lesson-7/pictures/io.xml
rename to pictures/lesson-07/io.xml
diff --git a/lesson-7/pictures/nonblock.png b/pictures/lesson-07/nonblock.png
similarity index 100%
rename from lesson-7/pictures/nonblock.png
rename to pictures/lesson-07/nonblock.png
diff --git a/lesson-7/pictures/nonblock.xml b/pictures/lesson-07/nonblock.xml
similarity index 100%
rename from lesson-7/pictures/nonblock.xml
rename to pictures/lesson-07/nonblock.xml
diff --git a/lesson-7/pictures/servers.png b/pictures/lesson-07/servers.png
similarity index 100%
rename from lesson-7/pictures/servers.png
rename to pictures/lesson-07/servers.png
diff --git a/lesson-8/pictures/cgi.png b/pictures/lesson-08/cgi.png
similarity index 100%
rename from lesson-8/pictures/cgi.png
rename to pictures/lesson-08/cgi.png
diff --git a/lesson-8/pictures/cgi.xml b/pictures/lesson-08/cgi.xml
similarity index 100%
rename from lesson-8/pictures/cgi.xml
rename to pictures/lesson-08/cgi.xml
diff --git a/lesson-8/pictures/fastcgi.png b/pictures/lesson-08/fastcgi.png
similarity index 100%
rename from lesson-8/pictures/fastcgi.png
rename to pictures/lesson-08/fastcgi.png
diff --git a/lesson-8/pictures/fastcgi.xml b/pictures/lesson-08/fastcgi.xml
similarity index 100%
rename from lesson-8/pictures/fastcgi.xml
rename to pictures/lesson-08/fastcgi.xml
diff --git a/lesson-8/pictures/front_back.png b/pictures/lesson-08/front_back.png
similarity index 100%
rename from lesson-8/pictures/front_back.png
rename to pictures/lesson-08/front_back.png
diff --git a/lesson-8/pictures/front_back.xml b/pictures/lesson-08/front_back.xml
similarity index 100%
rename from lesson-8/pictures/front_back.xml
rename to pictures/lesson-08/front_back.xml
diff --git a/lesson-8/pictures/wsgi.png b/pictures/lesson-08/wsgi.png
similarity index 100%
rename from lesson-8/pictures/wsgi.png
rename to pictures/lesson-08/wsgi.png
diff --git a/lesson-8/pictures/wsgi.xml b/pictures/lesson-08/wsgi.xml
similarity index 100%
rename from lesson-8/pictures/wsgi.xml
rename to pictures/lesson-08/wsgi.xml
diff --git a/lesson-9/pictures/frameworks.png b/pictures/lesson-09/frameworks.png
similarity index 100%
rename from lesson-9/pictures/frameworks.png
rename to pictures/lesson-09/frameworks.png
diff --git a/lesson-9/pictures/mvc.png b/pictures/lesson-09/mvc.png
similarity index 100%
rename from lesson-9/pictures/mvc.png
rename to pictures/lesson-09/mvc.png
diff --git a/lesson-9/pictures/mvc.xml b/pictures/lesson-09/mvc.xml
similarity index 100%
rename from lesson-9/pictures/mvc.xml
rename to pictures/lesson-09/mvc.xml
diff --git a/lesson-10/pictures/mockup.png b/pictures/lesson-10/mockup.png
similarity index 100%
rename from lesson-10/pictures/mockup.png
rename to pictures/lesson-10/mockup.png
diff --git a/lesson-11/pictures/db.png b/pictures/lesson-11/db.png
similarity index 100%
rename from lesson-11/pictures/db.png
rename to pictures/lesson-11/db.png
diff --git a/lesson-11/pictures/db.xml b/pictures/lesson-11/db.xml
similarity index 100%
rename from lesson-11/pictures/db.xml
rename to pictures/lesson-11/db.xml
diff --git a/lesson-11/pictures/table.png b/pictures/lesson-11/table.png
similarity index 100%
rename from lesson-11/pictures/table.png
rename to pictures/lesson-11/table.png
diff --git a/lesson-11/pictures/table.xml b/pictures/lesson-11/table.xml
similarity index 100%
rename from lesson-11/pictures/table.xml
rename to pictures/lesson-11/table.xml
diff --git a/lesson-14/pictures/csrf.png b/pictures/lesson-14/csrf.png
similarity index 100%
rename from lesson-14/pictures/csrf.png
rename to pictures/lesson-14/csrf.png
diff --git a/lesson-14/pictures/csrf.xml b/pictures/lesson-14/csrf.xml
similarity index 100%
rename from lesson-14/pictures/csrf.xml
rename to pictures/lesson-14/csrf.xml
diff --git a/lesson-14/pictures/forms.png b/pictures/lesson-14/forms.png
similarity index 100%
rename from lesson-14/pictures/forms.png
rename to pictures/lesson-14/forms.png
diff --git a/lesson-14/pictures/forms.xml b/pictures/lesson-14/forms.xml
similarity index 100%
rename from lesson-14/pictures/forms.xml
rename to pictures/lesson-14/forms.xml
diff --git a/lesson-14/pictures/redirect.png b/pictures/lesson-14/redirect.png
similarity index 100%
rename from lesson-14/pictures/redirect.png
rename to pictures/lesson-14/redirect.png
diff --git a/lesson-14/pictures/redirect.xml b/pictures/lesson-14/redirect.xml
similarity index 100%
rename from lesson-14/pictures/redirect.xml
rename to pictures/lesson-14/redirect.xml
diff --git a/lesson-15/pictures/basic.png b/pictures/lesson-15/basic.png
similarity index 100%
rename from lesson-15/pictures/basic.png
rename to pictures/lesson-15/basic.png
diff --git a/lesson-15/pictures/basic.xml b/pictures/lesson-15/basic.xml
similarity index 100%
rename from lesson-15/pictures/basic.xml
rename to pictures/lesson-15/basic.xml
diff --git a/lesson-15/pictures/cookieauth.png b/pictures/lesson-15/cookieauth.png
similarity index 100%
rename from lesson-15/pictures/cookieauth.png
rename to pictures/lesson-15/cookieauth.png
diff --git a/lesson-15/pictures/cookieauth.xml b/pictures/lesson-15/cookieauth.xml
similarity index 100%
rename from lesson-15/pictures/cookieauth.xml
rename to pictures/lesson-15/cookieauth.xml
diff --git a/lesson-16/pictures/cors.png b/pictures/lesson-16/cors.png
similarity index 100%
rename from lesson-16/pictures/cors.png
rename to pictures/lesson-16/cors.png
diff --git a/lesson-16/pictures/cors.xml b/pictures/lesson-16/cors.xml
similarity index 100%
rename from lesson-16/pictures/cors.xml
rename to pictures/lesson-16/cors.xml
diff --git a/lesson-17/pictures/arch.png b/pictures/lesson-17/arch.png
similarity index 100%
rename from lesson-17/pictures/arch.png
rename to pictures/lesson-17/arch.png
diff --git a/lesson-17/pictures/arch.xml b/pictures/lesson-17/arch.xml
similarity index 100%
rename from lesson-17/pictures/arch.xml
rename to pictures/lesson-17/arch.xml
diff --git a/lesson-17/pictures/comet.png b/pictures/lesson-17/comet.png
similarity index 100%
rename from lesson-17/pictures/comet.png
rename to pictures/lesson-17/comet.png
diff --git a/lesson-17/pictures/comet.xml b/pictures/lesson-17/comet.xml
similarity index 100%
rename from lesson-17/pictures/comet.xml
rename to pictures/lesson-17/comet.xml
diff --git a/lesson-17/pictures/polling.png b/pictures/lesson-17/polling.png
similarity index 100%
rename from lesson-17/pictures/polling.png
rename to pictures/lesson-17/polling.png
diff --git a/lesson-17/pictures/polling.xml b/pictures/lesson-17/polling.xml
similarity index 100%
rename from lesson-17/pictures/polling.xml
rename to pictures/lesson-17/polling.xml
diff --git a/lesson-17/pictures/push.png b/pictures/lesson-17/push.png
similarity index 100%
rename from lesson-17/pictures/push.png
rename to pictures/lesson-17/push.png
diff --git a/lesson-17/pictures/push.xml b/pictures/lesson-17/push.xml
similarity index 100%
rename from lesson-17/pictures/push.xml
rename to pictures/lesson-17/push.xml
diff --git a/lesson-17/pictures/ws.png b/pictures/lesson-17/ws.png
similarity index 100%
rename from lesson-17/pictures/ws.png
rename to pictures/lesson-17/ws.png
diff --git a/lesson-17/pictures/ws.xml b/pictures/lesson-17/ws.xml
similarity index 100%
rename from lesson-17/pictures/ws.xml
rename to pictures/lesson-17/ws.xml

From b9d85dee2dbe2828b1e50bf0be7e81e777f6c071 Mon Sep 17 00:00:00 2001
From: Nikita <nks.off@gmail.com>
Date: Sat, 28 Nov 2015 09:58:04 +0300
Subject: [PATCH 2/4] Fix lesson titles

---
 _lessons/lesson-01.html | 2 +-
 _lessons/lesson-02.html | 2 +-
 _lessons/lesson-03.html | 2 +-
 _lessons/lesson-04.html | 2 +-
 _lessons/lesson-05.html | 2 +-
 _lessons/lesson-06.html | 2 +-
 _lessons/lesson-07.html | 2 +-
 _lessons/lesson-08.html | 2 +-
 _lessons/lesson-11.html | 2 +-
 _lessons/lesson-12.html | 2 +-
 _lessons/lesson-13.html | 2 +-
 _lessons/lesson-14.html | 2 +-
 _lessons/lesson-15.html | 2 +-
 _lessons/lesson-16.html | 2 +-
 _lessons/lesson-17.html | 2 +-
 15 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/_lessons/lesson-01.html b/_lessons/lesson-01.html
index 19284ff..cfef304 100644
--- a/_lessons/lesson-01.html
+++ b/_lessons/lesson-01.html
@@ -1,6 +1,6 @@
 ---
 num: 1
-title: Архитектура Web приложений.
+title: Архитектура Web приложений
 description: "Понятие URL и документа. Виды документов: HTML, CSS, JS, JSON. Абсолютные и относительные URL. Правила разрешения URL-ов. Гиперссылки. Клиент-серверная архитектура."
 ---
 
diff --git a/_lessons/lesson-02.html b/_lessons/lesson-02.html
index 36f160a..9d4dfb4 100644
--- a/_lessons/lesson-02.html
+++ b/_lessons/lesson-02.html
@@ -1,6 +1,6 @@
 ---
 num: 2
-title: Web-клиенты.
+title: Web-клиенты
 description: "Консольные утилиты. Telnet. Библиотеки в ЯП. libcurl, urllib. Браузер. Фичи браузера: куки, сессии, Referer. Основной сценарий работы. Классические web приложения. One-page приложения."
 ---
 
diff --git a/_lessons/lesson-03.html b/_lessons/lesson-03.html
index 120a2c3..3c42793 100644
--- a/_lessons/lesson-03.html
+++ b/_lessons/lesson-03.html
@@ -1,6 +1,6 @@
 ---
 num: 3
-title: HTML. Основы разметки.
+title: HTML - Основы разметки
 description: "DOCTYPE. Картинки, стили, скрипты и другие ресурсы. Блочные и строчные тэги. Таблицы и списки. Гиперссылки и формы."
 ---
 
diff --git a/_lessons/lesson-04.html b/_lessons/lesson-04.html
index bf9e082..88f2ec6 100644
--- a/_lessons/lesson-04.html
+++ b/_lessons/lesson-04.html
@@ -1,6 +1,6 @@
 ---
 num: 4
-title: CSS.
+title: CSS
 description: "Синтаксис, селекторы, псевдоклассы и псевдоэлементы, приоритеты стилей и каскадирование, основные стили, позиционирование, box-model."
 ---
 
diff --git a/_lessons/lesson-05.html b/_lessons/lesson-05.html
index bbe68bc..e399ba6 100644
--- a/_lessons/lesson-05.html
+++ b/_lessons/lesson-05.html
@@ -1,6 +1,6 @@
 ---
 num: 5
-title: Сетевые протоколы.
+title: Сетевые протоколы
 description: "DNS. Домены и зоны, делегирование. Рекурсивные запросы. TCP. Понятие порта. TCP handshake. TCP клиент и сервер. TLS."
 ---
 
diff --git a/_lessons/lesson-06.html b/_lessons/lesson-06.html
index 5463b8a..c0a4922 100644
--- a/_lessons/lesson-06.html
+++ b/_lessons/lesson-06.html
@@ -1,6 +1,6 @@
 ---
 num: 6
-title: Протокол HTTP.
+title: Протокол HTTP
 description: "Назначение и ключевые особенности. Синтаксис запроса и ответа. Методы запросов. HTTP заголовки. Коды ответа. Управление соединением."
 ---
 
diff --git a/_lessons/lesson-07.html b/_lessons/lesson-07.html
index e23f5a0..bfe67a2 100644
--- a/_lessons/lesson-07.html
+++ b/_lessons/lesson-07.html
@@ -1,6 +1,6 @@
 ---
 num: 7
-title: Web-сервера.
+title: Web-сервера
 description: "Файлы и процессы сервера. Внутренняя архитектура сервера. Примеры конфигурации. Понятие location. Методы обработки сетевых соединений."
 ---
 
diff --git a/_lessons/lesson-08.html b/_lessons/lesson-08.html
index 21134ca..b3e0b34 100644
--- a/_lessons/lesson-08.html
+++ b/_lessons/lesson-08.html
@@ -1,6 +1,6 @@
 ---
 num: 8
-title: Архитектура frontend - backend.
+title: Архитектура frontend - backend
 description: "Задачи frontend сервера . Reverse proxy. Проксирование запросов. Application сервера. Протоколы CGI, FastCGI, WSGI."
 ---
 
diff --git a/_lessons/lesson-11.html b/_lessons/lesson-11.html
index 3a8fd22..f96c129 100644
--- a/_lessons/lesson-11.html
+++ b/_lessons/lesson-11.html
@@ -1,6 +1,6 @@
 ---
 num: 11
-title: Реляционные базы данных.
+title: Реляционные базы данных
 description: "Работа с СУБД. Реляционная модель данных. Проектирование баз данных. Работа с СУБД в Python. Работа с СУБД в Django. Понятие ORM, модели Django. Описание таблиц и связей в модели Django. Типы полей в моделях."
 ---
 
diff --git a/_lessons/lesson-12.html b/_lessons/lesson-12.html
index b89b33b..28ca7ba 100644
--- a/_lessons/lesson-12.html
+++ b/_lessons/lesson-12.html
@@ -1,6 +1,6 @@
 ---
 num: 12
-title: API моделей Django.
+title: API моделей Django
 description: "Создание и изменение объектов. Загрузка данных из базы. QuerySet. ModelManagers. Расширение ModelManagers. Миграции баз данных."
 ---
 
diff --git a/_lessons/lesson-13.html b/_lessons/lesson-13.html
index 7cc2b5e..78926e0 100644
--- a/_lessons/lesson-13.html
+++ b/_lessons/lesson-13.html
@@ -1,6 +1,6 @@
 ---
 num: 13
-title: Отображение данных.
+title: Отображение данных
 description: "Отображение страницы объекта. 404-страницы. Отображение связанных сущностей. Отображение списка объектов. Постраничное отображение. Progressive loading."
 ---
 
diff --git a/_lessons/lesson-14.html b/_lessons/lesson-14.html
index 7ed14a0..d6ea86d 100644
--- a/_lessons/lesson-14.html
+++ b/_lessons/lesson-14.html
@@ -1,6 +1,6 @@
 ---
 num: 14
-title: Обработка форм.
+title: Обработка форм
 description: "GET и POST формы. Общий сценарий обработки. Перенаправления в HTTP. Описание форм в Django. Типы полей в формах Django. Валидация данных. Использование форм в контроллерах и шаблонах. CSRF"
 ---
 
diff --git a/_lessons/lesson-15.html b/_lessons/lesson-15.html
index 9bc2830..9f7d01b 100644
--- a/_lessons/lesson-15.html
+++ b/_lessons/lesson-15.html
@@ -1,6 +1,6 @@
 ---
 num: 15
-title: Сессии и Авторизация.
+title: Сессии и Авторизация
 description: "Basic HTTP Authorization. Механизм Cookie. Установка и получение cookie в HTTP. Авторизация с использованием cookie. Сценарий входа: login. Сценарий проверки сессии. Middleware в Django. Безопасное хранение паролей. Безопасность сессий."
 ---
 
diff --git a/_lessons/lesson-16.html b/_lessons/lesson-16.html
index 7bc555e..b44b60d 100644
--- a/_lessons/lesson-16.html
+++ b/_lessons/lesson-16.html
@@ -1,6 +1,6 @@
 ---
 num: 16
-title: Технология AJAX.
+title: Технология AJAX
 description: "AJAX на стороне клиента. AJAX запросы с использованием jQuery. Передача HTML и JSON в AJAX запросах. Особенности контроллеров для AJAX. Cross Origin Resource Sharing."
 ---
 
diff --git a/_lessons/lesson-17.html b/_lessons/lesson-17.html
index 48293b8..dfcea16 100644
--- a/_lessons/lesson-17.html
+++ b/_lessons/lesson-17.html
@@ -1,6 +1,6 @@
 ---
 num: 17
-title: Real-time сообщения.
+title: Real-time сообщения
 description: "Общая архитектура. Polling. Long-polling (comet). Server-push. WebSocket. Механизм обновления (Upgrade) соединений."
 ---
 

From 88fd29950efef9116b9703aa9b878e56eb6c358b Mon Sep 17 00:00:00 2001
From: Nikita <nks.off@gmail.com>
Date: Sat, 28 Nov 2015 10:42:20 +0300
Subject: [PATCH 3/4] add local config for jekyll

---
 _config.local.yml | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 _config.local.yml

diff --git a/_config.local.yml b/_config.local.yml
new file mode 100644
index 0000000..2b2a9f9
--- /dev/null
+++ b/_config.local.yml
@@ -0,0 +1,5 @@
+# URL
+baseurl:            ""
+# URL for static files
+assets_url:         "/assets"
+pictures_url:       "/pictures"

From 3fef22f8c8dc32a48532d4b93b8e387b3a746148 Mon Sep 17 00:00:00 2001
From: Nikita <nks.off@gmail.com>
Date: Mon, 30 Nov 2015 06:47:07 +0300
Subject: [PATCH 4/4] fix unicode + and - in css for lesson

---
 assets/css/lesson.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/css/lesson.css b/assets/css/lesson.css
index ac066b5..0461b19 100644
--- a/assets/css/lesson.css
+++ b/assets/css/lesson.css
@@ -21,8 +21,8 @@
 img.center { display: block; margin: auto; }
 
 plus, minus { display: list-item; list-style-type: none; }
-plus:before { display: inline; content: "➕"; font-weight: bold; margin-right: 0.5em; color: green }
-minus:before { display: inline; content: "➖"; font-weight: bold; margin-right: 0.5em; color: red }
+plus:before { display: inline; content: "➕"; margin-right: 0.5em; color: green }
+minus:before { display: inline; content: "➖"; margin-right: 0.5em; color: red }
 
 .link-no-line { background: none; }
 .link-no-color { color: rgb(85, 85, 85); }