diff --git a/clog.lisp b/clog/clog.lisp
similarity index 100%
rename from clog.lisp
rename to clog/clog.lisp
diff --git a/clog/tutorials-simple-element.lisp b/clog/tutorials-simple-element.lisp
new file mode 100644
index 0000000..747ad87
--- /dev/null
+++ b/clog/tutorials-simple-element.lisp
@@ -0,0 +1,87 @@
+
+(ql:quickload :clog)
+
+(clog-install-dir)
+;; #P"/home/efim/quicklisp/local-projects/clog/"
+
+(clog:run-tutorial 1)
+
+(in-package clog-user)
+
+(defun my-setup (body)
+  (let ((header (create-child body "<h1>lalalla</h1>"))
+        (colors '(:black :blue :green)))
+    (setf (color header) :pink)
+    (set-on-click header
+                  (lambda (obj)
+                    (declare (ignore obj))
+                    ;; if set value in debugger, this is how to delete it
+                    ;; since it's just created in image
+                    ;; (boundp 'colors)
+                    ;; (makunbound 'colors)
+                    (nth (random (length colors)) colors)
+                    (setf (color header) (nth (random (length colors)) colors)))))
+  (create-child body "<p>lalalla</p>"))        ; now, that doesn't work.
+
+(initialize #'my-setup)
+(open-browser)
+
+;; now again, what about color keywords
+;; well, maybe there's some kind of filtering for correct color values
+
+;; and ispecting source is easier with sly-inspect-definition
+
+;; let's look at second tutorial?
+
+;; more lispier creation of elements
+(clog:run-tutorial 2)
+
+
+          ;;   :address :article :aside :header :main :nav :hgroup
+          ;;   :p :pre :section :blockquote :h1 :h2 :h3 :h4 :h5 :h6
+(defun my-setup-with-more-elements (body)
+  (let ((my-h1 (create-section body :h1 :content "content of h1")))
+    (create-section body :address :content "what-s content of address?")
+    (create-section body :article :content "what-s content of article?")
+    (create-section body :aside :content "what-s content of aside?")
+    (format t "running setup on ~S with ~S" body my-h1)))
+
+;; article is "independent content" which should be reasonable to distribute on its own
+;; aside - to put content out of main column?
+;; main - The content inside the <main> element should be unique to the
+;; document. It should not contain any content that is repeated across documents
+;; such as sidebars, navigation links, copyright information, site logos, and
+;; search forms.
+
+;; what would be comfortable way to compose that?
+;; apart from using let?
+;; maybe that's in tutorial 3?
+
+(initialize #'my-setup-with-more-elements)
+(open-browser)
+
+(clog:run-tutorial 3)
+
+;; tutorial 3 is about wrapping code into (with-sync-event (obj) ... )
+;; that would guard start of function on some event until after previous completes. cool
+
+(clog:run-tutorial 4)
+;; reusing handler, and function generic, without much of type specification, looks unusual
+
+(clog:run-tutorial 5)
+
+;; so, connection-data-item on obj - target, or *body* seems to not care, having strigly named attributes
+;; shareable by components?
+
+;; how'd I use that?
+;; I guess to maybe pass component to act upon, without doing elaborate nested LET expressions
+;; just during creation of some component, save it as such variable,
+;; then in handler it could be targeted by being taken by name
+;;
+;; but, yeah, also passing values between handlers or something
+
+(clog:run-tutorial 6)
+;; every click / handler starts in new thread.
+;; so if I want reentrant code, use `connection-data-item`
+
+(clog:run-tutorial 7)