diff --git a/2-ui/1-document/1-browser-environment/article.md b/2-ui/1-document/01-browser-environment/article.md similarity index 100% rename from 2-ui/1-document/1-browser-environment/article.md rename to 2-ui/1-document/01-browser-environment/article.md diff --git a/2-ui/1-document/1-browser-environment/windowObjects.png b/2-ui/1-document/01-browser-environment/windowObjects.png similarity index 100% rename from 2-ui/1-document/1-browser-environment/windowObjects.png rename to 2-ui/1-document/01-browser-environment/windowObjects.png diff --git a/2-ui/1-document/1-browser-environment/windowObjects@2x.png b/2-ui/1-document/01-browser-environment/windowObjects@2x.png similarity index 100% rename from 2-ui/1-document/1-browser-environment/windowObjects@2x.png rename to 2-ui/1-document/01-browser-environment/windowObjects@2x.png diff --git a/2-ui/1-document/2-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md similarity index 100% rename from 2-ui/1-document/2-dom-nodes/article.md rename to 2-ui/1-document/02-dom-nodes/article.md diff --git a/2-ui/1-document/2-dom-nodes/domconsole0.png b/2-ui/1-document/02-dom-nodes/domconsole0.png similarity index 100% rename from 2-ui/1-document/2-dom-nodes/domconsole0.png rename to 2-ui/1-document/02-dom-nodes/domconsole0.png diff --git a/2-ui/1-document/2-dom-nodes/domconsole0@2x.png b/2-ui/1-document/02-dom-nodes/domconsole0@2x.png similarity index 100% rename from 2-ui/1-document/2-dom-nodes/domconsole0@2x.png rename to 2-ui/1-document/02-dom-nodes/domconsole0@2x.png diff --git a/2-ui/1-document/2-dom-nodes/domconsole1.png b/2-ui/1-document/02-dom-nodes/domconsole1.png similarity index 100% rename from 2-ui/1-document/2-dom-nodes/domconsole1.png rename to 2-ui/1-document/02-dom-nodes/domconsole1.png diff --git a/2-ui/1-document/2-dom-nodes/domconsole1@2x.png b/2-ui/1-document/02-dom-nodes/domconsole1@2x.png similarity index 100% rename from 2-ui/1-document/2-dom-nodes/domconsole1@2x.png rename to 2-ui/1-document/02-dom-nodes/domconsole1@2x.png diff --git a/2-ui/1-document/2-dom-nodes/elks.html b/2-ui/1-document/02-dom-nodes/elks.html similarity index 100% rename from 2-ui/1-document/2-dom-nodes/elks.html rename to 2-ui/1-document/02-dom-nodes/elks.html diff --git a/2-ui/1-document/2-dom-nodes/elks.png b/2-ui/1-document/02-dom-nodes/elks.png similarity index 100% rename from 2-ui/1-document/2-dom-nodes/elks.png rename to 2-ui/1-document/02-dom-nodes/elks.png diff --git a/2-ui/1-document/2-dom-nodes/elks@2x.png b/2-ui/1-document/02-dom-nodes/elks@2x.png similarity index 100% rename from 2-ui/1-document/2-dom-nodes/elks@2x.png rename to 2-ui/1-document/02-dom-nodes/elks@2x.png diff --git a/2-ui/1-document/2-dom-nodes/head.html b/2-ui/1-document/02-dom-nodes/head.html similarity index 100% rename from 2-ui/1-document/2-dom-nodes/head.html rename to 2-ui/1-document/02-dom-nodes/head.html diff --git a/2-ui/1-document/2-dom-nodes/inspect.png b/2-ui/1-document/02-dom-nodes/inspect.png similarity index 100% rename from 2-ui/1-document/2-dom-nodes/inspect.png rename to 2-ui/1-document/02-dom-nodes/inspect.png diff --git a/2-ui/1-document/2-dom-nodes/inspect@2x.png b/2-ui/1-document/02-dom-nodes/inspect@2x.png similarity index 100% rename from 2-ui/1-document/2-dom-nodes/inspect@2x.png rename to 2-ui/1-document/02-dom-nodes/inspect@2x.png diff --git a/2-ui/1-document/2-dom-nodes/statusbarButtonGlyphs.svg b/2-ui/1-document/02-dom-nodes/statusbarButtonGlyphs.svg similarity index 100% rename from 2-ui/1-document/2-dom-nodes/statusbarButtonGlyphs.svg rename to 2-ui/1-document/02-dom-nodes/statusbarButtonGlyphs.svg diff --git a/2-ui/1-document/2-dom-nodes/toolbarButtonGlyphs.svg b/2-ui/1-document/02-dom-nodes/toolbarButtonGlyphs.svg similarity index 100% rename from 2-ui/1-document/2-dom-nodes/toolbarButtonGlyphs.svg rename to 2-ui/1-document/02-dom-nodes/toolbarButtonGlyphs.svg diff --git a/2-ui/1-document/3-dom-navigation/1-dom-children/solution.md b/2-ui/1-document/03-dom-navigation/1-dom-children/solution.md similarity index 100% rename from 2-ui/1-document/3-dom-navigation/1-dom-children/solution.md rename to 2-ui/1-document/03-dom-navigation/1-dom-children/solution.md diff --git a/2-ui/1-document/3-dom-navigation/1-dom-children/task.md b/2-ui/1-document/03-dom-navigation/1-dom-children/task.md similarity index 100% rename from 2-ui/1-document/3-dom-navigation/1-dom-children/task.md rename to 2-ui/1-document/03-dom-navigation/1-dom-children/task.md diff --git a/2-ui/1-document/3-dom-navigation/3-navigation-links-which-null/solution.md b/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/solution.md similarity index 100% rename from 2-ui/1-document/3-dom-navigation/3-navigation-links-which-null/solution.md rename to 2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/solution.md diff --git a/2-ui/1-document/3-dom-navigation/3-navigation-links-which-null/task.md b/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/task.md similarity index 100% rename from 2-ui/1-document/3-dom-navigation/3-navigation-links-which-null/task.md rename to 2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/task.md diff --git a/2-ui/1-document/3-dom-navigation/4-select-diagonal-cells/solution.md b/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/solution.md similarity index 100% rename from 2-ui/1-document/3-dom-navigation/4-select-diagonal-cells/solution.md rename to 2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/solution.md diff --git a/2-ui/1-document/3-dom-navigation/4-select-diagonal-cells/solution.view/index.html b/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/solution.view/index.html similarity index 100% rename from 2-ui/1-document/3-dom-navigation/4-select-diagonal-cells/solution.view/index.html rename to 2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/solution.view/index.html diff --git a/2-ui/1-document/3-dom-navigation/4-select-diagonal-cells/source.view/index.html b/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/source.view/index.html similarity index 100% rename from 2-ui/1-document/3-dom-navigation/4-select-diagonal-cells/source.view/index.html rename to 2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/source.view/index.html diff --git a/2-ui/1-document/3-dom-navigation/4-select-diagonal-cells/task.md b/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/task.md similarity index 100% rename from 2-ui/1-document/3-dom-navigation/4-select-diagonal-cells/task.md rename to 2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/task.md diff --git a/2-ui/1-document/3-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md similarity index 100% rename from 2-ui/1-document/3-dom-navigation/article.md rename to 2-ui/1-document/03-dom-navigation/article.md diff --git a/2-ui/1-document/3-dom-navigation/dom-links-elements.png b/2-ui/1-document/03-dom-navigation/dom-links-elements.png similarity index 100% rename from 2-ui/1-document/3-dom-navigation/dom-links-elements.png rename to 2-ui/1-document/03-dom-navigation/dom-links-elements.png diff --git a/2-ui/1-document/3-dom-navigation/dom-links-elements@2x.png b/2-ui/1-document/03-dom-navigation/dom-links-elements@2x.png similarity index 100% rename from 2-ui/1-document/3-dom-navigation/dom-links-elements@2x.png rename to 2-ui/1-document/03-dom-navigation/dom-links-elements@2x.png diff --git a/2-ui/1-document/3-dom-navigation/dom-links.png b/2-ui/1-document/03-dom-navigation/dom-links.png similarity index 100% rename from 2-ui/1-document/3-dom-navigation/dom-links.png rename to 2-ui/1-document/03-dom-navigation/dom-links.png diff --git a/2-ui/1-document/3-dom-navigation/dom-links@2x.png b/2-ui/1-document/03-dom-navigation/dom-links@2x.png similarity index 100% rename from 2-ui/1-document/3-dom-navigation/dom-links@2x.png rename to 2-ui/1-document/03-dom-navigation/dom-links@2x.png diff --git a/2-ui/1-document/3-dom-navigation/head.html b/2-ui/1-document/03-dom-navigation/head.html similarity index 100% rename from 2-ui/1-document/3-dom-navigation/head.html rename to 2-ui/1-document/03-dom-navigation/head.html diff --git a/2-ui/1-document/5-searching-elements-dom/1-find-elements/solution.md b/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md similarity index 100% rename from 2-ui/1-document/5-searching-elements-dom/1-find-elements/solution.md rename to 2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md diff --git a/2-ui/1-document/5-searching-elements-dom/1-find-elements/table.html b/2-ui/1-document/04-searching-elements-dom/1-find-elements/table.html similarity index 100% rename from 2-ui/1-document/5-searching-elements-dom/1-find-elements/table.html rename to 2-ui/1-document/04-searching-elements-dom/1-find-elements/table.html diff --git a/2-ui/1-document/5-searching-elements-dom/1-find-elements/task.md b/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md similarity index 100% rename from 2-ui/1-document/5-searching-elements-dom/1-find-elements/task.md rename to 2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md diff --git a/2-ui/1-document/5-searching-elements-dom/2-tree-info/solution.md b/2-ui/1-document/04-searching-elements-dom/2-tree-info/solution.md similarity index 100% rename from 2-ui/1-document/5-searching-elements-dom/2-tree-info/solution.md rename to 2-ui/1-document/04-searching-elements-dom/2-tree-info/solution.md diff --git a/2-ui/1-document/5-searching-elements-dom/2-tree-info/solution.view/index.html b/2-ui/1-document/04-searching-elements-dom/2-tree-info/solution.view/index.html similarity index 100% rename from 2-ui/1-document/5-searching-elements-dom/2-tree-info/solution.view/index.html rename to 2-ui/1-document/04-searching-elements-dom/2-tree-info/solution.view/index.html diff --git a/2-ui/1-document/5-searching-elements-dom/2-tree-info/source.view/index.html b/2-ui/1-document/04-searching-elements-dom/2-tree-info/source.view/index.html similarity index 100% rename from 2-ui/1-document/5-searching-elements-dom/2-tree-info/source.view/index.html rename to 2-ui/1-document/04-searching-elements-dom/2-tree-info/source.view/index.html diff --git a/2-ui/1-document/5-searching-elements-dom/2-tree-info/task.md b/2-ui/1-document/04-searching-elements-dom/2-tree-info/task.md similarity index 100% rename from 2-ui/1-document/5-searching-elements-dom/2-tree-info/task.md rename to 2-ui/1-document/04-searching-elements-dom/2-tree-info/task.md diff --git a/2-ui/1-document/5-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md similarity index 100% rename from 2-ui/1-document/5-searching-elements-dom/article.md rename to 2-ui/1-document/04-searching-elements-dom/article.md diff --git a/2-ui/1-document/6-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md b/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md similarity index 100% rename from 2-ui/1-document/6-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md rename to 2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md diff --git a/2-ui/1-document/6-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md b/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md similarity index 100% rename from 2-ui/1-document/6-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md rename to 2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md diff --git a/2-ui/1-document/6-basic-dom-node-properties/3-tag-in-comment/solution.md b/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/solution.md similarity index 100% rename from 2-ui/1-document/6-basic-dom-node-properties/3-tag-in-comment/solution.md rename to 2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/solution.md diff --git a/2-ui/1-document/6-basic-dom-node-properties/3-tag-in-comment/task.md b/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/task.md similarity index 100% rename from 2-ui/1-document/6-basic-dom-node-properties/3-tag-in-comment/task.md rename to 2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/task.md diff --git a/2-ui/1-document/6-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md b/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md similarity index 100% rename from 2-ui/1-document/6-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md rename to 2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md diff --git a/2-ui/1-document/6-basic-dom-node-properties/4-where-document-in-hierarchy/task.md b/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/task.md similarity index 100% rename from 2-ui/1-document/6-basic-dom-node-properties/4-where-document-in-hierarchy/task.md rename to 2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/task.md diff --git a/2-ui/1-document/6-basic-dom-node-properties/article.md b/2-ui/1-document/05-basic-dom-node-properties/article.md similarity index 100% rename from 2-ui/1-document/6-basic-dom-node-properties/article.md rename to 2-ui/1-document/05-basic-dom-node-properties/article.md diff --git a/2-ui/1-document/6-basic-dom-node-properties/dom-class-hierarchy.png b/2-ui/1-document/05-basic-dom-node-properties/dom-class-hierarchy.png similarity index 100% rename from 2-ui/1-document/6-basic-dom-node-properties/dom-class-hierarchy.png rename to 2-ui/1-document/05-basic-dom-node-properties/dom-class-hierarchy.png diff --git a/2-ui/1-document/6-basic-dom-node-properties/dom-class-hierarchy@2x.png b/2-ui/1-document/05-basic-dom-node-properties/dom-class-hierarchy@2x.png similarity index 100% rename from 2-ui/1-document/6-basic-dom-node-properties/dom-class-hierarchy@2x.png rename to 2-ui/1-document/05-basic-dom-node-properties/dom-class-hierarchy@2x.png diff --git a/2-ui/1-document/9-attributes-and-properties/1-get-user-attribute/solution.md b/2-ui/1-document/06-attributes-and-properties/1-get-user-attribute/solution.md similarity index 100% rename from 2-ui/1-document/9-attributes-and-properties/1-get-user-attribute/solution.md rename to 2-ui/1-document/06-attributes-and-properties/1-get-user-attribute/solution.md diff --git a/2-ui/1-document/9-attributes-and-properties/1-get-user-attribute/task.md b/2-ui/1-document/06-attributes-and-properties/1-get-user-attribute/task.md similarity index 100% rename from 2-ui/1-document/9-attributes-and-properties/1-get-user-attribute/task.md rename to 2-ui/1-document/06-attributes-and-properties/1-get-user-attribute/task.md diff --git a/2-ui/1-document/9-attributes-and-properties/2-yellow-links/solution.md b/2-ui/1-document/06-attributes-and-properties/2-yellow-links/solution.md similarity index 100% rename from 2-ui/1-document/9-attributes-and-properties/2-yellow-links/solution.md rename to 2-ui/1-document/06-attributes-and-properties/2-yellow-links/solution.md diff --git a/2-ui/1-document/9-attributes-and-properties/2-yellow-links/solution.view/index.html b/2-ui/1-document/06-attributes-and-properties/2-yellow-links/solution.view/index.html similarity index 100% rename from 2-ui/1-document/9-attributes-and-properties/2-yellow-links/solution.view/index.html rename to 2-ui/1-document/06-attributes-and-properties/2-yellow-links/solution.view/index.html diff --git a/2-ui/1-document/9-attributes-and-properties/2-yellow-links/task.md b/2-ui/1-document/06-attributes-and-properties/2-yellow-links/task.md similarity index 100% rename from 2-ui/1-document/9-attributes-and-properties/2-yellow-links/task.md rename to 2-ui/1-document/06-attributes-and-properties/2-yellow-links/task.md diff --git a/2-ui/1-document/9-attributes-and-properties/article.md b/2-ui/1-document/06-attributes-and-properties/article.md similarity index 100% rename from 2-ui/1-document/9-attributes-and-properties/article.md rename to 2-ui/1-document/06-attributes-and-properties/article.md diff --git a/2-ui/1-document/11-modifying-document/1-createtextnode-vs-innerhtml/solution.md b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md similarity index 100% rename from 2-ui/1-document/11-modifying-document/1-createtextnode-vs-innerhtml/solution.md rename to 2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md diff --git a/2-ui/1-document/11-modifying-document/1-createtextnode-vs-innerhtml/task.md b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md similarity index 100% rename from 2-ui/1-document/11-modifying-document/1-createtextnode-vs-innerhtml/task.md rename to 2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md diff --git a/2-ui/1-document/11-modifying-document/10-clock-setinterval/solution.md b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md similarity index 100% rename from 2-ui/1-document/11-modifying-document/10-clock-setinterval/solution.md rename to 2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md diff --git a/2-ui/1-document/11-modifying-document/10-clock-setinterval/solution.view/index.html b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html similarity index 100% rename from 2-ui/1-document/11-modifying-document/10-clock-setinterval/solution.view/index.html rename to 2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html diff --git a/2-ui/1-document/11-modifying-document/10-clock-setinterval/source.view/index.html b/2-ui/1-document/07-modifying-document/10-clock-setinterval/source.view/index.html similarity index 100% rename from 2-ui/1-document/11-modifying-document/10-clock-setinterval/source.view/index.html rename to 2-ui/1-document/07-modifying-document/10-clock-setinterval/source.view/index.html diff --git a/2-ui/1-document/11-modifying-document/10-clock-setinterval/task.md b/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md similarity index 100% rename from 2-ui/1-document/11-modifying-document/10-clock-setinterval/task.md rename to 2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md diff --git a/2-ui/1-document/11-modifying-document/11-append-to-list/solution.md b/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md similarity index 100% rename from 2-ui/1-document/11-modifying-document/11-append-to-list/solution.md rename to 2-ui/1-document/07-modifying-document/11-append-to-list/solution.md diff --git a/2-ui/1-document/11-modifying-document/11-append-to-list/task.md b/2-ui/1-document/07-modifying-document/11-append-to-list/task.md similarity index 100% rename from 2-ui/1-document/11-modifying-document/11-append-to-list/task.md rename to 2-ui/1-document/07-modifying-document/11-append-to-list/task.md diff --git a/2-ui/1-document/11-modifying-document/12-sort-table/solution.md b/2-ui/1-document/07-modifying-document/12-sort-table/solution.md similarity index 100% rename from 2-ui/1-document/11-modifying-document/12-sort-table/solution.md rename to 2-ui/1-document/07-modifying-document/12-sort-table/solution.md diff --git a/2-ui/1-document/11-modifying-document/12-sort-table/solution.view/index.html b/2-ui/1-document/07-modifying-document/12-sort-table/solution.view/index.html similarity index 100% rename from 2-ui/1-document/11-modifying-document/12-sort-table/solution.view/index.html rename to 2-ui/1-document/07-modifying-document/12-sort-table/solution.view/index.html diff --git a/2-ui/1-document/11-modifying-document/12-sort-table/source.view/index.html b/2-ui/1-document/07-modifying-document/12-sort-table/source.view/index.html similarity index 100% rename from 2-ui/1-document/11-modifying-document/12-sort-table/source.view/index.html rename to 2-ui/1-document/07-modifying-document/12-sort-table/source.view/index.html diff --git a/2-ui/1-document/11-modifying-document/12-sort-table/task.md b/2-ui/1-document/07-modifying-document/12-sort-table/task.md similarity index 100% rename from 2-ui/1-document/11-modifying-document/12-sort-table/task.md rename to 2-ui/1-document/07-modifying-document/12-sort-table/task.md diff --git a/2-ui/1-document/11-modifying-document/4-clear-elem/solution.md b/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md similarity index 100% rename from 2-ui/1-document/11-modifying-document/4-clear-elem/solution.md rename to 2-ui/1-document/07-modifying-document/4-clear-elem/solution.md diff --git a/2-ui/1-document/11-modifying-document/4-clear-elem/task.md b/2-ui/1-document/07-modifying-document/4-clear-elem/task.md similarity index 100% rename from 2-ui/1-document/11-modifying-document/4-clear-elem/task.md rename to 2-ui/1-document/07-modifying-document/4-clear-elem/task.md diff --git a/2-ui/1-document/11-modifying-document/5-why-aaa/solution.md b/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md similarity index 100% rename from 2-ui/1-document/11-modifying-document/5-why-aaa/solution.md rename to 2-ui/1-document/07-modifying-document/5-why-aaa/solution.md diff --git a/2-ui/1-document/11-modifying-document/5-why-aaa/task.md b/2-ui/1-document/07-modifying-document/5-why-aaa/task.md similarity index 100% rename from 2-ui/1-document/11-modifying-document/5-why-aaa/task.md rename to 2-ui/1-document/07-modifying-document/5-why-aaa/task.md diff --git a/2-ui/1-document/11-modifying-document/6-create-list/solution.md b/2-ui/1-document/07-modifying-document/6-create-list/solution.md similarity index 100% rename from 2-ui/1-document/11-modifying-document/6-create-list/solution.md rename to 2-ui/1-document/07-modifying-document/6-create-list/solution.md diff --git a/2-ui/1-document/11-modifying-document/6-create-list/solution.view/index.html b/2-ui/1-document/07-modifying-document/6-create-list/solution.view/index.html similarity index 100% rename from 2-ui/1-document/11-modifying-document/6-create-list/solution.view/index.html rename to 2-ui/1-document/07-modifying-document/6-create-list/solution.view/index.html diff --git a/2-ui/1-document/11-modifying-document/6-create-list/task.md b/2-ui/1-document/07-modifying-document/6-create-list/task.md similarity index 100% rename from 2-ui/1-document/11-modifying-document/6-create-list/task.md rename to 2-ui/1-document/07-modifying-document/6-create-list/task.md diff --git a/2-ui/1-document/11-modifying-document/7-create-object-tree/build-tree-dom.view/index.html b/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html similarity index 100% rename from 2-ui/1-document/11-modifying-document/7-create-object-tree/build-tree-dom.view/index.html rename to 2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html diff --git a/2-ui/1-document/11-modifying-document/7-create-object-tree/innerhtml.view/index.html b/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html similarity index 100% rename from 2-ui/1-document/11-modifying-document/7-create-object-tree/innerhtml.view/index.html rename to 2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html diff --git a/2-ui/1-document/11-modifying-document/7-create-object-tree/solution.md b/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md similarity index 100% rename from 2-ui/1-document/11-modifying-document/7-create-object-tree/solution.md rename to 2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md diff --git a/2-ui/1-document/11-modifying-document/7-create-object-tree/source.view/index.html b/2-ui/1-document/07-modifying-document/7-create-object-tree/source.view/index.html similarity index 100% rename from 2-ui/1-document/11-modifying-document/7-create-object-tree/source.view/index.html rename to 2-ui/1-document/07-modifying-document/7-create-object-tree/source.view/index.html diff --git a/2-ui/1-document/11-modifying-document/7-create-object-tree/task.md b/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md similarity index 100% rename from 2-ui/1-document/11-modifying-document/7-create-object-tree/task.md rename to 2-ui/1-document/07-modifying-document/7-create-object-tree/task.md diff --git a/2-ui/1-document/11-modifying-document/8-tree-count/solution.md b/2-ui/1-document/07-modifying-document/8-tree-count/solution.md similarity index 100% rename from 2-ui/1-document/11-modifying-document/8-tree-count/solution.md rename to 2-ui/1-document/07-modifying-document/8-tree-count/solution.md diff --git a/2-ui/1-document/11-modifying-document/8-tree-count/solution.view/index.html b/2-ui/1-document/07-modifying-document/8-tree-count/solution.view/index.html similarity index 100% rename from 2-ui/1-document/11-modifying-document/8-tree-count/solution.view/index.html rename to 2-ui/1-document/07-modifying-document/8-tree-count/solution.view/index.html diff --git a/2-ui/1-document/11-modifying-document/8-tree-count/source.view/index.html b/2-ui/1-document/07-modifying-document/8-tree-count/source.view/index.html similarity index 100% rename from 2-ui/1-document/11-modifying-document/8-tree-count/source.view/index.html rename to 2-ui/1-document/07-modifying-document/8-tree-count/source.view/index.html diff --git a/2-ui/1-document/11-modifying-document/8-tree-count/task.md b/2-ui/1-document/07-modifying-document/8-tree-count/task.md similarity index 100% rename from 2-ui/1-document/11-modifying-document/8-tree-count/task.md rename to 2-ui/1-document/07-modifying-document/8-tree-count/task.md diff --git a/2-ui/1-document/11-modifying-document/9-calendar-table/solution.md b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md similarity index 100% rename from 2-ui/1-document/11-modifying-document/9-calendar-table/solution.md rename to 2-ui/1-document/07-modifying-document/9-calendar-table/solution.md diff --git a/2-ui/1-document/11-modifying-document/9-calendar-table/solution.view/index.html b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.view/index.html similarity index 100% rename from 2-ui/1-document/11-modifying-document/9-calendar-table/solution.view/index.html rename to 2-ui/1-document/07-modifying-document/9-calendar-table/solution.view/index.html diff --git a/2-ui/1-document/11-modifying-document/9-calendar-table/source.view/index.html b/2-ui/1-document/07-modifying-document/9-calendar-table/source.view/index.html similarity index 100% rename from 2-ui/1-document/11-modifying-document/9-calendar-table/source.view/index.html rename to 2-ui/1-document/07-modifying-document/9-calendar-table/source.view/index.html diff --git a/2-ui/1-document/11-modifying-document/9-calendar-table/task.md b/2-ui/1-document/07-modifying-document/9-calendar-table/task.md similarity index 100% rename from 2-ui/1-document/11-modifying-document/9-calendar-table/task.md rename to 2-ui/1-document/07-modifying-document/9-calendar-table/task.md diff --git a/2-ui/1-document/11-modifying-document/article.md b/2-ui/1-document/07-modifying-document/article.md similarity index 100% rename from 2-ui/1-document/11-modifying-document/article.md rename to 2-ui/1-document/07-modifying-document/article.md diff --git a/2-ui/1-document/11-modifying-document/before-prepend-append-after.png b/2-ui/1-document/07-modifying-document/before-prepend-append-after.png similarity index 100% rename from 2-ui/1-document/11-modifying-document/before-prepend-append-after.png rename to 2-ui/1-document/07-modifying-document/before-prepend-append-after.png diff --git a/2-ui/1-document/11-modifying-document/before-prepend-append-after@2x.png b/2-ui/1-document/07-modifying-document/before-prepend-append-after@2x.png similarity index 100% rename from 2-ui/1-document/11-modifying-document/before-prepend-append-after@2x.png rename to 2-ui/1-document/07-modifying-document/before-prepend-append-after@2x.png diff --git a/2-ui/1-document/11-modifying-document/insert-adjacent.png b/2-ui/1-document/07-modifying-document/insert-adjacent.png similarity index 100% rename from 2-ui/1-document/11-modifying-document/insert-adjacent.png rename to 2-ui/1-document/07-modifying-document/insert-adjacent.png diff --git a/2-ui/1-document/11-modifying-document/insert-adjacent@2x.png b/2-ui/1-document/07-modifying-document/insert-adjacent@2x.png similarity index 100% rename from 2-ui/1-document/11-modifying-document/insert-adjacent@2x.png rename to 2-ui/1-document/07-modifying-document/insert-adjacent@2x.png diff --git a/2-ui/1-document/14-styles-and-classes/2-create-notification/solution.md b/2-ui/1-document/08-styles-and-classes/2-create-notification/solution.md similarity index 100% rename from 2-ui/1-document/14-styles-and-classes/2-create-notification/solution.md rename to 2-ui/1-document/08-styles-and-classes/2-create-notification/solution.md diff --git a/2-ui/1-document/14-styles-and-classes/2-create-notification/solution.view/index.css b/2-ui/1-document/08-styles-and-classes/2-create-notification/solution.view/index.css similarity index 100% rename from 2-ui/1-document/14-styles-and-classes/2-create-notification/solution.view/index.css rename to 2-ui/1-document/08-styles-and-classes/2-create-notification/solution.view/index.css diff --git a/2-ui/1-document/14-styles-and-classes/2-create-notification/solution.view/index.html b/2-ui/1-document/08-styles-and-classes/2-create-notification/solution.view/index.html similarity index 100% rename from 2-ui/1-document/14-styles-and-classes/2-create-notification/solution.view/index.html rename to 2-ui/1-document/08-styles-and-classes/2-create-notification/solution.view/index.html diff --git a/2-ui/1-document/14-styles-and-classes/2-create-notification/source.view/index.css b/2-ui/1-document/08-styles-and-classes/2-create-notification/source.view/index.css similarity index 100% rename from 2-ui/1-document/14-styles-and-classes/2-create-notification/source.view/index.css rename to 2-ui/1-document/08-styles-and-classes/2-create-notification/source.view/index.css diff --git a/2-ui/1-document/14-styles-and-classes/2-create-notification/source.view/index.html b/2-ui/1-document/08-styles-and-classes/2-create-notification/source.view/index.html similarity index 100% rename from 2-ui/1-document/14-styles-and-classes/2-create-notification/source.view/index.html rename to 2-ui/1-document/08-styles-and-classes/2-create-notification/source.view/index.html diff --git a/2-ui/1-document/14-styles-and-classes/2-create-notification/task.md b/2-ui/1-document/08-styles-and-classes/2-create-notification/task.md similarity index 100% rename from 2-ui/1-document/14-styles-and-classes/2-create-notification/task.md rename to 2-ui/1-document/08-styles-and-classes/2-create-notification/task.md diff --git a/2-ui/1-document/14-styles-and-classes/article.md b/2-ui/1-document/08-styles-and-classes/article.md similarity index 100% rename from 2-ui/1-document/14-styles-and-classes/article.md rename to 2-ui/1-document/08-styles-and-classes/article.md diff --git a/2-ui/1-document/14-styles-and-classes/getiecomputedstyle.view/getiecomputedstyle.js b/2-ui/1-document/08-styles-and-classes/getiecomputedstyle.view/getiecomputedstyle.js similarity index 100% rename from 2-ui/1-document/14-styles-and-classes/getiecomputedstyle.view/getiecomputedstyle.js rename to 2-ui/1-document/08-styles-and-classes/getiecomputedstyle.view/getiecomputedstyle.js diff --git a/2-ui/1-document/14-styles-and-classes/getiecomputedstyle.view/index.html b/2-ui/1-document/08-styles-and-classes/getiecomputedstyle.view/index.html similarity index 100% rename from 2-ui/1-document/14-styles-and-classes/getiecomputedstyle.view/index.html rename to 2-ui/1-document/08-styles-and-classes/getiecomputedstyle.view/index.html diff --git a/2-ui/1-document/15-size-and-scroll/1-get-scroll-height-bottom/solution.md b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/solution.md similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/1-get-scroll-height-bottom/solution.md rename to 2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/solution.md diff --git a/2-ui/1-document/15-size-and-scroll/1-get-scroll-height-bottom/task.md b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/1-get-scroll-height-bottom/task.md rename to 2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md diff --git a/2-ui/1-document/15-size-and-scroll/2-scrollbar-width/solution.md b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/solution.md similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/2-scrollbar-width/solution.md rename to 2-ui/1-document/09-size-and-scroll/2-scrollbar-width/solution.md diff --git a/2-ui/1-document/15-size-and-scroll/2-scrollbar-width/task.md b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/2-scrollbar-width/task.md rename to 2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md diff --git a/2-ui/1-document/15-size-and-scroll/4-put-ball-in-center/ball-half/index.html b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/ball-half/index.html similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/4-put-ball-in-center/ball-half/index.html rename to 2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/ball-half/index.html diff --git a/2-ui/1-document/15-size-and-scroll/4-put-ball-in-center/field.png b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.png similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/4-put-ball-in-center/field.png rename to 2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.png diff --git a/2-ui/1-document/15-size-and-scroll/4-put-ball-in-center/field@2x.png b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field@2x.png similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/4-put-ball-in-center/field@2x.png rename to 2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field@2x.png diff --git a/2-ui/1-document/15-size-and-scroll/4-put-ball-in-center/solution.md b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/4-put-ball-in-center/solution.md rename to 2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md diff --git a/2-ui/1-document/15-size-and-scroll/4-put-ball-in-center/solution.view/index.html b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.view/index.html similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/4-put-ball-in-center/solution.view/index.html rename to 2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.view/index.html diff --git a/2-ui/1-document/15-size-and-scroll/4-put-ball-in-center/source.view/index.html b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/source.view/index.html similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/4-put-ball-in-center/source.view/index.html rename to 2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/source.view/index.html diff --git a/2-ui/1-document/15-size-and-scroll/4-put-ball-in-center/task.md b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/task.md similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/4-put-ball-in-center/task.md rename to 2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/task.md diff --git a/2-ui/1-document/15-size-and-scroll/6-width-vs-clientwidth/solution.md b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/6-width-vs-clientwidth/solution.md rename to 2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md diff --git a/2-ui/1-document/15-size-and-scroll/6-width-vs-clientwidth/task.md b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/6-width-vs-clientwidth/task.md rename to 2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md diff --git a/2-ui/1-document/15-size-and-scroll/article.md b/2-ui/1-document/09-size-and-scroll/article.md similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/article.md rename to 2-ui/1-document/09-size-and-scroll/article.md diff --git a/2-ui/1-document/15-size-and-scroll/cssWidthScroll.view/index.html b/2-ui/1-document/09-size-and-scroll/cssWidthScroll.view/index.html similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/cssWidthScroll.view/index.html rename to 2-ui/1-document/09-size-and-scroll/cssWidthScroll.view/index.html diff --git a/2-ui/1-document/15-size-and-scroll/metric-all.png b/2-ui/1-document/09-size-and-scroll/metric-all.png similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/metric-all.png rename to 2-ui/1-document/09-size-and-scroll/metric-all.png diff --git a/2-ui/1-document/15-size-and-scroll/metric-all@2x.png b/2-ui/1-document/09-size-and-scroll/metric-all@2x.png similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/metric-all@2x.png rename to 2-ui/1-document/09-size-and-scroll/metric-all@2x.png diff --git a/2-ui/1-document/15-size-and-scroll/metric-client-left-top-rtl.png b/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.png similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/metric-client-left-top-rtl.png rename to 2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.png diff --git a/2-ui/1-document/15-size-and-scroll/metric-client-left-top-rtl@2x.png b/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl@2x.png similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/metric-client-left-top-rtl@2x.png rename to 2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl@2x.png diff --git a/2-ui/1-document/15-size-and-scroll/metric-client-left-top.png b/2-ui/1-document/09-size-and-scroll/metric-client-left-top.png similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/metric-client-left-top.png rename to 2-ui/1-document/09-size-and-scroll/metric-client-left-top.png diff --git a/2-ui/1-document/15-size-and-scroll/metric-client-left-top@2x.png b/2-ui/1-document/09-size-and-scroll/metric-client-left-top@2x.png similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/metric-client-left-top@2x.png rename to 2-ui/1-document/09-size-and-scroll/metric-client-left-top@2x.png diff --git a/2-ui/1-document/15-size-and-scroll/metric-client-width-height.png b/2-ui/1-document/09-size-and-scroll/metric-client-width-height.png similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/metric-client-width-height.png rename to 2-ui/1-document/09-size-and-scroll/metric-client-width-height.png diff --git a/2-ui/1-document/15-size-and-scroll/metric-client-width-height@2x.png b/2-ui/1-document/09-size-and-scroll/metric-client-width-height@2x.png similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/metric-client-width-height@2x.png rename to 2-ui/1-document/09-size-and-scroll/metric-client-width-height@2x.png diff --git a/2-ui/1-document/15-size-and-scroll/metric-client-width-nopadding.png b/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding.png similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/metric-client-width-nopadding.png rename to 2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding.png diff --git a/2-ui/1-document/15-size-and-scroll/metric-client-width-nopadding@2x.png b/2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding@2x.png similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/metric-client-width-nopadding@2x.png rename to 2-ui/1-document/09-size-and-scroll/metric-client-width-nopadding@2x.png diff --git a/2-ui/1-document/15-size-and-scroll/metric-css.png b/2-ui/1-document/09-size-and-scroll/metric-css.png similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/metric-css.png rename to 2-ui/1-document/09-size-and-scroll/metric-css.png diff --git a/2-ui/1-document/15-size-and-scroll/metric-css@2x.png b/2-ui/1-document/09-size-and-scroll/metric-css@2x.png similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/metric-css@2x.png rename to 2-ui/1-document/09-size-and-scroll/metric-css@2x.png diff --git a/2-ui/1-document/15-size-and-scroll/metric-offset-parent.png b/2-ui/1-document/09-size-and-scroll/metric-offset-parent.png similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/metric-offset-parent.png rename to 2-ui/1-document/09-size-and-scroll/metric-offset-parent.png diff --git a/2-ui/1-document/15-size-and-scroll/metric-offset-parent@2x.png b/2-ui/1-document/09-size-and-scroll/metric-offset-parent@2x.png similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/metric-offset-parent@2x.png rename to 2-ui/1-document/09-size-and-scroll/metric-offset-parent@2x.png diff --git a/2-ui/1-document/15-size-and-scroll/metric-offset-width-height.png b/2-ui/1-document/09-size-and-scroll/metric-offset-width-height.png similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/metric-offset-width-height.png rename to 2-ui/1-document/09-size-and-scroll/metric-offset-width-height.png diff --git a/2-ui/1-document/15-size-and-scroll/metric-offset-width-height@2x.png b/2-ui/1-document/09-size-and-scroll/metric-offset-width-height@2x.png similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/metric-offset-width-height@2x.png rename to 2-ui/1-document/09-size-and-scroll/metric-offset-width-height@2x.png diff --git a/2-ui/1-document/15-size-and-scroll/metric-scroll-top.png b/2-ui/1-document/09-size-and-scroll/metric-scroll-top.png similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/metric-scroll-top.png rename to 2-ui/1-document/09-size-and-scroll/metric-scroll-top.png diff --git a/2-ui/1-document/15-size-and-scroll/metric-scroll-top@2x.png b/2-ui/1-document/09-size-and-scroll/metric-scroll-top@2x.png similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/metric-scroll-top@2x.png rename to 2-ui/1-document/09-size-and-scroll/metric-scroll-top@2x.png diff --git a/2-ui/1-document/15-size-and-scroll/metric-scroll-width-height.png b/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.png similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/metric-scroll-width-height.png rename to 2-ui/1-document/09-size-and-scroll/metric-scroll-width-height.png diff --git a/2-ui/1-document/15-size-and-scroll/metric-scroll-width-height@2x.png b/2-ui/1-document/09-size-and-scroll/metric-scroll-width-height@2x.png similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/metric-scroll-width-height@2x.png rename to 2-ui/1-document/09-size-and-scroll/metric-scroll-width-height@2x.png diff --git a/2-ui/1-document/15-size-and-scroll/metric.view/index.html b/2-ui/1-document/09-size-and-scroll/metric.view/index.html similarity index 100% rename from 2-ui/1-document/15-size-and-scroll/metric.view/index.html rename to 2-ui/1-document/09-size-and-scroll/metric.view/index.html diff --git a/2-ui/1-document/16-size-and-scroll-window/article.md b/2-ui/1-document/10-size-and-scroll-window/article.md similarity index 100% rename from 2-ui/1-document/16-size-and-scroll-window/article.md rename to 2-ui/1-document/10-size-and-scroll-window/article.md diff --git a/2-ui/1-document/16-size-and-scroll-window/document-client-width-height.png b/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.png similarity index 100% rename from 2-ui/1-document/16-size-and-scroll-window/document-client-width-height.png rename to 2-ui/1-document/10-size-and-scroll-window/document-client-width-height.png diff --git a/2-ui/1-document/16-size-and-scroll-window/document-client-width-height@2x.png b/2-ui/1-document/10-size-and-scroll-window/document-client-width-height@2x.png similarity index 100% rename from 2-ui/1-document/16-size-and-scroll-window/document-client-width-height@2x.png rename to 2-ui/1-document/10-size-and-scroll-window/document-client-width-height@2x.png diff --git a/2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.md b/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md similarity index 100% rename from 2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.md rename to 2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md diff --git a/2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.view/index.css b/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.css similarity index 100% rename from 2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.view/index.css rename to 2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.css diff --git a/2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.view/index.html b/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html similarity index 100% rename from 2-ui/1-document/17-coordinates/1-find-point-coordinates/solution.view/index.html rename to 2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html diff --git a/2-ui/1-document/17-coordinates/1-find-point-coordinates/source.view/index.css b/2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.css similarity index 100% rename from 2-ui/1-document/17-coordinates/1-find-point-coordinates/source.view/index.css rename to 2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.css diff --git a/2-ui/1-document/17-coordinates/1-find-point-coordinates/source.view/index.html b/2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.html similarity index 100% rename from 2-ui/1-document/17-coordinates/1-find-point-coordinates/source.view/index.html rename to 2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.html diff --git a/2-ui/1-document/17-coordinates/1-find-point-coordinates/task.md b/2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md similarity index 90% rename from 2-ui/1-document/17-coordinates/1-find-point-coordinates/task.md rename to 2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md index d49cc3c4..603c8472 100644 --- a/2-ui/1-document/17-coordinates/1-find-point-coordinates/task.md +++ b/2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md @@ -2,7 +2,7 @@ importance: 5 --- -# Find the coordinates in the document +# Find window coordinates of the field In the iframe below you can see a document with the green "field". @@ -21,4 +21,4 @@ Your code should use DOM to get window coordinates of: The coordinates that you calculate should be the same as those returned by the mouse click. -P.S. The code should also work if the element has another size or no border. +P.S. The code should also work if the element has another size or border, not bound to any fixed values. diff --git a/2-ui/1-document/11-coordinates/2-position-at/solution.md b/2-ui/1-document/11-coordinates/2-position-at/solution.md new file mode 100644 index 00000000..646245f2 --- /dev/null +++ b/2-ui/1-document/11-coordinates/2-position-at/solution.md @@ -0,0 +1,4 @@ +In this task we only need to accuracely calculate the coorindates. See the code for details. + +Please note: the elements must be in the document to read `offsetHeight` and other properties. +A hidden (`display:none`) or out of the document element has no size. diff --git a/2-ui/1-document/17-coordinates/2-position-at/solution.view/index.css b/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.css similarity index 100% rename from 2-ui/1-document/17-coordinates/2-position-at/solution.view/index.css rename to 2-ui/1-document/11-coordinates/2-position-at/solution.view/index.css diff --git a/2-ui/1-document/17-coordinates/2-position-at/solution.view/index.html b/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html similarity index 100% rename from 2-ui/1-document/17-coordinates/2-position-at/solution.view/index.html rename to 2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html diff --git a/2-ui/1-document/17-coordinates/2-position-at/source.view/index.css b/2-ui/1-document/11-coordinates/2-position-at/source.view/index.css similarity index 100% rename from 2-ui/1-document/17-coordinates/2-position-at/source.view/index.css rename to 2-ui/1-document/11-coordinates/2-position-at/source.view/index.css diff --git a/2-ui/1-document/17-coordinates/2-position-at/source.view/index.html b/2-ui/1-document/11-coordinates/2-position-at/source.view/index.html similarity index 100% rename from 2-ui/1-document/17-coordinates/2-position-at/source.view/index.html rename to 2-ui/1-document/11-coordinates/2-position-at/source.view/index.html diff --git a/2-ui/1-document/17-coordinates/2-position-at/task.md b/2-ui/1-document/11-coordinates/2-position-at/task.md similarity index 79% rename from 2-ui/1-document/17-coordinates/2-position-at/task.md rename to 2-ui/1-document/11-coordinates/2-position-at/task.md index 5fea5eba..e20238e1 100644 --- a/2-ui/1-document/17-coordinates/2-position-at/task.md +++ b/2-ui/1-document/11-coordinates/2-position-at/task.md @@ -10,4 +10,6 @@ Use it to make a function `showNote(anchor, position, html)` that shows an eleme Show the notes like here: -[iframe src="solution" height="450" border="1" link] +[iframe src="solution" height="350" border="1" link] + +P.S. The note should have `position:fixed` for this task. diff --git a/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.md b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.md new file mode 100644 index 00000000..0474a061 --- /dev/null +++ b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.md @@ -0,0 +1,4 @@ +The solution is actually pretty simple: + +- Use `position:absolute` in CSS instead of `position:fixed` for `.note`. +- Usee the function [getCoords()](info:coordinates#getCoords) from the chapter to get document-relative coordinates. diff --git a/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.css b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.css new file mode 100644 index 00000000..700bd8c2 --- /dev/null +++ b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.css @@ -0,0 +1,28 @@ +.note { + position: absolute; + z-index: 1000; + padding: 5px; + border: 1px solid black; + background: white; + text-align: center; + font: italic 14px Georgia; +} + +blockquote { + background: #f9f9f9; + border-left: 10px solid #ccc; + margin: 0 0 0 100px; + padding: .5em 10px; + quotes: "\201C""\201D""\2018""\2019"; + display: inline-block; + white-space: pre; +} + +blockquote:before { + color: #ccc; + content: open-quote; + font-size: 4em; + line-height: .1em; + margin-right: .25em; + vertical-align: -.4em; +} \ No newline at end of file diff --git a/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.html b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.html new file mode 100644 index 00000000..d627bee8 --- /dev/null +++ b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.html @@ -0,0 +1,79 @@ + + + + + + + + + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae + esse sequi officia sapiente.

+ +
+ Teacher: Why are you late? + Student: There was a man who lost a hundred dollar bill. + Teacher: That's nice. Were you helping him look for it? + Student: No. I was standing on it. +
+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae + esse sequi officia sapiente.

+ + + + + + + diff --git a/2-ui/1-document/11-coordinates/3-position-at-absolute/task.md b/2-ui/1-document/11-coordinates/3-position-at-absolute/task.md new file mode 100644 index 00000000..0554da86 --- /dev/null +++ b/2-ui/1-document/11-coordinates/3-position-at-absolute/task.md @@ -0,0 +1,11 @@ +importance: 5 + +--- + +# Show a note near the element (absolute) + +Modify the solution of the [previous task](info:task/position-at) so that the note uses `position:absolute` instead of `position:fixed`. + +That will prevent its "runaway" from the element when the page scrolls. + +Take the solution of that task as a starting point. To test the scroll, add the style ``. diff --git a/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.md b/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.md new file mode 100644 index 00000000..e69de29b diff --git a/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.css b/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.css new file mode 100644 index 00000000..d2493f6e --- /dev/null +++ b/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.css @@ -0,0 +1,29 @@ +.note { + position: absolute; + z-index: 1000; + padding: 5px; + border: 1px solid black; + background: white; + text-align: center; + font: italic 14px Georgia; + opacity: .8; +} + +blockquote { + background: #f9f9f9; + border-left: 10px solid #ccc; + margin: 0 0 0 100px; + padding: .5em 10px; + quotes: "\201C""\201D""\2018""\2019"; + display: inline-block; + white-space: pre; +} + +blockquote:before { + color: #ccc; + content: open-quote; + font-size: 4em; + line-height: .1em; + margin-right: .25em; + vertical-align: -.4em; +} \ No newline at end of file diff --git a/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.html b/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.html new file mode 100644 index 00000000..12140de0 --- /dev/null +++ b/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.html @@ -0,0 +1,94 @@ + + + + + + + + + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae + esse sequi officia sapiente.

+ +
+ Teacher: Why are you late? + Student: There was a man who lost a hundred dollar bill. + Teacher: That's nice. Were you helping him look for it? + Student: No. I was standing on it. +
+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae + esse sequi officia sapiente.

+ + + + + + diff --git a/2-ui/1-document/11-coordinates/4-position-inside-absolute/task.md b/2-ui/1-document/11-coordinates/4-position-inside-absolute/task.md new file mode 100644 index 00000000..de45b549 --- /dev/null +++ b/2-ui/1-document/11-coordinates/4-position-inside-absolute/task.md @@ -0,0 +1,28 @@ +importance: 5 + +--- + +# Position the note inside (absolute) + +Extend the previous task : teach the function `positionAt(anchor, position, elem)` to insert `elem` inside the `anchor`. + +New values for `position`: + +- `top-out`, `right-out`, `bottom-out` -- work the same as before, they insert the `elem` over/right/under `anchor`. +- `top-in`, `right-in`, `bottom-in` -- insert `elem` inside the `anchor`: stick it to the upper/right/bottom edge. + +For instance: + +```js +// shows the note above blockquote +positionAt(blockquote, "top-out", note); + +// shows the note inside blockquote, at the top +positionAt(blockquote, "top-in", note); +``` + +The result: + +[iframe src="solution" height="310" border="1" link] + +As the source code, take the solution of the task . diff --git a/2-ui/1-document/17-coordinates/article.md b/2-ui/1-document/11-coordinates/article.md similarity index 71% rename from 2-ui/1-document/17-coordinates/article.md rename to 2-ui/1-document/11-coordinates/article.md index 2d44574d..1c1793d8 100644 --- a/2-ui/1-document/17-coordinates/article.md +++ b/2-ui/1-document/11-coordinates/article.md @@ -150,3 +150,59 @@ The code can be modified to show the message at the left, right, below, apply CS The reason is obvious: the message element uses `position: fixed`, so it remains at the same place while the page scrolls away. To change that, we need to use document-based coordinates. We'll cover them in the next chapter. + +## Document coordinates + +Document-relative coordinates start from the left-upper corner of the document, not the window. + +In CSS, window coordinates correspond to `position:fixed`, while document coordinates are similar to `position:absolute` (out of other positioned elements, of course). + +We need document coordinates to stick something at a certain place of the document, so that it remains there during a page scroll. + +For clarity we'll call window coordinates `(clientX,clientY)` and document coordinates `(pageX,pageY)`. + +When the page is not scrolled, then window coordinate and document coordinates are actually the same. Their zero points match too: + +![](document-window-coordinates-zero.png) + +And if we scroll it, then `(clientX,clientY)` change, because they are relative to the window, but `(pageX,pageY)` remain the same. + +Here's the same page after the vertical scroll. + +- `clientY` becomes `0`, because the element is now on window top. +- `clientX` doesn't change, we didn't scroll horizontally. +- `pageX` and `pageY` remain the same, because they are relative to the *document*. + +![](document-window-coordinates-scroll.png) + +## Getting document coordinates [#getCoords] + +There's no standard method to get document coordinates. But it's easy to write it. + +The two coordinate systems are connected by the formula: +- `pageY = clientY + current vertical scroll`. +- `pageX = clientX + current horizontal scroll`. + +Our function `getCoords(elem)` will take window coordinates from `elem.getBoundingClientRect()` and add the current scroll to them. + +```js +function getCoords(elem) { + let box = elem.getBoundingClientRect(); + + return { + top: box.top + pageYOffset, + left: box.left + pageXOffset + }; +} +``` + +## Summary + +Any point on the page has coordinates: + +1. Relative to the window -- `elem.getBoundingClientRect()`. +2. Relative to the document -- `elem.getBoundingClientRect()` plus the current scroll. + +Window coordinates are great to use with `position:fixed`, and document coordinates do well with `position:absolute`. + +Both coordinate systems have their "pro" and "contra", there are times we need one or the other one, just like CSS `position`. diff --git a/2-ui/1-document/17-coordinates/coords.png b/2-ui/1-document/11-coordinates/coords.png similarity index 100% rename from 2-ui/1-document/17-coordinates/coords.png rename to 2-ui/1-document/11-coordinates/coords.png diff --git a/2-ui/1-document/17-coordinates/coords@2x.png b/2-ui/1-document/11-coordinates/coords@2x.png similarity index 100% rename from 2-ui/1-document/17-coordinates/coords@2x.png rename to 2-ui/1-document/11-coordinates/coords@2x.png diff --git a/2-ui/1-document/11-coordinates/document-window-coordinates-scroll.png b/2-ui/1-document/11-coordinates/document-window-coordinates-scroll.png new file mode 100644 index 00000000..39ddc31c Binary files /dev/null and b/2-ui/1-document/11-coordinates/document-window-coordinates-scroll.png differ diff --git a/2-ui/1-document/11-coordinates/document-window-coordinates-scroll@2x.png b/2-ui/1-document/11-coordinates/document-window-coordinates-scroll@2x.png new file mode 100644 index 00000000..52e555c4 Binary files /dev/null and b/2-ui/1-document/11-coordinates/document-window-coordinates-scroll@2x.png differ diff --git a/2-ui/1-document/11-coordinates/document-window-coordinates-zero.png b/2-ui/1-document/11-coordinates/document-window-coordinates-zero.png new file mode 100644 index 00000000..706b42c1 Binary files /dev/null and b/2-ui/1-document/11-coordinates/document-window-coordinates-zero.png differ diff --git a/2-ui/1-document/11-coordinates/document-window-coordinates-zero@2x.png b/2-ui/1-document/11-coordinates/document-window-coordinates-zero@2x.png new file mode 100644 index 00000000..83f31950 Binary files /dev/null and b/2-ui/1-document/11-coordinates/document-window-coordinates-zero@2x.png differ diff --git a/2-ui/1-document/17-coordinates/head.html b/2-ui/1-document/11-coordinates/head.html similarity index 83% rename from 2-ui/1-document/17-coordinates/head.html rename to 2-ui/1-document/11-coordinates/head.html index 595e4729..efc6cd1c 100644 --- a/2-ui/1-document/17-coordinates/head.html +++ b/2-ui/1-document/11-coordinates/head.html @@ -18,10 +18,8 @@ document.addEventListener('DOMContentLoaded', function() { } let message = createMessageUnder(elem, 'Hello, world!'); - document.body.appendChild(message); - setTimeout(function() { - document.body.removeChild(message); - }, 5000); + document.body.append(message); + setTimeout(() => message.remove(), 5000); } }); diff --git a/2-ui/1-document/17-coordinates/2-position-at/solution.md b/2-ui/1-document/17-coordinates/2-position-at/solution.md deleted file mode 100644 index bc8eea1e..00000000 --- a/2-ui/1-document/17-coordinates/2-position-at/solution.md +++ /dev/null @@ -1,3 +0,0 @@ -Please note: the elements must be in the document to read geometry properties. - -For an hidden (`display:none`) or out of the document element they are zero, so it's impossible to get say a note element size until we place it in the document. diff --git a/figures.sketch b/figures.sketch index 89a727f9..a08c29ce 100644 Binary files a/figures.sketch and b/figures.sketch differ