From ff2bfb47d508aa6df46b5519bc36f3f9cf3c8b74 Mon Sep 17 00:00:00 2001
From: Maksim Litvinov <litvinovmksm@gamil.com>
Date: Wed, 27 Dec 2023 15:20:35 +0300
Subject: [PATCH] switch to new structure

---
 .../10-html-markup/ru/EXERCISE.md             |   5 +
 .../10-html-markup/ru/README.md               |  23 ++
 .../10-basics-html/10-html-markup/ru/data.yml |   1 +
 modules/10-basics-html/20-tags/ru/EXERCISE.md |   1 +
 modules/10-basics-html/20-tags/ru/README.md   |  33 +++
 modules/10-basics-html/20-tags/ru/data.yml    |   1 +
 .../30-text-in-html/ru/EXERCISE.md            |   9 +
 .../30-text-in-html/ru/README.md              |  40 ++++
 .../30-text-in-html/ru/data.yml               |   1 +
 .../40-nested-tag/ru/EXERCISE.md              |   1 +
 .../10-basics-html/40-nested-tag/ru/README.md |  47 ++++
 .../10-basics-html/40-nested-tag/ru/data.yml  |   1 +
 .../50-attributes/ru/EXERCISE.md              |   1 +
 .../10-basics-html/50-attributes/ru/README.md |  33 +++
 .../10-basics-html/50-attributes/ru/data.yml  |   5 +
 .../10-introduction/ru/EXERCISE.md            |   5 +
 .../10-introduction/ru/README.md              |  26 +++
 .../15-basics-css/10-introduction/ru/data.yml |   1 +
 .../20-connection/ru/EXERCISE.md              |   1 +
 .../15-basics-css/20-connection/ru/README.md  |  20 ++
 .../15-basics-css/20-connection/ru/data.yml   |   1 +
 .../25-inheritance/ru/EXERCISE.md             |   1 +
 .../15-basics-css/25-inheritance/ru/README.md |  33 +++
 .../15-basics-css/25-inheritance/ru/data.yml  |   6 +
 modules/15-basics-css/30-style/ru/EXERCISE.md |   1 +
 modules/15-basics-css/30-style/ru/README.md   |  68 ++++++
 modules/15-basics-css/30-style/ru/data.yml    |   1 +
 .../35-basics-style/ru/EXERCISE.md            |   1 +
 .../35-basics-style/ru/README.md              |  13 ++
 .../15-basics-css/35-basics-style/ru/data.yml |   1 +
 .../40-selectors-by-class/ru/EXERCISE.md      |   1 +
 .../40-selectors-by-class/ru/README.md        |  23 ++
 .../40-selectors-by-class/ru/data.yml         |   1 +
 .../15-basics-css/50-selectors/ru/EXERCISE.md |   4 +
 .../15-basics-css/50-selectors/ru/README.md   |  40 ++++
 .../15-basics-css/50-selectors/ru/data.yml    |   1 +
 .../15-basics-css/60-cascade/ru/EXERCISE.md   |   6 +
 modules/15-basics-css/60-cascade/ru/README.md |  36 ++++
 modules/15-basics-css/60-cascade/ru/data.yml  |   1 +
 .../15-basics-css/70-priority/ru/EXERCISE.md  |   8 +
 .../15-basics-css/70-priority/ru/README.md    |  93 ++++++++
 modules/15-basics-css/70-priority/ru/data.yml |   1 +
 .../20-hypertext/10-paragraph/ru/EXERCISE.md  |   1 +
 .../20-hypertext/10-paragraph/ru/README.md    |  19 ++
 modules/20-hypertext/10-paragraph/ru/data.yml |   8 +
 .../20-hypertext/15-text-align/ru/EXERCISE.md |   1 +
 .../20-hypertext/15-text-align/ru/README.md   |  45 ++++
 .../20-hypertext/15-text-align/ru/data.yml    |   5 +
 modules/20-hypertext/20-color/ru/EXERCISE.md  |   1 +
 modules/20-hypertext/20-color/ru/README.md    |  30 +++
 modules/20-hypertext/20-color/ru/data.yml     |   5 +
 .../20-hypertext/25-text-style/ru/EXERCISE.md |   7 +
 .../20-hypertext/25-text-style/ru/README.md   |  87 ++++++++
 .../20-hypertext/25-text-style/ru/data.yml    |  11 +
 .../30-hypertext-header/ru/EXERCISE.md        |   1 +
 .../30-hypertext-header/ru/README.md          |  60 ++++++
 .../30-hypertext-header/ru/data.yml           |   4 +
 modules/20-hypertext/35-links/ru/EXERCISE.md  |   1 +
 modules/20-hypertext/35-links/ru/README.md    |  48 +++++
 modules/20-hypertext/35-links/ru/data.yml     |   1 +
 .../20-hypertext/40-font-size/ru/EXERCISE.md  |   1 +
 .../20-hypertext/40-font-size/ru/README.md    |  20 ++
 modules/20-hypertext/40-font-size/ru/data.yml |   1 +
 modules/20-hypertext/45-units/ru/EXERCISE.md  |   1 +
 modules/20-hypertext/45-units/ru/README.md    |  67 ++++++
 modules/20-hypertext/45-units/ru/data.yml     |   6 +
 modules/20-hypertext/50-lists/ru/EXERCISE.md  |   1 +
 modules/20-hypertext/50-lists/ru/README.md    |  77 +++++++
 modules/20-hypertext/50-lists/ru/data.yml     |   1 +
 .../55-nested-lists/ru/EXERCISE.md            |  13 ++
 .../20-hypertext/55-nested-lists/ru/README.md |  45 ++++
 .../20-hypertext/55-nested-lists/ru/data.yml  |   5 +
 .../60-font-variant/ru/EXERCISE.md            |   1 +
 .../20-hypertext/60-font-variant/ru/README.md |  13 ++
 .../20-hypertext/60-font-variant/ru/data.yml  |   1 +
 .../65-text-decoration/ru/EXERCISE.md         |   1 +
 .../65-text-decoration/ru/README.md           |  25 +++
 .../65-text-decoration/ru/data.yml            |   1 +
 .../70-line-height/ru/EXERCISE.md             |   3 +
 .../20-hypertext/70-line-height/ru/README.md  |   9 +
 .../20-hypertext/70-line-height/ru/data.yml   |   1 +
 .../75-font-family/ru/EXERCISE.md             |   1 +
 .../20-hypertext/75-font-family/ru/README.md  |  47 ++++
 .../20-hypertext/75-font-family/ru/data.yml   |   3 +
 modules/20-hypertext/80-font/ru/EXERCISE.md   |   8 +
 modules/20-hypertext/80-font/ru/README.md     |  40 ++++
 modules/20-hypertext/80-font/ru/data.yml      |   1 +
 modules/20-hypertext/85-table/ru/EXERCISE.md  |   1 +
 modules/20-hypertext/85-table/ru/README.md    | 200 ++++++++++++++++++
 modules/20-hypertext/85-table/ru/data.yml     |   9 +
 .../90-colspan-rowspan/ru/EXERCISE.md         |   1 +
 .../90-colspan-rowspan/ru/README.md           | 127 +++++++++++
 .../90-colspan-rowspan/ru/data.yml            |  12 ++
 .../95-special-characters/ru/EXERCISE.md      |   1 +
 .../95-special-characters/ru/README.md        |  28 +++
 .../95-special-characters/ru/data.yml         |   1 +
 modules/20-hypertext/96-pre/ru/EXERCISE.md    |   1 +
 modules/20-hypertext/96-pre/ru/README.md      |  45 ++++
 modules/20-hypertext/96-pre/ru/data.yml       |   1 +
 modules/20-hypertext/97-code/ru/EXERCISE.md   |   1 +
 modules/20-hypertext/97-code/ru/README.md     |  25 +++
 modules/20-hypertext/97-code/ru/data.yml      |   1 +
 .../20-hypertext/98-conclusion/ru/EXERCISE.md |   1 +
 .../20-hypertext/98-conclusion/ru/README.md   |  27 +++
 .../20-hypertext/98-conclusion/ru/data.yml    |   1 +
 modules/25-media/10-img/ru/EXERCISE.md        |   1 +
 modules/25-media/10-img/ru/README.md          |  38 ++++
 modules/25-media/10-img/ru/data.yml           |   1 +
 modules/25-media/20-audio/ru/EXERCISE.md      |   6 +
 modules/25-media/20-audio/ru/README.md        |  21 ++
 modules/25-media/20-audio/ru/data.yml         |   5 +
 modules/25-media/30-video/ru/EXERCISE.md      |   9 +
 modules/25-media/30-video/ru/README.md        |  37 ++++
 modules/25-media/30-video/ru/data.yml         |   8 +
 modules/30-box/10-block/ru/EXERCISE.md        |   1 +
 modules/30-box/10-block/ru/README.md          |  19 ++
 modules/30-box/10-block/ru/data.yml           |  11 +
 .../30-box/20-height-and-width/ru/EXERCISE.md |   7 +
 .../30-box/20-height-and-width/ru/README.md   |  21 ++
 .../30-box/20-height-and-width/ru/data.yml    |   1 +
 modules/30-box/30-border-style/ru/EXERCISE.md |   1 +
 modules/30-box/30-border-style/ru/README.md   |  63 ++++++
 modules/30-box/30-border-style/ru/data.yml    |   3 +
 modules/30-box/40-padding/ru/EXERCISE.md      |  17 ++
 modules/30-box/40-padding/ru/README.md        |  62 ++++++
 modules/30-box/40-padding/ru/data.yml         |   1 +
 modules/30-box/50-margin/ru/EXERCISE.md       |   1 +
 modules/30-box/50-margin/ru/README.md         |  50 +++++
 modules/30-box/50-margin/ru/data.yml          |   1 +
 modules/30-box/60-box-model/ru/EXERCISE.md    |  12 ++
 modules/30-box/60-box-model/ru/README.md      |  42 ++++
 modules/30-box/60-box-model/ru/data.yml       |   1 +
 modules/30-box/70-background/ru/EXERCISE.md   |   1 +
 modules/30-box/70-background/ru/README.md     |  20 ++
 modules/30-box/70-background/ru/data.yml      |   5 +
 modules/35-structure/10-basics/ru/EXERCISE.md |   1 +
 modules/35-structure/10-basics/ru/README.md   |  27 +++
 modules/35-structure/10-basics/ru/data.yml    |   1 +
 modules/35-structure/30-meta/ru/EXERCISE.md   |   7 +
 modules/35-structure/30-meta/ru/README.md     |  57 +++++
 modules/35-structure/30-meta/ru/data.yml      |   1 +
 modules/35-structure/40-link/ru/EXERCISE.md   |   1 +
 modules/35-structure/40-link/ru/README.md     |  39 ++++
 modules/35-structure/40-link/ru/data.yml      |   6 +
 .../35-structure/50-viewport/ru/EXERCISE.md   |   1 +
 modules/35-structure/50-viewport/ru/README.md |  59 ++++++
 modules/35-structure/50-viewport/ru/data.yml  |   1 +
 .../40-flex/10-flex-container/ru/EXERCISE.md  |   6 +
 .../40-flex/10-flex-container/ru/README.md    |  52 +++++
 modules/40-flex/10-flex-container/ru/data.yml |   5 +
 .../40-flex/15-flex-direction/ru/EXERCISE.md  |  30 +++
 .../40-flex/15-flex-direction/ru/README.md    |  42 ++++
 modules/40-flex/15-flex-direction/ru/data.yml |   1 +
 modules/40-flex/20-flex-wrap/ru/EXERCISE.md   |  30 +++
 modules/40-flex/20-flex-wrap/ru/README.md     |  56 +++++
 modules/40-flex/20-flex-wrap/ru/data.yml      |   1 +
 .../40-flex/30-flex-alignment/ru/EXERCISE.md  |  34 +++
 .../40-flex/30-flex-alignment/ru/README.md    | 106 ++++++++++
 modules/40-flex/30-flex-alignment/ru/data.yml |   1 +
 .../40-flex/35-items-flexible/ru/EXERCISE.md  |  36 ++++
 .../40-flex/35-items-flexible/ru/README.md    |  72 +++++++
 modules/40-flex/35-items-flexible/ru/data.yml |   1 +
 .../10-semantic-elements/ru/EXERCISE.md       |   1 +
 .../10-semantic-elements/ru/README.md         |  52 +++++
 .../10-semantic-elements/ru/data.yml          |   1 +
 .../20-semantics-header/ru/EXERCISE.md        |   1 +
 .../20-semantics-header/ru/README.md          |  18 ++
 .../20-semantics-header/ru/data.yml           |   5 +
 modules/45-semantics/30-nav/ru/EXERCISE.md    |   1 +
 modules/45-semantics/30-nav/ru/README.md      |  39 ++++
 modules/45-semantics/30-nav/ru/data.yml       |   6 +
 modules/45-semantics/40-main/ru/EXERCISE.md   |   6 +
 modules/45-semantics/40-main/ru/README.md     |  31 +++
 modules/45-semantics/40-main/ru/data.yml      |   7 +
 .../45-semantics/50-section/ru/EXERCISE.md    |   6 +
 modules/45-semantics/50-section/ru/README.md  |  57 +++++
 modules/45-semantics/50-section/ru/data.yml   |   6 +
 .../45-semantics/60-article/ru/EXERCISE.md    |   8 +
 modules/45-semantics/60-article/ru/README.md  |  50 +++++
 modules/45-semantics/60-article/ru/data.yml   |   6 +
 modules/45-semantics/70-aside/ru/EXERCISE.md  |   8 +
 modules/45-semantics/70-aside/ru/README.md    |  60 ++++++
 modules/45-semantics/70-aside/ru/data.yml     |   5 +
 modules/50-form/10-form-basics/ru/EXERCISE.md |   1 +
 modules/50-form/10-form-basics/ru/README.md   |  29 +++
 modules/50-form/10-form-basics/ru/data.yml    |   1 +
 modules/50-form/20-input/ru/EXERCISE.md       |   1 +
 modules/50-form/20-input/ru/README.md         | 104 +++++++++
 modules/50-form/20-input/ru/data.yml          |   1 +
 modules/50-form/30-checkbox/ru/EXERCISE.md    |   1 +
 modules/50-form/30-checkbox/ru/README.md      |  77 +++++++
 modules/50-form/30-checkbox/ru/data.yml       |   1 +
 modules/50-form/40-radio/ru/EXERCISE.md       |   1 +
 modules/50-form/40-radio/ru/README.md         |  79 +++++++
 modules/50-form/40-radio/ru/data.yml          |   1 +
 modules/50-form/50-textarea/ru/EXERCISE.md    |   1 +
 modules/50-form/50-textarea/ru/README.md      |  31 +++
 modules/50-form/50-textarea/ru/data.yml       |   1 +
 modules/50-form/60-select/ru/EXERCISE.md      |   1 +
 modules/50-form/60-select/ru/README.md        |  78 +++++++
 modules/50-form/60-select/ru/data.yml         |   1 +
 modules/50-form/70-button/ru/EXERCISE.md      |   5 +
 modules/50-form/70-button/ru/README.md        |  48 +++++
 modules/50-form/70-button/ru/data.yml         |   1 +
 modules/55-other/10-validation/ru/EXERCISE.md |   1 +
 modules/55-other/10-validation/ru/README.md   |  27 +++
 modules/55-other/10-validation/ru/data.yml    |   1 +
 modules/55-other/20-colors/ru/EXERCISE.md     |   1 +
 modules/55-other/20-colors/ru/README.md       |  85 ++++++++
 modules/55-other/20-colors/ru/data.yml        |   1 +
 modules/55-other/30-varibles/ru/EXERCISE.md   |   1 +
 modules/55-other/30-varibles/ru/README.md     |  43 ++++
 modules/55-other/30-varibles/ru/data.yml      |   1 +
 modules/55-other/40-animation/ru/EXERCISE.md  |   1 +
 modules/55-other/40-animation/ru/README.md    |  66 ++++++
 modules/55-other/40-animation/ru/data.yml     |   1 +
 216 files changed, 4014 insertions(+)
 create mode 100644 modules/10-basics-html/10-html-markup/ru/EXERCISE.md
 create mode 100644 modules/10-basics-html/10-html-markup/ru/README.md
 create mode 100644 modules/10-basics-html/10-html-markup/ru/data.yml
 create mode 100644 modules/10-basics-html/20-tags/ru/EXERCISE.md
 create mode 100644 modules/10-basics-html/20-tags/ru/README.md
 create mode 100644 modules/10-basics-html/20-tags/ru/data.yml
 create mode 100644 modules/10-basics-html/30-text-in-html/ru/EXERCISE.md
 create mode 100644 modules/10-basics-html/30-text-in-html/ru/README.md
 create mode 100644 modules/10-basics-html/30-text-in-html/ru/data.yml
 create mode 100644 modules/10-basics-html/40-nested-tag/ru/EXERCISE.md
 create mode 100644 modules/10-basics-html/40-nested-tag/ru/README.md
 create mode 100644 modules/10-basics-html/40-nested-tag/ru/data.yml
 create mode 100644 modules/10-basics-html/50-attributes/ru/EXERCISE.md
 create mode 100644 modules/10-basics-html/50-attributes/ru/README.md
 create mode 100644 modules/10-basics-html/50-attributes/ru/data.yml
 create mode 100644 modules/15-basics-css/10-introduction/ru/EXERCISE.md
 create mode 100644 modules/15-basics-css/10-introduction/ru/README.md
 create mode 100644 modules/15-basics-css/10-introduction/ru/data.yml
 create mode 100644 modules/15-basics-css/20-connection/ru/EXERCISE.md
 create mode 100644 modules/15-basics-css/20-connection/ru/README.md
 create mode 100644 modules/15-basics-css/20-connection/ru/data.yml
 create mode 100644 modules/15-basics-css/25-inheritance/ru/EXERCISE.md
 create mode 100644 modules/15-basics-css/25-inheritance/ru/README.md
 create mode 100644 modules/15-basics-css/25-inheritance/ru/data.yml
 create mode 100644 modules/15-basics-css/30-style/ru/EXERCISE.md
 create mode 100644 modules/15-basics-css/30-style/ru/README.md
 create mode 100644 modules/15-basics-css/30-style/ru/data.yml
 create mode 100644 modules/15-basics-css/35-basics-style/ru/EXERCISE.md
 create mode 100644 modules/15-basics-css/35-basics-style/ru/README.md
 create mode 100644 modules/15-basics-css/35-basics-style/ru/data.yml
 create mode 100644 modules/15-basics-css/40-selectors-by-class/ru/EXERCISE.md
 create mode 100644 modules/15-basics-css/40-selectors-by-class/ru/README.md
 create mode 100644 modules/15-basics-css/40-selectors-by-class/ru/data.yml
 create mode 100644 modules/15-basics-css/50-selectors/ru/EXERCISE.md
 create mode 100644 modules/15-basics-css/50-selectors/ru/README.md
 create mode 100644 modules/15-basics-css/50-selectors/ru/data.yml
 create mode 100644 modules/15-basics-css/60-cascade/ru/EXERCISE.md
 create mode 100644 modules/15-basics-css/60-cascade/ru/README.md
 create mode 100644 modules/15-basics-css/60-cascade/ru/data.yml
 create mode 100644 modules/15-basics-css/70-priority/ru/EXERCISE.md
 create mode 100644 modules/15-basics-css/70-priority/ru/README.md
 create mode 100644 modules/15-basics-css/70-priority/ru/data.yml
 create mode 100644 modules/20-hypertext/10-paragraph/ru/EXERCISE.md
 create mode 100644 modules/20-hypertext/10-paragraph/ru/README.md
 create mode 100644 modules/20-hypertext/10-paragraph/ru/data.yml
 create mode 100644 modules/20-hypertext/15-text-align/ru/EXERCISE.md
 create mode 100644 modules/20-hypertext/15-text-align/ru/README.md
 create mode 100644 modules/20-hypertext/15-text-align/ru/data.yml
 create mode 100644 modules/20-hypertext/20-color/ru/EXERCISE.md
 create mode 100644 modules/20-hypertext/20-color/ru/README.md
 create mode 100644 modules/20-hypertext/20-color/ru/data.yml
 create mode 100644 modules/20-hypertext/25-text-style/ru/EXERCISE.md
 create mode 100644 modules/20-hypertext/25-text-style/ru/README.md
 create mode 100644 modules/20-hypertext/25-text-style/ru/data.yml
 create mode 100644 modules/20-hypertext/30-hypertext-header/ru/EXERCISE.md
 create mode 100644 modules/20-hypertext/30-hypertext-header/ru/README.md
 create mode 100644 modules/20-hypertext/30-hypertext-header/ru/data.yml
 create mode 100644 modules/20-hypertext/35-links/ru/EXERCISE.md
 create mode 100644 modules/20-hypertext/35-links/ru/README.md
 create mode 100644 modules/20-hypertext/35-links/ru/data.yml
 create mode 100644 modules/20-hypertext/40-font-size/ru/EXERCISE.md
 create mode 100644 modules/20-hypertext/40-font-size/ru/README.md
 create mode 100644 modules/20-hypertext/40-font-size/ru/data.yml
 create mode 100644 modules/20-hypertext/45-units/ru/EXERCISE.md
 create mode 100644 modules/20-hypertext/45-units/ru/README.md
 create mode 100644 modules/20-hypertext/45-units/ru/data.yml
 create mode 100644 modules/20-hypertext/50-lists/ru/EXERCISE.md
 create mode 100644 modules/20-hypertext/50-lists/ru/README.md
 create mode 100644 modules/20-hypertext/50-lists/ru/data.yml
 create mode 100644 modules/20-hypertext/55-nested-lists/ru/EXERCISE.md
 create mode 100644 modules/20-hypertext/55-nested-lists/ru/README.md
 create mode 100644 modules/20-hypertext/55-nested-lists/ru/data.yml
 create mode 100644 modules/20-hypertext/60-font-variant/ru/EXERCISE.md
 create mode 100644 modules/20-hypertext/60-font-variant/ru/README.md
 create mode 100644 modules/20-hypertext/60-font-variant/ru/data.yml
 create mode 100644 modules/20-hypertext/65-text-decoration/ru/EXERCISE.md
 create mode 100644 modules/20-hypertext/65-text-decoration/ru/README.md
 create mode 100644 modules/20-hypertext/65-text-decoration/ru/data.yml
 create mode 100644 modules/20-hypertext/70-line-height/ru/EXERCISE.md
 create mode 100644 modules/20-hypertext/70-line-height/ru/README.md
 create mode 100644 modules/20-hypertext/70-line-height/ru/data.yml
 create mode 100644 modules/20-hypertext/75-font-family/ru/EXERCISE.md
 create mode 100644 modules/20-hypertext/75-font-family/ru/README.md
 create mode 100644 modules/20-hypertext/75-font-family/ru/data.yml
 create mode 100644 modules/20-hypertext/80-font/ru/EXERCISE.md
 create mode 100644 modules/20-hypertext/80-font/ru/README.md
 create mode 100644 modules/20-hypertext/80-font/ru/data.yml
 create mode 100644 modules/20-hypertext/85-table/ru/EXERCISE.md
 create mode 100644 modules/20-hypertext/85-table/ru/README.md
 create mode 100644 modules/20-hypertext/85-table/ru/data.yml
 create mode 100644 modules/20-hypertext/90-colspan-rowspan/ru/EXERCISE.md
 create mode 100644 modules/20-hypertext/90-colspan-rowspan/ru/README.md
 create mode 100644 modules/20-hypertext/90-colspan-rowspan/ru/data.yml
 create mode 100644 modules/20-hypertext/95-special-characters/ru/EXERCISE.md
 create mode 100644 modules/20-hypertext/95-special-characters/ru/README.md
 create mode 100644 modules/20-hypertext/95-special-characters/ru/data.yml
 create mode 100644 modules/20-hypertext/96-pre/ru/EXERCISE.md
 create mode 100644 modules/20-hypertext/96-pre/ru/README.md
 create mode 100644 modules/20-hypertext/96-pre/ru/data.yml
 create mode 100644 modules/20-hypertext/97-code/ru/EXERCISE.md
 create mode 100644 modules/20-hypertext/97-code/ru/README.md
 create mode 100644 modules/20-hypertext/97-code/ru/data.yml
 create mode 100644 modules/20-hypertext/98-conclusion/ru/EXERCISE.md
 create mode 100644 modules/20-hypertext/98-conclusion/ru/README.md
 create mode 100644 modules/20-hypertext/98-conclusion/ru/data.yml
 create mode 100644 modules/25-media/10-img/ru/EXERCISE.md
 create mode 100644 modules/25-media/10-img/ru/README.md
 create mode 100644 modules/25-media/10-img/ru/data.yml
 create mode 100644 modules/25-media/20-audio/ru/EXERCISE.md
 create mode 100644 modules/25-media/20-audio/ru/README.md
 create mode 100644 modules/25-media/20-audio/ru/data.yml
 create mode 100644 modules/25-media/30-video/ru/EXERCISE.md
 create mode 100644 modules/25-media/30-video/ru/README.md
 create mode 100644 modules/25-media/30-video/ru/data.yml
 create mode 100644 modules/30-box/10-block/ru/EXERCISE.md
 create mode 100644 modules/30-box/10-block/ru/README.md
 create mode 100644 modules/30-box/10-block/ru/data.yml
 create mode 100644 modules/30-box/20-height-and-width/ru/EXERCISE.md
 create mode 100644 modules/30-box/20-height-and-width/ru/README.md
 create mode 100644 modules/30-box/20-height-and-width/ru/data.yml
 create mode 100644 modules/30-box/30-border-style/ru/EXERCISE.md
 create mode 100644 modules/30-box/30-border-style/ru/README.md
 create mode 100644 modules/30-box/30-border-style/ru/data.yml
 create mode 100644 modules/30-box/40-padding/ru/EXERCISE.md
 create mode 100644 modules/30-box/40-padding/ru/README.md
 create mode 100644 modules/30-box/40-padding/ru/data.yml
 create mode 100644 modules/30-box/50-margin/ru/EXERCISE.md
 create mode 100644 modules/30-box/50-margin/ru/README.md
 create mode 100644 modules/30-box/50-margin/ru/data.yml
 create mode 100644 modules/30-box/60-box-model/ru/EXERCISE.md
 create mode 100644 modules/30-box/60-box-model/ru/README.md
 create mode 100644 modules/30-box/60-box-model/ru/data.yml
 create mode 100644 modules/30-box/70-background/ru/EXERCISE.md
 create mode 100644 modules/30-box/70-background/ru/README.md
 create mode 100644 modules/30-box/70-background/ru/data.yml
 create mode 100644 modules/35-structure/10-basics/ru/EXERCISE.md
 create mode 100644 modules/35-structure/10-basics/ru/README.md
 create mode 100644 modules/35-structure/10-basics/ru/data.yml
 create mode 100644 modules/35-structure/30-meta/ru/EXERCISE.md
 create mode 100644 modules/35-structure/30-meta/ru/README.md
 create mode 100644 modules/35-structure/30-meta/ru/data.yml
 create mode 100644 modules/35-structure/40-link/ru/EXERCISE.md
 create mode 100644 modules/35-structure/40-link/ru/README.md
 create mode 100644 modules/35-structure/40-link/ru/data.yml
 create mode 100644 modules/35-structure/50-viewport/ru/EXERCISE.md
 create mode 100644 modules/35-structure/50-viewport/ru/README.md
 create mode 100644 modules/35-structure/50-viewport/ru/data.yml
 create mode 100644 modules/40-flex/10-flex-container/ru/EXERCISE.md
 create mode 100644 modules/40-flex/10-flex-container/ru/README.md
 create mode 100644 modules/40-flex/10-flex-container/ru/data.yml
 create mode 100644 modules/40-flex/15-flex-direction/ru/EXERCISE.md
 create mode 100644 modules/40-flex/15-flex-direction/ru/README.md
 create mode 100644 modules/40-flex/15-flex-direction/ru/data.yml
 create mode 100644 modules/40-flex/20-flex-wrap/ru/EXERCISE.md
 create mode 100644 modules/40-flex/20-flex-wrap/ru/README.md
 create mode 100644 modules/40-flex/20-flex-wrap/ru/data.yml
 create mode 100644 modules/40-flex/30-flex-alignment/ru/EXERCISE.md
 create mode 100644 modules/40-flex/30-flex-alignment/ru/README.md
 create mode 100644 modules/40-flex/30-flex-alignment/ru/data.yml
 create mode 100644 modules/40-flex/35-items-flexible/ru/EXERCISE.md
 create mode 100644 modules/40-flex/35-items-flexible/ru/README.md
 create mode 100644 modules/40-flex/35-items-flexible/ru/data.yml
 create mode 100644 modules/45-semantics/10-semantic-elements/ru/EXERCISE.md
 create mode 100644 modules/45-semantics/10-semantic-elements/ru/README.md
 create mode 100644 modules/45-semantics/10-semantic-elements/ru/data.yml
 create mode 100644 modules/45-semantics/20-semantics-header/ru/EXERCISE.md
 create mode 100644 modules/45-semantics/20-semantics-header/ru/README.md
 create mode 100644 modules/45-semantics/20-semantics-header/ru/data.yml
 create mode 100644 modules/45-semantics/30-nav/ru/EXERCISE.md
 create mode 100644 modules/45-semantics/30-nav/ru/README.md
 create mode 100644 modules/45-semantics/30-nav/ru/data.yml
 create mode 100644 modules/45-semantics/40-main/ru/EXERCISE.md
 create mode 100644 modules/45-semantics/40-main/ru/README.md
 create mode 100644 modules/45-semantics/40-main/ru/data.yml
 create mode 100644 modules/45-semantics/50-section/ru/EXERCISE.md
 create mode 100644 modules/45-semantics/50-section/ru/README.md
 create mode 100644 modules/45-semantics/50-section/ru/data.yml
 create mode 100644 modules/45-semantics/60-article/ru/EXERCISE.md
 create mode 100644 modules/45-semantics/60-article/ru/README.md
 create mode 100644 modules/45-semantics/60-article/ru/data.yml
 create mode 100644 modules/45-semantics/70-aside/ru/EXERCISE.md
 create mode 100644 modules/45-semantics/70-aside/ru/README.md
 create mode 100644 modules/45-semantics/70-aside/ru/data.yml
 create mode 100644 modules/50-form/10-form-basics/ru/EXERCISE.md
 create mode 100644 modules/50-form/10-form-basics/ru/README.md
 create mode 100644 modules/50-form/10-form-basics/ru/data.yml
 create mode 100644 modules/50-form/20-input/ru/EXERCISE.md
 create mode 100644 modules/50-form/20-input/ru/README.md
 create mode 100644 modules/50-form/20-input/ru/data.yml
 create mode 100644 modules/50-form/30-checkbox/ru/EXERCISE.md
 create mode 100644 modules/50-form/30-checkbox/ru/README.md
 create mode 100644 modules/50-form/30-checkbox/ru/data.yml
 create mode 100644 modules/50-form/40-radio/ru/EXERCISE.md
 create mode 100644 modules/50-form/40-radio/ru/README.md
 create mode 100644 modules/50-form/40-radio/ru/data.yml
 create mode 100644 modules/50-form/50-textarea/ru/EXERCISE.md
 create mode 100644 modules/50-form/50-textarea/ru/README.md
 create mode 100644 modules/50-form/50-textarea/ru/data.yml
 create mode 100644 modules/50-form/60-select/ru/EXERCISE.md
 create mode 100644 modules/50-form/60-select/ru/README.md
 create mode 100644 modules/50-form/60-select/ru/data.yml
 create mode 100644 modules/50-form/70-button/ru/EXERCISE.md
 create mode 100644 modules/50-form/70-button/ru/README.md
 create mode 100644 modules/50-form/70-button/ru/data.yml
 create mode 100644 modules/55-other/10-validation/ru/EXERCISE.md
 create mode 100644 modules/55-other/10-validation/ru/README.md
 create mode 100644 modules/55-other/10-validation/ru/data.yml
 create mode 100644 modules/55-other/20-colors/ru/EXERCISE.md
 create mode 100644 modules/55-other/20-colors/ru/README.md
 create mode 100644 modules/55-other/20-colors/ru/data.yml
 create mode 100644 modules/55-other/30-varibles/ru/EXERCISE.md
 create mode 100644 modules/55-other/30-varibles/ru/README.md
 create mode 100644 modules/55-other/30-varibles/ru/data.yml
 create mode 100644 modules/55-other/40-animation/ru/EXERCISE.md
 create mode 100644 modules/55-other/40-animation/ru/README.md
 create mode 100644 modules/55-other/40-animation/ru/data.yml

diff --git a/modules/10-basics-html/10-html-markup/ru/EXERCISE.md b/modules/10-basics-html/10-html-markup/ru/EXERCISE.md
new file mode 100644
index 0000000..b8ff152
--- /dev/null
+++ b/modules/10-basics-html/10-html-markup/ru/EXERCISE.md
@@ -0,0 +1,5 @@
+Скопируйте HTML и вставьте его в редактор на этой странице
+
+```html
+<h1>Hello, World!</h1>
+```
diff --git a/modules/10-basics-html/10-html-markup/ru/README.md b/modules/10-basics-html/10-html-markup/ru/README.md
new file mode 100644
index 0000000..f22e239
--- /dev/null
+++ b/modules/10-basics-html/10-html-markup/ru/README.md
@@ -0,0 +1,23 @@
+Каждый день мы смотрим на десятки интернет-страниц, читаем на них тексты, которые выводятся, как будто из журналов. Эти страницы представляют из себя гипертекст — систему интернет-страниц, по которым можно путешествовать с помощью ссылок. Для реализации этой системы существует язык HTML.
+
+HTML (HyperText Markup Language) — язык для разметки гипертекста. По своим функциям, HTML —  набор правил, по которым браузер отличает заголовки от списков, таблицы от картинок и так далее. Язык появился в 1993 году и был призван стандартизировать правила для вывода текста внутри веб-страниц.
+
+Даже эта страница является текстом, который описан с помощью HTML и обработан браузером. Технологии шагнули далеко вперёд, но концепция использования HTML для разметки текста остаётся неизменной и спустя много лет.
+
+Вот пример HTML разметки:
+
+```html
+<section>
+  <h2>Code Basics</h2>
+  <p>
+    Code Basics — бесплатные практические уроки по программированию для тех,
+    кто начинает с нуля.
+  </p>
+  <p>
+    Если вы совсем новичок и хотите научиться основам — переменным,
+    строкам, циклам, функциям и т.д., то Code Basics вам подойдёт.
+  </p>
+</section>
+```
+
+Не пугайтесь такого обилия непонятных слов и знаков — к концу курса вы будете понимать работу приведённой выше разметки, а также научитесь использовать разметку на своих страницах. Обратите внимание, что вся суть в разметке выше — это текст. Остальное — вспомогательные элементы для того, чтобы вывести текст там, где было задумано дизайнерами и/или разработчиками.
diff --git a/modules/10-basics-html/10-html-markup/ru/data.yml b/modules/10-basics-html/10-html-markup/ru/data.yml
new file mode 100644
index 0000000..f462f2a
--- /dev/null
+++ b/modules/10-basics-html/10-html-markup/ru/data.yml
@@ -0,0 +1 @@
+name: HTML разметка
diff --git a/modules/10-basics-html/20-tags/ru/EXERCISE.md b/modules/10-basics-html/20-tags/ru/EXERCISE.md
new file mode 100644
index 0000000..2b78e13
--- /dev/null
+++ b/modules/10-basics-html/20-tags/ru/EXERCISE.md
@@ -0,0 +1 @@
+Оберните в тег `<p>` фразу _The quick brown fox jumps over the lazy dog_ и вставьте в редактор
diff --git a/modules/10-basics-html/20-tags/ru/README.md b/modules/10-basics-html/20-tags/ru/README.md
new file mode 100644
index 0000000..3a9c51e
--- /dev/null
+++ b/modules/10-basics-html/20-tags/ru/README.md
@@ -0,0 +1,33 @@
+
+Для определения браузером типа элемента, который нужно вывести на страницу, в HTML существуют специальные конструкции — теги. С помощью тегов можно создать параграф, заголовок, секцию текста, а также быстро менять их.
+
+Одним из основных тегов является параграф. Он отделяет участки текста друг от друга, что позволяет пользователям комфортнее читать информацию на странице.
+
+В HTML параграфы обозначаются специальной конструкцией `<p></p>` внутри которой вставляется нужный текст. Это делается между `<p>` и `</p>`. Такие теги называются _парными_, так как у них есть открывающая и закрывающая часть. Помимо _парных_ тегов существуют _непарные_, у них нет закрывающей части, так как внутрь ничего не помещается.
+
+```html
+<p>
+  Хекслет — практические курсы по программированию.
+  Мы помогаем новичкам стать профессиональными программистами,
+  а опытным разработчикам получать новые знания и расти профессионально.
+</p>
+```
+
+Таких параграфов на странице может быть несколько — это не уникальный элемент.
+
+```html
+<p>Хекслет — практические курсы по программированию.</p>
+<p>
+  Мы помогаем новичкам стать профессиональными программистами,
+  а опытным разработчикам получать новые знания и расти профессионально.
+</p>
+```
+
+Забегая немного вперёд, хочется отметить, что браузеры, по умолчанию, выводят многие теги с заранее определёнными стилями. Например, параграфы имеют отступы снизу, чтобы визуально отделить их друг от друга. Прошлый пример в браузере выглядит так:
+
+<div class="hexlet-basics-example my-3">
+  <p>Хекслет — практические курсы по программированию.</p>
+  <p class="m-0">Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.</p>
+</div>
+
+Используя CSS можно менять эти стили и добавлять новые. Изучению этого языка посвящён отдельный курс на сайте.
diff --git a/modules/10-basics-html/20-tags/ru/data.yml b/modules/10-basics-html/20-tags/ru/data.yml
new file mode 100644
index 0000000..58e4c00
--- /dev/null
+++ b/modules/10-basics-html/20-tags/ru/data.yml
@@ -0,0 +1 @@
+name: Теги
diff --git a/modules/10-basics-html/30-text-in-html/ru/EXERCISE.md b/modules/10-basics-html/30-text-in-html/ru/EXERCISE.md
new file mode 100644
index 0000000..e66ed61
--- /dev/null
+++ b/modules/10-basics-html/30-text-in-html/ru/EXERCISE.md
@@ -0,0 +1,9 @@
+Сверстайте текст
+
+<div class="hexlet-basics-example my-3 bg-light font-monospace">
+  <p>Карьерный портал «Мой круг» изучил рынок IT-образования и выяснил, в каких онлайн-школах эффективно учат программированию. В итоговом рейтинге Хекслет занял второе место.</p>
+
+  <p class="m-0">«Мой круг» опросил 3500 IT-специалистов и составил рейтинг онлайн-школ для программистов. В опросе приняли участие пользователи «Моего круга» и «Хабра», которые учились в онлайн-университетах. В финальной таблице «Хекслет» занял второе место.</p>
+</div>
+
+Каждый абзац должен находиться внутри отдельного тега
diff --git a/modules/10-basics-html/30-text-in-html/ru/README.md b/modules/10-basics-html/30-text-in-html/ru/README.md
new file mode 100644
index 0000000..b3448e7
--- /dev/null
+++ b/modules/10-basics-html/30-text-in-html/ru/README.md
@@ -0,0 +1,40 @@
+
+Внутри браузера или другой программы, которая может обрабатывать HTML, текст выводится на основе указанных тегов. Без них браузер не поймёт, как правильно вывести текст.
+
+Посмотрим на пример текста и попробуем вывести его используя разметку тегами и без этого.
+
+Текст:
+
+<div class="hexlet-basics-example my-3 bg-light font-monospace">
+  <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
+
+  <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком — это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
+
+  <p class="m-0">Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства.</p>
+</div>
+
+Если вставить текст на страницу без использования тегов, то получим такой результат:
+
+<div class="hexlet-basics-example my-3">
+  Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода. При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком — это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии. Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства.
+</div>
+
+Это не тот результат, который ожидался — строки слиплись и превратились в одну нечитаемую строку. Для того, чтобы текст выглядел так, как задумано, его необходимо обернуть в теги `<p>`:
+
+```html
+<p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
+
+<p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком — это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
+
+<p>Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства.</p>
+```
+
+<div class="hexlet-basics-example my-3">
+  <p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>
+
+  <p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком — это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>
+
+  <p class="m-0">Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства.</p>
+</div>
+
+Пример иллюстрирует, что оформленный текст в офисном редакторе при открытии в браузере станет одной сплошной строкой, поэтому информация размечается специальными тегами. В процессе прохождения курса рассмотрим теги для создания таблиц, списков, ссылок и логических секций страницы. В этом же уроке мы подробнее рассмотрели параграфы и важность разметки для правильного вывода информации на странице
diff --git a/modules/10-basics-html/30-text-in-html/ru/data.yml b/modules/10-basics-html/30-text-in-html/ru/data.yml
new file mode 100644
index 0000000..922cc73
--- /dev/null
+++ b/modules/10-basics-html/30-text-in-html/ru/data.yml
@@ -0,0 +1 @@
+name: Текст в HTML
diff --git a/modules/10-basics-html/40-nested-tag/ru/EXERCISE.md b/modules/10-basics-html/40-nested-tag/ru/EXERCISE.md
new file mode 100644
index 0000000..b8fa74b
--- /dev/null
+++ b/modules/10-basics-html/40-nested-tag/ru/EXERCISE.md
@@ -0,0 +1 @@
+Создайте маркированный список из трёх элементов. Этот тип списка вы изучили в уроке
diff --git a/modules/10-basics-html/40-nested-tag/ru/README.md b/modules/10-basics-html/40-nested-tag/ru/README.md
new file mode 100644
index 0000000..dde7087
--- /dev/null
+++ b/modules/10-basics-html/40-nested-tag/ru/README.md
@@ -0,0 +1,47 @@
+
+Важной концепцией HTML является вложенность тегов. Внутрь HTML-тега можно помещать не только текст, как было ранее, но и другие теги. Это позволяет создавать сложную вёрстку, в которой области отделены друг от друга: меню от шапки сайта, рекламный блок от основного контента и так далее.
+
+Некоторые элементы в HTML требуют вложенности одних тегов в другие. Например, списки:
+
+```html
+<ul>
+  <li>Первый элемент списка</li>
+  <li>Второй элемент списка</li>
+</ul>
+```
+
+<div class="hexlet-basics-example my-3">
+  <ul class="m-0">
+    <li>Первый элемент списка</li>
+    <li>Второй элемент списка</li>
+  </ul>
+</div>
+
+Для определения списка используется тег `<ul>`, который указывает, что это _маркированный_ список. Внутри располагаются теги `<li>`, определяющие элементы нашего списка.
+
+Такие вложенности похожи на деревья, где есть вершина дерева (тег `<ul>`) и листья (теги `<li>`)
+
+```
+|──ul
+| |──li
+| |──li
+```
+
+---
+
+**Интересно:** тег, внутри которого вложены другие теги, ещё называют _обёрткой_ или _враппером/wrapper_
+
+---
+
+Дерево может разрастаться и дальше. В уроках про списки будет показано, что внутри элементов списка могут располагаться другие списки и этот процесс почти бесконечен.
+
+Но бывают и исключения. В HTML нельзя вкладывать параграфы в параграфы. Пример ниже будет неправильным:
+
+```html
+<p>Параграф
+  <p>А вот ещё параграф внутри параграфа</p>.
+  Параграф недоволен таким соседством
+</p>
+```
+
+В этом уроке мы познакомились с концепцией вложенности тегов в HTML и рассмотрели её на примере создания маркированных списков. В процессе прохождения курса вы изучите множество ситуаций, когда вложенность является лучшим решением, а так же узнаете о тегах, которые нельзя вкладывать друг в друга
diff --git a/modules/10-basics-html/40-nested-tag/ru/data.yml b/modules/10-basics-html/40-nested-tag/ru/data.yml
new file mode 100644
index 0000000..f7e17f0
--- /dev/null
+++ b/modules/10-basics-html/40-nested-tag/ru/data.yml
@@ -0,0 +1 @@
+name: Вложенность тегов
diff --git a/modules/10-basics-html/50-attributes/ru/EXERCISE.md b/modules/10-basics-html/50-attributes/ru/EXERCISE.md
new file mode 100644
index 0000000..45d91b4
--- /dev/null
+++ b/modules/10-basics-html/50-attributes/ru/EXERCISE.md
@@ -0,0 +1 @@
+Создайте параграф с произвольным текстом и всплывающей подсказкой. Добавьте к нему класс `hexlet`
diff --git a/modules/10-basics-html/50-attributes/ru/README.md b/modules/10-basics-html/50-attributes/ru/README.md
new file mode 100644
index 0000000..5dd488a
--- /dev/null
+++ b/modules/10-basics-html/50-attributes/ru/README.md
@@ -0,0 +1,33 @@
+Разметка информации на странице включает в себя множество тонкостей и нюансов. Например, можно задавать не только тип элемента, но и передавать дополнительную информацию, которая будет обработана браузером. Наведите курсор на текст ниже:
+
+<div class="hexlet-basics-example my-3">
+  <p title="Всплывающая подсказка. Здесь можно указать дополнительную информацию" class="m-0">Наведите курсор мыши на эту строку текста. Лучше сделать это с компьютера</p>
+</div>
+
+При наведении мыши на элемент появилось небольшое окно с текстом «Всплывающая подсказка. Здесь можно указать дополнительную информацию». Такое поведение задаётся с помощью _атрибутов_ — специальных конструкций, которые могут влиять на вывод информации на странице. Каждый тег в HTML имеет несколько стандартных атрибутов, которые записываются по шаблону `атрибут="значение"`, где:
+
+* **Атрибут** — название атрибута. Для появления всплывающей подсказки использовался атрибут `title`
+* **Значение** — значение атрибута. Оно может быть разным, в зависимости от самого атрибута. В примере, в качестве значения, использовался текст, который должен быть выведен при наведении на элемент
+
+Разметка примера со всплывающей подсказкой:
+
+```html
+<p title="Всплывающая подсказка. Здесь можно указать дополнительную информацию">Наведите курсор мыши на эту строку текста. Лучше сделать это с компьютера</p>
+```
+
+Атрибут `title` можно использовать не только на параграфах, а на любом элементе страницы. Такие атрибуты называются _глобальными_, так как не зависят от элемента. В противовес им есть атрибуты, которые уникальны для одного или нескольких тегов. Например, атрибут `colspan`, который указывает на объединение ячеек в таблицах. Его использование вне таблиц не имеет никакого смысла.
+
+Атрибуты могут неявно влиять на вывод информации. Например, при использовании языка стилей _CSS_, встречается атрибут `class`, задача которого — отделить похожие элементы друг от друга с помощью значения атрибута. О работе классов вы узнаете из курса по _CSS_, а сейчас важно знать, что этот атрибут никак не проявляет себя при выводе информации на страницу
+
+```html
+<p class="lead">Параграф с классом lead</p>
+<p class="mega-paragraph">Параграф с классом mega-paragraph</p>
+```
+
+У одного тега может быть указано сразу несколько атрибутов. Тогда они записываются последовательно, при этом порядок указания не имеет значения:
+
+```html
+<p class="text-center" title="Этот элемент имеет несколько атрибутов">Параграф с несколькими атрибутами</p>
+```
+
+В этом уроке мы изучили понятие атрибута и их запись. Изучили работу атрибутов `title` и `class`, а также узнали о том, что атрибуты бывают глобальные и уникальные для HTML-элементов. Глобальные атрибуты могут быть использованы для любого тега, тогда как уникальные только для определённых
diff --git a/modules/10-basics-html/50-attributes/ru/data.yml b/modules/10-basics-html/50-attributes/ru/data.yml
new file mode 100644
index 0000000..c87a608
--- /dev/null
+++ b/modules/10-basics-html/50-attributes/ru/data.yml
@@ -0,0 +1,5 @@
+name: Атрибуты HTML
+tips:
+  - >-
+    Все глобальные атрибуты можно посмотреть на [MDN Web
+    Docs](https://developer.mozilla.org/ru/docs/Web/HTML/Global_attributes)
diff --git a/modules/15-basics-css/10-introduction/ru/EXERCISE.md b/modules/15-basics-css/10-introduction/ru/EXERCISE.md
new file mode 100644
index 0000000..2074401
--- /dev/null
+++ b/modules/15-basics-css/10-introduction/ru/EXERCISE.md
@@ -0,0 +1,5 @@
+Скопируйте код в редактор. Попробуйте подставлять различные значения, чтобы увидеть, как работает редактор. Тесты ожидают полную копию кода ниже.
+
+```html
+<p style="font-size: 25px;">Первое изменение стиля с помощью CSS</p>
+```
diff --git a/modules/15-basics-css/10-introduction/ru/README.md b/modules/15-basics-css/10-introduction/ru/README.md
new file mode 100644
index 0000000..0434d2e
--- /dev/null
+++ b/modules/15-basics-css/10-introduction/ru/README.md
@@ -0,0 +1,26 @@
+
+В прошлом модуле, посвящённом языку разметки HTML, были рассмотрены различные элементы, которые, по умолчанию, имели стилевое оформление: параграфы отделялись отступами, ссылки отличались цветом, заголовки различались размером текста и т.д. Будучи разработчиком можно изменять это оформление и добавлять совершенно новое. Добавить фон к тексту? Изменить размеры элементов? Создать анимацию? Всё это можно сделать с помощью CSS (англ. Cascading Style Sheets — Каскадные таблицы стилей) — языка, который определяет, как будут выглядеть HTML-элементы в браузере.
+
+Курс по CSS является логическим продолжением [курса по HTML](https://ru.code-basics.com/languages/html). Многие теги и понятия, которые будут встречены по ходу прохождения уже рассматривались.
+
+На примере ниже показывается вывод текста без использования своего CSS (то есть применяются те стили, которые «проставляет» браузер) и то, как можно стилизовать документ с использованием CSS.
+
+## Пример текста со стандартным оформлением
+
+<div class="hexlet-basics-example my-3">
+  <p class="h2">Параграфы</p>
+  <p>Параграфы создаются с помощью парного тега <code>&lt;p&gt;</code>, в тело которого помещается небольшая часть текста. Например:</p>
+  <pre><code>&lt;p&gt;Первый параграф&lt;/p&gt;
+&lt;p&gt;Второй параграф&lt;/p&gt;</code></pre>
+</div>
+
+## Пример текста с пользовательским оформлением
+
+<div class="hexlet-basics-example my-3">
+  <p class="border-bottom display-6 pb-2">Параграфы</p>
+  <p class="lead">Параграфы создаются с помощью парного тега <code>&lt;p&gt;</code>, в тело которого помещается небольшая часть текста. Например:</p>
+  <pre class="bg-light my-4" style="border-left: 5px solid #673ab7!important;"><code>&lt;p&gt;Первый параграф&lt;/p&gt;
+&lt;p&gt;Второй параграф&lt;/p&gt;</code></pre>
+</div>
+
+Теперь текст читается проще, и можно быстро отделить примеры кода от описания. В курсе будут рассмотрены базовые CSS-правила для работы с текстом и блоками, которые позволят оформить текст и визуально структурировать информацию.
diff --git a/modules/15-basics-css/10-introduction/ru/data.yml b/modules/15-basics-css/10-introduction/ru/data.yml
new file mode 100644
index 0000000..38d27a4
--- /dev/null
+++ b/modules/15-basics-css/10-introduction/ru/data.yml
@@ -0,0 +1 @@
+name: Каскадные таблицы стилей
diff --git a/modules/15-basics-css/20-connection/ru/EXERCISE.md b/modules/15-basics-css/20-connection/ru/EXERCISE.md
new file mode 100644
index 0000000..6b22006
--- /dev/null
+++ b/modules/15-basics-css/20-connection/ru/EXERCISE.md
@@ -0,0 +1 @@
+Добавьте в редактор тег `<p></p>` и, используя атрибут `style`, установите размер шрифта в 12 пикселей.
diff --git a/modules/15-basics-css/20-connection/ru/README.md b/modules/15-basics-css/20-connection/ru/README.md
new file mode 100644
index 0000000..2a8ea33
--- /dev/null
+++ b/modules/15-basics-css/20-connection/ru/README.md
@@ -0,0 +1,20 @@
+
+Язык стилей CSS не связан с HTML напрямую. Необходимо указать браузеру, откуда нужно загрузить и интерпретировать стили. Для этого есть три способа:
+
+1. Указать стили в качестве значения атрибута `style`. Такую запись называют «инлайн» (inline), что означает запись правила в одну строку с использованием атрибута `style`.
+2. Использовать специальный тег `<style>`, который указывают в секции `head`. Браузер обработает всё, что написано внутри этого тега как CSS код
+3. Подключать отдельный файл со стилями. В этом случае создаётся файл с расширением `.css`, в котором записываются CSS правила. Для подключения файла используется мета-тег `<link>`
+
+В этом уроке рассмотрим принцип инлайн записи стилей с помощью атрибута `style`. Какой бы способ подключения стилей вы не выбрали, синтаксис правил остаётся неизменным: `название-свойства: значение;`. Важно не забывать добавлять символ `;` после значения свойства. Так браузер сможет отделить правила друг от друга.
+
+Один из основных способов «попробовать» стили — работа с текстом. CSS позволяет оформлять текст множеством способов: увеличивать размер шрифта, определять начертание, насыщенность и так далее. Все основные правила для работы с текстом рассматриваются в течениe всего курса.
+
+Научимся менять размер шрифта. Размер можно изменить с помощью свойства `font-size`, значением которого является число и единица измерения. Попробуем сделать текст размером _32 пикселя_. Единица измерения пиксель обозначается с помощью сокращения `px`. Подробнее про различные единицы измерения и то, как они работают, будет рассказано в следующих уроках
+
+```html
+<p style="font-size: 32px;">Большой текст</p>
+```
+
+<div class="hexlet-basics-example my-3 bg-light">
+  <p class="m-0" style="font-size: 32px;">Большой текст</p>
+</div>
diff --git a/modules/15-basics-css/20-connection/ru/data.yml b/modules/15-basics-css/20-connection/ru/data.yml
new file mode 100644
index 0000000..3aca9de
--- /dev/null
+++ b/modules/15-basics-css/20-connection/ru/data.yml
@@ -0,0 +1 @@
+name: Использование CSS в HTML
diff --git a/modules/15-basics-css/25-inheritance/ru/EXERCISE.md b/modules/15-basics-css/25-inheritance/ru/EXERCISE.md
new file mode 100644
index 0000000..4b898df
--- /dev/null
+++ b/modules/15-basics-css/25-inheritance/ru/EXERCISE.md
@@ -0,0 +1 @@
+Добавьте в редактор тег `<div></div>` и, используя атрибуты, установите размер шрифта в 20 пикселей. Внутри тега `<div>` вложите параграф с размером шрифта 10 пикселей
diff --git a/modules/15-basics-css/25-inheritance/ru/README.md b/modules/15-basics-css/25-inheritance/ru/README.md
new file mode 100644
index 0000000..6544794
--- /dev/null
+++ b/modules/15-basics-css/25-inheritance/ru/README.md
@@ -0,0 +1,33 @@
+При использовании стилей в CSS часто затрагивается не только тот элемент, для которого указаны стили, но и вложенные в него теги. Такие стили называются **наследуемые**. Стиль `font-size` из прошлого урока является наследуемым — он применится ко всем вложенным тегам.
+
+```html
+<div style="font-size: 20px;">
+  Размер шрифта, которым написан этот текст — 20 пикселей.
+
+  <p>Вложенный параграф также будет иметь размер шрифта 20 пикселей.</p>
+</div>
+```
+
+<div class="hexlet-basics-example my-3 bg-light" style="font-size: 20px;">
+  Размер шрифта, которым написан этот текст — 20 пикселей.
+  <p class="mb-0">Вложенный параграф также будет иметь размер шрифта 20 пикселей.</p>
+</div>
+
+Помимо стилей, которые наследуются для всех вложенных тегов, в CSS есть множество стилей, которые уникальны для того элемента, к которому их применили.
+
+Одним из таких свойств является `border`, позволяющий установить рамку вокруг элемента. Но эта же рамка не будет копироваться для каждого внутреннего элемента.
+
+```html
+<div style="border: 2px solid #000;">
+  У блока появится рамка шириной 2 пикселя
+
+  <p>А у параграфа своей рамки не будет. При необходимости она устанавливается отдельно</p>
+  <p style="border: 1px solid #000;">Например, вот так</p>
+</div>
+```
+
+<div class="hexlet-basics-example my-3 bg-light" style="border: 2px solid #000!important;">
+  У блока появится рамка шириной 2 пикселя
+  <p>А у параграфа своей рамки не будет. При необходимости она устанавливается отдельно</p>
+  <p style="border: 1px solid #000;" class="mb-0">Например, вот так</p>
+</div>
diff --git a/modules/15-basics-css/25-inheritance/ru/data.yml b/modules/15-basics-css/25-inheritance/ru/data.yml
new file mode 100644
index 0000000..b7839e0
--- /dev/null
+++ b/modules/15-basics-css/25-inheritance/ru/data.yml
@@ -0,0 +1,6 @@
+name: Наследование стилей
+definitions:
+  - name: Наследуемые свойства
+    description: >-
+      свойства, которые устанавливаются не только для элемента, но и для всех
+      элементов внутри него, включая вложенные
diff --git a/modules/15-basics-css/30-style/ru/EXERCISE.md b/modules/15-basics-css/30-style/ru/EXERCISE.md
new file mode 100644
index 0000000..e24942b
--- /dev/null
+++ b/modules/15-basics-css/30-style/ru/EXERCISE.md
@@ -0,0 +1 @@
+Добавьте в редактор параграф и, используя тег `style`, установите размер шрифта в 10 пикселей.
diff --git a/modules/15-basics-css/30-style/ru/README.md b/modules/15-basics-css/30-style/ru/README.md
new file mode 100644
index 0000000..c007312
--- /dev/null
+++ b/modules/15-basics-css/30-style/ru/README.md
@@ -0,0 +1,68 @@
+Основная проблема использования атрибутов для определения стилей — их перегруженность. Часто разметка HTML содержит очень много элементов, а с добавлением стилей кода становится намного больше, что плохо сказывается на чтении разметки.
+
+Вторая проблема — исправление стилей. Для этого необходимо сначала найти нужный элемент в коде, а потом отредактировать его стили. Таких элементов на странице может быть 10, 20, 100. А для одноимённых тегов придётся записывать стили отдельно для каждого элемента.
+
+Возникает естественное желание иметь все стили в одном месте, где можно было бы их быстро редактировать. Таким решением является использование тега `<style>`, внутри которого могут располагаться все необходимые стили.
+
+Возьмём пример из прошлого урока:
+
+```
+<div style="font-size: 20px;">
+  Этот текст будет с размером шрифта 20 пикселей
+
+  <p>Вложенный параграф также будет иметь размер шрифта 20 пикселей</p>
+</div>
+```
+
+Чтобы избавиться от атрибутов, добавим тег `style` и укажем, что для тега `<div>` используется шрифт размером в 20 пикселей.
+
+```html
+<style>
+  div {
+    font-size: 20px;
+  }
+</style>
+
+<div>
+  Этот текст будет с размером шрифта 20 пикселей
+
+  <p>Вложенный параграф также будет иметь размер шрифта 20 пикселей</p>
+</div>
+```
+
+Таким же образом можно указать, что у параграфа будет размер шрифта 10 пикселей.
+
+```html
+<style>
+  div {
+    font-size: 20px;
+  }
+
+  p {
+    font-size: 10px;
+  }
+</style>
+
+<div>
+  Этот текст будет с размером шрифта 20 пикселей
+
+  <p>Вложенный параграф будет иметь размер шрифта 10 пикселей</p>
+</div>
+```
+
+Внутри тега `<style>` использовалась конструкция вида:
+
+```
+имя_тега {
+  свойство: значение;
+}
+```
+
+Всё, что было записано до открывающей скобки `{` называется _селектор_. Селекторы — правила, по которым браузер определяет к какому элементу нужно добавить стили. С некоторыми из селекторов мы познакомимся чуть позже. В примерах выше используются селекторы по тегу, то есть стили будут применяться ко всем элементам с тегом, указанном в качестве селектора
+
+```css
+/* Для всех элементов div будет установлен размер шрифта 20px */
+div {
+  font-size: 20px;
+}
+```
diff --git a/modules/15-basics-css/30-style/ru/data.yml b/modules/15-basics-css/30-style/ru/data.yml
new file mode 100644
index 0000000..1dd4f76
--- /dev/null
+++ b/modules/15-basics-css/30-style/ru/data.yml
@@ -0,0 +1 @@
+name: Запись стилей в теге style
diff --git a/modules/15-basics-css/35-basics-style/ru/EXERCISE.md b/modules/15-basics-css/35-basics-style/ru/EXERCISE.md
new file mode 100644
index 0000000..041fa37
--- /dev/null
+++ b/modules/15-basics-css/35-basics-style/ru/EXERCISE.md
@@ -0,0 +1 @@
+Добавьте в редактор заголовок первого уровня и установите размер шрифта в 20 пикселей. Стили запишите в теге `<style>`.
diff --git a/modules/15-basics-css/35-basics-style/ru/README.md b/modules/15-basics-css/35-basics-style/ru/README.md
new file mode 100644
index 0000000..53cc744
--- /dev/null
+++ b/modules/15-basics-css/35-basics-style/ru/README.md
@@ -0,0 +1,13 @@
+По умолчанию, все HTML-теги имеют своё стандартное оформление. Это оформление задают браузеры, причём каждый браузер может задать свой стиль. Из-за этого одна и та же вёрстка может выводиться по разному, в зависимости от браузера, операционной системы и системных настроек.
+
+Например, заголовок первого уровня `<h1>` в браузерах имеет размер `2em`, что обозначает _в два раза больше размера шрифта в блоке_. Это значение не фиксировано — оно может меняться из-за настроек системы, или если разработчики браузера решили сделать его немного другим.
+
+Используя тег `<style>` мы научились менять стили для всех элементов сразу, например:
+
+```css
+h1 {
+  font-size: 35px;
+}
+```
+
+Но такой вариант удобен лишь для установки первоначальных/основных значений для нашей веб-страницы. В её разных частях могут понадобиться разные стили оформления заголовков одного уровня. Мы научимся решать эту задачу с помощью селекторов CSS и атрибутов HTML в следующих уроках. Главное помнить, что почти все элементы имееют стили по умолчанию, что может быть как пользой, так и неудобством при разработке страницы
diff --git a/modules/15-basics-css/35-basics-style/ru/data.yml b/modules/15-basics-css/35-basics-style/ru/data.yml
new file mode 100644
index 0000000..64bbc20
--- /dev/null
+++ b/modules/15-basics-css/35-basics-style/ru/data.yml
@@ -0,0 +1 @@
+name: Базовые стили тегов
diff --git a/modules/15-basics-css/40-selectors-by-class/ru/EXERCISE.md b/modules/15-basics-css/40-selectors-by-class/ru/EXERCISE.md
new file mode 100644
index 0000000..352d060
--- /dev/null
+++ b/modules/15-basics-css/40-selectors-by-class/ru/EXERCISE.md
@@ -0,0 +1 @@
+В редакторе добавьте параграф с классом `news` и укажите для него цвет текста `#553333`. Стили подключите с помощью тега `<style>`.
diff --git a/modules/15-basics-css/40-selectors-by-class/ru/README.md b/modules/15-basics-css/40-selectors-by-class/ru/README.md
new file mode 100644
index 0000000..88fedc4
--- /dev/null
+++ b/modules/15-basics-css/40-selectors-by-class/ru/README.md
@@ -0,0 +1,23 @@
+Основное решение для стилизации конкретного участка страницы — использование классов. Они помогают задать нужный нам стиль не разом для всех элементов на странице, а только для тех элементов, у которых указан необходимый класс.
+
+Чтобы задать стиль для класса в CSS используется селектор `.название-класса`. Обратите внимание на точку — именно так браузер понимает, что данный стиль указывается для класса.
+
+```html
+<p class="paragraph">
+  Текст нашего параграфа.
+  Именно с помощью класса paragraph в CSS
+  будут устанавливаться свойства для этого блока текста
+</p>
+```
+
+```css
+.paragraph {
+  color: #333333;
+  /*
+    Правило color устанавливает цвет текста.
+    В данном случае — это серый цвет со значением #333333
+  */
+}
+```
+
+Так как классов с одинаковым именем на странице может быть много, то это правило сработает для всех элементов, у которых атрибут класс равен `paragraph`.
diff --git a/modules/15-basics-css/40-selectors-by-class/ru/data.yml b/modules/15-basics-css/40-selectors-by-class/ru/data.yml
new file mode 100644
index 0000000..d233760
--- /dev/null
+++ b/modules/15-basics-css/40-selectors-by-class/ru/data.yml
@@ -0,0 +1 @@
+name: Классы
diff --git a/modules/15-basics-css/50-selectors/ru/EXERCISE.md b/modules/15-basics-css/50-selectors/ru/EXERCISE.md
new file mode 100644
index 0000000..216b4c6
--- /dev/null
+++ b/modules/15-basics-css/50-selectors/ru/EXERCISE.md
@@ -0,0 +1,4 @@
+В редакторе создайте параграф с идентификатором **red** и классом **bold**. Установите следующие свойства:
+
+* Для идентификатора red установите красный цвет текста
+* Для класса bold установите жирное начертание текста
diff --git a/modules/15-basics-css/50-selectors/ru/README.md b/modules/15-basics-css/50-selectors/ru/README.md
new file mode 100644
index 0000000..7473b97
--- /dev/null
+++ b/modules/15-basics-css/50-selectors/ru/README.md
@@ -0,0 +1,40 @@
+В уроках уже встречались селекторы по тегу и классу. Селектор — это описание того, к чему нужно применить тот или иной стиль CSS. Они бывают достаточно сложными, указывая не просто конкретный элемент, но и место, где он находится или внутри какого тега. Вспомним про селектор по классу. Он применяется к любому элементу, класс которого мы указали.
+
+```html
+<p class="text-bold">Жирный текст внутри параграфа</p>
+
+<div class="text-bold">Ещё один текст внутри простого блочного элемента. Так как у него тоже есть класс text-bold, то он будет с жирным начертанием</div>
+```
+
+```css
+.text-bold {
+  font-weight: bold;
+}
+```
+
+Свойство `font-weight` со значением **bold** установит жирное начертание текста. С этим свойством вы подробнее познакомитесь при изучении оформления текста. Сейчас самое главное — этот стиль будет применён и к параграфу, и к блочному элементу `<div>`, так как они имеют один и тот же класс.
+
+Ещё один уже знакомый селектор — селектор по тегу. Его назначение — установка стилей для всех тегов на странице. Это очень полезно, если нужно установить первоначальные стили для тегов в рамках всего проекта. Например, установить шрифт, его размер и насыщенность.
+
+```css
+p {
+  color: #333;
+  font: 18px/1.5 sans-serif;
+}
+```
+
+Используйте селектор по тегу только для установки глобальных правил в рамках всего проекта. Это важно, так как стили будут применяться для всех тегов разом и можно, случайно, перезаписать уже существующие стили
+
+Ещё одним способом указать стили является использование селектора по идентификатору. Используя атрибут `id`, можно указать уникальное имя для любого элемента на странице. Если данное имя указано, то к элементу возможно обратиться используя селектор по идентификатору. Для этого используется селектор вида `#имя_идентификатора`
+
+```html
+<p id="red">Красный параграф</p>
+```
+
+```css
+#red {
+  color: red;
+}
+```
+
+Важно помнить, что значение идентификатора уникально. На странице может быть только один элемент с одним конкретным значением. Например, в примере выше уже использован идентификатор `red` на параграфе. Второго такого элемента на странице не может быть. По этой причине идентификаторы указывают для больших обёрток, например для основной шапки сайта, но это не обязательное условие
diff --git a/modules/15-basics-css/50-selectors/ru/data.yml b/modules/15-basics-css/50-selectors/ru/data.yml
new file mode 100644
index 0000000..994d372
--- /dev/null
+++ b/modules/15-basics-css/50-selectors/ru/data.yml
@@ -0,0 +1 @@
+name: Селекторы
diff --git a/modules/15-basics-css/60-cascade/ru/EXERCISE.md b/modules/15-basics-css/60-cascade/ru/EXERCISE.md
new file mode 100644
index 0000000..fc859c3
--- /dev/null
+++ b/modules/15-basics-css/60-cascade/ru/EXERCISE.md
@@ -0,0 +1,6 @@
+Добавьте в редактор `p` с классом `cascade` и установите следующие правила:
+
+* Для класса `cascade` установите размер шрифта 25 пикселей
+* Для тега `p` установите внутренний отступ в 15 пикселей со всех сторон. Это можно сделать с помощью правила `padding: 15px;`
+
+Обратите внимание, как стили применятся одновременно. Стили запишите в теге `<style>`
diff --git a/modules/15-basics-css/60-cascade/ru/README.md b/modules/15-basics-css/60-cascade/ru/README.md
new file mode 100644
index 0000000..7ee132f
--- /dev/null
+++ b/modules/15-basics-css/60-cascade/ru/README.md
@@ -0,0 +1,36 @@
+
+Мы уже знаем, что CSS переводится как «Каскадные таблицы стилей». С таблицей стилей к этому моменту всё ясно, но что значит каскадные? Дело в том, что указать стили для элемента можно не только в одном месте.
+
+Представьте каскад водопадов. Они перетекают друг в друга, накапливая всё больше и больше воды. В конечном итоге весь каскад окажется в общем бассейне. В CSS слово каскадность обозначает такое же действие, только вместо водопадов перетекают CSS свойства. Другими словами каскадность — возможность языка CSS накладывать свойства друг на друга, а также расширять свойства в селекторах.
+
+Создадим блок с классами `text-bold` и `text-dark` и укажем несколько свойств в разных селекторах:
+
+```html
+<p class="text-bold text-dark">Важный текст о вреде сложного CSS</p>
+```
+
+```css
+p {
+  font-size: 20px;
+}
+
+.text-bold {
+  font-weight: bold;
+}
+
+.text-dark {
+  color: #333;
+}
+```
+
+Если вставить этот пример в редактор, то выведется жирный текст размером 20 пикселей тёмного цвета. Произошло это благодаря каскадности — браузер объединил все стили из разных селекторов и получил следующие инструкции для стилизации элемента:
+
+```css
+{
+  font-size: 20px;
+  font-weight: bold;
+  color: #333;
+}
+```
+
+Это и есть каскадность стилей в CSS. Хоть мы и использовали разные селекторы, но, в конечном итоге, браузер объединил их в единый набор правил для элемента
diff --git a/modules/15-basics-css/60-cascade/ru/data.yml b/modules/15-basics-css/60-cascade/ru/data.yml
new file mode 100644
index 0000000..9b7702f
--- /dev/null
+++ b/modules/15-basics-css/60-cascade/ru/data.yml
@@ -0,0 +1 @@
+name: Каскадность
diff --git a/modules/15-basics-css/70-priority/ru/EXERCISE.md b/modules/15-basics-css/70-priority/ru/EXERCISE.md
new file mode 100644
index 0000000..e919ad7
--- /dev/null
+++ b/modules/15-basics-css/70-priority/ru/EXERCISE.md
@@ -0,0 +1,8 @@
+Добавьте в редактор параграф с классом `border` и id `no-border`. Установите следующие правила:
+
+* Для класса `border` установите сплошную рамку любого цвета толщиной 1px. Это можно сделать так: `border: 1px solid #000;`
+* Для id `no-border` отмените рамку. Используйте значение `none` у правила `border-style`
+
+Первым укажите стили для селектора `.border`, вторым селектор `#no-border`
+
+Стили запишите в теге `<style>`
diff --git a/modules/15-basics-css/70-priority/ru/README.md b/modules/15-basics-css/70-priority/ru/README.md
new file mode 100644
index 0000000..c04ef84
--- /dev/null
+++ b/modules/15-basics-css/70-priority/ru/README.md
@@ -0,0 +1,93 @@
+Говоря о каскадности, возникает вопрос: «А что произойдёт, если в разных источниках будут одинаковые правила для элемента, но с разными значениями?». В таком случае есть правила, определяющие приоритеты стилей из разных источников. По степени важности список выглядит следующим образом:
+
+* Стили в атрибуте тега
+* Стили в отдельном файле
+* Стили по умолчанию, которые добавляет браузер
+
+Значения, указанные в атрибуте `style` будут важнее свойств в теге `<style>`, а они будут важнее стандартных стилей браузера.
+
+## Приоритеты селекторов
+
+Важной чертой CSS является то, что разные типы селекторов имеют разный приоритет. Если стили противоречат друг другу в разных селекторах, то вступает в дело принцип приоритета.
+
+Разберём на примере. Создадим параграф с классом `red` и идентификатором `blue`
+
+```html
+<p id="blue" class="red">Текст с классом red и идентификатором blue</p>
+```
+
+Добавим противоречащие друг другу стили для класса, идентификатора и тега:
+
+```css
+p {
+  color: black;
+}
+
+.red {
+  color: red;
+}
+
+#blue {
+  color: blue;
+}
+```
+
+Какого цвета будет параграф? Попробуйте выполнить этот пример в редакторе. Вы увидите, что текст будет синего цвета. С чем это связано?
+
+У селекторов также существуют приоритеты. Условно можно расставить селекторы в следующем порядке по приоритету:
+
+1. Селектор по идентификатору (`#blue`)
+2. Селектор по классу (`.red`)
+3. Селектор по тегу (`p`)
+
+Где 1 — самый высокий приоритет, а 3 — самый низкий.
+
+По этим правилам можно понять, что свойства указанные в селекторе по идентификатору будет обладать большим приоритетом, чем стили у селектора по тегу и классу. Поэтому параграф в прошлом примере был синим.
+
+Это легко запомнить, если селекторы небольшие, но они могут быть сложнее. В качестве селектора может быть комбинация классов, тегов и так далее. Например:
+
+```html
+<p class="paragraph color-primary">Параграф</p>
+```
+
+```css
+.paragraph.color-primary {
+  color: blue;
+}
+```
+
+Здесь использовался селектор из двух классов сразу. Это означает, что стили будет применяться только для элемента, у которого есть оба класса. Такое разделение помогает разработчикам точечно устанавливать стили для схожих элементов. Например:
+
+```html
+<p class="paragraph color-primary">Параграф</p>
+<p class="paragraph">Параграф</p>
+<p class="paragraph color-primary">Параграф</p>
+```
+
+```css
+.paragraph {
+  color: red;
+}
+
+.paragraph.color-primary {
+  color: blue;
+}
+```
+
+В этом примере все параграфы с классом `paragraph` будут иметь красный цвет текста, но если дополнительно установлен класс `color-primary`, то цвет будет голубой. Почему так происходит? У таких селекторов также есть свои приоритеты. В сложных селекторах считается количество вхождений тех или иных селекторов и считается суммарный вес.
+
+Для определения приоритета можно использовать следующие правила, где каждому селектору задаётся его «вес»:
+
+* Селектор по тегу: **1**
+* Селектор по классу: **10**
+* Селектор по ID: **100**
+* Стиль в атрибуте тега: **1000**
+
+Чтобы узнать, какой селектор будет иметь больший вес, нужно сложить все полученные значения. Например:
+
+* Селектор `.paragraph` состоит из одного класса, а значит его вес — 10
+* Селектор `.paragraph.color-primary` состоит из двух классов. Его вес — 20
+
+Таким образом свойства у селектора `.paragraph.color-primary` будут иметь больший приоритет, чем внутри селектора `.paragraph`.
+
+Вышеприведённый список для вычисления «весов» или, как ещё говорят, «специфичности свойств» не является абсолютно полным, но этого способа достаточно на первых этапах изучения CSS. С практикой вы научитесь самостоятельно определять приоритет селекторов.
diff --git a/modules/15-basics-css/70-priority/ru/data.yml b/modules/15-basics-css/70-priority/ru/data.yml
new file mode 100644
index 0000000..f7739a0
--- /dev/null
+++ b/modules/15-basics-css/70-priority/ru/data.yml
@@ -0,0 +1 @@
+name: Приоритет стилей
diff --git a/modules/20-hypertext/10-paragraph/ru/EXERCISE.md b/modules/20-hypertext/10-paragraph/ru/EXERCISE.md
new file mode 100644
index 0000000..2fef353
--- /dev/null
+++ b/modules/20-hypertext/10-paragraph/ru/EXERCISE.md
@@ -0,0 +1 @@
+Оберните фразу _Hello, World_ в тег параграфа
diff --git a/modules/20-hypertext/10-paragraph/ru/README.md b/modules/20-hypertext/10-paragraph/ru/README.md
new file mode 100644
index 0000000..8b09f76
--- /dev/null
+++ b/modules/20-hypertext/10-paragraph/ru/README.md
@@ -0,0 +1,19 @@
+Параграфы – основной способ разделять большой текст на небольшие логические блоки. Эти блоки автоматически «отбиваются» друг от друга отступами. Такой текст намного проще читается и не пугает пользователей.
+
+Параграфы, в основном, встречаются внутри большого текста. Например, любой урок на Хекслете или Code Basics разбит на параграфы для удобства чтения, прямо как в этом уроке.
+
+Разбитие идёт по небольшим смысловым блокам. Так не только комфортнее читать, но и можно быстрее найти нужную информацию в большом тексте.
+
+Параграфы создаются с помощью парного тега `<p>`, в тело которого помещается небольшая часть текста. Например:
+
+```html
+<p>Первый параграф</p>
+<p>Второй параграф</p>
+```
+
+Вот как они выглядят в браузере:
+
+<div class="hexlet-basics-example my-3">
+  <p>Первый параграф</p>
+  <p class="m-0">Второй параграф</p>
+</div>
diff --git a/modules/20-hypertext/10-paragraph/ru/data.yml b/modules/20-hypertext/10-paragraph/ru/data.yml
new file mode 100644
index 0000000..46ca091
--- /dev/null
+++ b/modules/20-hypertext/10-paragraph/ru/data.yml
@@ -0,0 +1,8 @@
+name: Параграфы
+definitions:
+  - name: Параграф
+    description: >-
+      Небольшой блок текста, отделяемый от остального содержимого отступами
+      снизу и сверху
+tips:
+  - Параграфы нельзя вкладывать друг в друга
diff --git a/modules/20-hypertext/15-text-align/ru/EXERCISE.md b/modules/20-hypertext/15-text-align/ru/EXERCISE.md
new file mode 100644
index 0000000..8d1d815
--- /dev/null
+++ b/modules/20-hypertext/15-text-align/ru/EXERCISE.md
@@ -0,0 +1 @@
+Добавьте в редактор параграф с классом `important` и выровняйте его по центру. Стили укажите в теге `<style>`
diff --git a/modules/20-hypertext/15-text-align/ru/README.md b/modules/20-hypertext/15-text-align/ru/README.md
new file mode 100644
index 0000000..01ef239
--- /dev/null
+++ b/modules/20-hypertext/15-text-align/ru/README.md
@@ -0,0 +1,45 @@
+Сильный способ выделить участок текста — выровнять его иначе, чем остальной текст. На многих сайтах используют выравнивание заголовка по центру, чтобы пользователь быстрее мог его отличить.
+
+<div class="hexlet-basics-example my-3">
+  <p style="" class="h3 text-center">Заголовок, расположенный по центру</p>
+  <p class="m-0">Текст страницы. Можно заметить, что заголовок бросился в глаза, благодаря выравниванию по центру</p>
+</div>
+
+CSS позволяет выровнять текст, используя свойство `text-align` с 4 основными значениями:
+
+* `left` — по левому краю. Используется по умолчанию
+* `center` — по центру
+* `right` — по правому краю
+* `justify` — по ширине
+
+```html
+<p class="left">Текст по левому краю</p>
+<p class="center">Текст по центру</p>
+<p class="right">Текст по правому краю</p>
+<p class="justify">Текст с выравниванием по ширине. Используется редко, так как оставляет неравномерные пробелы между словами</p>
+```
+
+```css
+.left {
+  text-align: left;
+}
+
+.center {
+  text-align: center;
+}
+
+.right {
+  text-align: right;
+}
+
+.justify {
+  text-align: justify;
+}
+```
+
+<div class="hexlet-basics-example my-3">
+  <p>Текст по левому краю</p>
+  <p style="text-align: center">Текст по центру</p>
+  <p style="text-align: right">Текст по правому краю</p>
+  <p style="text-align: justify" class="m-0">Текст с выравниванием по ширине. Используется редко, так как оставляет неравномерные пробелы между словами. Такой приём часто используется в книжной вёрстке, так как не создаются «рваные края» в тексте</p>
+</div>
diff --git a/modules/20-hypertext/15-text-align/ru/data.yml b/modules/20-hypertext/15-text-align/ru/data.yml
new file mode 100644
index 0000000..d08d0fd
--- /dev/null
+++ b/modules/20-hypertext/15-text-align/ru/data.yml
@@ -0,0 +1,5 @@
+name: Выравнивание текста
+tips:
+  - >-
+    Для глаза самый привычный вариант — выравнивание по левому краю. Не
+    используйте большое количество разных выравниваний на странице
diff --git a/modules/20-hypertext/20-color/ru/EXERCISE.md b/modules/20-hypertext/20-color/ru/EXERCISE.md
new file mode 100644
index 0000000..98658ee
--- /dev/null
+++ b/modules/20-hypertext/20-color/ru/EXERCISE.md
@@ -0,0 +1 @@
+В редакторе добавьте элемент `<span>` с классом `violet` и установите для него цвет равный `#9400d3`. Для подключения стилей воспользуйтесь тегом `<style>`.
diff --git a/modules/20-hypertext/20-color/ru/README.md b/modules/20-hypertext/20-color/ru/README.md
new file mode 100644
index 0000000..7af166c
--- /dev/null
+++ b/modules/20-hypertext/20-color/ru/README.md
@@ -0,0 +1,30 @@
+Выделение цветом участка текста — распространённый способ привлечь внимание пользователя на странице. Различные рекламные баннеры так и норовят сообщить нам о невероятной скидке, или что предложение закончится сегодня. Также такое выделение может обозначать важную информацию, которая обязательно должна быть прочитана.
+
+Используя CSS, можно устанавливать цвет текста как для всей страницы, так и для небольшого участка. Это определяется селектором, который будет выбран. Сам же цвет устанавливается с помощью свойства `color`, значением которого является код цвета или его алиас.
+
+В этом уроке цвет будет указываться в формате `HEX` — это шестнадцатеричное представление цвета, где `#ffffff` означает белый цвет, а `#000000` чёрный. Для удобства, в конце урока, оставлена ссылка на портал, где можно выбрать любой цвет и получить его значение в формате `HEX`. Подробнее про цветовые модели в CSS будет рассказано в одном из следующих уроков.
+
+Создадим параграф и выделим в нём одно слово. Для этого обернём его в строчный тег `<span>` и дадим произвольный класс, с помощью которого и будем выбирать элемент в CSS:
+
+
+```html
+<p><span class="info">Внимание!</span> Важная информация</p>
+```
+
+```css
+.info {
+  color: #5263f3;
+}
+```
+
+<div class="hexlet-basics-example my-3">
+  <p class="m-0"><span style="color:#5263f3;">Внимание!</span> Важная информация</p>
+</div>
+
+Чтобы установить цвет текста для всей страницы можно использовать селектор `body`. Свойство `color` является наследуемым, поэтому цвет будет установлен для всех текстовых элементов:
+
+```css
+body {
+  color: #333333;
+}
+```
diff --git a/modules/20-hypertext/20-color/ru/data.yml b/modules/20-hypertext/20-color/ru/data.yml
new file mode 100644
index 0000000..325526a
--- /dev/null
+++ b/modules/20-hypertext/20-color/ru/data.yml
@@ -0,0 +1,5 @@
+name: Цвета
+tips:
+  - >-
+    Выбрать цвет и получить его `hex`-код можно на [HTML Color
+    Codes](https://htmlcolorcodes.com/)
diff --git a/modules/20-hypertext/25-text-style/ru/EXERCISE.md b/modules/20-hypertext/25-text-style/ru/EXERCISE.md
new file mode 100644
index 0000000..d3a0528
--- /dev/null
+++ b/modules/20-hypertext/25-text-style/ru/EXERCISE.md
@@ -0,0 +1,7 @@
+Добавьте в редактор фразу
+
+<div class="hexlet-basics-example my-3">
+  <span>Hexlet — hands-on programming courses</span>
+</div>
+
+в которой слово «courses» сделайте жирным начертанием (физическая разметка), и выделите сочетание «programming» курсивом (логическая разметка). Не забудьте обернуть фразу в параграф
diff --git a/modules/20-hypertext/25-text-style/ru/README.md b/modules/20-hypertext/25-text-style/ru/README.md
new file mode 100644
index 0000000..6c3feda
--- /dev/null
+++ b/modules/20-hypertext/25-text-style/ru/README.md
@@ -0,0 +1,87 @@
+
+Любой текст содержит ключевые части, которые хочется донести до читателя. Это могут быть определения, подсказки, ключевая мысль. Если текста очень много, то такие части могут потеряться или вовсе не быть обнаруженными. Как помочь браузеру и пользователю быстро найти такие части на странице? В HTML-разметке для этих целей можно использовать **жирное** и _курсивное_ начертание.
+
+## Жирное начертание
+
+Для выделения текста жирным используется один из двух парных тегов: `<b>` или `<strong>`:
+
+```html
+<p>Code Basics — <b>курсы</b> по программированию.</p>
+```
+
+<div class="hexlet-basics-example my-3">
+  <p class="m-0">Code Basics — <b>курсы</b> по программированию.</p>
+</div>
+
+```html
+<p>HTML — <strong>язык разметки гипертекста</strong></p>
+```
+
+<div class="hexlet-basics-example my-3">
+  <p class="m-0">HTML — <strong>язык разметки гипертекста</strong></p>
+</div>
+
+Оба примера иллюстрируют добавление жирного начертания к участку текста. Но почему для визуально одинаковых результатов использовалось два разных тега? Дело в _семантике_, то есть смысловом значении. В данном случае смысловом значении тега:
+
+* `<b>` — простое выделение текста. Его можно использовать в любом месте для визуального выделения текста. Никакой смысловой нагрузки этот тег не несёт
+* `<strong>` — логическое выделение важного участка текста. Этот тег несёт смысловую нагрузку и размечает именно важную часть. Его не следует применять на всех участках подряд
+
+Когда-то разработчики хотели, чтобы эти теги выглядели по разному и отличались с точки зрения поведения для браузера, но история пошла по чуть иному пути. Сейчас считается, что использование `<b>` избыточно и для визуального выделения нужно использовать CSS, а для важных участков `<strong>`
+
+В большинстве случаев для создания насыщенного текста используют CSS, а конкретнее свойство `font-weight` со значением `bold`. Внешний вид такого правила будет соответствовать использованию `<strong>` или `<b>`
+
+```css
+.text {
+  font-weight: bold;
+}
+```
+
+Есть два самых распространённых значения свойства `font-weight`:
+
+1. `bold` — насыщенный шрифт. Внешне текст будет выглядеть так же, как и при использовании тега `<strong>` или `<b>`
+2. `normal` — значение по умолчанию. Полезное значение, если весь текст имеет нестандартную насыщенность, но какой-то участок необходимо сделать стандартным по насыщенности
+
+```html
+<p class="bold">Текст с жирным начертанием шрифта</p>
+```
+
+```css
+.bold {
+  font-weight: bold;
+}
+```
+
+<div class="hexlet-basics-example my-3">
+  <p style="font-weight: bold;" class="m-0">Текст с жирным начертанием шрифта</p>
+</div>
+
+Но это не все значения, которые может принимать свойство. Помимо словесного описания `bold` и `normal` существуют числовые:
+
+* `100`
+* `200`
+* `300`
+* `400` — соответствует значению `normal`
+* `500`
+* `600`
+* `700` — соответствует значению `bold`
+* `800`
+* `900`
+
+Хоть числовых значений и много, но здесь всё зависит от начертаний шрифта, а точнее от того, есть ли у него символы для каждого типа насыщенности. Большинство шрифтов поддерживают только значения `normal` и `bold` и если указано иное, то браузер сам выберет какую насыщенность подставить взамен. Чаще всего все значения выше `500` будут интерпретированы как `bold`
+
+## Курсивное выделение
+
+По своему смыслу курсивное выделение очень похоже на жирное, но им выделяется не ключевая часть, а ставится акцент. Например:
+
+```html
+<p><i>Code Basics</i> — <em>бесплатные курсы</em> по программированию</p>
+```
+
+<div class="hexlet-basics-example my-3">
+  <p class="m-0"><i>Code Basics</i> — <em>бесплатные курсы</em> по программированию</p>
+</div>
+
+В этом примере были размечены две части текста:
+
+* Тегом `<i>` было размечено название портала Code Basics. Тег предназначен для визуального выделение текста курсивом и не несёт смысловой нагрузки
+* Тегом `<em>` была выделена фраза «бесплатные курсы». Это логический акцент на бесплатности курсов, который был придан предложению. Курсов много, а бесплатных нет, поэтому стоит добавить акцент на эту часть предложения
diff --git a/modules/20-hypertext/25-text-style/ru/data.yml b/modules/20-hypertext/25-text-style/ru/data.yml
new file mode 100644
index 0000000..5358bce
--- /dev/null
+++ b/modules/20-hypertext/25-text-style/ru/data.yml
@@ -0,0 +1,11 @@
+name: Начертание текста
+definitions:
+  - name: Семантика
+    description: >-
+      Смысловое значение. В контексте HTML — смысловой выбор разметки для
+      участка информации
+tips:
+  - >-
+    Теги для визуального выделения короче, чем для смыслового. Это поможет
+    запомнить, когда использовать `<i>` и `<b>`, а когда `<em>` и `<strong>`
+  - В практике вместо `<i>` и `<b>` используют стилизацию с помощью CSS
diff --git a/modules/20-hypertext/30-hypertext-header/ru/EXERCISE.md b/modules/20-hypertext/30-hypertext-header/ru/EXERCISE.md
new file mode 100644
index 0000000..17f0d61
--- /dev/null
+++ b/modules/20-hypertext/30-hypertext-header/ru/EXERCISE.md
@@ -0,0 +1 @@
+Добавьте в редакторе заголовок первого и второго уровня с произвольным текстом
diff --git a/modules/20-hypertext/30-hypertext-header/ru/README.md b/modules/20-hypertext/30-hypertext-header/ru/README.md
new file mode 100644
index 0000000..d3516ef
--- /dev/null
+++ b/modules/20-hypertext/30-hypertext-header/ru/README.md
@@ -0,0 +1,60 @@
+
+Чем больше текст, тем чаще он разбивается на логические секции. Например, базовая разметка доклада, диплома или реферата состоит из трёх основных частей:
+
+1. Введение
+2. Основная часть
+3. Заключение
+
+Такие логические разделения на заголовки позволяют быстрее ориентироваться в документе и находить ту часть, которая нужна.
+
+Для создания заголовков используется 6 парных тегов: `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, где `<h1>` — заголовок первого уровня, самый важный и описывающий главную тему текста, а `<h6>` — заголовок самого низшего уровня.
+
+```html
+<h1>Заголовок первого уровня</h1>
+<h2>Заголовок второго уровня</h2>
+<h3>Заголовок третьего уровня</h3>
+<h4>Заголовок четвёртого уровня</h4>
+<h5>Заголовок пятого уровня</h5>
+<h6>Заголовок шестого уровня</h6>
+```
+
+<div class="hexlet-basics-example my-3">
+  <h1>Заголовок первого уровня</h1>
+  <h2>Заголовок второго уровня</h2>
+  <h3>Заголовок третьего уровня</h3>
+  <h4>Заголовок четвёртого уровня</h4>
+  <h5>Заголовок пятого уровня</h5>
+  <h6>Заголовок шестого уровня</h6>
+</div>
+
+Каждый заголовок низшего уровня является подразделом заголовка более верхнего уровня. Это очень похоже на оглавление любой книги, структура которой может выглядеть так:
+
+* Глава 1
+  * Часть 1
+  * Часть 2
+    * Примечания
+  * Часть 3
+* Глава 2
+
+```html
+<h1>Лучшая книга на Земле</h1>
+<p>Описание книги. Благодарность моему коту и двум моим собакам. Мяу!</p>
+
+<h2>Глава 1</h2>
+
+<h3>Часть 1</h3>
+<p>Параграф с текстом</p>
+<p>Параграф с текстом</p>
+
+<h3>Часть 2</h3>
+<p>Параграф с текстом</p>
+<p>Параграф с текстом</p>
+<h4>Примечания</h4>
+<p>Текст этого примечания написан с любовью</p>
+
+<h3>Часть 3</h3>
+<p>Параграф с текстом</p>
+<p>Параграф с текстом</p>
+
+<h2>Глава 2</h2>
+```
diff --git a/modules/20-hypertext/30-hypertext-header/ru/data.yml b/modules/20-hypertext/30-hypertext-header/ru/data.yml
new file mode 100644
index 0000000..b6c31fa
--- /dev/null
+++ b/modules/20-hypertext/30-hypertext-header/ru/data.yml
@@ -0,0 +1,4 @@
+name: Заголовки
+tips:
+  - Соблюдайте последовательность заголовков. Не перескакивайте уровни
+  - На странице, обычно, находится только один заголовок первого уровня
diff --git a/modules/20-hypertext/35-links/ru/EXERCISE.md b/modules/20-hypertext/35-links/ru/EXERCISE.md
new file mode 100644
index 0000000..8dd0d20
--- /dev/null
+++ b/modules/20-hypertext/35-links/ru/EXERCISE.md
@@ -0,0 +1 @@
+Добавьте абсолютную ссылку на сайт https://code-basics.com/
diff --git a/modules/20-hypertext/35-links/ru/README.md b/modules/20-hypertext/35-links/ru/README.md
new file mode 100644
index 0000000..b19ef6f
--- /dev/null
+++ b/modules/20-hypertext/35-links/ru/README.md
@@ -0,0 +1,48 @@
+
+Для перемещения между страницами был придуман главный элемент в интернете — гиперссылки.
+
+Гиперссылки могут ссылаться не только на другой ресурс в интернете, но и позволяют перемещаться внутри текущего документа. На данный урок вы тоже попали через гиперссылку.
+
+Для создания ссылки используется парный тег `<a>` с обязательным атрибутом `href` который указывает адрес страницы, на которую произойдёт переход после клика.
+
+```html
+<a href="Ссылка на документ">Текст ссылки</a>
+```
+
+Ссылки можно поделить на 3 типа:
+
+* **Относительные**. Такие ссылки ссылаются на тот же сайт, с которого и происходит переход
+* **Абсолютные**. Позволяют переходить на сторонние ресурсы в интернете
+* **Ссылки-якоря**. Используются для перемещения внутри текущего документа
+
+Единственное различие относительных и абсолютных ссылок — формат, в котором указывается ссылка. В случае с относительными ссылками не указывается адрес самого сайта, на который будет переход, он будет совпадать с сайтом, с которого произошёл переход:
+
+```html
+<!-- Ссылка указывает на документ внутри текущего сайта -->
+
+<a href="/languages/html">Вернуться на выбор уроков</a>
+```
+
+```html
+<!-- Ссылка указывает на документ стороннего сайта.
+     В данном случае на главную страницу Code Basics -->
+
+<a href="https://code-basics.com/">Перейти на сайт Code Basics</a>
+```
+
+**Ссылки-якоря** удобны в использовании внутри объёмного документа и позволяют переместить пользователя к нужному месту. Например, если страница представляет собой доклад, то удобнее, если есть возможность быстро переместиться к любому его разделу и обратно.
+
+Создание ссылки-якоря состоит из двух действий:
+
+1. Блоку на странице, к которому мы хотим совершить переход, нужно указать уникальный идентификатор. Делается это с помощью атрибута `id`
+2. Добавить тег `<a>`, и в атрибуте `href` указать ссылку вида `#название-уникального-идентификатора`
+
+```html
+<a href="#anchor">Переход на главу 2</a>
+...
+...
+...
+<div id="anchor">
+    <h2>Глава 2</h2>
+</div>
+```
diff --git a/modules/20-hypertext/35-links/ru/data.yml b/modules/20-hypertext/35-links/ru/data.yml
new file mode 100644
index 0000000..c6d00e8
--- /dev/null
+++ b/modules/20-hypertext/35-links/ru/data.yml
@@ -0,0 +1 @@
+name: Ссылки
diff --git a/modules/20-hypertext/40-font-size/ru/EXERCISE.md b/modules/20-hypertext/40-font-size/ru/EXERCISE.md
new file mode 100644
index 0000000..7e7a9b1
--- /dev/null
+++ b/modules/20-hypertext/40-font-size/ru/EXERCISE.md
@@ -0,0 +1 @@
+Добавьте в редактор параграф с классом `big` и установите размер шрифта в 60 пикселей. Стили добавьте в тег `<style>`
diff --git a/modules/20-hypertext/40-font-size/ru/README.md b/modules/20-hypertext/40-font-size/ru/README.md
new file mode 100644
index 0000000..39f8739
--- /dev/null
+++ b/modules/20-hypertext/40-font-size/ru/README.md
@@ -0,0 +1,20 @@
+
+Ещё один способ отделить смысловые участки текста — использование разного размера шрифта. Мы уже встречались с тем, что браузеры стилизуют заголовки по разному. Именно размером текста отделяется заголовок `<h1>` от заголовка `<h2>` и так далее.
+
+Управлять размером текста в CSS можно с помощью свойства `font-size`, которое принимает числовое значение и единицу измерения. Сейчас, в качестве единицы измерения мы будем использовать пиксели, хотя есть ещё несколько важных единиц, которые будут изучены к концу этого курса.
+
+```html
+<p>Внимание! Этот параграф со стандартным размером шрифта</p>
+<p class="warning">Внимание! Этот параграф имеет размер шрифта 24 пикселя</p>
+```
+
+```css
+.warning {
+  font-size: 24px;
+}
+```
+
+<div class="hexlet-basics-example my-3">
+  <p>Внимание! Этот параграф со стандартным размером шрифта</p>
+  <p class="m-0" style="font-size: 24px;">Внимание! Этот параграф имеет размер шрифта 24 пикселя</p>
+</div>
diff --git a/modules/20-hypertext/40-font-size/ru/data.yml b/modules/20-hypertext/40-font-size/ru/data.yml
new file mode 100644
index 0000000..a2ce208
--- /dev/null
+++ b/modules/20-hypertext/40-font-size/ru/data.yml
@@ -0,0 +1 @@
+name: Размер шрифта
diff --git a/modules/20-hypertext/45-units/ru/EXERCISE.md b/modules/20-hypertext/45-units/ru/EXERCISE.md
new file mode 100644
index 0000000..fa0a150
--- /dev/null
+++ b/modules/20-hypertext/45-units/ru/EXERCISE.md
@@ -0,0 +1 @@
+Добавьте `<div>` с классом `header`. Установите размер шрифта в 22px. Внутрь `<div>` вложите параграф с классом `offer` и установите размер шрифта в 200%. Стили запишите в теге `<style>`
diff --git a/modules/20-hypertext/45-units/ru/README.md b/modules/20-hypertext/45-units/ru/README.md
new file mode 100644
index 0000000..19c0757
--- /dev/null
+++ b/modules/20-hypertext/45-units/ru/README.md
@@ -0,0 +1,67 @@
+На протяжении всего курса, в качестве единиц измерения, использовались пиксели — наименьший элемент экрана, который выводит цвет. Множество пикселей (а в экране их много) формируют картинку, на которую вы и смотрите. Они использовались для указания размера шрифта, высоты и ширины элемента, внутренних и внешних отступов, межстрочного интервала и так далее.
+
+Пикcели являются **абсолютной** единицей измерения в CSS. Что же это значит? Это значит, что вне зависимости от размера экрана значение, указанное в пикселях, сохранится. Если указан отступ в 30 пикселей, то он будет таким на телефоне, на телевизоре с диагональю в 102 дюйма и на домашней микроволновке.
+
+С одной стороны это хорошо, ведь можно быть уверенным в том, что на разных устройствах все размеры сохранятся. В этом же заключается и проблема. Представьте себе текст с размером шрифта 12 пикселей. Он будет нормально читаться на среднестатистическом экране, но его использование на телевизоре или смартфоне приведёт к тому, что текст будет слишком маленьким для комфортного чтения, потому что устройства имеют разные размеры экранов. Если экран имеет всего 50 пикселей, то такой текст станет невероятно большим, так как займёт большую часть экрана
+
+Помимо пикселей существуют и другие абсолютные единицы измерения:
+
+* сантиметры
+* миллиметры
+* дюймы
+* пункты
+
+Хоть они нечасто используются, но могут быть полезны при вёрстке страницы для печати. На сайтах используются только пиксели.
+
+В противовес абсолютным единицам измерения существуют **относительные**. По их названию понятно, что размер такого элемента не фиксируется, а высчитывается относительно чего-то. В случае с интернет-страницами этим «чего-то» является размер шрифта. Почему именно шрифт? Представьте, что вы, как пользователь, увеличиваете размер шрифта на сайте для собственного удобства. Если отступы, ширина, высота не будет привязана к размеру текста, то такой текст будет выходить за пределы блока. А текст — основа любой страницы в интернете.
+
+Одной из относительных единиц измерения являются проценты. Они считаются от размера шрифта родительского элемента, то есть элемента, внутри которого находятся. Например,
+
+```html
+<section class="news">
+  <h2>Новости</h2>
+</section>
+```
+
+```css
+.news {
+  font-size: 20px;
+}
+
+.news h2 {
+  font-size: 200%;
+}
+```
+
+Какого размера будет заголовок второго уровня? Правильный ответ: `40px`, так как для секции `news` установлен размер шрифта в `20px`. Относительно этого размера и высчитывалось значение `200%`. Здесь неважно, какие теги есть ещё, в каких обёртках лежат эти новости — размер считается от значения `font-size` элемента `news`.
+
+Но важно помнить, что `font-size` — наследуемое свойство. Если оно явно не указано у элемента `news` в нашем примере, то, для него, будет установлено значение `font-size` родителя. Расширим пример:
+
+```html
+<main>
+  <section class="news">
+    <h2>Новости</h2>
+  </section>
+</main>
+```
+
+```css
+main {
+  font-size: 16px;
+}
+
+h2 {
+  font-size: 200%;
+}
+```
+
+Какой размер у заголовка второго уровня? Правильный ответ: `32px`. Если построить логическую цепочку размеров шрифта, то она выглядит так:
+
+* У элемента `<main>` размер шрифта установлен в значение `16px`
+* У элемента с классом `news` нет отдельного указания размера шрифта, поэтому оно наследуется от `<main>`, то есть тоже `16px`
+* У заголовка второго уровня размер шрифта `200%`. Значение устанавливается относительно размера шрифта родителя, то есть блока с классом `.news`. Итого получается `16px * 2 = 32px`
+
+Существует ещё несколько основных относительных единиц измерения:
+
+1. **em**. определяется относительно размера шрифта у родительского элемента, т.е. `1.5em` будет на 50% больше базового вычисленного размера шрифта родителя. Очень похоже на использование процентов, только указывается немного по другому
+2. **rem**. определяется относительно размера шрифта у корневого элемента, т.е. у тега `html` (значение по-умолчанию 16px)
diff --git a/modules/20-hypertext/45-units/ru/data.yml b/modules/20-hypertext/45-units/ru/data.yml
new file mode 100644
index 0000000..9173a76
--- /dev/null
+++ b/modules/20-hypertext/45-units/ru/data.yml
@@ -0,0 +1,6 @@
+name: Единицы измерения
+tips:
+  - >-
+    С помощью относительных единиц можно управлять не только размером шрифта, но
+    и остальными свойствами, которые в качестве значения принимают число и
+    единицу измерения
diff --git a/modules/20-hypertext/50-lists/ru/EXERCISE.md b/modules/20-hypertext/50-lists/ru/EXERCISE.md
new file mode 100644
index 0000000..df2e35f
--- /dev/null
+++ b/modules/20-hypertext/50-lists/ru/EXERCISE.md
@@ -0,0 +1 @@
+Создайте нумерованный список из 5 элементов
diff --git a/modules/20-hypertext/50-lists/ru/README.md b/modules/20-hypertext/50-lists/ru/README.md
new file mode 100644
index 0000000..33c95b3
--- /dev/null
+++ b/modules/20-hypertext/50-lists/ru/README.md
@@ -0,0 +1,77 @@
+
+Списки — один из способов представления контента на странице. С их помощью легко группировать небольшие связанные фрагменты, например список покупок:
+
+```
+— Молоко
+— Хлеб
+— Вода
+```
+
+Можно сделать такой список с помощью трёх параграфов, но тогда, с первого взгляда, будет казаться, что это три разные фразы не объединённые общим смыслом.
+
+<div class="hexlet-basics-example my-3">
+  <p>Молоко</p>
+  <p>Хлеб</p>
+  <p class="m-0">Вода</p>
+</div>
+
+Чтобы правильно связать эту информацию используются списки. Для их создания в HTML используется несколько тегов, вложенных друг в друга:
+
+* `<ul>` или `<ol>` для определения типа списка
+* `<li>` для создания пункта списка
+
+Общая схема разметки выглядит следующим образом:
+
+```
+<тип_списка>
+  <пункт_списка>Текст</пункт_списка>
+</тип_списка>
+```
+
+## Маркированный список
+
+Для создания маркированного списка используется тег `<ul>`.
+
+Маркированные списки используются, когда информация не требует определённой последовательности. Например, список продуктов из примера выше. Не так важно, что будет куплено первым: молоко или хлеб, важно — купить все продукты.
+
+```html
+<ul>
+  <li>Молоко</li>
+  <li>Хлеб</li>
+  <li>Вода</li>
+</ul>
+```
+
+<div class="hexlet-basics-example my-3">
+  <ul class="m-0">
+    <li>Молоко</li>
+    <li>Хлеб</li>
+    <li>Вода</li>
+  </ul>
+</div>
+
+## Нумерованный список
+
+Для группировки последовательной информации используются **нумерованные** списки, важной особенностью которых является наличие порядкового номера элемента.
+
+Такие списки удобны, если обозначается последовательность действий, которые нужно совершить. Нумерованный список создаётся с помощью тега `<ol>`, внутри которого также лежат элементы в тегах `<li>`.
+
+Список дел на день
+
+<div class="hexlet-basics-example my-3">
+  <ol class="m-0">
+    <li>Купить корм</li>
+    <li>Сходить к Алексею</li>
+    <li>Приготовить ужин</li>
+  </ol>
+</div>
+
+в разметке HTML выглядит следующим образом:
+
+```html
+<ol>
+  <li>Купить корм</li>
+  <li>Сходить к Алексею</li>
+  <li>Приготовить ужин</li>
+</ol>
+```
diff --git a/modules/20-hypertext/50-lists/ru/data.yml b/modules/20-hypertext/50-lists/ru/data.yml
new file mode 100644
index 0000000..5ff6427
--- /dev/null
+++ b/modules/20-hypertext/50-lists/ru/data.yml
@@ -0,0 +1 @@
+name: Списки
diff --git a/modules/20-hypertext/55-nested-lists/ru/EXERCISE.md b/modules/20-hypertext/55-nested-lists/ru/EXERCISE.md
new file mode 100644
index 0000000..1f8b8b9
--- /dev/null
+++ b/modules/20-hypertext/55-nested-lists/ru/EXERCISE.md
@@ -0,0 +1,13 @@
+Создайте разметку для списка:
+
+<div class="hexlet-basics-example my-3">
+  <ol class="m-0">
+    <li>JavaScript Career
+      <ul>
+        <li>Frontend</li>
+        <li>Backend</li>
+      </ul>
+    </li>
+    <li>PHP Career</li>
+  </ol>
+</div>
diff --git a/modules/20-hypertext/55-nested-lists/ru/README.md b/modules/20-hypertext/55-nested-lists/ru/README.md
new file mode 100644
index 0000000..6217e3d
--- /dev/null
+++ b/modules/20-hypertext/55-nested-lists/ru/README.md
@@ -0,0 +1,45 @@
+
+При составлении списка дел может возникнуть необходимость разбить пункты на несколько дополнительных подпунктов. Например, в списке дел пункт «Сходить в магазин» может содержать в себе список покупок.
+
+Для создания такой структуры используются _вложенные списки_. Это позволяет вкладывать в качестве элемента список не просто текст, а новый список, создавая сложную структуру:
+
+<div class="hexlet-basics-example my-3">
+  <ul class="m-0">
+    <li>Сходить в магазин
+      <ul>
+        <li>Купить молоко</li>
+        <li>Купить хлеб</li>
+      </ul>
+    </li>
+    <li>Пройти уроки на Code Basics </li>
+  </ul>
+</div>
+
+Вот как это выглядит в HTML:
+
+```html
+<ul>
+  <li>Сходить в магазин
+    <ul>
+      <li>Купить молоко</li>
+      <li>Купить хлеб</li>
+    </ul>
+  </li>
+  <li>Пройти уроки на Code Basics </li>
+</ul>
+```
+
+Важно отметить, что вложенный список является частью пункта списка и находится внутри тега `<li>`:
+
+```html
+<li>Сходить в магазин
+  <ul>
+    <li>Купить молоко</li>
+    <li>Купить хлеб</li>
+  </ul>
+</li>
+```
+
+Такая вложенность позволяет сохранить семантику и указать, что вложенный список относится именно к пункту «Сходить в магазин», а не к какому-либо ещё.
+
+Вы можете вкладывать списки разных видов друг в друга: маркированные в нумерованные и наоборот. Главное — следить за открытием и закрытием тегов. В случае ошибки браузер попытается самостоятельно исправить ошибку, но это может быть некорректно
diff --git a/modules/20-hypertext/55-nested-lists/ru/data.yml b/modules/20-hypertext/55-nested-lists/ru/data.yml
new file mode 100644
index 0000000..4fe8b62
--- /dev/null
+++ b/modules/20-hypertext/55-nested-lists/ru/data.yml
@@ -0,0 +1,5 @@
+name: Вложенные списки
+tips:
+  - >-
+    На каждом уровне вложенности маркированный список меняет свой маркер. Это
+    сделано для визуального отличия вложенных списков
diff --git a/modules/20-hypertext/60-font-variant/ru/EXERCISE.md b/modules/20-hypertext/60-font-variant/ru/EXERCISE.md
new file mode 100644
index 0000000..b2db4b1
--- /dev/null
+++ b/modules/20-hypertext/60-font-variant/ru/EXERCISE.md
@@ -0,0 +1 @@
+Добавьте в редактор параграф с классом `small-capitals` и выведите текст внутри капителью. Стили добавьте в тег `<style>`
diff --git a/modules/20-hypertext/60-font-variant/ru/README.md b/modules/20-hypertext/60-font-variant/ru/README.md
new file mode 100644
index 0000000..c5d3640
--- /dev/null
+++ b/modules/20-hypertext/60-font-variant/ru/README.md
@@ -0,0 +1,13 @@
+Капитель — вид строчных букв, размер которых совпадает (или приближен) к размеру заглавных букв.
+
+<div class="hexlet-basics-example my-3">
+  <p>Текст, набранный простым шрифтом</p>
+  <p style="font-variant: small-caps" class="m-0">Текст с использованием капители</p>
+</div>
+
+Часто такое написание используется как стилистический приём. Но также имеется практическая сторона капители — ею принято обозначать аббревиатуры, а также её используют в первых строчках произведения, чтобы читателю было проще «войти» в текст после заголовка.
+
+Для установки капители используется свойство `font-variant` с одним из двух основных значений:
+
+* `normal` — нормальное написание текста
+* `small-caps` — капитель
diff --git a/modules/20-hypertext/60-font-variant/ru/data.yml b/modules/20-hypertext/60-font-variant/ru/data.yml
new file mode 100644
index 0000000..c2baf54
--- /dev/null
+++ b/modules/20-hypertext/60-font-variant/ru/data.yml
@@ -0,0 +1 @@
+name: Капитель
diff --git a/modules/20-hypertext/65-text-decoration/ru/EXERCISE.md b/modules/20-hypertext/65-text-decoration/ru/EXERCISE.md
new file mode 100644
index 0000000..87d25f6
--- /dev/null
+++ b/modules/20-hypertext/65-text-decoration/ru/EXERCISE.md
@@ -0,0 +1 @@
+Добавьте в редактор параграф с классом `line` и добавьте подчёркивание текста для него. Стили добавьте в тег `<style>`
diff --git a/modules/20-hypertext/65-text-decoration/ru/README.md b/modules/20-hypertext/65-text-decoration/ru/README.md
new file mode 100644
index 0000000..6b65c54
--- /dev/null
+++ b/modules/20-hypertext/65-text-decoration/ru/README.md
@@ -0,0 +1,25 @@
+Для усиления текста часто используется <u>подчёркивание</u>. Оно показывает важность текущего слова или текста (часто его ещё используют для указания ссылок в документе). Другим средством стилизации текста является <s>перечёркивание</s>, показывающее неправильный участок текста, например «А <s>вот так</s>, дети, не делайте».
+
+Для такого оформления используется свойство `text-decoration` с тремя основными свойствами:
+
+* `underline` — <u>Подчёркивание текста</u>
+* `line-through` — <s>Перечёркивание текста</s>
+* `overline` — <span style="text-decoration: overline;">Надчёркивание текста</span>
+
+Чтобы отменить подчёркивание у ссылок используется значение `none`. Его часто используют для удаления подчёркивания у ссылок, которое есть по умолчанию
+
+```html
+<a href="#">Обычная ссылка с подчёркиванием по умолчанию</a>
+<a href="#" class="text-decoration-none">Cсылка без подчёркивания</a>
+```
+
+```css
+.text-decoration-none {
+  text-decoration: none;
+}
+```
+
+<div class="hexlet-basics-example my-3">
+  <a href="#" class="d-block mb-3">Обычная ссылка с подчёркиванием по умолчанию</a>
+  <a href="#" style="text-decoration: none">Ссылка без подчёркивания</a>
+</div>
diff --git a/modules/20-hypertext/65-text-decoration/ru/data.yml b/modules/20-hypertext/65-text-decoration/ru/data.yml
new file mode 100644
index 0000000..3fa37c8
--- /dev/null
+++ b/modules/20-hypertext/65-text-decoration/ru/data.yml
@@ -0,0 +1 @@
+name: Горизонтальная черта
diff --git a/modules/20-hypertext/70-line-height/ru/EXERCISE.md b/modules/20-hypertext/70-line-height/ru/EXERCISE.md
new file mode 100644
index 0000000..b795750
--- /dev/null
+++ b/modules/20-hypertext/70-line-height/ru/EXERCISE.md
@@ -0,0 +1,3 @@
+Добавьте в редактор параграф с классом `line-height` с размером шрифта 24 пикселя и межстрочным интервалом 36 пикселей. Стили добавьте в тег `<style>`
+
+Попробуйте добавить в параграф длинные фразы и изменять размер межстрочного интервала, чтобы увидеть, как это влияет на удобство чтения
diff --git a/modules/20-hypertext/70-line-height/ru/README.md b/modules/20-hypertext/70-line-height/ru/README.md
new file mode 100644
index 0000000..976ba64
--- /dev/null
+++ b/modules/20-hypertext/70-line-height/ru/README.md
@@ -0,0 +1,9 @@
+Межстрочный интервал (интерлиньяж) — важный пункт при работе с текстом. Данный параметр определяет, сколько пространства будет между строчками.
+
+| Недостаточное межстрочное расстояние                                      | Оптимальное межстрочное расстояние                                        |
+|---------------------------------------------------------------------------|---------------------------------------------------------------------------|
+| <p style="font-size: 14px; line-height: 14px">Текст с размером шрифта 14 пикселей и межстрочным интервалом 14 пикселей</p> | <p style="font-size: 14px; line-height: 21px;">Текст с размером шрифта 14 пикселей и межстрочным интервалом 21 пиксель</p> |
+
+Заметьте, что левый текст труднее читать. Это связано с тем, что глаза не «цепляются» за строку и взгляд постоянно переходит с одной строки на другую и обратно.
+
+Для установки межстрочного расстояния используется правило `line-height`. В качестве значения используется число и единица измерения. Как и при установке размера шрифта можно использовать различные единицы измерения, но в рамках курса мы используем пиксели. Другие единицы измерения будут изучены позже
diff --git a/modules/20-hypertext/70-line-height/ru/data.yml b/modules/20-hypertext/70-line-height/ru/data.yml
new file mode 100644
index 0000000..c3ba980
--- /dev/null
+++ b/modules/20-hypertext/70-line-height/ru/data.yml
@@ -0,0 +1 @@
+name: Межстрочный интервал
diff --git a/modules/20-hypertext/75-font-family/ru/EXERCISE.md b/modules/20-hypertext/75-font-family/ru/EXERCISE.md
new file mode 100644
index 0000000..9884860
--- /dev/null
+++ b/modules/20-hypertext/75-font-family/ru/EXERCISE.md
@@ -0,0 +1 @@
+Добавьте в редактор параграф с классом `verdana-text` и установите для него шрифт _Verdana_. Стили запишите в теге `<style>`. Не забудьте указать универсальное семейство шрифтов — шрифты без засечек
diff --git a/modules/20-hypertext/75-font-family/ru/README.md b/modules/20-hypertext/75-font-family/ru/README.md
new file mode 100644
index 0000000..a7a9e31
--- /dev/null
+++ b/modules/20-hypertext/75-font-family/ru/README.md
@@ -0,0 +1,47 @@
+Многим знакома фраза «Поиграйся со шрифтами» — великая мантра, когда внешний вид текста не устраивает. Для того, чтобы указать шрифт, используется правило `font-family`, позволяющее выбрать один или несколько шрифтов, которые будут использоваться в документе.
+
+```html
+<style>
+  .new-font {
+    font-family: Arial, Futura;
+  }
+</style>
+
+<p class="new-font">Абзац</p>
+```
+
+Шрифты подключаются из тех, которые установлены в вашей системе. По этой причине стоит выбирать «распространённые шрифты», так как у другого пользователя их может не быть. Помимо этого возможно подключать шрифты со сторонних сервисов, таких как [Google Fonts](https://fonts.google.com/), или загружать их непосредственно на ваш сервер, на котором расположен сайт.
+
+Наиболее распространёнными шрифтами являются:
+
+* Times New Roman
+* Arial
+* Tahoma
+* Verdana
+* Courier New
+
+С большей долей вероятности эти шрифты будут установлены и в системе у другого пользователя. Если шрифтов, указанных в свойстве `font-family`, на компьютере нет, то будет использован шрифт по умолчанию, заданный в настройках браузера.
+
+При подключении стилей хорошей практикой является добавление универсального семейства шрифта в правило `font-family`. Таких семейств на данный момент 5:
+
+* `serif` — шрифты с засечками (антиквы). Ярким представителем таких шрифтов является _Times New Roman_
+* `sans-serif` — шрифты без засечек (гротеск). Наиболее знакомыми такими шрифтами являются _Arial_ и _Verdana_
+* `cursive` — курсивные шрифты
+* `fantasy` — декоративные шрифты. Это семейство используется реже всего. Дело в том, что декоративные шрифты слишком разные, чтобы они были взаимозаменяемые
+* `monospace` — моноширинные шрифты. К ним относятся шрифты, в которых все символы имеют одинаковую ширину. Очень часто их используют программисты в текстовых редакторах
+
+Добавив универсальное семейство шрифта в правило `font-family`, мы страхуем себя от того, что у пользователя не окажется такого шрифта, который мы указали. Браузер автоматически выберет замену отсутствующему шрифту из универсального семейства шрифтов, которое было указано.
+
+Пример из начала урока при добавлении универсального семейства будет выглядеть следующим образом:
+
+```html
+<style>
+  .new-font {
+    font-family: Arial, Futura, sans-serif;
+  }
+</style>
+
+<p class="new-font">Абзац</p>
+```
+
+Теперь, если у пользователя в системе нет шрифтов _Arial_ или _Futura_, будет выбран системный шрифт без засечек.
diff --git a/modules/20-hypertext/75-font-family/ru/data.yml b/modules/20-hypertext/75-font-family/ru/data.yml
new file mode 100644
index 0000000..5c9a0f9
--- /dev/null
+++ b/modules/20-hypertext/75-font-family/ru/data.yml
@@ -0,0 +1,3 @@
+name: Семейство шрифта
+tips:
+  - Семейство шрифтов всегда указывается самым последним
diff --git a/modules/20-hypertext/80-font/ru/EXERCISE.md b/modules/20-hypertext/80-font/ru/EXERCISE.md
new file mode 100644
index 0000000..32e3f0a
--- /dev/null
+++ b/modules/20-hypertext/80-font/ru/EXERCISE.md
@@ -0,0 +1,8 @@
+Добавьте в редактор параграф с классом `bold-text` и установите следующие правила используя обобщённое свойство `font`:
+
+* Жирное начертание
+* Размер шрифта: `24px`
+* Шрифта Verdana
+* Семейство шрифтов: без засечек
+
+Стили запишите в теге `<style>`
diff --git a/modules/20-hypertext/80-font/ru/README.md b/modules/20-hypertext/80-font/ru/README.md
new file mode 100644
index 0000000..879849a
--- /dev/null
+++ b/modules/20-hypertext/80-font/ru/README.md
@@ -0,0 +1,40 @@
+Удобным способом задать свойства для шрифта является использование правила `font`, которое позволяет указать:
+
+* `font-style`
+* `font-variant`
+* `font-weight`
+* `font-size` / `line-height` (эти два правила записываются через слэш)
+* `font-family`
+
+Шесть разных правил внутри одного! Это помогает сократить CSS код и улучшить его читабельность. Обязательными из них являются `font-size` и `font-family`. Остальные можно не указывать.
+
+Пример записи со всеми возможными правилами: `font: italic small-caps bold 24px/1.2 Arial;`
+
+Предположим, что нам нужен жирный курсив с размером шрифта 24 пикселя из семейства шрифтов Arial, тогда правило в CSS будет выглядеть следующим образом:
+
+```css
+.text {
+  font: italic bold 24px Arial;
+}
+```
+
+<div class="hexlet-basics-example my-3" style="font: italic bold 24px Arial;">
+  Жирный курсив с размером шрифта 24 пикселя из семейства Arial
+</div>
+
+Обратите внимание на порядок использования значений внутри свойства `font`. Вначале идут стилистические правила, затем размер шрифта и его межстрочный интервал и потом семейство шрифта. Это важно, так как при другом порядке браузер может некорректно обработать результат.
+
+При указании свойства `font-family` также рекомендуется указать универсальное семейство шрифтов. Это необходимо для того, чтобы при отсутствии шрифта у пользователя был выбран подходящий из установленных в его системе. Как и при указании одиночного свойства `font-family`, все шрифты должны быть отделены запятыми. Это же касается и семейства шрифта.
+
+```css
+.text {
+  font: italic bold 24px Arial, sans-serif;
+}
+```
+
+## Использование одного правила или нескольких
+
+Этот раздел относится не только к правилу `font`, но и ко всем обобщённым правилам, которые вы изучите в процессе прохождения курса. С одной стороны, кажется, что использование одного правила сокращает количество строк, которые используются в CSS. Это действительно так, но есть две основные проблемы использования таких свойств:
+
+1. Запоминание правильного порядка значений. Используя обобщённые свойства вам всегда стоит держать в голове верный порядок значений свойств. В этом легко можно ошибиться на первых этапах изучения. Хорошим вариантом будет использование отдельных свойств, но в том порядке, в котором они идут в обобщённом свойстве. С опытом вы сможете переключиться на одно правило
+2. Обобщённые свойства перебивают отдельные. Если в коде вы указали `font-variant: small-caps;`, а потом для этого же элемента применили `font: 16px/24px sans-serif;`, то капитель будет сброшена в значение по умолчанию
diff --git a/modules/20-hypertext/80-font/ru/data.yml b/modules/20-hypertext/80-font/ru/data.yml
new file mode 100644
index 0000000..1ec6d5c
--- /dev/null
+++ b/modules/20-hypertext/80-font/ru/data.yml
@@ -0,0 +1 @@
+name: Обобщённое правило для шрифтов
diff --git a/modules/20-hypertext/85-table/ru/EXERCISE.md b/modules/20-hypertext/85-table/ru/EXERCISE.md
new file mode 100644
index 0000000..525b50a
--- /dev/null
+++ b/modules/20-hypertext/85-table/ru/EXERCISE.md
@@ -0,0 +1 @@
+Создайте таблицу из 3 строк с 2 ячейками в каждой. Первая строка содержит в себе шапку таблицы
diff --git a/modules/20-hypertext/85-table/ru/README.md b/modules/20-hypertext/85-table/ru/README.md
new file mode 100644
index 0000000..bdfe9b8
--- /dev/null
+++ b/modules/20-hypertext/85-table/ru/README.md
@@ -0,0 +1,200 @@
+
+Одна из самых привычных форм подачи информации — таблицы. Мы их встречаем везде: информация о товаре, таблица умножения, документы. Такая подача позволяет легко сравнивать между собой характеристики тех или иных товаров. При вёрстке страниц таблицы используются так же часто, хоть и имеют немного запутанную вёрстку.
+
+Таблица — составной элемент, который формируется сразу из нескольких вложенных друг в друга тегов. Это похоже на то, как верстаются списки — имеется контейнер и внутри него специальные теги-элементы
+
+Разметка содержит в себе несколько основных элементов:
+
+* `<table>` — область таблицы
+  * `<tr>` — строка
+  * `<thead>` — шапка таблицы
+    * `<th>` — ячейка шапки
+  * `<tbody>` — тело таблицы
+    * `<td>` — ячейка
+
+Любая таблица начинается с парного тега `<table>`
+
+```html
+<table>
+  <!-- Здесь будут данные таблицы -->
+</table>
+```
+
+Именно внутри этого тега создаются строки и столбцы таблицы. Теперь можно создать строки и столбцы. Для этого используются теги `<tr>` и `<td>`. Создадим две строки и три ячейки в каждой строке:
+
+```html
+<table>
+  <tr> <!-- Строка -->
+    <td>Шоколад «Тота»</td> <!-- Ячейка -->
+    <td>100 грамм</td>
+    <td>200 рублей</td>
+  </tr>
+
+  <tr> <!-- Строка -->
+    <td>Шоколад «Тота TeamLead»</td> <!-- Ячейка -->
+    <td>100 грамм</td>
+    <td>500 рублей</td>
+  </tr>
+</table>
+```
+
+<div class="hexlet-basics-example my-3">
+  <table class="table-bordered m-0 w-100">
+    <tr> <!-- Строка -->
+      <td>Шоколад «Тота»</td> <!-- Ячейка -->
+      <td>100 грамм</td>
+      <td>200 рублей</td>
+    </tr>
+
+    <tr> <!-- Строка -->
+      <td>Шоколад «Тота TeamLead»</td> <!-- Ячейка -->
+      <td>100 грамм</td>
+      <td>500 рублей</td>
+    </tr>
+  </table>
+</div>
+
+---
+
+**Важно:** Количество ячеек в каждой строке должно быть одинаковым
+
+---
+
+Попробуйте вставить этот код в редактор. Заметьте, что визуально вывод будет отличаться от вывода таблицы в теории этого урока. Дело в том, что, по умолчанию, браузер не проставляет видимые границы для ячеек таблицы. Для этого необходимо использовать CSS — специальный язык стилей. С этим языком и его возможностями вы встретитесь в другом курсе.
+
+Данные выведены, но не хватает заголовков, с помощью которых можно описать каждый столбец. Для создания заголовка таблицы используется тег `<thead>`, а в качестве тега ячейки `<th>`. В остальном структура вёрстки не меняется. Дополним таблицу заголовками:
+
+```html
+<table>
+  <thead> <!-- Шапка таблицы -->
+    <tr>
+      <th>Вкусняшка</th> <!-- Ячейка-заголовок -->
+      <th>Вес</th>
+      <th>Цена</th>
+    </tr>
+  </thead>
+
+  <tr>
+    <td>Шоколад «Тота»</td>
+    <td>100 грамм</td>
+    <td>200 рублей</td>
+  </tr>
+
+  <tr>
+    <td>Шоколад «Тота TeamLead»</td>
+    <td>150 грамм</td>
+    <td>500 рублей</td>
+  </tr>
+</table>
+```
+
+<div class="hexlet-basics-example my-3">
+  <table class="table-bordered m-0">
+    <thead> <!-- Шапка таблицы -->
+      <tr>
+        <th>Вкусняшка</th> <!-- Ячейка-заголовок -->
+        <th>Вес</th>
+        <th>Цена</th>
+      </tr>
+    </thead>
+
+    <tr>
+      <td>Шоколад «Тота»</td>
+      <td>100 грамм</td>
+      <td>200 рублей</td>
+    </tr>
+
+    <tr>
+      <td>Шоколад «Тота TeamLead»</td>
+      <td>150 грамм</td>
+      <td>500 рублей</td>
+    </tr>
+  </table>
+</div>
+
+Последним шагом станет добавление тега `<tbody>`, который размечает основную часть таблицы. Часто разработчики его упускают, потому что браузеры автоматически оборачивают им группу строк, которые не обёрнуты в другие теги. Обратите внимание — тег `<tbody>` чаще всего только один в таблице. В больших таблицах можно использовать несколько `<tbody>`, чтобы отделить разные секции в таблице, но в большинстве случаев в этом нет необходимости.
+
+```html
+<table>
+  <thead>
+    <tr>
+      <th>Вкусняшка</th>
+      <th>Вес</th>
+      <th>Цена</th>
+    </tr>
+  </thead>
+
+  <tbody> <!-- Тело таблицы -->
+    <tr>
+      <td>Шоколад «Тота»</td>
+      <td>100 грамм</td>
+      <td>200 рублей</td>
+    </tr>
+
+    <tr>
+      <td>Шоколад «Тота TeamLead»</td>
+      <td>150 грамм</td>
+      <td>500 рублей</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+Дополнительно можно указать «подвал/footer» таблицы. В нём может находиться суммарная информация, например, стоимость всех товаров.
+
+У таблиц можно настроить заголовок. Он нужен, если одновременно выводится несколько таблиц. Это помогает отделить их друг от друга и не запутаться в том, какая таблица что доносит. Для создания заголовка таблицы используется парный тег `<caption>`. Если заголовок есть, то он _обязательно_ должен располагаться сразу после тега `<table>`. Добавим заголовок в таблицу:
+
+
+```html
+<table>
+  <caption>Ассортимент шоколада «Hexlet»</caption>
+  <thead>
+    <tr>
+      <th>Вкусняшка</th>
+      <th>Вес</th>
+      <th>Цена</th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr>
+      <td>Шоколад «Тота»</td>
+      <td>100 грамм</td>
+      <td>200 рублей</td>
+    </tr>
+
+    <tr>
+      <td>Шоколад «Тота TeamLead»</td>
+      <td>150 грамм</td>
+      <td>500 рублей</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+<div class="hexlet-basics-example my-3">
+  <table class="table-bordered m-0">
+    <caption>Ассортимент шоколада «Hexlet»</caption>
+    <thead>
+      <tr>
+        <th>Вкусняшка</th>
+        <th>Вес</th>
+        <th>Цена</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr>
+        <td>Шоколад «Тота»</td>
+        <td>100 грамм</td>
+        <td>200 рублей</td>
+      </tr>
+
+      <tr>
+        <td>Шоколад «Тота TeamLead»</td>
+        <td>150 грамм</td>
+        <td>500 рублей</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/modules/20-hypertext/85-table/ru/data.yml b/modules/20-hypertext/85-table/ru/data.yml
new file mode 100644
index 0000000..e536dc4
--- /dev/null
+++ b/modules/20-hypertext/85-table/ru/data.yml
@@ -0,0 +1,9 @@
+name: Таблицы
+tips:
+  - Количество ячеек в каждой строке таблицы должно быть одинаковым
+  - >-
+    Заголовок таблицы `caption` _всегда_ располагается сразу после открытия
+    таблицы
+  - >-
+    Браузеры автоматически добавляют тег `<tbody>`, если он отсутствует. В
+    небольших таблицах его можно не указывать
diff --git a/modules/20-hypertext/90-colspan-rowspan/ru/EXERCISE.md b/modules/20-hypertext/90-colspan-rowspan/ru/EXERCISE.md
new file mode 100644
index 0000000..a346bb7
--- /dev/null
+++ b/modules/20-hypertext/90-colspan-rowspan/ru/EXERCISE.md
@@ -0,0 +1 @@
+Создайте таблицу, состоящую из двух строк и трёх столбцов. Во второй строке объедините первые две ячейки, используя атрибуты. Первая строка должна быть шапкой таблицы
diff --git a/modules/20-hypertext/90-colspan-rowspan/ru/README.md b/modules/20-hypertext/90-colspan-rowspan/ru/README.md
new file mode 100644
index 0000000..feea8bf
--- /dev/null
+++ b/modules/20-hypertext/90-colspan-rowspan/ru/README.md
@@ -0,0 +1,127 @@
+
+В таблицах часто нужно объединять строки или столбцы. Это помогает объединить различную информацию. Например, если в складской таблице нет товара, то нет смысла постоянно дублировать информацию — её можно объединить и написать, что товара нет на складе:
+
+<div class="hexlet-basics-example my-3">
+  <table class="table-bordered m-0">
+    <thead>
+      <tr>
+        <th>Товар</th>
+        <th>Цена</th>
+        <th>Количество</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Чай</td>
+        <td colspan="2">Нет на складе</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+В HTML-разметке объединить ячейки в столбцах или строках можно с помощью специальных атрибутов `colspan` и `rowspan`. Их значениями является количество ячеек справа (для `colspan`) или снизу (для `rowspan`), которые нужно объединить с текущей. Отсчёт начинается с текущей ячейки, к которой применено свойство. Например, если стоит значение `colspan="2"`, то будет объединена текущая ячейка с соседней.
+
+Разметка для примера выше без учёта объединения ячеек будет следующей:
+
+```html
+<table>
+  <thead>
+    <tr>
+      <th>Товар</th>
+      <th>Цена</th>
+      <th>Количество</th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr>
+      <td>Чай</td>
+      <td>Нет на складе</td> <!-- ячейка, которую хотим объединить -->
+      <td></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+
+Для того чтобы объединить ячейки, нужно сделать два действия:
+1. В тег ячейки, которую будем объединять, добавить атрибут `colspan` со значением, равным количеству объединяемых ячеек справа
+2. Удалить лишние ячейки из строки
+
+
+```html
+<table>
+  <thead>
+    <tr>
+      <th>Товар</th>
+      <th>Цена</th>
+      <th>Количество</th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr>
+      <td>Чай</td>
+      <td colspan="2">Нет на складе</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+Для объединения ячеек по вертикали используется атрибут `rowspan`. Алгоритм действий повторяет аналогичный при объединении по горизонтали. Единственное отличие — удалять ячейки нужно в соседних строках:
+
+```html
+<table>
+  <thead>
+    <tr>
+      <th>Сотрудник</th>
+      <th>Зарплата</th>
+      <th>Бонусы</th>
+      <th>Менеджер</th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr>
+      <td>Алексей Примадонин</td>
+      <td>750$</td>
+      <td>63$</td>
+      <td rowspan="2">Кодовёнок Хекслетович</td>
+    </tr>
+    <tr>
+      <td>Вениамин Редакторович</td>
+      <td>1200$</td>
+      <td>0</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+В примере двое сотрудников взаимодействуют с одним менеджером. Можно указать его дважды, но нагляднее объединить ячейки по вертикали. Для этого был добавлен атрибут `rowspan="2"`, а во второй строке удалена четвёртая ячейка, так как её место займёт ячейка выше
+
+<div class="hexlet-basics-example my-3">
+  <table class="table-bordered m-0">
+    <thead>
+      <tr>
+        <th>Сотрудник</th>
+        <th>Зарплата</th>
+        <th>Бонусы</th>
+        <th>Менеджер</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr>
+        <td>Алексей Примадонин</td>
+        <td>750$</td>
+        <td>63$</td>
+        <td rowspan="2">Кодовёнок Хекслетович</td>
+      </tr>
+      <tr>
+        <td>Вениамин Редакторович</td>
+        <td>1200$</td>
+        <td>0</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/modules/20-hypertext/90-colspan-rowspan/ru/data.yml b/modules/20-hypertext/90-colspan-rowspan/ru/data.yml
new file mode 100644
index 0000000..e137f28
--- /dev/null
+++ b/modules/20-hypertext/90-colspan-rowspan/ru/data.yml
@@ -0,0 +1,12 @@
+name: Объединение ячеек внутри строк и столбцов
+tips:
+  - >-
+    Количество ячеек в каждой строке таблицы должно быть одинаковым после
+    объединения. Важно различать количество тегов `<td>` и общее количество
+    ячеек. Например, использовав на ячейке атрибут `colspan="2"` вы получите две
+    логические ячейки, только они будут объединены. По этой причине необходимо
+    убрать одну физическую ячейку из разметки для компенсации
+  - >-
+    Если используется атрибут `colspan`, то из HTML нужно удалить ячейки в той
+    же строке. Если используется атрибут `rowspan`, то удаляются ячейки в
+    строках ниже
diff --git a/modules/20-hypertext/95-special-characters/ru/EXERCISE.md b/modules/20-hypertext/95-special-characters/ru/EXERCISE.md
new file mode 100644
index 0000000..729c52a
--- /dev/null
+++ b/modules/20-hypertext/95-special-characters/ru/EXERCISE.md
@@ -0,0 +1 @@
+Запишите в редакторе символ простой дроби «одна четвёртая». Найти мнемонику этого символа можно на [«Википедии»](https://ru.wikipedia.org/wiki/Мнемоники_в_HTML)
diff --git a/modules/20-hypertext/95-special-characters/ru/README.md b/modules/20-hypertext/95-special-characters/ru/README.md
new file mode 100644
index 0000000..c7100c7
--- /dev/null
+++ b/modules/20-hypertext/95-special-characters/ru/README.md
@@ -0,0 +1,28 @@
+В тексте возможно использование специальных символов — мнемоник. Они позволяют использовать знаки, которые присутствуют в таблице символов, но отсутствуют на клавиатуре, например, математические или греческие:
+
+<div class="hexlet-basics-example">&xi; &pi; &upsih;</div>
+
+Для записи этих символов используется конструкция `&название-символа;` Важно соблюдать регистр букв в названии символа.
+
+Для примера возьмём символы мастей у карт:
+
+|Символ|Код|
+|--------|---------|
+|&clubs; |`&clubs;`|
+|&spades; |`&spades;`|
+|&hearts; |`&hearts;`|
+|&diams; |`&diams;`|
+
+Со многими из этих символов можно ознакомиться на [«Википедии»](https://ru.wikipedia.org/wiki/Мнемоники_в_HTML).
+
+Основными типографическими мнемониками в HTML являются:
+
+* `&nbsp;` — неразрывный пробел. Очень важная вещь, которая позволяет не переносить строку с пробелом там, где это может испортить логическую структуру текста
+* `&laquo;` и `&raquo;` — традиционные «кавычки-ёлочки». Повсеместно используются в типографике
+* `&mdash;` — длинное тире
+
+Мнемоники распространены, когда необходимо вставить теги без их обработки браузером. В таком случае можно воспользоваться мнемониками `&lt;` и `&gt;`, которые нужны для обозначения **<** и **>** соответственно:
+
+```html
+&lt;p&gt; такая разметка не будет обработана как параграф &lt;/p&gt;
+```
diff --git a/modules/20-hypertext/95-special-characters/ru/data.yml b/modules/20-hypertext/95-special-characters/ru/data.yml
new file mode 100644
index 0000000..37c1969
--- /dev/null
+++ b/modules/20-hypertext/95-special-characters/ru/data.yml
@@ -0,0 +1 @@
+name: Специальные символы HTML
diff --git a/modules/20-hypertext/96-pre/ru/EXERCISE.md b/modules/20-hypertext/96-pre/ru/EXERCISE.md
new file mode 100644
index 0000000..64222ab
--- /dev/null
+++ b/modules/20-hypertext/96-pre/ru/EXERCISE.md
@@ -0,0 +1 @@
+Добавьте любой текст в тег `<pre>` и вставьте его в редактор. Попробуйте различные варианты текстов.
diff --git a/modules/20-hypertext/96-pre/ru/README.md b/modules/20-hypertext/96-pre/ru/README.md
new file mode 100644
index 0000000..9b02e35
--- /dev/null
+++ b/modules/20-hypertext/96-pre/ru/README.md
@@ -0,0 +1,45 @@
+
+Иногда возникает потребность вставить текст, сохраняя его оригинальное форматирование. Взглянем на знаменитую «лесенку Маяковского» из стихотворения «Сергею Есенину».
+
+<div class="hexlet-basics-example">
+    <pre>
+    Вы ушли,
+            как говорится,
+                          в мир в иной.
+    Пустота...
+            Летите,
+                  в звезды врезываясь.
+    Ни тебе аванса,
+                  ни пивной.
+    Трезвость.
+    </pre>
+</div>
+
+
+Владимир Маяковский считал, что именно в таком виде лучше всего оформляется ритм стиха.
+
+Оформить такой текст с помощью спецсимволов в HTML очень сложно. Придётся «жонглировать» пробельными спецсимволами. Из-за этого такую разметку будет очень сложно поддерживать в будущем:
+
+```html
+<p>Вы ушли,</p>
+<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;как говорится,</p>
+<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;в мир в иной.</p>
+```
+
+Для решения этой проблемы существует специальный тег `<pre>`, задача которого — вывести текст внутри себя с сохранением всех пробельных символов. По умолчанию тег `<pre>` выводит текст моноширинным шрифтом, в котором все символы имеют одинаковую ширину, в отличие от обычных шрифтов.
+
+```html
+<pre>
+Вы ушли,
+        как говорится,
+                      в мир в иной.
+Пустота...
+        Летите,
+              в звезды врезываясь.
+Ни тебе аванса,
+              ни пивной.
+Трезвость.
+</pre>
+```
+
+Внутри тега `pre` можно использовать теги для оформления текста: `<i>`, `<em>`, `<b>`, `<strong>`.
diff --git a/modules/20-hypertext/96-pre/ru/data.yml b/modules/20-hypertext/96-pre/ru/data.yml
new file mode 100644
index 0000000..e7e1874
--- /dev/null
+++ b/modules/20-hypertext/96-pre/ru/data.yml
@@ -0,0 +1 @@
+name: Форматированный текст
diff --git a/modules/20-hypertext/97-code/ru/EXERCISE.md b/modules/20-hypertext/97-code/ru/EXERCISE.md
new file mode 100644
index 0000000..775ecde
--- /dev/null
+++ b/modules/20-hypertext/97-code/ru/EXERCISE.md
@@ -0,0 +1 @@
+Добавьте любой текст в тег `<code>` и вставьте его в редактор. Попробуйте различные варианты текстов
diff --git a/modules/20-hypertext/97-code/ru/README.md b/modules/20-hypertext/97-code/ru/README.md
new file mode 100644
index 0000000..298883a
--- /dev/null
+++ b/modules/20-hypertext/97-code/ru/README.md
@@ -0,0 +1,25 @@
+
+При ведении учебных блогов по программированию, либо при написании статей, возникает необходимость продемонстрировать код. В каждом уроке на Code Basics есть такие блоки:
+
+```html
+<p>Здесь видно разметку</p>
+```
+
+Для создания блока с кодом используется тег `<code>`, внутри которого записывается код на любом языке программирования.
+
+```javascript
+// Пример кода на JavaScript
+const square = (num) => {
+  return num * num;
+};
+```
+
+Тег `<code>` часто используют вместе с тегом `<pre>`, что позволяет сохранить форматирование. Если тег `<pre>` не используется, то переносы строк нужно контролировать самостоятельно, например, оборачивая каждую строку в тег `<p>`.
+
+Важно, что все теги внутри `<code>` будут обработаны браузером, по этой причине внутри используются специальные символы. Также частое решение — оборачивание названия тега в отдельный тег, например `<span>`:
+
+```html
+<code>
+  &lt;<span>p</span>&gt;Вставляем тег p в виде простого текста &lt;<span>/p</span>&gt;
+</code>
+```
diff --git a/modules/20-hypertext/97-code/ru/data.yml b/modules/20-hypertext/97-code/ru/data.yml
new file mode 100644
index 0000000..cdf9d28
--- /dev/null
+++ b/modules/20-hypertext/97-code/ru/data.yml
@@ -0,0 +1 @@
+name: Вставка компьютерного кода в HTML
diff --git a/modules/20-hypertext/98-conclusion/ru/EXERCISE.md b/modules/20-hypertext/98-conclusion/ru/EXERCISE.md
new file mode 100644
index 0000000..c43e1c6
--- /dev/null
+++ b/modules/20-hypertext/98-conclusion/ru/EXERCISE.md
@@ -0,0 +1 @@
+Попробуйте применить различные правила типографики в редакторе. Задания в этом уроке нет :) Можете нажимать кнопку проверить
diff --git a/modules/20-hypertext/98-conclusion/ru/README.md b/modules/20-hypertext/98-conclusion/ru/README.md
new file mode 100644
index 0000000..5bec815
--- /dev/null
+++ b/modules/20-hypertext/98-conclusion/ru/README.md
@@ -0,0 +1,27 @@
+После рассмотрения большинства правил работы с текстом, может возникнуть вопрос: «Как правильно их применять?». Этот вопрос обширен и претендует на отдельный курс.
+
+Типографика помогает комфортному чтению, а также в дизайне. Хороший дизайн может быть испорчен плохой типографикой.
+
+В этом уроке будет описано несколько базовых правил, используя которые можно сделать страницы удобными для чтения.
+
+## Используйте стандартные шрифты
+
+  Лучший выбор при использовании шрифтов — стандартные шрифты. Например _Arial_, _Verdana_, _Tahoma_, _Times New Roman_ и так далее. Большинство из этих шрифтов уже есть в компьютере пользователей, они привычны и легко читаются.
+
+  Избегайте причудливых шрифтов (например _Comic Sans_). При всей их «весёлости», трудно читать большие тексты, написанные с использованием таких шрифтов.
+
+## Используйте не больше двух шрифтов на странице
+
+  Это поможет пользователю быстрее ориентироваться на странице. Стандартным случаем является использование одного шрифта для заголовков и другого для текста.
+
+## Используйте достаточный размер шрифта
+
+  Это понятие двойственное, но не следует использовать основной текст со шрифтом меньше 14 пикселей. Если размер шрифта будет меньше, то чтение с мобильных устройств будет пыткой.
+
+## Используйте достаточный межстрочный интервал
+
+  Самым распространённым межстрочным интервалом является значение в 150% от размера шрифта. Если текст размером 14 пикселей, то межстрочный интервал желательно установить не менее 21 пикселя.
+
+## Выравнивайте текст по левому краю
+
+  Не стоит писать весь текст с выравниванием по центру или правому краю. При чтении таких текстов глаза устают намного быстрее, так как глаз теряет точку опоры, откуда начинается текст. Используйте нестандартное выравнивание только для небольших участков текста (например, заголовки или цитаты).
diff --git a/modules/20-hypertext/98-conclusion/ru/data.yml b/modules/20-hypertext/98-conclusion/ru/data.yml
new file mode 100644
index 0000000..0f426c5
--- /dev/null
+++ b/modules/20-hypertext/98-conclusion/ru/data.yml
@@ -0,0 +1 @@
+name: Базовые правила типографики
diff --git a/modules/25-media/10-img/ru/EXERCISE.md b/modules/25-media/10-img/ru/EXERCISE.md
new file mode 100644
index 0000000..b5d383d
--- /dev/null
+++ b/modules/25-media/10-img/ru/EXERCISE.md
@@ -0,0 +1 @@
+Вставьте в редактор картинку по адресу https://www.w3.org/2008/site/images/logo-w3c-screen-lg.png и текстом **W3C** для случаев, если картинка недоступна
diff --git a/modules/25-media/10-img/ru/README.md b/modules/25-media/10-img/ru/README.md
new file mode 100644
index 0000000..2a71e12
--- /dev/null
+++ b/modules/25-media/10-img/ru/README.md
@@ -0,0 +1,38 @@
+
+Для лучшего восприятия текста на странице используют изображения. Они помогают ориентироваться в тексте, разбивать его на составные части, а также создают настроение у читателя.
+
+Картинки на странице не существуют сами по себе. Предварительно они должны быть загружены в директорию на сервере или на специальный хостинг картинок. Для вставки картинки на страницу используется непарный тег `<img>`, у которого два обязательных атрибута: `src` и `alt`.
+
+## Атрибут src
+
+В атрибуте `src` указывается путь к изображению. Это тоже ссылка, как и в теге `<a>`, только теперь не происходит перенаправление пользователя, а браузер загружает изображение по этому пути, если оно существует. Путь к картинке может быть как _относительный_, так и _абсолютный_.
+
+```html
+<img src="/images.png">
+```
+
+## Атрибут alt
+
+Что делать, если картинка в данный момент недоступна? В этом случае браузеры показывают маленькую картинку, обозначающую, что изображение недоступно.
+
+Но как пользователь поймёт, что здесь было? Может изображение критически важное для статьи, и без него теряется смысл написанного? Можно посоветовать пользователю зайти попозже, когда изображение будет доступно, а можно описать ему, что было изображено.
+
+Для этого используется атрибут `alt`, значением которого является текст. Он будет показан при невозможности загрузить изображение
+
+```html
+<img src="https://example.com/images.png" alt="Аналитика компании за 2007 год">
+```
+
+Помимо функции «рассказать то, что не удалось показать» атрибут `alt` выполняет важнейшую роль для людей, которые пользуются скринридерами — программами для чтения информации с экрана. Так как изображение невозможно прочитать, то программы читают то, что было указано в атрибуте `alt`
+
+## Размеры изображения
+
+Важной составляющей при работе с изображениями являются его размеры. При скачивании картинки со стороннего ресурса и её вставки на страницу, часто возникает ситуация, что изображение очень большое, и его нужно уменьшить. Для этого существуют атрибуты `width` и `height`, которые позволяют установить ширину и высоту для картинки.
+
+```html
+<img src="https://example.com/images.png" alt="Аналитика компании за 2007 год" width="320" height="240">
+```
+
+Картинка будет отображена в размере 320x240 пикселей.
+
+Важно помнить, что использование атрибутов `width` и `height` не меняет физический размер картинки — она будет весить столько же, изменится только визуальный размер. Для оптимизации страницы подбирайте картинки нужного размера или уменьшайте их с помощью графического редактора, либо специальных сервисов. Сейчас многие пользуются мобильными телефонами и мобильным интернетом, поэтому вес страницы имеет важное значение
diff --git a/modules/25-media/10-img/ru/data.yml b/modules/25-media/10-img/ru/data.yml
new file mode 100644
index 0000000..a48f6c9
--- /dev/null
+++ b/modules/25-media/10-img/ru/data.yml
@@ -0,0 +1 @@
+name: Изображения
diff --git a/modules/25-media/20-audio/ru/EXERCISE.md b/modules/25-media/20-audio/ru/EXERCISE.md
new file mode 100644
index 0000000..b3ef521
--- /dev/null
+++ b/modules/25-media/20-audio/ru/EXERCISE.md
@@ -0,0 +1,6 @@
+Добавьте аудио на страницу. Используйте следующие аудио файлы:
+
+* https://www.w3schools.com/html/horse.ogg
+* https://www.w3schools.com/html/horse.mp3
+
+На всякий случай сделайте звук потише ;)
diff --git a/modules/25-media/20-audio/ru/README.md b/modules/25-media/20-audio/ru/README.md
new file mode 100644
index 0000000..4ee3166
--- /dev/null
+++ b/modules/25-media/20-audio/ru/README.md
@@ -0,0 +1,21 @@
+
+Ранее, для добавления аудио на HTML-страницу, необходимо было пользоваться специальными «расширениями», которые давали возможность встраивать на страницу аудио-плеер. Начиная со стандарта HTML5, данная возможность есть по умолчанию. Она реализуется с помощью тега `<audio>`.
+
+Данный тег является парным и в самом простом случае выглядит так:
+
+```html
+<audio src="путь_к_аудио-файлу" controls></audio>
+```
+
+Атрибут `controls` добавляет элементы интерфейса для плеера. Каждый браузер реализует их по-своему, и единого стандарта на этот счёт нет
+
+## Тег `<source>`
+
+При добавлении аудио на HTML-страницу важно помнить, что не все браузеры поддерживают одни и те же форматы аудио. Специально для этого существует вложенный тег `source`, в котором указываются пути на другие форматы аудио файлов. В таком случае браузер выберет тот, который поддерживается в настоящий момент. При такой разметке указывать `src` у тега `<audio>` необязательно.
+
+```html
+<audio controls>
+  <source src="https://example.com/audio.mp3">
+  <source src="https://example.com/audio.ogg">
+</audio>
+```
diff --git a/modules/25-media/20-audio/ru/data.yml b/modules/25-media/20-audio/ru/data.yml
new file mode 100644
index 0000000..e4c345f
--- /dev/null
+++ b/modules/25-media/20-audio/ru/data.yml
@@ -0,0 +1,5 @@
+name: Аудио
+tips:
+  - >-
+    Если используется один файл, то достаточно его указать в атрибуте `src`.
+    Если файлов несколько, то используйте теги `<source>`
diff --git a/modules/25-media/30-video/ru/EXERCISE.md b/modules/25-media/30-video/ru/EXERCISE.md
new file mode 100644
index 0000000..1500862
--- /dev/null
+++ b/modules/25-media/30-video/ru/EXERCISE.md
@@ -0,0 +1,9 @@
+Добавьте видео в формате mp4 на страницу:
+
+* Ссылка на видео: https://www.w3schools.com/html/movie.mp4
+* У видеоплеера должны быть элементы управления
+* Высота плеера: 240
+* Ширина плеера: 320
+* Путь к файлу укажите в теге `<video>`
+
+На всякий случай сделайте звук потише, в видео есть звук ;)
diff --git a/modules/25-media/30-video/ru/README.md b/modules/25-media/30-video/ru/README.md
new file mode 100644
index 0000000..f340cdc
--- /dev/null
+++ b/modules/25-media/30-video/ru/README.md
@@ -0,0 +1,37 @@
+
+Как и с аудио, ещё недавно в HTML-разметку нельзя было «комфортно» вставить видео-файл. Начиная с HTML5 появился элемент `<video>`, который, как и `<audio>`, позволяет быстро добавить необходимое видео на страницу.
+
+Тег `<video>` парный, в котором, при отсутствии вложенных тегов `<source>`, указывается путь к видео-файлу в атрибуте `src`. С помощью атрибута `controls` можно вывести элементы управления для проигрывателя. Визуальное оформление управляющих элементов зависит от конкретного браузера.
+
+```html
+<video src="https://example.com/our-video.mp4" controls></video>
+```
+
+С помощью специальных тегов `<source>` возможно добавлять несколько форматов видео. Это необходимо по причине того, что каждый браузер умеет воспроизводить только определённые форматы видео. Единственный формат, который корректно обрабатывают все браузеры — `mp4`.
+
+```html
+<video controls>
+    <source src="https://example.com/our-video.mp4" type="video/mp4">
+    <source src="https://example.com/our-video.webm" type="video/webm">
+    <source src="https://example.com/our-video.ogg" type="video/ogg">
+</video>
+```
+
+Наличие трёх форматов файлов гарантирует работоспособность видео на любых устройствах. Также обязательным является наличие атрибута `type`, который сообщит браузеру формат видео. Именно по этому атрибуту браузер примет решение, какой файл необходимо загрузить.
+
+Тег `<video>` имеет несколько важных атрибутов:
+
+* `controls` — Добавляет элементы управления для видеоплеера
+* `autoplay` — Автоматическое воспроизведение после загрузки видео
+* `width` — Ширина видеоплеера
+* `height` — Высота видеоплеера
+
+Атрибуты `width` и `height` принимают значения в пикселях, при этом указывать единицу измерения не нужно.
+
+```html
+<video width="500" height="500" controls>
+    <source src="https://example.com/our-video.mp4" type="video/mp4">
+    <source src="https://example.com/our-video.webm" type="video/webm">
+    <source src="https://example.com/our-video.ogg" type="video/ogg">
+</video>
+```
diff --git a/modules/25-media/30-video/ru/data.yml b/modules/25-media/30-video/ru/data.yml
new file mode 100644
index 0000000..b74aeee
--- /dev/null
+++ b/modules/25-media/30-video/ru/data.yml
@@ -0,0 +1,8 @@
+name: Видео
+tips:
+  - >-
+    Если используется один файл, то достаточно добавить атрибут `src` для тега
+    `<video>`. В остальных случаях используйте теги `<source>`
+  - >-
+    Формат `mp4` корректно обрабатывается большинством браузеров. По возможности
+    используйте именно его
diff --git a/modules/30-box/10-block/ru/EXERCISE.md b/modules/30-box/10-block/ru/EXERCISE.md
new file mode 100644
index 0000000..09aa9af
--- /dev/null
+++ b/modules/30-box/10-block/ru/EXERCISE.md
@@ -0,0 +1 @@
+Добавьте два тега `<span>` с текстом внутри. Посмотрите, как они будут расположены
diff --git a/modules/30-box/10-block/ru/README.md b/modules/30-box/10-block/ru/README.md
new file mode 100644
index 0000000..65c5dd5
--- /dev/null
+++ b/modules/30-box/10-block/ru/README.md
@@ -0,0 +1,19 @@
+
+Познакомившись со многими HTML-элементами можно заметить, что их поведение не всегда одинаковое — некоторые элементы (параграфы, списки, `<pre>`, `<div>`, заголовки, таблицы) всегда начинаются с новой строки. Они занимают всю ширину экрана. Такие элементы называются **блочными**. Они являются основой вёрстки HTML, так как напрямую воздействуют на то, как будут расположены элементы рядом с ними на странице.
+
+Помимо блочных элементов существуют **строчные элементы**. К ним относятся ссылки (`<a>`), теги начертания текста (`<b>`, `<strong>`, `<i>`, `<em>`), картинки, `<span>`. Они не влияют на расположение соседних элементов и предназначены для придания смысловой нагрузки. В отличие от блочных элементов, строчные занимают не всю ширину экрана, а лишь то пространство, которое им необходимо
+
+```html
+<p>Параграф является блочным элементом.</p>
+<p>Он занимает всё пространство по ширине, поэтому каждый параграф начинается с новой строки.</p>
+
+<span>Span является строчным элементом.</span>
+<span>Он занимает ширину, равную ширине своего контента, поэтому переноса строки нет</span>
+```
+
+<div class="hexlet-basics-example my-3">
+  <p>Параграф является блочным элементом.</p>
+  <p>Он занимает всё пространство по ширине, поэтому каждый параграф начинается с новой строки.</p>
+  <span>Span является строчным элементом.</span>
+  <span>Он занимает ширину, равную ширине своего контента, поэтому переноса строки нет</span>
+</div>
diff --git a/modules/30-box/10-block/ru/data.yml b/modules/30-box/10-block/ru/data.yml
new file mode 100644
index 0000000..7e7c27b
--- /dev/null
+++ b/modules/30-box/10-block/ru/data.yml
@@ -0,0 +1,11 @@
+name: Блочные и строчные элементы
+tips:
+  - >-
+    Строчные элементы часто используют для стилизации. Например, тег `<span>`
+    используют для оборачивания участка текста. Потом этот участок стилизуют с
+    помощью CSS
+  - >-
+    В большинстве случаев строчные элементы можно помещать внутрь блочных, а
+    блочные нельзя помещать внутрь строчных. Исключение — ссылки. Внутрь ссылки
+    можно помещать блочные элементы. Такое использование разрешили в стандарте
+    HTML5
diff --git a/modules/30-box/20-height-and-width/ru/EXERCISE.md b/modules/30-box/20-height-and-width/ru/EXERCISE.md
new file mode 100644
index 0000000..736d1e0
--- /dev/null
+++ b/modules/30-box/20-height-and-width/ru/EXERCISE.md
@@ -0,0 +1,7 @@
+Добавьте в редактор `<div>` с классом `rectangle`. Установите свойства:
+
+* Ширина: 300px
+* Высота 100px
+* Цвет фона: `#000`
+
+Стили запишите в теге `<style>`
diff --git a/modules/30-box/20-height-and-width/ru/README.md b/modules/30-box/20-height-and-width/ru/README.md
new file mode 100644
index 0000000..8a44703
--- /dev/null
+++ b/modules/30-box/20-height-and-width/ru/README.md
@@ -0,0 +1,21 @@
+При создании страниц часто возникает желание управлять высотой и шириной блоков. Это удобно в длинных статьях, когда требуется сделать поясняющий текст в небольшом блоке. Так он будет отделяться от основной части текста, и его сразу можно увидеть.
+
+Для управления высотой и шириной блочных элементов используются правила `width` и `height`, принимающие значения ширины и высоты соответственно (например, в пикселях или других доступных единицах измерения).
+
+Создадим блок высотой 100 пикселей и шириной 100 пикселей. Чтобы визуально отделить его от теории в уроке, установим чёрный цвет фона:
+
+```html
+<style>
+  .square {
+    width: 100px;
+    height: 100px;
+    background-color: #000;
+  }
+</style>
+
+<div class="square"></div>
+```
+
+<div class="hexlet-basics-example my-3">
+  <div style="width: 100px; height: 100px; background-color: #000;"></div>
+</div>
diff --git a/modules/30-box/20-height-and-width/ru/data.yml b/modules/30-box/20-height-and-width/ru/data.yml
new file mode 100644
index 0000000..08fcff3
--- /dev/null
+++ b/modules/30-box/20-height-and-width/ru/data.yml
@@ -0,0 +1 @@
+name: Высота и ширина блока
diff --git a/modules/30-box/30-border-style/ru/EXERCISE.md b/modules/30-box/30-border-style/ru/EXERCISE.md
new file mode 100644
index 0000000..dd3d14c
--- /dev/null
+++ b/modules/30-box/30-border-style/ru/EXERCISE.md
@@ -0,0 +1 @@
+Добавьте в редактор `<div>` с классом `border-bold` и установите сплошную границу толщиной 5 пикселей. Цвет рамки `#2196F3`. Стили запишите в теге `<style>`
diff --git a/modules/30-box/30-border-style/ru/README.md b/modules/30-box/30-border-style/ru/README.md
new file mode 100644
index 0000000..79fec08
--- /dev/null
+++ b/modules/30-box/30-border-style/ru/README.md
@@ -0,0 +1,63 @@
+
+Любой блочный элемент в HTML можно выделять с помощью рамок. Такой стилистический приём позволяет удобно отделить однотонные компоненты друг от друга, или выделить ключевой элемент на странице
+
+<div class="hexlet-basics-example my-3">
+  <p class="m-0">Этот текст находится в рамке, поэтому его легко найти с первого взгляда на страницу</p>
+</div>
+
+Для создания границы у элемента используется свойство `border`, которое является сокращением от нескольких свойств:
+
+* `border-width` — ширина границы
+* `border-style` — стиль границы
+* `border-color` — цвет границы
+
+Можно указывать несколько свойств, а можно всё объединить в рамках свойства `border`. Такой вариант встречается чаще всего и выглядит он так:
+
+```css
+.element {
+  border: 1px solid #ccc;
+}
+```
+
+где:
+
+* `1px` — ширина границы
+* `solid` — стиль границы
+* `#ccc` — цвет границы
+
+Со значениями в пикселях и hex-цветом мы уже сталкивались в рамках курса, а вот стилей границ в CSS восемь:
+
+* `dotted`
+* `dashed`
+* `solid`
+* `double`
+* `groove`
+* `ridge`
+* `inset`
+* `outset`
+
+и есть значение `none`, которое «удалит» границу, так как при значении `border-style: none` браузеры игнорируют другие свойства и удаляют границу
+
+## Примеры границ
+
+<div style="border: 3px solid #000; margin-bottom: 10px;" class="p-2">
+  solid (сплошная)
+</div>
+<div style="border: 3px dotted #000; margin-bottom: 10px;" class="p-2">
+  dotted (пунктирная)
+</div>
+<div style="border: 3px dashed #000; margin-bottom: 10px;" class="p-2">
+  dashed (штриховая)
+</div>
+
+```html
+<style>
+  .border-dotted {
+    border: 1px dotted #000;
+  }
+</style>
+
+<div class="border-dotted">
+  Блок с пунктирной рамкой и чёрным цветом
+</div>
+```
diff --git a/modules/30-box/30-border-style/ru/data.yml b/modules/30-box/30-border-style/ru/data.yml
new file mode 100644
index 0000000..bc320f5
--- /dev/null
+++ b/modules/30-box/30-border-style/ru/data.yml
@@ -0,0 +1,3 @@
+name: Рамки
+tips:
+  - Попробуйте разные стили границ в редакторе
diff --git a/modules/30-box/40-padding/ru/EXERCISE.md b/modules/30-box/40-padding/ru/EXERCISE.md
new file mode 100644
index 0000000..17164c6
--- /dev/null
+++ b/modules/30-box/40-padding/ru/EXERCISE.md
@@ -0,0 +1,17 @@
+Добавьте в редактор параграф с классом `padding` и установите внутренние отступы:
+
+* 10 пикселей сверху
+* 15 пикселей снизу
+* 20 пикселей слева и справа
+
+Используйте следующий текст для параграфа:
+
+<div class="hexlet-basics-example my-3">
+  <p class="m-0">Что делает верстальщик? Создаёт страницы с помощью HTML и CSS. Умеет пользоваться возможностями модулей Flex и Grid. Использует препроцессор SASS, шаблонизатор Pug и собирает проекты с помощью Gulp. Следит за доступностью сайта, создавая семантически правильную разметку. Создаёт компоненты и утилиты на Bootstrap. Верстает адаптивные проекты</p>
+</div>
+
+Сам текст не имеет значения и не проверяется. Основная цель — добавить текст, который будет расположен в несколько строк. Это поможет корректно увидеть левые и правые отступы.
+
+Добавьте черный фон к параграфу и белый цвет текста. Попробуйте различные значения свойства `padding` для того, чтобы увидеть как это влияет на блок.
+
+Стили запишите в теге `<style>`
diff --git a/modules/30-box/40-padding/ru/README.md b/modules/30-box/40-padding/ru/README.md
new file mode 100644
index 0000000..6924181
--- /dev/null
+++ b/modules/30-box/40-padding/ru/README.md
@@ -0,0 +1,62 @@
+
+Рассматривая различные блоки, которые были созданы на протяжении всех уроков можно заметить, что текст «прилипает» к краям блоков. Например:
+
+<div class="hexlet-basics-example my-3 p-0" style="background-color: #673ab7;color: #fff;padding: 0!important;">
+  Карточка с белым текстом на фиолетовом фоне
+</div>
+
+Вы можете сказать, что в самих уроках примеры обычно выглядят не так и будете правы. В каждом примере, чтобы добавить «воздуха» использовались внутренние отступы от краёв блока.
+
+Для создания внутренних отступов используется 4 правила:
+
+* `padding-top` — внутренний отступ сверху
+* `padding-right` — внутренний отступ справа
+* `padding-bottom` — внутренний отступ снизу
+* `padding-left` — внутренний отступ слева
+
+Каждое свойство принимает числовое значение и единицу измерения, например пиксели
+
+```html
+<div class="card">Карточка с белым текстом на фиолетовом фоне</div>
+```
+
+```css
+.card {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 20px;
+
+  color: #ffffff;
+  background-color: #673ab7;
+}
+```
+
+<div class="hexlet-basics-example my-3" style="background-color: #673ab7;color: #fff;padding: 10px 0 10px 20px!important;">
+  Карточка с белым текстом на фиолетовом фоне
+</div>
+
+## Сокращённое свойство
+
+Если нужно установить отступы по всем сторонам, то используют не 4 разных свойства, а одно — `padding`. Оно является сокращением от уже известных свойств и позволяет установить:
+
+* отступ сверху
+* отступ справа
+* отступ снизу
+* отступ слева
+
+Порядок указания важен и соответствует тому, как он указан выше. Если переработать пример выше, то он будет выглядеть так:
+
+```css
+.card {
+  padding: 10px 0 10px 20px;
+
+  color: #ffffff;
+  background-color: #673ab7;
+}
+```
+
+Помимо такой записи для удобства существуют сокращённые записи этих правил:
+
+* Если указать только одно значение, то оно будет использовано одновременно для всех сторон
+* Если указать два значения, то первое будет использоваться для отступов по вертикали (сверху и снизу), а второе по горизонтали (справа и слева)
+* Если указать три значения, то они будут использоваться для отступа сверху, по горизонтали и снизу
diff --git a/modules/30-box/40-padding/ru/data.yml b/modules/30-box/40-padding/ru/data.yml
new file mode 100644
index 0000000..395e497
--- /dev/null
+++ b/modules/30-box/40-padding/ru/data.yml
@@ -0,0 +1 @@
+name: Внутренние отступы
diff --git a/modules/30-box/50-margin/ru/EXERCISE.md b/modules/30-box/50-margin/ru/EXERCISE.md
new file mode 100644
index 0000000..790dc03
--- /dev/null
+++ b/modules/30-box/50-margin/ru/EXERCISE.md
@@ -0,0 +1 @@
+Добавьте в редактор `<div>` с классом `margin` и установите внешние отступы в 20 пикселей со всех сторон. Стили запишите в теге `<style>`. Используйте сокращённую запись
diff --git a/modules/30-box/50-margin/ru/README.md b/modules/30-box/50-margin/ru/README.md
new file mode 100644
index 0000000..2486cb3
--- /dev/null
+++ b/modules/30-box/50-margin/ru/README.md
@@ -0,0 +1,50 @@
+
+Внутренние отступы позволяли добавить «воздуха» в блок и дать пространство между границей блока и его контентом. А как не дать двум соседним блокам прижиматься друг к другу?
+
+<div class="hexlet-basics-example mt-3" style="background-color: #673ab7;color: #fff;padding: 10px 0 10px 20px!important;border:0!important;">
+  Карточка с белым текстом на фиолетовом фоне
+</div>
+<div class="hexlet-basics-example mb-3" style="background-color: #673ab7;color: #fff;padding: 10px 0 10px 20px!important;border:0!important;">
+  Карточка с белым текстом на фиолетовом фоне
+</div>
+
+Чтобы отделить две карточки из примера выше используются внешние отступы. Их принцип работы схож с внутренними отступами, а меняется только направление. В плане свойств и их значений всё то же самое. Существует 4 правила и одно общее:
+
+* `margin-top` — внешний отступ сверху
+* `margin-right` — внешний отступ справа
+* `margin-bottom` — внешний отступ снизу
+* `margin-left` — внешний отступ слева
+
+Для объединения значений используют свойство `margin`, в котором сохраняется порядок указания:
+
+* отступ сверху
+* отступ справа
+* отступ снизу
+* отступ слева
+
+Также, как у внутренних отступов, для удобства существуют сокращённые записи этих правил:
+
+* Если указать только одно значение, то оно будет использовано одновременно для всех сторон
+* Если указать два значения, то первое будет использоваться для отступов по вертикали (сверху и снизу), а второе по горизонтали (справа и слева)
+* Если указать три значения, то они будут использоваться для отступа сверху, по горизонтали и снизу
+
+```html
+<div class="card">Карточка с белым текстом на фиолетовом фоне</div>
+<div class="card">Карточка с белым текстом на фиолетовом фоне</div>
+```
+
+```css
+.card {
+  margin: 10px 0;
+
+  color: #ffffff;
+  background-color: #673ab7;
+}
+```
+
+<div class="hexlet-basics-example" style="background-color: #673ab7;color: #fff;padding: 10px 0 10px 20px!important;border:0!important;margin: 10px 0;">
+  Карточка с белым текстом на фиолетовом фоне
+</div>
+<div class="hexlet-basics-example" style="background-color: #673ab7;color: #fff;padding: 10px 0 10px 20px!important;border:0!important;margin: 10px 0;">
+  Карточка с белым текстом на фиолетовом фоне
+</div>
diff --git a/modules/30-box/50-margin/ru/data.yml b/modules/30-box/50-margin/ru/data.yml
new file mode 100644
index 0000000..b5f2e7b
--- /dev/null
+++ b/modules/30-box/50-margin/ru/data.yml
@@ -0,0 +1 @@
+name: Внешние отступы
diff --git a/modules/30-box/60-box-model/ru/EXERCISE.md b/modules/30-box/60-box-model/ru/EXERCISE.md
new file mode 100644
index 0000000..f17927b
--- /dev/null
+++ b/modules/30-box/60-box-model/ru/EXERCISE.md
@@ -0,0 +1,12 @@
+Добавьте в редактор `div` с классом `card-hello` и установите следующие правила:
+
+* цвет фона: `#fa7268`
+* цвет текста: `#ffffff`
+* ширина блока: 230 пикселей
+* высота блока 25 пикселей
+* внутренние отступы: 20 пикселей
+* внешние отступы: 10 пикселей
+* рамка шириной 2 пикселя, сплошная. Цвет `#9c27b0`
+* размер шрифта: 20 пикселей
+
+Стили запишите в теге `<style>`
diff --git a/modules/30-box/60-box-model/ru/README.md b/modules/30-box/60-box-model/ru/README.md
new file mode 100644
index 0000000..fbe4477
--- /dev/null
+++ b/modules/30-box/60-box-model/ru/README.md
@@ -0,0 +1,42 @@
+
+При использовании некоторых свойств, таких как `border` и `padding`, можно заметить, что это влияет на конечный размер блока. И это действительно так. Вот как браузеры высчитывают конечный размер блока на странице:
+
+![Блочная модель](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model/box-model.png)
+
+То есть конечный размер формируется не только свойствами `height` и `width`, а множеством других свойств:
+
+* `padding` — внутренние отступы
+* `border` — границы
+* `margin` — внешние границы
+
+Получается, что для определения конечного размера элемента необходимо сложить значения всех этих свойств. Например, какой будет ширина этого блока?
+
+```css
+.box {
+  width: 100px;
+  height: 100px;
+
+  padding: 20px;
+  margin: 10px;
+
+  border: 1px solid #fff;
+}
+```
+
+100px? 120px? 121px? Как узнать это значение? Нужно сложить все значения, которые формируют блок по горизонтали:
+
+* `width`
+* `padding-left`/`padding-right`
+* `border-left`/`border-right`
+* `margin-left`/`margin-right`
+
+Получается, что итоговая ширина элемента на странице: `100px + 20px + 20px + 1px + 1px + 10px + 10px` что равно `162px`
+
+Такое поведение называется _боксовой моделью_. Она описывает взаимосвязь свойств и конечного размера элемента. По этой модели браузеры «рисуют» блок, наслаивая правила друг на друга перед тем, как вывести элемент на страницу.
+
+Данную модель стоит хорошо запомнить, потому что при работе с CSS важно понимать, где и как браузер «нарисует» блок, и как это отразится на его высоте и ширине.
+
+Но согласитесь, что устанавливая свойства `width` и `height` ожидаешь именно эти значения. Можно ли изменить поведение боксовой модели? Да! Для этого используется свойство `box-sizing`, которое принимает следующие значения:
+
+* `content-box` — значение по умолчанию. Работает так, как было описано в уроке
+* `border-box` — значения границы и внутренних отступов не увеличивают элемент, а «съедают» место у контента, то есть свойства не будут влиять на высоту и ширину. Если установлено фиксированное значение, то оно таким и останется, но для контента внутри останется меньше места
diff --git a/modules/30-box/60-box-model/ru/data.yml b/modules/30-box/60-box-model/ru/data.yml
new file mode 100644
index 0000000..7ff93d0
--- /dev/null
+++ b/modules/30-box/60-box-model/ru/data.yml
@@ -0,0 +1 @@
+name: Блочная модель
diff --git a/modules/30-box/70-background/ru/EXERCISE.md b/modules/30-box/70-background/ru/EXERCISE.md
new file mode 100644
index 0000000..06145fb
--- /dev/null
+++ b/modules/30-box/70-background/ru/EXERCISE.md
@@ -0,0 +1 @@
+Добавьте в редактор `<div>` с классом `background` и установите цвет фона `#2196f3`. Стили запишите в теге `<style>`
diff --git a/modules/30-box/70-background/ru/README.md b/modules/30-box/70-background/ru/README.md
new file mode 100644
index 0000000..0471307
--- /dev/null
+++ b/modules/30-box/70-background/ru/README.md
@@ -0,0 +1,20 @@
+При изучении CSS мы уже сталкивались с установкой пользовательского цвета для текста внутри блока. Но это не единственная возможность по установке цвета — его можно установить в качестве фона для всего блока.
+
+Обратите внимание, область с теорией и редактором в уроках отделены от остального сайта белым фоном. Это делается не только для удобного чтения, но и для того, чтобы глаза быстро находили область с основным контентом. Для установки фонового цвета используется свойство `background-color`, значением которого является цвет.
+
+В качестве цвета можно использовать уже знакомые `hex`-значения:
+
+```html
+<div class="card">Карточка с белым текстом на фиолетовом фоне</div>
+```
+
+```css
+.card {
+  color: #ffffff;
+  background-color: #673ab7;
+}
+```
+
+<div class="hexlet-basics-example my-3" style="background-color: #673ab7; color: #fff">
+  Карточка с белым текстом на фиолетовом фоне
+</div>
diff --git a/modules/30-box/70-background/ru/data.yml b/modules/30-box/70-background/ru/data.yml
new file mode 100644
index 0000000..bd5d4e3
--- /dev/null
+++ b/modules/30-box/70-background/ru/data.yml
@@ -0,0 +1,5 @@
+name: Фон
+tips:
+  - >-
+    Выбрать цвет и получить его `hex`-код можно на [HTML Color
+    Codes](https://htmlcolorcodes.com/)
diff --git a/modules/35-structure/10-basics/ru/EXERCISE.md b/modules/35-structure/10-basics/ru/EXERCISE.md
new file mode 100644
index 0000000..813c79f
--- /dev/null
+++ b/modules/35-structure/10-basics/ru/EXERCISE.md
@@ -0,0 +1 @@
+Скопируйте базовую разметку HTML из примера выше. Внутри тега `<body>` вставьте любую разметку. Попробуйте различные теги из тех, которые были пройдены в предыдущих курсах.
diff --git a/modules/35-structure/10-basics/ru/README.md b/modules/35-structure/10-basics/ru/README.md
new file mode 100644
index 0000000..8f8f04e
--- /dev/null
+++ b/modules/35-structure/10-basics/ru/README.md
@@ -0,0 +1,27 @@
+
+Любой HTML-документ можно разбить на несколько основных составляющих:
+
+* Блок `head`, содержащий метаинформацию о нашем сайте. Данные из этого блока не отображаются непосредственно на странице, а служат для её описания, подключения стилей и скриптов.
+* Блок `body` является основным местом, где строится HTML-разметка. Данные в этом блоке будут обработаны и выведены в браузер.
+
+Простейшая разметка в HTML5 выглядит следующим образом:
+
+```html
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <title>Базовая разметка HTML</title>
+</head>
+<body>
+  <h1>Code Basics</h1>
+  <p>Бесплатные уроки по программированию и HTML для новичков</p>
+</body>
+</html>
+```
+
+Обратите внимание на первую строку `<!DOCTYPE html>`. DOCTYPE (document type) — служебная информация для браузера, где описывается стандарт HTML, который нужно обработать. Текущий стандарт HTML5 поддерживается всеми браузерами, поэтому достаточно указать в первой строке документа `<!DOCTYPE html>`, который говорит, что наш документ размечен по стандарту HTML5.
+
+Далее открывается парный тег `<html>` с атрибутом `lang="ru"`. Указание языка также необходимо для браузеров, особенно если сайт рассчитан на массовую аудиторию, в том числе и за рубежом.
+
+Во избежание ошибок, обе вышеописанные конструкции, при их отсутствии, будут добавлены браузером автоматически. В некоторых ситуациях браузеры могут добавить не те строки, которые вы бы хотели, и вместо обработки страницы по стандарту HTML5 браузер будет обрабатывать всё как HTML4, что приведёт ко множеству проблем, так как старые стандарты могут не знать о существовании многих тегов, таких как `<main>`, `<nav>` и так далее
diff --git a/modules/35-structure/10-basics/ru/data.yml b/modules/35-structure/10-basics/ru/data.yml
new file mode 100644
index 0000000..cef7531
--- /dev/null
+++ b/modules/35-structure/10-basics/ru/data.yml
@@ -0,0 +1 @@
+name: Базовая структура
diff --git a/modules/35-structure/30-meta/ru/EXERCISE.md b/modules/35-structure/30-meta/ru/EXERCISE.md
new file mode 100644
index 0000000..2df1eaa
--- /dev/null
+++ b/modules/35-structure/30-meta/ru/EXERCISE.md
@@ -0,0 +1,7 @@
+Добавьте в редактор 3 метатега:
+
+* title
+* description
+* charset со значением UTF-8
+
+Для `title` и `description` укажите произвольный текст
diff --git a/modules/35-structure/30-meta/ru/README.md b/modules/35-structure/30-meta/ru/README.md
new file mode 100644
index 0000000..1f523df
--- /dev/null
+++ b/modules/35-structure/30-meta/ru/README.md
@@ -0,0 +1,57 @@
+
+Метатеги — служебные теги в разметке HTML. Они предназначены для указания сведений поисковым роботам и браузерам. Взгляните на вкладку в браузере с этим уроком и вы увидите текст, с помощью которого всегда сможете найти нужную вкладку, открытую в браузере.
+
+При выводе результатов поискового запроса (например в Google или Yandex) также показывается этот заголовок и описание.
+
+![Результат поискового запроса. Показывается заголовок и описание](https://i.imgur.com/EuyLx3m.png)
+
+При добавлении статьи с сайта на страницу в социальных сетях появляется картинка и описание.
+
+Всё это — работа метатегов. Именно в них можно определить заголовок и описание для текущей HTML-страницы, а также картинку, которая добавится при копировании ссылки в социальных сетях.
+
+## Тег title
+
+За заголовок во вкладке браузера отвечает парный тег `<title>`, внутри которого содержится название страницы.
+
+Обычно советуют использовать заголовок от 50 до 80 символов. Такое ограничение существует из-за того, что поисковые системы не могут показать больше символов в качестве заголовка страницы в результатах поисковой выдачи. Заголовок внутри тега `<title>` отобразится во вкладке в браузере.
+
+```html
+<title>Code Basics: основы программирования</title>
+```
+
+## Тег meta
+
+Большинство метатегов записываются с использованием непарного тега `<meta>`. Он принимает несколько основных атрибутов, которые помогают установить метаинформацию
+
+### Описание
+
+Описание часто используется при добавлении ссылки на страницу в социальных сетях. Эта информация используется поисковыми системами при выводе страницы в результатах поиска.
+
+Чтобы установить описание, используется тег `<meta>` с двумя атрибутами:
+
+* `name="description"`. Атрибут `name` указывает на то, какой тип метаинформации описывается в теге
+* `content`. Атрибут `content` указывает саму информацию
+
+```html
+<meta name="description" content="Бесплатные практические уроки по программированию для тех, кто начинает с нуля.">
+```
+
+### Ключевые слова
+
+В разработке для страниц часто указывают ключевые слова. Они помогают роботам корректнее собирать информацию о странице, что хорошо сказывается на продвижении сайта в интернете. Как и с описанием, для установки ключевых слов используется два атрибута. В качестве значения атрибута `name` используется `keywords`. Сами ключевые слова перечисляются через запятую
+
+```html
+<meta name="keywords" content="программирование, курсы, HTML, CSS">
+```
+
+### Кодировка страницы
+
+Существует большое количество кодировок — таблиц символов, по которым происходит поиск буквы или символа. Раньше проблема кодировок стояла очень остро — почти для каждого языка использовалась уникальная кодировка, из-за чего открыть документ на другом языке было невозможно.
+
+В текущее время есть универсальные кодировки, которые поддерживают символы самых разных языков, но считается хорошим тоном, в качестве метатега, указывать кодировку страницы.
+
+Для этого указывается только один атрибут — `charset`, значением которого выступает название кодировки. В 99% случаев это _UTF-8_. Если вы встретитесь с другой кодировкой, то, скорее всего, об этом вам сообщат заранее
+
+```html
+<meta charset="UTF-8">
+```
diff --git a/modules/35-structure/30-meta/ru/data.yml b/modules/35-structure/30-meta/ru/data.yml
new file mode 100644
index 0000000..af494f2
--- /dev/null
+++ b/modules/35-structure/30-meta/ru/data.yml
@@ -0,0 +1 @@
+name: Метатеги
diff --git a/modules/35-structure/40-link/ru/EXERCISE.md b/modules/35-structure/40-link/ru/EXERCISE.md
new file mode 100644
index 0000000..3801258
--- /dev/null
+++ b/modules/35-structure/40-link/ru/EXERCISE.md
@@ -0,0 +1 @@
+Добавьте `link` на фавиконку https://www.w3schools.com/favicon.ico с размером 64x64.
diff --git a/modules/35-structure/40-link/ru/README.md b/modules/35-structure/40-link/ru/README.md
new file mode 100644
index 0000000..43c0baf
--- /dev/null
+++ b/modules/35-structure/40-link/ru/README.md
@@ -0,0 +1,39 @@
+
+Почти у всех вкладок в браузере существуют маленькие иконки, которые называются _фавиконки_. Они, как и заголовок, позволяют быстро ориентироваться во вкладках и переходить на нужную. Их используют поисковые системы, показывая рядом с названием страницы в поиске.
+
+![Фавиконка и название страницы на вкладке](https://i.imgur.com/PATzgdE.png)
+
+Для того, чтобы установить такую иконку на страницу, используется тег `<link>`, у которого указываются два атрибута:
+
+* `rel` для указания контента
+* `href` для указания ссылки на иконку
+
+```html
+<link rel="icon" href="/favicon.png">
+```
+
+Разные устройства могут отображать иконки разных размеров и форматов, поэтому сейчас добавляется не одна, а сразу несколько иконок. У тега `<link>` возможно указать тип изображения и его размер. Делается это с помощью атрибутов `type` и `sizes`.
+
+Укажем, что иконка формата _png_ и размером _32x32_
+
+```html
+<link rel="icon" href="/favicon32.png" type="image/png" sizes="32x32">
+```
+
+После неё можно указать ещё несколько иконок с разными размерами:
+
+```html
+<link rel="icon" href="/favicon64.png" type="image/png" sizes="64x64">
+<link rel="icon" href="/favicon32.png" type="image/png" sizes="32x32">
+<link rel="icon" href="/favicon16.png" type="image/png" sizes="16x16">
+```
+
+При указании размеров первым числом указывается ширина в пикселях, а вторым значением высота.
+
+Теперь браузеры на разных устройствах смогут точнее работать с иконками и сразу загружать ту, которая им подходит.
+
+Тег `<link>` позволяет добавлять не только фавиконку, но и подключать файлы стилей, шрифты, подсказывать браузерам следующую (или предыдущую) страницу статьи. Самый распространённый пример — подключение файла CSS к HTML-странице:
+
+```html
+<link rel="stylesheet" href="style.css">
+```
diff --git a/modules/35-structure/40-link/ru/data.yml b/modules/35-structure/40-link/ru/data.yml
new file mode 100644
index 0000000..7540b01
--- /dev/null
+++ b/modules/35-structure/40-link/ru/data.yml
@@ -0,0 +1,6 @@
+name: link
+tips:
+  - >-
+    Все возможности тега `<link>` можно посмотреть на [MDN Web
+    Docs](https://developer.mozilla.org/ru/docs/Web/HTML/Element/ссылка)
+  - Как и другие метатеги, тег `<link>` указывается в разделе `head`
diff --git a/modules/35-structure/50-viewport/ru/EXERCISE.md b/modules/35-structure/50-viewport/ru/EXERCISE.md
new file mode 100644
index 0000000..425f1fe
--- /dev/null
+++ b/modules/35-structure/50-viewport/ru/EXERCISE.md
@@ -0,0 +1 @@
+Добавьте метатег viewport с шириной экрана 1024px, без возможности масштабирования со стороны пользователя
diff --git a/modules/35-structure/50-viewport/ru/README.md b/modules/35-structure/50-viewport/ru/README.md
new file mode 100644
index 0000000..7b3084c
--- /dev/null
+++ b/modules/35-structure/50-viewport/ru/README.md
@@ -0,0 +1,59 @@
+
+Для корректного отображения разметки HTML браузеры создают специальную копию разметки и вставляют её в «виртуальное окно», которое называется viewport. Зачастую данное окно шире, чем экран текущего устройства. Это сделано для того, чтобы все элементы поместились так, как задумывалось. Данный эффект можно увидеть, если зайти на неадаптированную HTML-страницу с мобильного устройства. В таком случае появляется горизонтальная полоса прокрутки.
+
+Впервые данный метатег появился в браузерах от компании Apple «Safari». До появления мобильных устройств браузер Safari по умолчанию считал, что все страницы в интернете имеют ширину в 980 пикселей, из-за чего на первых версиях iPod и iPhone сайты отображались не полностью, а только первые 320 пикселей по ширине.
+
+Сейчас такая проблема решается указанием ширины сайта для устройств. Наиболее часто используют значение `device-width` у параметра `width`, которое устанавливает ширину страницы, равную ширине экрана устройства.
+
+```html
+<head>
+  <meta name="viewport" content="width=device-width">
+</head>
+```
+
+Этим значением браузеру сообщается, что ширина страницы равна ширине устройства, с которого эта страница просматривается.
+
+---
+
+Сейчас вам может показаться это сложным, но, с изучением CSS, вы полностью поймёте смысл указания `viewport`. Сейчас важно знать про такой метатег и его основные варианты применения
+
+---
+
+Стоит обратить внимание, что параметры задаются внутри атрибута `content`, свойства в котором разделяются запятой.
+
+### Основные параметры метатега viewport
+
+* `width` — ширина сайта. Указывается в пикселях. Возможно использование значения `device-width` для установки ширины страницы равной ширине устройства.
+* `height` — высота сайта. Указывается в пикселях. Возможно использование значения `device-height` для установки высоты страницы равной высоте устройства.
+* `initial-scale` — начальный коэффициент масштабирования. Может принимать значение от 0.1 до 10.0. Значение единица масштабирует страницу по умолчанию.
+* `user-scalable` — указывает, может ли пользователь масштабировать страницу, то есть приближать или отдалять её. Принимает значение `yes` и `no`
+
+Укажем _viewport_ со следующими характеристиками:
+
+* Ширина: 980px
+* Масштаб: 1
+* Запрет управления масштабированием. То есть запретить приближать или отдалять контент с помощью жестов или «горячих клавиш»
+
+Для этого создаём метатег и, вначале указываем ширину. Это делается с помощью значения `width`:
+
+```html
+<meta name="viewport" content="width=980">
+```
+
+Задать изначальный масштаб поможет значение `initial-scale` со значением `1.0`. Оно означает, что страница выведется без какого-либо искажения, с теми размерами шрифтов и других элементов, которые были установлены разработчиками.
+
+```html
+<meta name="viewport" content="width=980, initial-scale=1.0">
+```
+
+Последнее — запрет на масштабирование. Для этого добавим `user-scalable` со значением `no`
+
+```html
+<meta name="viewport" content="width=980, initial-scale=1.0, user-scalable=no">
+```
+
+## Базовое использование метатега viewport
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+```
diff --git a/modules/35-structure/50-viewport/ru/data.yml b/modules/35-structure/50-viewport/ru/data.yml
new file mode 100644
index 0000000..d795ec3
--- /dev/null
+++ b/modules/35-structure/50-viewport/ru/data.yml
@@ -0,0 +1 @@
+name: Viewport
diff --git a/modules/40-flex/10-flex-container/ru/EXERCISE.md b/modules/40-flex/10-flex-container/ru/EXERCISE.md
new file mode 100644
index 0000000..1f74d5a
--- /dev/null
+++ b/modules/40-flex/10-flex-container/ru/EXERCISE.md
@@ -0,0 +1,6 @@
+Создайте флекс контейнер с классом `qa`, внутри которого будет два элемента:
+
+1. Блок с текстом: `Какие языки программирования наиболее востребованы в 2023?`. Блок имеет ширину `40%`. Класс для блока: `question`
+2. Блок с текстом: `Самыми популярными языками для изучения в 2023 году остаются Python и JavaScript`. Ширина блока `60%`. Класс для блока: `answer`
+
+Попробуйте самостоятельно стилизовать элементы, чтобы сделать из этого блока настоящий блок с вопросами и ответами. Тесты будут проверять только правильное использование контейнера
diff --git a/modules/40-flex/10-flex-container/ru/README.md b/modules/40-flex/10-flex-container/ru/README.md
new file mode 100644
index 0000000..4c0255c
--- /dev/null
+++ b/modules/40-flex/10-flex-container/ru/README.md
@@ -0,0 +1,52 @@
+Расположение элементов на странице — одна из важных областей работы верстальщика или фронтенд-разработчика. Во всех прошлых уроках мы добавляли небольшие элементы, но их расположение определялось только тем, как они были добавлены в HTML. Чаще всего это просто расположение сверху вниз.
+
+При верстке страниц разработчику нужно располагать элементы не только таким образом, но и рядом друг с другом.
+
+Взгляните на текущую страницу. В ней есть две большие области, которые расположены рядом друг с другом — это блок с теорией и блок с редактором кода.
+
+Одним из способов решения такой задачи является использование модуля Flex из CSS. Для этого достаточно указать свойство `display` со значением `flex` у общего блока, внутри которого находятся блоки с практикой и теорией.
+
+```html
+<style>
+.container {
+  display: flex;
+}
+</style>
+
+<div class="container">
+  <div class="theory">Тут теория</div>
+  <div class="practice">Тут редактор с практикой</div>
+</div>
+```
+
+Для наглядности добавим немного стилей, чтобы увидеть расположение блоков
+
+<div class="hexlet-basics-example my-3">
+  <div class="container d-flex fw-bold text-white" style="height: 200px;">
+    <div class="bg-black bg-opacity-50 p-3">Тут теория</div>
+    <div class="bg-opacity-50 bg-primary p-3">Тут редактор с практикой</div>
+  </div>
+</div>
+
+В текущей верстке блок с классом `container` называется _Flex-контейнер_, а элементы с классами `theory` и `practice` будут называться _Flex-элементами_. Важно, что _flex-элементы_ это только те элементы, которые лежат непосредственно внутри контейнера.
+
+Например,
+
+```html
+<style>
+.container {
+  display: flex;
+}
+</style>
+
+<div class="container">
+  <div class="theory">
+    <div class="theory-text">Тут теория</div>
+  </div>
+  <div class="practice">
+    <div class="vscode"></div>
+  </div>
+</div>
+```
+
+В этой разметке flex-элементами будут блоки с классами `theory` и `practice`, но вложенные в них блоки с классами `theory-text` и `vscode` уже не являются flex-элементами. На них не будут действовать правила, которые мы изучим в следующих уроках.
diff --git a/modules/40-flex/10-flex-container/ru/data.yml b/modules/40-flex/10-flex-container/ru/data.yml
new file mode 100644
index 0000000..489d45f
--- /dev/null
+++ b/modules/40-flex/10-flex-container/ru/data.yml
@@ -0,0 +1,5 @@
+name: Flex-контейнер
+tips:
+  - >-
+    Все блоки, которые непосредственно находятся внутри контейнера называются
+    _Flex-элементами_
diff --git a/modules/40-flex/15-flex-direction/ru/EXERCISE.md b/modules/40-flex/15-flex-direction/ru/EXERCISE.md
new file mode 100644
index 0000000..0ececc0
--- /dev/null
+++ b/modules/40-flex/15-flex-direction/ru/EXERCISE.md
@@ -0,0 +1,30 @@
+Доработайте стили для блока с вопросами и ответами:
+
+```html
+<style>
+  .qa {
+    font: 18px/1.5 sans-serif;
+    display: flex;
+  }
+
+  .question {
+    width: 40%;
+    padding: 20px;
+
+    color: #fff;
+    background: #8ea7e9;
+  }
+
+  .answer {
+    width: 60%;
+    padding: 20px;
+  }
+</style>
+
+<div class="qa">
+  <div class="question">Какие языки программирования наиболее востребованы в 2023?</div>
+  <div class="answer">Самыми популярными языками для изучения в 2023 году остаются Python и JavaScript</div>
+</div>
+```
+
+Заказчик просит вас поменять местами блок с вопросом и ответом. Воспользуйтесь изученными возможностями, чтобы сделать это без редактирования HTML. Скопируйте весь код в редактор и допишите нужные стили
diff --git a/modules/40-flex/15-flex-direction/ru/README.md b/modules/40-flex/15-flex-direction/ru/README.md
new file mode 100644
index 0000000..ac5a681
--- /dev/null
+++ b/modules/40-flex/15-flex-direction/ru/README.md
@@ -0,0 +1,42 @@
+Если немного погрузиться в теорию работы модуля Flex, то станет понятно, что это некая ось, на которую «насаживаются» элементы. Почти как кубики на железку или костяшки на счёты.
+
+Как и в реальном мире, мы можем поворачивать главную ось, чтобы расположить элементы по другому. Для этого используется свойство `flex-direction`, которое может принимать одно из четырех значений:
+
+* `row` — значение по умолчанию. Элементы выстраиваются в линию, в которой первый элемент находится слева
+* `row-reverse` — Эффект похож на значение `row`, но элементы выстраиваются в обратном порядке, то есть первый элемент окажется справа
+* `column` — элементы выстраиваются сверху вниз. Первый элемент находится сверху
+* `column-reverse` — элементы выстраиваются снизу вверх, то есть первый элемент находится внизу
+
+<div class="hexlet-basics-example my-3">
+  <p class="h3">Row</p>
+  <div class="d-flex mb-3">
+    <div class="bg-primary" style="width: 50px; height: 50px">1</div>
+    <div class="bg-danger" style="width: 50px; height: 50px">2</div>
+    <div class="bg-success" style="width: 50px; height: 50px">3</div>
+  </div>
+
+  <p class="h3">Row-reverse</p>
+  <div class="d-flex flex-row-reverse mb-3">
+    <div class="bg-primary" style="width: 50px; height: 50px">1</div>
+    <div class="bg-danger" style="width: 50px; height: 50px">2</div>
+    <div class="bg-success" style="width: 50px; height: 50px">3</div>
+  </div>
+
+  <p class="h3">Column</p>
+  <div class="d-flex flex-column mb-3">
+    <div class="bg-primary" style="width: 50px; height: 50px">1</div>
+    <div class="bg-danger" style="width: 50px; height: 50px">2</div>
+    <div class="bg-success" style="width: 50px; height: 50px">3</div>
+  </div>
+
+  <p class="h3">Column-reverse</p>
+  <div class="d-flex flex-column-reverse">
+    <div class="bg-primary" style="width: 50px; height: 50px">1</div>
+    <div class="bg-danger" style="width: 50px; height: 50px">2</div>
+    <div class="bg-success" style="width: 50px; height: 50px">3</div>
+  </div>
+</div>
+
+Помимо главной оси, по которой располагаются элементы, используется понятие _побочной оси_. Она находится перпендикулярно главной оси.
+
+Например, если элементы выстраиваются по горизонтали, то побочной осью будет вертикальная линия. Это понятие важно при изучении выравнивания flex-элементов внутри контейнера
diff --git a/modules/40-flex/15-flex-direction/ru/data.yml b/modules/40-flex/15-flex-direction/ru/data.yml
new file mode 100644
index 0000000..3c0c7c8
--- /dev/null
+++ b/modules/40-flex/15-flex-direction/ru/data.yml
@@ -0,0 +1 @@
+name: Направление Flex-элементов
diff --git a/modules/40-flex/20-flex-wrap/ru/EXERCISE.md b/modules/40-flex/20-flex-wrap/ru/EXERCISE.md
new file mode 100644
index 0000000..e43e09c
--- /dev/null
+++ b/modules/40-flex/20-flex-wrap/ru/EXERCISE.md
@@ -0,0 +1,30 @@
+В этом уроке мы снова вернёмся к стилизации блока «Вопрос-ответ». В этот раз у него жестко ограничена ширина для элементов, поэтому их стоит переносить, если недостаточно места.
+
+```html
+<style>
+.qa {
+  font: 18px/1.5 sans-serif;
+  display: flex;
+}
+
+.question {
+  width: 400px;
+  padding: 20px;
+
+  color: #fff;
+  background: #8ea7e9;
+}
+
+.answer {
+  width: 400px;
+  padding: 20px;
+}
+</style>
+
+<div class="qa">
+  <div class="question">Какие языки программирования наиболее востребованы в 2023?</div>
+  <div class="answer">Самыми популярными языками для изучения в 2023 году остаются Python и JavaScript</div>
+</div>
+```
+
+Доработайте функционал вёрстки. Проверить её можно уменьшив окно вашего браузера
diff --git a/modules/40-flex/20-flex-wrap/ru/README.md b/modules/40-flex/20-flex-wrap/ru/README.md
new file mode 100644
index 0000000..e706ebf
--- /dev/null
+++ b/modules/40-flex/20-flex-wrap/ru/README.md
@@ -0,0 +1,56 @@
+В прошлых примерах использовалось достаточно малое количество элементов внутри флекс-контейнера. Представим, что этих элементов больше и они не могут поместиться внутри контейнера.
+
+В этом случае элементы выйдут за пределы контейнера и продолжат располагаться на главной оси, так как, по умолчанию, контейнер не переносит элементы.
+
+В примере ниже ширина контейнера обозначена синим цветом, а между элементами есть пространство, чтобы понять, когда элементы вышли за пределы контейнера:
+
+<div class="hexlet-basics-example my-3">
+  <div class="d-flex bg-primary gap-2 w-50">
+    <div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;"></div>
+    <div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;"></div>
+    <div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;"></div>
+    <div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;"></div>
+    <div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;"></div>
+    <div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;"></div>
+  </div>
+</div>
+
+Чтобы определить, как поведут себя элементы при нехватке пространства используется свойство `flex-wrap`, которое принимает одно из значений:
+
+* `nowrap` — значение по умолчанию. Элементы не переносятся
+* `wrap` — самое распространенное значение. Элементы переносятся при нехватке пространства внутри контейнера
+* `wrap-reverse` — перенос элементов с переворотом порядка элементов по главной оси. Этот порядок удобен при создании блогов, так как более старые записи окажутся внизу
+
+Вот как располагаются элементы при использовании этих значений:
+
+<div class="hexlet-basics-example my-3">
+  <p class="h3">nowrap</p>
+  <div class="d-flex bg-primary gap-2 w-50 mb-3">
+    <div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">1</div>
+    <div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">2</div>
+    <div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">3</div>
+    <div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">4</div>
+    <div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">5</div>
+    <div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">6</div>
+  </div>
+
+  <p class="h3">wrap</p>
+  <div class="d-flex flex-wrap bg-primary gap-2 w-50 mb-3">
+    <div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">1</div>
+    <div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">2</div>
+    <div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">3</div>
+    <div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">4</div>
+    <div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">5</div>
+    <div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">6</div>
+  </div>
+
+  <p class="h3">wrap-reverse</p>
+  <div class="d-flex flex-wrap-reverse bg-primary gap-2 w-50 mb-3">
+    <div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">1</div>
+    <div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">2</div>
+    <div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">3</div>
+    <div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">4</div>
+    <div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">5</div>
+    <div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">6</div>
+  </div>
+</div>
diff --git a/modules/40-flex/20-flex-wrap/ru/data.yml b/modules/40-flex/20-flex-wrap/ru/data.yml
new file mode 100644
index 0000000..987be7b
--- /dev/null
+++ b/modules/40-flex/20-flex-wrap/ru/data.yml
@@ -0,0 +1 @@
+name: Перенос элементов внутри контейнера
diff --git a/modules/40-flex/30-flex-alignment/ru/EXERCISE.md b/modules/40-flex/30-flex-alignment/ru/EXERCISE.md
new file mode 100644
index 0000000..030ad98
--- /dev/null
+++ b/modules/40-flex/30-flex-alignment/ru/EXERCISE.md
@@ -0,0 +1,34 @@
+Заказчик захотел, чтобы в блоке «Вопрос-ответ» появилась стрелка, которая визуально свяжет вопрос и ответ. Доработайте функционал блока
+
+```html
+<style>
+.qa {
+  font: 18px/1.5 sans-serif;
+}
+
+.question {
+  width: 400px;
+  padding: 20px;
+
+  color: #fff;
+  background: #8ea7e9;
+}
+
+.answer {
+  width: 400px;
+  padding: 20px;
+}
+
+.arrow {
+  margin: 0 10px;
+}
+</style>
+
+<div class="qa">
+  <div class="question">Какие языки программирования наиболее востребованы в 2023?</div>
+  <div class="arrow">→</div>
+  <div class="answer">Самыми популярными языками для изучения в 2023 году остаются Python и JavaScript</div>
+</div>
+```
+
+Стрелка визуально находится по середине относительно блоков с вопросом и ответом. Используя Flex доработайте блок и, используя выравнивание, разместите блоки по центру
diff --git a/modules/40-flex/30-flex-alignment/ru/README.md b/modules/40-flex/30-flex-alignment/ru/README.md
new file mode 100644
index 0000000..548fb8d
--- /dev/null
+++ b/modules/40-flex/30-flex-alignment/ru/README.md
@@ -0,0 +1,106 @@
+Одна из главных фишек флекс — возможность выравнивание контента по любой из осей. Будь то главная или побочная ось, вы всегда можете воспользоваться несколькими свойствами, чтобы автоматически разместить элементы на странице.
+
+В этом уроке мы изучим свойства `justify-content` и `align-items`, которые позволяют расположить элементы по главной и побочной оси соответственно.
+
+Для разбора работы свойств используем следующий пример:
+
+<div class="hexlet-basics-example my-3">
+  <div class="bg-opacity-25 bg-secondary d-flex fw-bold gap-2" style="height: 200px;">
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">1</div>
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">2</div>
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">3</div>
+  </div>
+</div>
+
+Серым цветом обозначен Flex-контейнер. Именно к нему и будут применяться все свойства из этого урока
+
+## Выравнивание по главной оси
+
+Для выравнивания по главной оси используется свойство `justify-content`. Оно указывается у контейнера (блок со свойством `display: flex`) и может иметь множество значений. Разберём самые распространённые значения:
+
+* `flex-start` — выравнивание по началу оси. Хоть это и не значение по умолчанию, но оно выглядит именно так, как на примере выше
+* `flex-end` — выравнивание по концу оси
+* `center` — выравнивание контента по центру контейнера
+* `space-between` — первый и последний элемент прижимаются к началу и концу оси, а остальные элементы распределяются по остальному пространству
+* `space-around` — принцип такой же, как и у значения `space-between`, но первый и последний элемент так же получают отступы, которые равны половине отступов у остальных элементов
+
+<div class="hexlet-basics-example my-3">
+  <p class="h3">flex-start</p>
+  <div class="bg-opacity-25 bg-secondary d-flex fw-bold gap-2 mb-3" style="height: 200px;">
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">1</div>
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">2</div>
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">3</div>
+  </div>
+
+  <p class="h3">flex-end</p>
+  <div class="bg-opacity-25 bg-secondary d-flex justify-content-end fw-bold gap-2 mb-3" style="height: 200px;">
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">1</div>
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">2</div>
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">3</div>
+  </div>
+
+  <p class="h3">center</p>
+  <div class="bg-opacity-25 bg-secondary d-flex justify-content-center fw-bold gap-2 mb-3" style="height: 200px;">
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">1</div>
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">2</div>
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">3</div>
+  </div>
+
+  <p class="h3">space-between</p>
+  <div class="bg-opacity-25 bg-secondary d-flex justify-content-between fw-bold gap-2 mb-3" style="height: 200px;">
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">1</div>
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">2</div>
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">3</div>
+  </div>
+
+  <p class="h3">space-around</p>
+  <div class="bg-opacity-25 bg-secondary d-flex justify-content-around fw-bold gap-2 mb-3" style="height: 200px;">
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">1</div>
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">2</div>
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">3</div>
+  </div>
+</div>
+
+## Выравнивание по побочной оси
+
+Помимо выравнивания элементов по главной оси, флекс позволяет одновременно выравнять элементы по побочной оси. Именно для понимания этого эффекта примеры в этом уроке имеют большую высоту контейнера чем необходимо.
+
+Чтобы выровнять элементы по побочной оси используется свойство `align-items`. В нём также много значений, но рассмотрим работу самых популярных:
+
+* `flex-start` — выравнивание по началу побочной оси
+* `flex-end` — выравнивание по концу побочной оси
+* `center` — выравнивание по центру
+
+<div class="hexlet-basics-example my-3">
+  <p class="h3">flex-start</p>
+  <div class="bg-opacity-25 bg-secondary d-flex fw-bold gap-2 mb-3" style="height: 200px;">
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">1</div>
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">2</div>
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">3</div>
+  </div>
+
+  <p class="h3">flex-end</p>
+  <div class="bg-opacity-25 bg-secondary d-flex align-items-end fw-bold gap-2 mb-3" style="height: 200px;">
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">1</div>
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">2</div>
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">3</div>
+  </div>
+
+  <p class="h3">center</p>
+  <div class="bg-opacity-25 bg-secondary d-flex align-items-center fw-bold gap-2 mb-3" style="height: 200px;">
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">1</div>
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">2</div>
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">3</div>
+  </div>
+</div>
+
+Как видите, значений тут сильно меньше, чем при выравнивании по главной оси. Помните про две оси — если воспользоваться свойством `flex-direction: column`, то визуально выравнивание изменится. В этом случае для выравнивания по вертикали будет использоваться свойство `justify-content`:
+
+<div class="hexlet-basics-example my-3">
+  <p class="h3">flex-direction: column и justify-content: space-between</p>
+  <div class="bg-opacity-25 bg-secondary d-flex flex-column justify-content-between fw-bold gap-2 mb-3" style="height: 200px;">
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">1</div>
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">2</div>
+    <div class="bg-warning ps-2" style="width: 50px; height: 50px;">3</div>
+  </div>
+</div>
diff --git a/modules/40-flex/30-flex-alignment/ru/data.yml b/modules/40-flex/30-flex-alignment/ru/data.yml
new file mode 100644
index 0000000..5350fae
--- /dev/null
+++ b/modules/40-flex/30-flex-alignment/ru/data.yml
@@ -0,0 +1 @@
+name: Выравнивание элементов внутри контейнера
diff --git a/modules/40-flex/35-items-flexible/ru/EXERCISE.md b/modules/40-flex/35-items-flexible/ru/EXERCISE.md
new file mode 100644
index 0000000..3497dc8
--- /dev/null
+++ b/modules/40-flex/35-items-flexible/ru/EXERCISE.md
@@ -0,0 +1,36 @@
+Заказчик полностью доволен блоком с вопросами и ответами и оставил последнюю правку — дать возможность *блоку со стрелкой* растягиваться на всё пустое пространство и выравнять стрелку по центру блока.
+
+Таким образом стрелка всегда будет аккуратно связывать вопрос и ответ на больших разрешениях экрана и пользователь быстро поймёт, где найти ответ на вопрос.
+
+Ваша задача — дописать свойства для Flex, которые нужны по заданию. Чтобы выравнять стрелку по горизонтали можно использовать свойство `text-align`. Не забудьте выровнять все элементы по вертикали, как в прошлом задании.
+
+```html
+<style>
+.qa {
+  font: 18px/1.5 sans-serif;
+}
+
+.question {
+  width: 400px;
+  padding: 20px;
+
+  color: #fff;
+  background: #8ea7e9;
+}
+
+.answer {
+  width: 400px;
+  padding: 20px;
+}
+
+.arrow {
+  margin: 0 10px;
+}
+</style>
+
+<div class="qa">
+  <div class="question">Какие языки программирования наиболее востребованы в 2023?</div>
+  <div class="arrow">→</div>
+  <div class="answer">Самыми популярными языками для изучения в 2023 году остаются Python и JavaScript</div>
+</div>
+```
diff --git a/modules/40-flex/35-items-flexible/ru/README.md b/modules/40-flex/35-items-flexible/ru/README.md
new file mode 100644
index 0000000..42d74ec
--- /dev/null
+++ b/modules/40-flex/35-items-flexible/ru/README.md
@@ -0,0 +1,72 @@
+Флекс подарил разработчикам одну из самых мощных фишек — гибкость. Если вы знакомы с английским, то могли заметить, что сам модуль называется Flex, что можно перевести как «сгибание» или «гибкость».
+
+Гибкость во флекс проявляется в возможности элементов изменять свои размеры по определённым правилам. Например, можно автоматически сжать элемент, если пространства недостаточно или наоборот — распределить пустое пространство в контейнере между всеми элементами.
+
+За гибкость элементов отвечают два свойства:
+
+1. `flex-grow` — возможность элемента получить часть пустого пространства
+2. `flex-shrink` — возможность элемента уменьшить свои размеры, чтобы поместиться в контейнер
+
+Оба свойства принимают положительное числовое значение, которое означает:
+
+* Для `flex-grow` — какую часть свободного пространства может забрать элемент
+* Для `flex-shrink` — на сколько может уменьшиться элемент
+
+Все эти значения работают как часть математической формулы, по которой браузер считает итоговое значение размера элемента. Это сложная и неочевидная тема для изучения в самом начале обучения поэтому, в этом уроке, мы опустим все формулы.
+
+На самом деле, дело не только в формулах и начале обучения. Верстальщики и сами не очень любят ставить различные значения, считая в уме, на сколько же будет уменьшаться или увеличиваться элемент.
+
+Чтобы избавиться от математических мук, разработчики пришли к самому популярному способу использования этих свойств, а именно выставление значение `1` или `0` для всех элементов в контейнере.
+
+Если поставить значение `flex-grow: 1`, то это означает прибавить ко всем элементам одинаковое количество к ширине.
+
+Например, если контейнер занимает 600 пикселей и в нём четыре элемента по 100 пикселей, то остаётся 200 пикселей пустого пространства. Это пространство поделится на четыре части и каждая из частей будет отдана одному из элементов. Значит ширина каждого элемента будет равняться 150 пикселей.
+
+Думайте об оставшемся месте в контейнере как о тортике, который нужно разделить на равное количество частей. Такой подход будет работать, если стоит значение `flex-grow: 1`.
+
+```html
+<style>
+  .container {
+    width: 1000px;
+    display: flex;
+  }
+
+  .item {
+    width: 200px;
+    flex-grow: 1;
+  }
+</style>
+
+<div class="container">
+  <div class="item">Элемент 1</div>
+  <div class="item">Элемент 2</div>
+  <div class="item">Элемент 3</div>
+  <div class="item">Элемент 4</div>
+</div>
+```
+
+Вот как выглядят элементы без `flex-grow`:
+
+<div class="hexlet-basics-example my-3">
+  <div class="bg-opacity-25 bg-secondary d-flex fw-bold py-3" style="width: 600px;">
+    <div class="text-bg-danger text-center" style="width: 100px;height: 50px;">Элемент 1</div>
+    <div class="text-bg-dark text-center" style="width: 100px;height: 50px;">Элемент 2</div>
+    <div class="text-bg-primary text-center" style="width: 100px;height: 50px;">Элемент 3</div>
+    <div class="text-bg-success text-center" style="width: 100px;height: 50px;">Элемент 4</div>
+  </div>
+</div>
+
+А так со значением `flex-grow: 1` у элементов:
+
+<div class="hexlet-basics-example my-3">
+  <div class="bg-opacity-25 bg-secondary d-flex fw-bold py-3" style="width: 600px;">
+    <div class="flex-grow-1 text-bg-danger text-center" style="width: 100px;height: 50px;">Элемент 1</div>
+    <div class="flex-grow-1 text-bg-dark text-center" style="width: 100px;height: 50px;">Элемент 2</div>
+    <div class="flex-grow-1 text-bg-primary text-center" style="width: 100px;height: 50px;">Элемент 3</div>
+    <div class="flex-grow-1 text-bg-success text-center" style="width: 100px;height: 50px;">Элемент 4</div>
+  </div>
+</div>
+
+Можно поставить `flex-grow: 1` только для одного элемента. Тогда ему будет отдано всё свободное пространство. Это частый трюк при создании макетов, где одна из колонок должна занимать всё свободное пространство.
+
+Свойство `flex-shrink` со значением `1` будет работать по похожему сценарию. Из элементов будет вычтено одинаковое количество ширина в зависимости от того, сколько пространства не хватило, чтобы вместить все элементы. По умолчанию все флекс элементы имеют значение `flex-shrink: 1`, поэтому элементы будут ужиматься даже без дополнительного указания этого свойства.
diff --git a/modules/40-flex/35-items-flexible/ru/data.yml b/modules/40-flex/35-items-flexible/ru/data.yml
new file mode 100644
index 0000000..ca85ec9
--- /dev/null
+++ b/modules/40-flex/35-items-flexible/ru/data.yml
@@ -0,0 +1 @@
+name: Гибкий размер элементов
diff --git a/modules/45-semantics/10-semantic-elements/ru/EXERCISE.md b/modules/45-semantics/10-semantic-elements/ru/EXERCISE.md
new file mode 100644
index 0000000..3766fc7
--- /dev/null
+++ b/modules/45-semantics/10-semantic-elements/ru/EXERCISE.md
@@ -0,0 +1 @@
+Создайте разметку «шапки» и «подвала», используя новые семантические элементы HTML5
diff --git a/modules/45-semantics/10-semantic-elements/ru/README.md b/modules/45-semantics/10-semantic-elements/ru/README.md
new file mode 100644
index 0000000..780d993
--- /dev/null
+++ b/modules/45-semantics/10-semantic-elements/ru/README.md
@@ -0,0 +1,52 @@
+
+При создании HTML-документа разработчики используют теги `<div>` и `<span>`. Они позволяют создать блочный или строчный элемент, что помогает создавать независимые блоки с разным оформлением. Но, для браузера и поисковых систем, эти блоки не являются семантическими, т.е. они не говорят напрямую о том, что в них лежит.
+
+С первых версий стандарта HTML теги изначально обладают семантикой, например, `<p>` — параграф, `<table>` — таблица, `<ol>, <ul>` — списки. Но этими тегами не получится разметить «шапку», «подвал», «боковую панель» сайта.
+
+До выхода стандарта HTML5 для разметки таких областей использовали классы или идентификаторы. Например так:
+
+```html
+<div id="header">
+  // Здесь будет шапка сайта. Обычно в ней располагается логотип, контактная информация, меню
+</div>
+
+<div id="main">
+  // Уникальный контент сайта
+</div>
+
+<div id="footer">
+  // Подвал сайта. Обычно здесь находится контактная информация, дополнительное меню, юридическая информация о компании
+</div>
+```
+
+Это решило проблемы с точки зрения разработчиков, ведь навигация по коду стала быстрее, но, с точки зрения браузера, ситуация не изменилась. Браузеры не понимают, что `id="header"` используется на сайте для обозначения шапки сайта, да и разработчики именовали области по своему, так как не было единого стандарта.
+
+С выпуском стандарта HTML5 появились новые теги, которые стали обозначать семантики областей страницы, а не только текста.
+
+Основными семантическими тегами стали:
+
+* `<article>`
+* `<aside>`
+* `<footer>`
+* `<header>`
+* `<main>`
+* `<nav>`
+* `<section>`
+
+Большинство элементов интуитивно понятны и их можно сразу использовать в своих документах. Теперь пример выше можно переделать с использованием новых элементов HTML:
+
+```html
+<header>
+  // Здесь будет шапка сайта. Обычно в ней располагается логотип, контактная информация, меню
+</header>
+
+<main>
+  // Уникальный контент сайта
+</main>
+
+<footer>
+  // Подвал сайта. Обычно здесь находится контактная информация, дополнительное меню, юридическая информация о компании
+</footer>
+```
+
+Обратите внимание, что в вёрстке пропали идентификаторы и она стала чище. В этом модуле мы рассмотрим основные семантические теги на едином примере. От урока к уроку усложняя и дорабатывая страницу сайта.
diff --git a/modules/45-semantics/10-semantic-elements/ru/data.yml b/modules/45-semantics/10-semantic-elements/ru/data.yml
new file mode 100644
index 0000000..67c1db5
--- /dev/null
+++ b/modules/45-semantics/10-semantic-elements/ru/data.yml
@@ -0,0 +1 @@
+name: Семантические элементы
diff --git a/modules/45-semantics/20-semantics-header/ru/EXERCISE.md b/modules/45-semantics/20-semantics-header/ru/EXERCISE.md
new file mode 100644
index 0000000..59c6d98
--- /dev/null
+++ b/modules/45-semantics/20-semantics-header/ru/EXERCISE.md
@@ -0,0 +1 @@
+Создайте разметку «шапки» сайта. Расположите внутри картинку и маркированный список из двух ссылок
diff --git a/modules/45-semantics/20-semantics-header/ru/README.md b/modules/45-semantics/20-semantics-header/ru/README.md
new file mode 100644
index 0000000..5a8cb60
--- /dev/null
+++ b/modules/45-semantics/20-semantics-header/ru/README.md
@@ -0,0 +1,18 @@
+Шапкой на сайте принято называть верхнюю область, в которой находятся контактные данные, меню, логотип. До появления стандарта HTML5 данную область просто размечали, используя обычный блок `<div>`, что не вносило «смысла».
+
+В HTML5 для разметки шапки сайта используется парный тег `<header>`, внутри которого располагаются элементы.
+
+```html
+<header>
+  <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
+  <div id="menu"> <!-- Меню -->
+    <ul>
+      <li><a href="/">Главная</a></li>
+      <li><a href="/about">О нас</a></li>
+      <li><a href="/contacts">Контакты</a></li>
+    </ul>
+  </div>
+</header>
+```
+
+Тег `<header>` по своему поведению не отличается от тега `<div>` и не содержит отличных стандартных стилей, поэтому его можно использовать на любом сайте, не боясь нарушить внешний вид сайта.
diff --git a/modules/45-semantics/20-semantics-header/ru/data.yml b/modules/45-semantics/20-semantics-header/ru/data.yml
new file mode 100644
index 0000000..a011cf4
--- /dev/null
+++ b/modules/45-semantics/20-semantics-header/ru/data.yml
@@ -0,0 +1,5 @@
+name: Шапка
+tips:
+  - >-
+    Элемент `header` не является уникальным для страницы. Он может
+    использоваться не только как шапка всей страницы, но и как шапка секции
diff --git a/modules/45-semantics/30-nav/ru/EXERCISE.md b/modules/45-semantics/30-nav/ru/EXERCISE.md
new file mode 100644
index 0000000..98f2023
--- /dev/null
+++ b/modules/45-semantics/30-nav/ru/EXERCISE.md
@@ -0,0 +1 @@
+Создайте разметку «шапки» сайта. Расположите внутри картинку и меню из двух элементов. Используйте тег `<nav>` и маркированный список
diff --git a/modules/45-semantics/30-nav/ru/README.md b/modules/45-semantics/30-nav/ru/README.md
new file mode 100644
index 0000000..87b2830
--- /dev/null
+++ b/modules/45-semantics/30-nav/ru/README.md
@@ -0,0 +1,39 @@
+Вернёмся к примеру из прошлых уроков:
+
+```html
+<header>
+  <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
+  <div id="menu"> <!-- Меню -->
+    <ul>
+      <li><a href="/">Главная</a></li>
+      <li><a href="/about">О нас</a></li>
+      <li><a href="/contacts">Контакты</a></li>
+    </ul>
+  </div>
+</header>
+```
+
+В нём меню сайта размечено с помощью обычного тега `<div>` с идентификатором `menu`. Как известно, такое обозначение работает для разработчиков, но не для браузеров. Они не понимают, что это меню, а не просто обёртка для списка.
+
+Для создания полноценного меню используется парный тег `<nav>`, задача которого — разметить область страницы с основным меню. Также различные устройства для чтения с экрана, которыми пользуются люди со слабым зрением, используют этот тег, чтобы определить, стоит ли его отображать на странице.
+
+Заменим `<div id="menu"></div>` на изученный тег `<nav>`:
+
+```html
+<header>
+  <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
+  <nav> <!-- Меню -->
+    <ul>
+      <li><a href="/">Главная</a></li>
+      <li><a href="/about">О нас</a></li>
+      <li><a href="/contacts">Контакты</a></li>
+    </ul>
+  </nav>
+</header>
+```
+
+Элемент `nav`, как и `header` не является уникальным для страницы. Его можно использовать для любого меню на странице, но есть несколько рекомендаций:
+
+1. Нет необходимости оборачивать каждое меню в элемент `nav`. В основном такой областью указываются только основные меню. Дополнительные, такие как меню в футере, не оборачивают в тег `<nav>`, хотя это не запрещено.
+2. Хороший пример дополнительного использования `nav` — навигация по текущей странице.
+3. `nav` может содержать не только ссылки, но также и текст, в котором есть ссылки. Ориентируйтесь на здравый смысл. Если навигация является основной для страницы или всего сайта, то оберните её в тег `<nav>`.
diff --git a/modules/45-semantics/30-nav/ru/data.yml b/modules/45-semantics/30-nav/ru/data.yml
new file mode 100644
index 0000000..d5f999b
--- /dev/null
+++ b/modules/45-semantics/30-nav/ru/data.yml
@@ -0,0 +1,6 @@
+name: Меню
+tips:
+  - >-
+    Оборачивайте в элемент навигации только основные меню сайта или отдельной
+    страницы. Дополнительные меню не нуждаются в обёртке в тег `<nav>`
+  - Навигация может быть в любой области страницы, а не только в шапке сайте
diff --git a/modules/45-semantics/40-main/ru/EXERCISE.md b/modules/45-semantics/40-main/ru/EXERCISE.md
new file mode 100644
index 0000000..c6fb3ef
--- /dev/null
+++ b/modules/45-semantics/40-main/ru/EXERCISE.md
@@ -0,0 +1,6 @@
+Создайте шапку сайта. Она состоит из 2-х элементов:
+
+  * Логотип
+  * Секция навигации. Внутри неё маркированный список из двух элементов
+
+Добавьте секцию `<main>`. Внутри неё вставьте произвольный контент.
diff --git a/modules/45-semantics/40-main/ru/README.md b/modules/45-semantics/40-main/ru/README.md
new file mode 100644
index 0000000..07ee742
--- /dev/null
+++ b/modules/45-semantics/40-main/ru/README.md
@@ -0,0 +1,31 @@
+Каждая HTML-страница содержит уникальный контент, который есть только на этой странице. Такая область размечается с помощью парного тега `<main>`. Это поможет устройствам для людей с ограниченными возможностями и поисковым роботам быстрее понять, где находится основной контент на странице.
+
+Возьмём созданную нами шапку сайта и добавим к ней область с уникальным контентом:
+
+```html
+<header>
+  <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
+  <nav> <!-- Меню -->
+    <ul>
+      <li><a href="/">Главная</a></li>
+      <li><a href="/about">О нас</a></li>
+      <li><a href="/contacts">Контакты</a></li>
+    </ul>
+  </nav>
+</header>
+
+<main>
+  <!-- Основной контент страницы. Это может быть статья, описание услуги, данные на странице, контакты, форма заказа услуги -->
+</main>
+```
+
+Элемент `main` является уникальным для одной страницы. Это отражает его семантическое назначение — разметка уникального контента. При оборачивании контента в `main` важно не включать в него неуникальные области:
+
+* Боковое меню
+* Общую навигацию для сайта
+* Общую шапку и футер сайта
+* Логотип
+
+Размещайте в `main` именно текстовый/графический контент. Найти такой контент в шаблонах легко — он не дублируется на других страницах.
+
+Внутри элемента `main` могут находиться свои области навигации, шапки, секции и другие элементы, которые будут изучены в этом модуле.
diff --git a/modules/45-semantics/40-main/ru/data.yml b/modules/45-semantics/40-main/ru/data.yml
new file mode 100644
index 0000000..9894472
--- /dev/null
+++ b/modules/45-semantics/40-main/ru/data.yml
@@ -0,0 +1,7 @@
+name: Уникальный контент страницы
+tips:
+  - main — уникальная секция, которая используется один раз на всю страницу
+  - >-
+    Для удобного поиска области, которая должна быть в `main` попробуйте,
+    мысленно, оставить только те области, которые есть на каждой странице.
+    Именно они не должны располагаться в области `main`
diff --git a/modules/45-semantics/50-section/ru/EXERCISE.md b/modules/45-semantics/50-section/ru/EXERCISE.md
new file mode 100644
index 0000000..008ed8b
--- /dev/null
+++ b/modules/45-semantics/50-section/ru/EXERCISE.md
@@ -0,0 +1,6 @@
+Создайте шапку сайта. Она состоит из 2-х элементов:
+
+  * Логотип
+  * Секция навигации. Внутри неё маркированный список из двух элементов
+
+Добавьте секцию `<main>`. Внутри создайте две секции с заголовками второго уровня
diff --git a/modules/45-semantics/50-section/ru/README.md b/modules/45-semantics/50-section/ru/README.md
new file mode 100644
index 0000000..48814b0
--- /dev/null
+++ b/modules/45-semantics/50-section/ru/README.md
@@ -0,0 +1,57 @@
+
+На больших страницах содержится много контента, который помещён друг в друга. Внутри шапки может быть отдельная область с правилами использования, внутри `main` секции с формой, дополнительной информацией и так далее. Они могут быть выделены с помощью тега `<section>`, значение которого — разметка связанных, по смыслу, блоков внутри секции.
+
+Может звучать немного запутано, но представьте себе страницу музыкального портала, у которого есть области:
+
+* Информация об исполнителе
+* Популярные треки исполнителя
+* Дискография
+* Список ближайших концертов
+
+Если это страница об исполнителе, то весь этот контент будет расположен внутри секции `main`, при этом стоит выделить и эти 4 секции. Они связаны с общим контентом, но являются самостоятельными единицами внутри него. Такая вёрстка может выглядеть следующим образом:
+
+```html
+<main>
+  <h1>Blue October</h1>
+  <p>Американская группа из Хьюстона, играющая в стиле альтернативный рок</p>
+  <section>
+    <h2>Популярные треки</h2>
+  </section>
+  <section>
+    <h2>Дискография</h2>
+  </section>
+  <section>
+    <h2>Ближайшие концерты</h2>
+  </section>
+</main>
+```
+
+Если «вытащить эти секции» из тега `<main>`, то они потеряют свой смысл, так как без текста об исполнителе такая информация может быть непонятна. Такая информация напрямую связана с основным содержанием и не может существовать без него.
+
+Добавим в учебный пример форму заказа услуги. Эта форма для заказа именно той услуги, которая представлена на странице, поэтому секция находится внутри области `main` и вынесена в отдельный тег `<section>`.
+
+```html
+<header>
+  <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
+  <nav> <!-- Меню -->
+    <ul>
+      <li><a href="/">Главная</a></li>
+      <li><a href="/about">О нас</a></li>
+      <li><a href="/contacts">Контакты</a></li>
+    </ul>
+  </nav>
+</header>
+
+<main>
+  <p>Основной контент страницы. Это может быть статья, описание услуги, данные на странице контакты</p>
+
+  <section class="callback-form">
+    <h2>Оставить заявку</h2>
+    <form>
+      <!-- Здесь форма заказа услуги -->
+    </form>
+  </section>
+</main>
+```
+
+В большинстве случаев все области `section` имеют свой заголовок. Это хороший способ понять, когда нужно добавить область `section`.
diff --git a/modules/45-semantics/50-section/ru/data.yml b/modules/45-semantics/50-section/ru/data.yml
new file mode 100644
index 0000000..a9271de
--- /dev/null
+++ b/modules/45-semantics/50-section/ru/data.yml
@@ -0,0 +1,6 @@
+name: Секция
+tips:
+  - >-
+    Область `section` дополняет основной контент и не должна существовать сама
+    по себе
+  - Следите за тем, что бы каждая секция имела свой заголовок
diff --git a/modules/45-semantics/60-article/ru/EXERCISE.md b/modules/45-semantics/60-article/ru/EXERCISE.md
new file mode 100644
index 0000000..3679e3a
--- /dev/null
+++ b/modules/45-semantics/60-article/ru/EXERCISE.md
@@ -0,0 +1,8 @@
+Создайте шапку сайта. Она состоит из 2-х элементов:
+
+  * Логотип
+  * Секция навигации. Внутри неё маркированный список из двух элементов
+
+Добавьте секцию `<main>`. Внутри создайте секцию с заголовком в теге `<h2>` и два блока с описанием новых услуг.
+
+Не забудьте, что внутри тега `<article>` обязательно содержится заголовок. Сами заголовки внутри `<article>` разметьте тегом `<h3>`.
diff --git a/modules/45-semantics/60-article/ru/README.md b/modules/45-semantics/60-article/ru/README.md
new file mode 100644
index 0000000..95c7b48
--- /dev/null
+++ b/modules/45-semantics/60-article/ru/README.md
@@ -0,0 +1,50 @@
+Помимо тега `<section>`, для обозначения секции используется тег `<article>`. Он предназначается для разметки секции, которая может быть использована самостоятельно и не привязана структурно к конкретной странице. Например, блок с курсом валют, погода, превью новости или статьи. Данные блоки хоть и могут напрямую касаться текущей страницы, но они представляют собой самостоятельную единицу, которая не потеряет смысл, если взглянуть на неё отдельно от контекста.
+
+В связи с тем, что `<article>` может быть использован самостоятельно, он обязательно внутри себя содержит заголовок.
+
+```html
+<header>
+  <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
+  <nav> <!-- Меню -->
+    <ul>
+      <li><a href="/">Главная</a></li>
+      <li><a href="/about">О нас</a></li>
+      <li><a href="/contacts">Контакты</a></li>
+    </ul>
+  </nav>
+</header>
+
+<main>
+  <p>Основной контент страницы. Это может быть статья, описание услуги, данные на странице контакты</p>
+
+  <section class="callback-form">
+    <h2>Оставить заявку</h2>
+    <form>
+      <!-- Здесь форма заказа услуги -->
+    </form>
+  </section>
+
+  <section class="more">
+    <h2>Читайте также</h2>
+    <article class="article-block">
+      <h3>Услуга 2</h3>
+      <p>Описание новой услуги</p>
+      <a href="#">Ссылка на услугу</a>
+    </article>
+
+    <article class="article-block">
+      <h3>Услуга 3</h3>
+      <p>Описание новой услуги</p>
+      <a href="#">Ссылка на услугу</a>
+    </article>
+
+    <article class="article-block">
+      <h3>Услуга 4</h3>
+      <p>Описание новой услуги</p>
+      <a href="#">Ссылка на услугу</a>
+    </article>
+  </section>
+</main>
+```
+
+Обратите внимание, что сами `<article>` обёрнуты в `<section>`, так как эта секция напрямую связана с текущей страницей и показывает похожие услуги. А услуги размечены с помощью `<article>`. Они могут быть «выдернуты» из контекста, и всё равно будет понятно, что это описание конкретной услуги, которую мы предлагаем.
diff --git a/modules/45-semantics/60-article/ru/data.yml b/modules/45-semantics/60-article/ru/data.yml
new file mode 100644
index 0000000..cd1ad88
--- /dev/null
+++ b/modules/45-semantics/60-article/ru/data.yml
@@ -0,0 +1,6 @@
+name: Самостоятельная секция
+tips:
+  - >-
+    Если область не потеряет свой смысл вне страницы, то её можно обернуть в
+    `<article>`
+  - Все области `article` обязательно имеют заголовок
diff --git a/modules/45-semantics/70-aside/ru/EXERCISE.md b/modules/45-semantics/70-aside/ru/EXERCISE.md
new file mode 100644
index 0000000..2b2dbf2
--- /dev/null
+++ b/modules/45-semantics/70-aside/ru/EXERCISE.md
@@ -0,0 +1,8 @@
+Создайте шапку сайта. Она состоит из 2-х элементов:
+
+  * Логотип
+  * Секция навигации. Внутри неё маркированный список из двух элементов
+
+Добавьте секцию `<main>`. Внутри создайте секцию с заголовком в теге `<h2>`. Внутри секции создайте два блока с описанием новых услуг. Не забудьте, что внутри тега `<article>` обязательно содержится заголовок. Сами заголовки внутри `<article>` разметьте тегом `<h3>`.
+
+Добавьте боковую панель. Она является уникальной для каждой страницы и содержит текст, относящийся только к этой странице. Внутри панели вставьте произвольный текст. Подумайте, где именно будет расположена эта область
diff --git a/modules/45-semantics/70-aside/ru/README.md b/modules/45-semantics/70-aside/ru/README.md
new file mode 100644
index 0000000..a0061e9
--- /dev/null
+++ b/modules/45-semantics/70-aside/ru/README.md
@@ -0,0 +1,60 @@
+Большинство сайтов имеют боковую панель или, как её ещё называют, сайдбар. Он служит для отображения информации, которая дополняет основной текст, но не является обязательной. Чаще всего это меню раздела, список определений из статьи, виджеты и т.д.
+
+Для того чтобы корректно разметить такую область, существует тег `<aside>`, внутри которого и располагается наша боковая панель. Добавим в пример из прошлого урока боковую панель с дополнительным меню.
+
+```html
+<header>
+  <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
+  <nav> <!-- Меню -->
+    <ul>
+      <li><a href="/">Главная</a></li>
+      <li><a href="/about">О нас</a></li>
+      <li><a href="/contacts">Контакты</a></li>
+    </ul>
+  </nav>
+</header>
+
+<aside> <!-- Боковая панель (сайдбар) -->
+  <nav> <!-- Дополнительное меню страницы -->
+    <ul>
+      <li><a href="/service-1/">Услуга 1</a></li>
+      <li><a href="/service-2/">Услуга 2</a></li>
+      <li><a href="/service-3/">Услуга 3</a></li>
+    </ul>
+  </nav>
+</aside>
+
+<main>
+  <p>Основной контент страницы. Это может быть статья, описание услуги, данные на странице контакты</p>
+
+  <section class="callback-form">
+    <h2>Оставить заявку</h2>
+    <form>
+      <!-- Здесь форма заказа услуги -->
+    </form>
+  </section>
+
+  <section class="more">
+    <h2>Читайте также</h2>
+    <article class="article-block">
+      <h3>Услуга 2</h3>
+      <p>Описание новой услуги</p>
+      <a href="#">Ссылка на услугу</a>
+    </article>
+
+    <article class="article-block">
+      <h3>Услуга 3</h3>
+      <p>Описание новой услуги</p>
+      <a href="#">Ссылка на услугу</a>
+    </article>
+
+    <article class="article-block">
+      <h3>Услуга 4</h3>
+      <p>Описание новой услуги</p>
+      <a href="#">Ссылка на услугу</a>
+    </article>
+  </section>
+</main>
+```
+
+Обратите внимание, что `<aside>` содержится вне тега `<main>`. Этот контент не обязан быть уникальным на каждой странице. Он может быть уникальным для каждого конкретного раздела (если речь идёт, например, о меню). Если боковая панель уникальна для каждой страницы, то она должна быть расположена внутри тега `<main>`.
diff --git a/modules/45-semantics/70-aside/ru/data.yml b/modules/45-semantics/70-aside/ru/data.yml
new file mode 100644
index 0000000..3604faa
--- /dev/null
+++ b/modules/45-semantics/70-aside/ru/data.yml
@@ -0,0 +1,5 @@
+name: Боковая панель
+tips:
+  - >-
+    Хоть мы и говорили про боковую панель, но `aside` обозначает дополняющую
+    область. При этом, зачастую, визуально она выглядит как боковая панель
diff --git a/modules/50-form/10-form-basics/ru/EXERCISE.md b/modules/50-form/10-form-basics/ru/EXERCISE.md
new file mode 100644
index 0000000..a404986
--- /dev/null
+++ b/modules/50-form/10-form-basics/ru/EXERCISE.md
@@ -0,0 +1 @@
+Создайте форму, у которой файл с обработчиком данных лежит по адресу `/people`
diff --git a/modules/50-form/10-form-basics/ru/README.md b/modules/50-form/10-form-basics/ru/README.md
new file mode 100644
index 0000000..ea781bf
--- /dev/null
+++ b/modules/50-form/10-form-basics/ru/README.md
@@ -0,0 +1,29 @@
+При взаимодействии с HTML-документами одно из частых действий — ввод данных в различные поля документа. Например, ввод данных в строку поиска. Именно так вы ищете информацию с помощью поисковых систем (например, Google или Yandex): вводите запрос, он отправляется на сервер (компьютер, на котором расположен сайт), и на выходе вы получаете результат поиска.
+
+Такое взаимодействие осуществляется с помощью форм — набора полей и кнопок действий. Важно помнить, что HTML не умеет обрабатывать данные, которые были отправлены через форму. Для взаимодействия с этими данными нужно использовать языки программирования, которые работают на сервере, например JavaScript или PHP. Основы программирования на этих языках есть в соответствующих разделах на Code Basics:
+
+* [JavaScript](https://ru.code-basics.com/languages/javascript)
+* [PHP](https://ru.code-basics.com/languages/php)
+
+Детальнее эти вопросы рассмотрены в профессиях на Hexlet:
+
+* [Профессия Бэкенд JavaScript (node.js)](https://ru.hexlet.io/professions/backend)
+* [Профессия PHP-программист](https://ru.hexlet.io/professions/php)
+
+Любая форма начинается с главного тега `<form>`, внутри которого и будут располагаться поля для заполнения и кнопка действия.
+
+```html
+<form>
+  // Внутри формы будут поля для ввода данных и кнопка с действием (отправкой данных)
+</form>
+```
+
+Основным атрибутом у тега `<form>` является `action` — путь к файлу, где располагается обработчик данных. Именно туда уйдут данные после отправки формы.
+
+```html
+<form action="/search">
+  // Данные, после заполнения, будут отправлены на страницу /search
+</form>
+```
+
+Если данный атрибут не указан, данные уйдут на ту же страницу, откуда была отправлена форма.
diff --git a/modules/50-form/10-form-basics/ru/data.yml b/modules/50-form/10-form-basics/ru/data.yml
new file mode 100644
index 0000000..ad2af73
--- /dev/null
+++ b/modules/50-form/10-form-basics/ru/data.yml
@@ -0,0 +1 @@
+name: Формы в HTML
diff --git a/modules/50-form/20-input/ru/EXERCISE.md b/modules/50-form/20-input/ru/EXERCISE.md
new file mode 100644
index 0000000..35c3d27
--- /dev/null
+++ b/modules/50-form/20-input/ru/EXERCISE.md
@@ -0,0 +1 @@
+Создайте форму, у которой файл с обработчиком данных лежит по адресу `/people`. Внутри формы создайте 2 текстовых поля
diff --git a/modules/50-form/20-input/ru/README.md b/modules/50-form/20-input/ru/README.md
new file mode 100644
index 0000000..20c2fd0
--- /dev/null
+++ b/modules/50-form/20-input/ru/README.md
@@ -0,0 +1,104 @@
+Основной элемент форм в HTML — поле для ввода. Оно реализуется с помощью тега `<input>` и позволяет задать различные поля для ввода данных: текст, пароли, чекбоксы, радио кнопки, кнопки отправки, загрузка файла, ввод даты и так далее.
+
+Начиная со стандарта HTML5 список полей пополнился множеством новых вариантов. Базовыми типами инпутов являются:
+
+* Текст
+* Пароли
+* Чекбоксы
+* Радио кнопки
+
+Самый простой способ использования `<input>` — создание текстового поля для ввода. Именно `<input>` присутствует во всех полях поиска. Чтобы создать простое текстовое поле для ввода данных, необходимо внутрь формы добавить непарный тег `<input>` и указать у него атрибут `type` со значением `text`:
+
+```html
+<form>
+  <input type="text">
+</form>
+```
+
+<div class="hexlet-basics-example my-3">
+  <form>
+    <input type="text">
+  </form>
+</div>
+
+## Тег label
+
+Поле создано, но совершенно непонятно что там вводить: имя? фамилию? код от сейфа? Чтобы указать назначение поля, используется тег `<label>`. Это парный тег, который напоминает параграф, но относится именно к описанию поля формы.
+
+```html
+<form>
+  <label>Введите имя</label>
+  <input type="text">
+</form>
+```
+
+На самом деле недостаточно просто указать `label`, нужно его связать с полем формы. Это необходимо для однозначной связи, ведь полей может быть много.
+
+Для связи `label` используется один из двух вариантов:
+
+* Связь по атрибуту `id`. Для этого у тега `<input>` указывается атрибут `id` с произвольным именем, а у `<label>` добавляется атрибут `for` с таким же именем, как и значение `id` у элемента `input`
+
+```html
+<form>
+  <label for="name">Введите имя</label>
+  <input type="text" id="name">
+</form>
+```
+
+* Связь через вложенность. Вы обратили внимание, что `<label>` — это парный тег? Для связи можно вложить `input` внутрь `label`, тогда они автоматически свяжутся друг с другом
+
+```html
+<form>
+  <label>Введите имя
+    <input type="text">
+  </label>
+</form>
+```
+
+## Атрибут placeholder
+
+Встречаются ситуации, когда для поля есть описание, но совершенно непонятно, в каком формате нужно заполнить данные. Например, вначале указать имя, а потом фамилию, или наоборот? Чтобы помочь пользователю сориентироваться используется атрибут `placeholder` у тега `<input>`. Значение этого атрибута будет выведено внутри текстового поля.
+
+```html
+<form>
+  <label for="name">Введите имя и фамилию</label>
+  <input type="text" id="name" placeholder="Иван Иванов">
+</form>
+```
+
+<div class="hexlet-basics-example my-3">
+  <form>
+    <label for="name">Введите имя и фамилию</label>
+    <input type="text" id="name" placeholder="Иван Иванов">
+  </form>
+</div>
+
+## Другие текстовые поля
+
+Замечали, что при вводе паролей, браузер автоматически проставляет звёздочки вместо показа символов? Этого можно добиться указав значение `password` для атрибута `type`:
+
+```html
+<form>
+  <label for="pin">Введите пинкод</label>
+  <input type="password" id="pin" placeholder="1234">
+</form>
+```
+
+<div class="hexlet-basics-example my-3">
+  <form>
+    <label for="pin">Введите пинкод</label>
+    <input type="password" id="pin" placeholder="1234">
+  </form>
+</div>
+
+В стандарте HTML5 появилось ещё несколько интересных типов для тега `<input>`, которые реализуют обычное текстовое поле, но имеют свою реализацию. Например:
+
+* `email`
+* `number`
+* `search`
+* `tel`
+* `url`
+
+Их назначение в том, что значения автоматически проверяются браузером на корректность. Например, если ввести значение `email`, то браузер будет ожидать корректный шаблон для Email адреса. В противном случае он сам укажет, что значение неверное при попытке отправить форму.
+
+Мобильные устройства также не обходят стороной эти поля. В современных версиях мобильных операционных систем клавиатура подстраивается под тип поля, которое заполняется. Если выставлен тип `email`, то на клавиатуру сразу будет добавлен символ `@`, чтобы его не приходилось искать в дополнительных символах
diff --git a/modules/50-form/20-input/ru/data.yml b/modules/50-form/20-input/ru/data.yml
new file mode 100644
index 0000000..4510339
--- /dev/null
+++ b/modules/50-form/20-input/ru/data.yml
@@ -0,0 +1 @@
+name: Поле для ввода текста
diff --git a/modules/50-form/30-checkbox/ru/EXERCISE.md b/modules/50-form/30-checkbox/ru/EXERCISE.md
new file mode 100644
index 0000000..05b49ce
--- /dev/null
+++ b/modules/50-form/30-checkbox/ru/EXERCISE.md
@@ -0,0 +1 @@
+Создайте форму, у которой файл с обработчиком данных лежит по адресу `/people`. Внутри формы создайте 2 чекбокса. Свяжите их вложив `<input>` внутри `<label>`. Не забудьте добавить атрибуты `name` и `value`
diff --git a/modules/50-form/30-checkbox/ru/README.md b/modules/50-form/30-checkbox/ru/README.md
new file mode 100644
index 0000000..13dfe90
--- /dev/null
+++ b/modules/50-form/30-checkbox/ru/README.md
@@ -0,0 +1,77 @@
+В интернет-магазинах, часто, поиск реализуется с помощью указания категорий, в которых хотим искать товар. Для реализации множественного выбора существуют чекбоксы (или, как их ещё называют — флажки).
+
+Чекбоксы позволяют выбирать множество элементов из представленных:
+
+<div class="hexlet-basics-example">
+  <form>
+    <label>
+      <input type="checkbox">
+      Хочу изучать HTML
+    </label>
+    <br>
+    <label>
+      <input type="checkbox">
+      Хочу изучать CSS
+    </label>
+    <br>
+    <label>
+      <input type="checkbox">
+      Хочу изучать JS
+    </label>
+    <br>
+    <label>
+      <input type="checkbox">
+      Хочу изучать другой язык
+    </label>
+  </form>
+</div>
+
+Для создания чекбокса используются два тега:
+
+* `<input>` с указанием `type="checkbox"`
+* `<label>`, в котором будет текст, связанный с нужным нам чекбоксом
+
+Для создания связи `<label>` с `<input>` существует два способа:
+
+* Связь по `id`. Для этого необходимо задать уникальный `id` для `<input>` и связать `<label>` с чекбоксом с помощью атрибута `for`
+
+```html
+<form>
+  <input id="html" type="checkbox">
+  <label for="html">Хочу изучать HTML</label>
+</form>
+```
+
+* Вложить `<input>` внутрь тега `<label>`. При этом указание уникального `id` не требуется
+
+```html
+<form>
+  <label>
+    <input type="checkbox">
+    Хочу изучать HTML
+  </label>
+</form>
+```
+
+Для того, чтобы после отправки формы на сервер возможно было узнать, какие именно пункты были выбраны, используется атрибут `value`, внутри которого находится значение, позволяющее определить чекбокс.
+
+Так как чекбоксов на странице может быть много, и они могут относиться к разным формам, для определения конкретной группы чекбоксов используется атрибут `name`. Для каждой группы чекбоксов указывается своё имя, по которому, в дальнейшем, возможно отделить группы чекбоксов при обработке на сервере.
+
+```html
+<form>
+  <label>
+    <input type="checkbox" name="languages" value="HTML">
+    Хочу изучать HTML
+  </label>
+  <br>
+  <label>
+    <input type="checkbox" name="languages" value="CSS">
+    Хочу изучать CSS
+  </label>
+  <br>
+  <label>
+    <input type="checkbox" name="languages" value="JS">
+    Хочу изучать JS
+  </label>
+</form>
+```
diff --git a/modules/50-form/30-checkbox/ru/data.yml b/modules/50-form/30-checkbox/ru/data.yml
new file mode 100644
index 0000000..5993331
--- /dev/null
+++ b/modules/50-form/30-checkbox/ru/data.yml
@@ -0,0 +1 @@
+name: Чекбокс
diff --git a/modules/50-form/40-radio/ru/EXERCISE.md b/modules/50-form/40-radio/ru/EXERCISE.md
new file mode 100644
index 0000000..447449a
--- /dev/null
+++ b/modules/50-form/40-radio/ru/EXERCISE.md
@@ -0,0 +1 @@
+Создайте форму, у которой файл с обработчиком данных лежит по адресу `/people`. Внутри формы создайте 2 радиокнопки. Свяжите их вложив `<input>` внутри `<label>`. Уникальное имя для радиокнопок `delivery`. Не забудьте добавить атрибут `value`
diff --git a/modules/50-form/40-radio/ru/README.md b/modules/50-form/40-radio/ru/README.md
new file mode 100644
index 0000000..fefd985
--- /dev/null
+++ b/modules/50-form/40-radio/ru/README.md
@@ -0,0 +1,79 @@
+Представьте, что вы предлагаете пользователю выбор: доставить товар курьером или почтой. Использовать чекбоксы в этом случае не получится, ведь выбор строго один.
+
+Для создания переключателей, которые умеют обрабатывать только один из множества вариантов, существуют радиокнопки. Название они получили от старых автомобильных радиоприёмников, в которых выбор радио осуществлялся нажатием на одну из множества кнопок для выбора частоты.
+
+<div class="hexlet-basics-example my-3">
+  <p class="lead">Выбор радиостанции</p>
+  <form>
+    <label>
+      <input type="radio" name="fm">
+      87.1 FM
+    </label>
+    <br>
+    <label>
+      <input type="radio" name="fm">
+      95.5 FM
+    </label>
+    <br>
+    <label>
+      <input type="radio" name="fm">
+      101.4 FM
+    </label>
+    <br>
+    <label>
+      <input type="radio" name="fm">
+      103.2 FM
+    </label>
+  </form>
+</div>
+
+Для создания радиокнопки, так же, как и чекбокса, используются два тега:
+
+* `<input>` с указанием `type="radio"`. Обязательным атрибутом является `name`, значением которого является имя. Данное имя должно быть одинаковым у всей группы радиокнопок. Без этого атрибута будет возможно выбрать все значения сразу, так как браузер не будет видеть связи между ними
+* `<label>`, в котором будет текст, связанный с нужной нам радиокнопкой
+
+Связь `<input>` с `<label>` происходит уже по одному из двух знакомых нам сценариев:
+
+* Связь по `id`. Для этого необходимо задать уникальный `id` для `<input>`, и связать `<label>` с радиокнопкой с помощью атрибута `for`
+
+  ```html
+  <form>
+    <input id="yes" type="radio" name="question">
+    <label for="yes">Да</label>
+
+    <input id="no" type="radio" name="question">
+    <label for="no">Нет</label>
+  </form>
+  ```
+
+* Вложить `<input>` внутрь тега `<label>`. При этом указание уникального `id` не требуется
+
+  ```html
+  <form>
+    <label>
+      <input type="radio" name="question">
+      Да
+    </label>
+    <br>
+    <label>
+      <input type="radio" name="question">
+      Нет
+    </label>
+  </form>
+  ```
+
+Для того чтобы после отправки формы на сервер возможно было узнать, какой именно пункт был выбран, используется атрибут `value`, внутри которого находится значение, позволяющее определить радиокнопку.
+
+```html
+<form>
+  <label>
+    <input type="radio" name="question" value="yes">
+    Да
+  </label>
+  <br>
+  <label>
+    <input type="radio" name="question" value="no">
+    Нет
+  </label>
+</form>
+```
diff --git a/modules/50-form/40-radio/ru/data.yml b/modules/50-form/40-radio/ru/data.yml
new file mode 100644
index 0000000..b5af284
--- /dev/null
+++ b/modules/50-form/40-radio/ru/data.yml
@@ -0,0 +1 @@
+name: Радиокнопка
diff --git a/modules/50-form/50-textarea/ru/EXERCISE.md b/modules/50-form/50-textarea/ru/EXERCISE.md
new file mode 100644
index 0000000..5d66b40
--- /dev/null
+++ b/modules/50-form/50-textarea/ru/EXERCISE.md
@@ -0,0 +1 @@
+Создайте форму, у которой файл с обработчиком данных лежит по адресу `/people`. Внутри формы создайте поле для многострочного ввода. Количество строк для ввода: 4. Количество столбцов: 30
diff --git a/modules/50-form/50-textarea/ru/README.md b/modules/50-form/50-textarea/ru/README.md
new file mode 100644
index 0000000..7f1d708
--- /dev/null
+++ b/modules/50-form/50-textarea/ru/README.md
@@ -0,0 +1,31 @@
+
+Часто мы хотим дать пользователю возможность набрать не одну строчку текста, а сразу несколько. Например, если пользователь хочет оставить отзыв. Для этого используется элемент `<textarea>`, позволяющий вводить несколько строчек текста.
+
+<div class="hexlet-basics-example">
+  <p class="lead">Оставьте свой отзыв</p>
+  <form>
+      <textarea></textarea>
+  </form>
+</div>
+
+```html
+<form>
+  <textarea></textarea>
+</form>
+```
+
+Заметьте, что `<textarea>` является парным тегом. Это означает, что вы можете вложить в него текст по умолчанию, чтобы пользователь быстрее понял, что ему необходимо ввести.
+
+По умолчанию высота и ширина `<textarea>` зависит от настроек браузера. Это значит, что в разных браузерах высота и ширина может меняться. Для того, чтобы установить одинаковое значение, используются атрибуты `rows` и `cols`, означающие количество строк и столбцов соответственно.
+
+```html
+<form>
+  <textarea rows="5" cols="30">textarea с 5 строками и 30 столбцами</textarea>
+</form>
+```
+
+<div class="hexlet-basics-example my-3">
+  <form>
+    <textarea rows="5" cols="30">textarea с 5 строками и 30 столбцами</textarea>
+  </form>
+</div>
diff --git a/modules/50-form/50-textarea/ru/data.yml b/modules/50-form/50-textarea/ru/data.yml
new file mode 100644
index 0000000..d7fadb3
--- /dev/null
+++ b/modules/50-form/50-textarea/ru/data.yml
@@ -0,0 +1 @@
+name: Textarea
diff --git a/modules/50-form/60-select/ru/EXERCISE.md b/modules/50-form/60-select/ru/EXERCISE.md
new file mode 100644
index 0000000..097a47a
--- /dev/null
+++ b/modules/50-form/60-select/ru/EXERCISE.md
@@ -0,0 +1 @@
+Создайте форму, у которой файл с обработчиком данных лежит по адресу `/people`. Внутри формы создайте выпадающий список из трёх элементов.
diff --git a/modules/50-form/60-select/ru/README.md b/modules/50-form/60-select/ru/README.md
new file mode 100644
index 0000000..eaf0e65
--- /dev/null
+++ b/modules/50-form/60-select/ru/README.md
@@ -0,0 +1,78 @@
+В различных формах пользователю часто приходится выбирать один из множества вариантов. Это могут быть категории, по которым мы хотим произвести поиск, выбор различных опций для поиска. Наиболее распространённым решением является использование выпадающих списков:
+
+<div class="hexlet-basics-example my-3">
+  <p class="lead">В какой категории искать?</p>
+  <form>
+    <select class="form-select">
+      <option>JS</option>
+      <option>PHP</option>
+      <option>Java</option>
+      <option>Racket</option>
+      <option>HTML</option>
+      <option>CSS</option>
+    </select>
+  </form>
+</div>
+
+Для создания такого выпадающего списка используется тег `<select>` с вложенными внутри него тегами `<option>`. Всё это похоже на создание обычных списков, где вместо `ul/ol` используется `<select>`, а вместо `<li>` используется `<option>`.
+
+Часто первый пункт списка используется для заголовка всего выпадающего списка. В таком случае для него используют атрибут `disabled`, чтобы заблокировать его для выбора.
+
+```html
+<form>
+  <select>
+    <option disabled>Какой курс вы хотите пройти?</option>
+    <option>JS</option>
+    <option>PHP</option>
+    <option>Java</option>
+    <option>Racket</option>
+    <option>HTML</option>
+    <option>CSS</option>
+  </select>
+</form>
+```
+
+<div class="hexlet-basics-example my-3">
+  <form>
+    <select class="form-select">
+      <option disabled>Какой курс вы хотите пройти?</option>
+      <option>JS</option>
+      <option>PHP</option>
+      <option>Java</option>
+      <option>Racket</option>
+      <option>HTML</option>
+      <option>CSS</option>
+    </select>
+  </form>
+</div>
+
+Список внутри формы также может быть представлен в виде списка, в котором можно выбрать несколько элементов. Делается это с помощью зажатия кнопки `ctrl` и клика мышки по полям, которые мы хотим выбрать.
+
+<div class="hexlet-basics-example my-3">
+  <p class="lead">В какой категории искать?</p>
+  <form>
+    <select multiple class="form-select">
+      <option>JS</option>
+      <option>PHP</option>
+      <option>Java</option>
+      <option>Racket</option>
+      <option>HTML</option>
+      <option>CSS</option>
+    </select>
+  </form>
+</div>
+
+Для того, чтобы создать список с множественным выбором, у тега `<select>` добавляется атрибут `multiple`
+
+```html
+<form>
+  <select multiple>
+    <option>JS</option>
+    <option>PHP</option>
+    <option>Java</option>
+    <option>Racket</option>
+    <option>HTML</option>
+    <option>CSS</option>
+  </select>
+</form>
+```
diff --git a/modules/50-form/60-select/ru/data.yml b/modules/50-form/60-select/ru/data.yml
new file mode 100644
index 0000000..d4fbbdb
--- /dev/null
+++ b/modules/50-form/60-select/ru/data.yml
@@ -0,0 +1 @@
+name: Список
diff --git a/modules/50-form/70-button/ru/EXERCISE.md b/modules/50-form/70-button/ru/EXERCISE.md
new file mode 100644
index 0000000..0202638
--- /dev/null
+++ b/modules/50-form/70-button/ru/EXERCISE.md
@@ -0,0 +1,5 @@
+Создайте форму, у которой файл с обработчиком данных лежит по адресу `/people`. Внутри формы расположите следующие элементы:
+
+* 2 текстовых поля `<input>`
+* Список с возможностью множественного выбора
+* Кнопку «Отправить»
diff --git a/modules/50-form/70-button/ru/README.md b/modules/50-form/70-button/ru/README.md
new file mode 100644
index 0000000..a968ba9
--- /dev/null
+++ b/modules/50-form/70-button/ru/README.md
@@ -0,0 +1,48 @@
+Последним шагом в создании формы является добавление кнопки для отправки результата на сервер. Для этого, используя парный тег `<button>`, создадим кнопку отправки:
+
+```html
+<form>
+  <button>Отправить</button>
+</form>
+```
+
+После нажатия на кнопку «Отправить», данные будут переданы обработчику, который указан в атрибуте `action` (если не указан, то данные отправятся на эту же страницу). **После отправки данных страница будет перезагружена**.
+
+Теперь, используя элементы форм из прошлых уроков, создадим форму с разными полями.
+
+```html
+<h2>Форма поиска</h2>
+<form>
+  <label>
+    Введите ваш запрос
+    <input type="search">
+  </label>
+  <br>
+  <select>
+    <option disabled>В каком разделе искать?</option>
+    <option>JS</option>
+    <option>HTML</option>
+    <option>CSS</option>
+  </select>
+  <button>Искать</button>
+</form>
+```
+
+<div class="hexlet-basics-example my-3">
+  <p class="lead">Форма поиска</p>
+  <form>
+    <label>
+      Введите ваш запрос
+      <input type="search">
+    </label>
+    <select>
+      <option disabled>В каком разделе искать?</option>
+      <option>JS</option>
+      <option>HTML</option>
+      <option>CSS</option>
+    </select>
+    <button>Искать</button>
+  </form>
+</div>
+
+Если вы нажмёте на кнопку «Искать», то страница перезагрузится и данные должны будут уйти в обработчик на эту же страницу. Так как обработчика нет, то никаких видимых результатов, кроме перезагрузки страницы, не произойдёт.
diff --git a/modules/50-form/70-button/ru/data.yml b/modules/50-form/70-button/ru/data.yml
new file mode 100644
index 0000000..ae14732
--- /dev/null
+++ b/modules/50-form/70-button/ru/data.yml
@@ -0,0 +1 @@
+name: Отправка формы
diff --git a/modules/55-other/10-validation/ru/EXERCISE.md b/modules/55-other/10-validation/ru/EXERCISE.md
new file mode 100644
index 0000000..ce7c61c
--- /dev/null
+++ b/modules/55-other/10-validation/ru/EXERCISE.md
@@ -0,0 +1 @@
+Исправьте ошибки в примере кода из теории. В тексте предполагалось использование тега `<p>`, а не `<span>`. Вставьте две исправленные строчки в редактор.
diff --git a/modules/55-other/10-validation/ru/README.md b/modules/55-other/10-validation/ru/README.md
new file mode 100644
index 0000000..382089a
--- /dev/null
+++ b/modules/55-other/10-validation/ru/README.md
@@ -0,0 +1,27 @@
+
+При разметке контента на странице часто возникают проблемы: забыли закрыть тег, вложили элементы, которые вкладывать нельзя, забыли указать обязательные теги.
+
+```html
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <title>Примеры ошибок</title>
+</head>
+<body>
+  <p>Текст</span> <!-- Закрыли не тот тег -->
+  <img src="images.png"> <!-- Не указали обязательный атрибут alt -->
+</body>
+</html>
+```
+
+В большинстве случаев такие ситуации не страшны. Разработчики браузеров внедряют автоматические проверки кода на ошибки, которые могут привести к нарушению отображения разметки, и при их наличии пытаются автоматически исправить проблему. При простых ошибках такой подход оправдан и позволяет разработчикам не беспокоиться о забытом теге `<html>` или `<body>`. В сложных же ситуациях такие ошибки могут быть трудно уловимы, и зачастую разработчики долго сидят над кодом и ищут их.
+
+Для решения таких проблем созданы специальные валидаторы HTML-разметки, которые автоматически проверяют код на ошибки. Можно указать ему ссылку на страницу или готовый фрагмент HTML-разметки, после чего валидатор выдаст список предупреждений и ошибок. На примере выше валидатор покажет следующие ошибки:
+
+![Валидатор показывает ошибки разметки](https://i.imgur.com/HxXGxQS.png)
+
+1. Отсутствие открывающего тега `<span>`, который сейчас оказался закрыт. Обычно это означает, что мы или случайно закрыли не тот тег, как в данном случае, или открыли не тот. Современные редакторы кода помогают избежать этой ошибки, так как они автоматически закрывают теги при их создании.
+2. Отсутствие обязательного атрибута `alt` у тега `<img>`.
+
+Распространённым валидатором является онлайн сервис от W3C, его можно найти по ссылке [https://validator.w3.org/](https://validator.w3.org/). Он поддерживает все стандарты HTML, поэтому важно не забывать проверять разметку с его помощью.
diff --git a/modules/55-other/10-validation/ru/data.yml b/modules/55-other/10-validation/ru/data.yml
new file mode 100644
index 0000000..b70a66c
--- /dev/null
+++ b/modules/55-other/10-validation/ru/data.yml
@@ -0,0 +1 @@
+name: Ошибки в HTML-разметке
diff --git a/modules/55-other/20-colors/ru/EXERCISE.md b/modules/55-other/20-colors/ru/EXERCISE.md
new file mode 100644
index 0000000..a578d6d
--- /dev/null
+++ b/modules/55-other/20-colors/ru/EXERCISE.md
@@ -0,0 +1 @@
+Создайте параграф с классом `background-black-50` и установите ему полупрозрачный чёрный фон. Используйте функцию `rgba()`. Стили запишите в теге `<style>`
diff --git a/modules/55-other/20-colors/ru/README.md b/modules/55-other/20-colors/ru/README.md
new file mode 100644
index 0000000..0802583
--- /dev/null
+++ b/modules/55-other/20-colors/ru/README.md
@@ -0,0 +1,85 @@
+
+При изучении курса мы сталкивались со свойствами, значениями которых является цвет. Такими свойствами были:
+
+* `color`
+* `background-color`
+* `border-color`
+
+Для обозначения цвета использовалась шестнадцатеричная модель RGB, которая переводится как _Red Green Blue_. В CSS для обозначения цвета в RGB используется две основные записи:
+
+* Шестнадцатеричная. Это запись из 6 символов, разбитые на три блока по два значения. Каждый блок отвечает за один из цветов: красный, зелёный или синий
+* С использованием функции `rgb(red, green, blue)`. Функция принимает три числа от _0_ до _255_, каждое из которых определяет количество красного, зелёного и синего цвета
+
+## Шестнадцатеричная запись
+
+При использовании такой записи используется [шестнадцатеричная система счисления](https://ru.wikipedia.org/wiki/Шестнадцатеричная_система_счисления). Запись делится на три блока по два числа:
+
+1. от `00` до `ff` — количество красного цвета
+2. от `00` до `ff` — количество зелёного цвета
+3. от `00` до `ff` — количество синего цвета
+
+```css
+/* Белый цвет */
+color: #ffffff;
+
+/* Чёрный цвет */
+color: #000000;
+```
+
+Предположим, что для текста нужен фиолетовый цвет. Как он получается? Для этого смешивается красный и синий цвет. В фиолетовом отсутствует зелёный цвет. Значит нужна максимальная запись в первом и третьем блоке. Итого получится цвет `#ff00ff`
+
+<div class="hexlet-basics-example my-3" style="color: #ff00ff;">
+  Текст фиолетового цвета
+</div>
+
+Можно получать разные вариации этого цвета, добавляя или уменьшая количество составных цветов
+
+## Функция rgb
+
+Второй способ указать цвет с помощью цветовой модели RGB — использование специальной функции `rgb()`. Она принимает три числа от _0_ до _255_, где первое число определяет количество красного цвета, второе число — количество зелёного цвета, а третье — количество синего. Ничего не напоминает?
+
+Если вам показалось, что это похоже на шестнадцатеричную систему, то будете правы — суть точно такая же. Только записываем цвета в привычных нам цифрах. В остальном всё то же самое, а значит можно создать фиолетовый цвет, используя функцию `rgb()`:
+
+```html
+<p class="text">Текст фиолетового цвета</p>
+```
+
+```css
+.text {
+  color: rgb(255, 0, 255);
+}
+```
+
+<div class="hexlet-basics-example my-3" style="color: rgb(255, 0, 255);">
+  Текст фиолетового цвета
+</div>
+
+А вот как будет выглядеть белый и чёрный цвет при использовании функции `rgb()`:
+
+```css
+/* Белый цвет */
+color: rgb(255, 255, 255);
+
+/* Чёрный цвет */
+color: rgb(0, 0, 0);
+```
+
+## Прозрачность и функция rgba()
+
+При использовании фонового цвета часто используют не просто цвет, но и добавляют ему прозрачность. В цветовой модели RGB для этого используется понятие _«альфа»-канал_. Он определяет насколько прозрачный цвет должен выводиться и задаётся числом от _0_ до _1_, где _0_ — полностью прозрачный цвет, а _1_ — полностью непрозрачный.
+
+Чтобы использовать альфа-канал создаётся функция `rgba()`, где `a` — `alpha`. В остальном всё точно так же, как и было изучено ранее. Сделаем полупрозрачный фиолетовый фон:
+
+```html
+<div class="background">Блок с полупрозрачным фиолетовым фоном</div>
+```
+
+```css
+.background {
+  background-color: rgba(255, 0, 255, 0.5);
+}
+```
+
+<div class="hexlet-basics-example my-3" style="background-color: rgba(255, 0, 255, 0.5);">
+  Блок с полупрозрачным фиолетовым фоном
+</div>
diff --git a/modules/55-other/20-colors/ru/data.yml b/modules/55-other/20-colors/ru/data.yml
new file mode 100644
index 0000000..a6d0a81
--- /dev/null
+++ b/modules/55-other/20-colors/ru/data.yml
@@ -0,0 +1 @@
+name: Цветовая модель RGB
diff --git a/modules/55-other/30-varibles/ru/EXERCISE.md b/modules/55-other/30-varibles/ru/EXERCISE.md
new file mode 100644
index 0000000..b7e07b6
--- /dev/null
+++ b/modules/55-other/30-varibles/ru/EXERCISE.md
@@ -0,0 +1 @@
+Создайте переменную `--main-blue` и установите, в качестве значения, голубой цвет `#00bfff`. Переменную укажите в `:root`. Стили запишите в теге `<style>`
diff --git a/modules/55-other/30-varibles/ru/README.md b/modules/55-other/30-varibles/ru/README.md
new file mode 100644
index 0000000..dc3087f
--- /dev/null
+++ b/modules/55-other/30-varibles/ru/README.md
@@ -0,0 +1,43 @@
+Современный сайт содержит тысячи строк стилей. Стили для блоков, текста, небольших областей — всё это часто лежит в одном месте. Представьте ситуацию:  есть определённый оттенок красного цвета, который мы используем во множестве различных блоков.
+
+Насколько удобно будет изменить все значения, если захочется изменить базовый цвет? Правильно — придётся находить все значения внутри файла и заменять их на новые.
+
+Долгое время это было одной из главных проблем CSS. С появлением стандарта CSS3 эта проблема ушла благодаря переменным.
+
+Переменные в программировании — небольшой участок памяти, в котором мы храним нужное значение. К этому значению всегда можно обратиться из любого доступного места.
+
+Как и в программировании, в CSS можно указать переменные, которые будут доступны в течении всего процесса разработки сайта. Если используются переменные, то можно быстро заменить одни значения на другие, вместо того, чтобы заменять значения свойств вручную.
+
+Переменная создаётся с помощью конструкции `--имя-переменной`. Имя переменной вы можете выбрать сами. Для примера создадим переменную `--main-color`, которая будет содержать базовый цвет страниц. Пускай он будет чёрным:
+
+```css
+--main-color: #000000;
+```
+
+За такой простотой скрывается то, что переменные имеют разные «области видимости» — участки файла, откуда ими можно воспользоваться. Это большая тема, поэтому разберём только «глобальную область видимости». Это даст возможность использовать переменную в любом участке CSS файла.
+
+Для создания глобальной переменной её нужно указать в специальной конструкции `:root`. Обычно это делается в самом начале CSS файла:
+
+```css
+:root {
+  --main-color: #000000;
+}
+```
+
+Теперь можно использовать переменную в любой части нашего CSS-кода. Это делается с помощью специальной конструкции `var(--имя-переменной)`.
+
+```css
+:root {
+  --main-color: #000000;
+}
+
+.news-block {
+  background-color: var(--main-color);
+}
+
+.left-sidebar {
+  background-color: var(--main-color);
+}
+```
+
+Если мы хотим установить другой оттенок чёрного цвета, достаточно изменить только значение переменной `--main-color`, и все изменения автоматически применятся к блокам с классами `.news-block` и `.left-sidebar`
diff --git a/modules/55-other/30-varibles/ru/data.yml b/modules/55-other/30-varibles/ru/data.yml
new file mode 100644
index 0000000..9cbca4c
--- /dev/null
+++ b/modules/55-other/30-varibles/ru/data.yml
@@ -0,0 +1 @@
+name: Переменные
diff --git a/modules/55-other/40-animation/ru/EXERCISE.md b/modules/55-other/40-animation/ru/EXERCISE.md
new file mode 100644
index 0000000..d2c55ef
--- /dev/null
+++ b/modules/55-other/40-animation/ru/EXERCISE.md
@@ -0,0 +1 @@
+Создайте анимацию, меняющую цвет текста с чёрного на белый. Примените анимацию к классу `black-white`. Стили запишите в теге `<style>`
diff --git a/modules/55-other/40-animation/ru/README.md b/modules/55-other/40-animation/ru/README.md
new file mode 100644
index 0000000..cd06cb4
--- /dev/null
+++ b/modules/55-other/40-animation/ru/README.md
@@ -0,0 +1,66 @@
+Анимация — обширный модуль в CSS. К сожалению, описать все возможности за один урок невозможно. В этом уроке будет показан базовый принцип анимации в CSS на основе `@keyframes`. Для примера, сделаем анимацию текста — цвет текста меняется с голубого на красный.
+
+Для того, чтобы задать анимацию, используется правило `@keyframes` и название анимации:
+
+```css
+@keyframes color-change {
+  // Внутри будет наша анимация
+}
+```
+
+Название анимации может быть любым. Вы его выбираете самостоятельно. В последствии именно по этому названию свойство `animation` будет знать, какую именно анимацию необходимо воспроизвести.
+
+Внутри `@keyframes` необходимо указать различные временные промежутки, в которых будут происходить изменения. Например, на старте (0% завершённости анимации) будет голубой текст, в середине анимации (50%) — красный, и в конце (100%) — возвращаем голубой цвет.
+
+```css
+@keyframes color-change {
+  0% {
+    color: blue;
+  }
+
+  50% {
+    color: red;
+  }
+
+  100% {
+    color: blue;
+  }
+}
+```
+
+Теперь необходимо применить созданную нами анимацию к тексту на странице. Для этого используется правило `animation` с тремя основными значениями:
+
+* Название анимации
+* Длительность анимации. Указывается в секундах (1s, 2s, 3s и так далее)
+* Бесконечная анимация или нет (если бесконечная, то указывается параметр infinite)
+
+```css
+.animation-text {
+  animation: color-change 3s infinite;
+}
+```
+
+Осталось создать параграф с необходимым классом, и анимация начнёт работать.
+
+<div class="hexlet-basics-example">
+  <style>
+    @keyframes color-change {
+      0% {
+        color: blue;
+      }
+
+      50% {
+        color: red;
+      }
+
+      100% {
+        color: blue;
+      }
+    }
+
+    .animation-text {
+      animation: color-change 3s infinite;
+    }
+  </style>
+  <p class="animation-text m-0">Текст с анимацией color-change. Цвет текста меняется с голубого на красный и обратно</p>
+</div>
diff --git a/modules/55-other/40-animation/ru/data.yml b/modules/55-other/40-animation/ru/data.yml
new file mode 100644
index 0000000..9554308
--- /dev/null
+++ b/modules/55-other/40-animation/ru/data.yml
@@ -0,0 +1 @@
+name: Анимация