diff --git a/lectures/lec2/task1.css b/lectures/lec2/part1/task1.css similarity index 100% rename from lectures/lec2/task1.css rename to lectures/lec2/part1/task1.css diff --git a/lectures/lec2/task2.html b/lectures/lec2/part1/task2.html similarity index 100% rename from lectures/lec2/task2.html rename to lectures/lec2/part1/task2.html diff --git a/lectures/lec2/task3.html b/lectures/lec2/part1/task3.html similarity index 100% rename from lectures/lec2/task3.html rename to lectures/lec2/part1/task3.html diff --git a/lectures/lec2/task4-5.html b/lectures/lec2/part1/task4-5.html similarity index 100% rename from lectures/lec2/task4-5.html rename to lectures/lec2/part1/task4-5.html diff --git a/lectures/lec2/part2/task1.css b/lectures/lec2/part2/task1.css new file mode 100644 index 0000000..0646e14 --- /dev/null +++ b/lectures/lec2/part2/task1.css @@ -0,0 +1,23 @@ +.main > p:last-child{ + color:green; +} + +/* +
+
    +
  1. Комбинация селекторов
    2. +
  2. Селекторы атрибутов
    3. +
+

CSS селекторы

+
+
+

Комбинация селекторов

+ +

Различают следующие виды селекторов:

+
    +
  1. вложенный селектор;
    2. +
  2. родительский селектор;
    3. +
+

Соединение селекторов

--- ВОТ ЕГО КРАСИМ!!! +
+*/ \ No newline at end of file diff --git a/lectures/lec2/part2/task2.css b/lectures/lec2/part2/task2.css new file mode 100644 index 0000000..7656e0c --- /dev/null +++ b/lectures/lec2/part2/task2.css @@ -0,0 +1,24 @@ +.main li > [href="#"] { + color:green +} + + +/* +
+ +

CSS селекторы

+
+
+

Комбинация селекторов

+ +

Различают следующие виды селекторов:

+
    +
  1. вложенный селектор;
    2. +
  2. родительский селектор;
    3. +
+

Соединение селекторов

+
+*/ \ No newline at end of file diff --git a/lectures/lec2/part2/task3.css b/lectures/lec2/part2/task3.css new file mode 100644 index 0000000..9cc2f91 --- /dev/null +++ b/lectures/lec2/part2/task3.css @@ -0,0 +1,24 @@ +h2, ol >li:nth-child(2) , ol + p{ + color: green; +} + + +/* +
+ +
+
+

Комбинация селекторов

--- + +

Различают следующие виды селекторов:

+
    +
  1. вложенный селектор;
    2. +
  2. родительский селектор;
    3. --- +
  3. соседний селектор
    4. +
+

Соединение селекторов

--- +
+*/ \ No newline at end of file diff --git a/lectures/lec2/part3/task1.css b/lectures/lec2/part3/task1.css new file mode 100644 index 0000000..4008715 --- /dev/null +++ b/lectures/lec2/part3/task1.css @@ -0,0 +1,3 @@ +div > a > img{ + width: 10vw; +} \ No newline at end of file diff --git a/lectures/lec2/part3/task2.css b/lectures/lec2/part3/task2.css new file mode 100644 index 0000000..afcac1a --- /dev/null +++ b/lectures/lec2/part3/task2.css @@ -0,0 +1,8 @@ +div > a > img{ + width: 10vw; + min-width: 170px; +} +div > a { + min-width: 170px; +} + \ No newline at end of file diff --git a/lectures/lec2/part3/task3.css b/lectures/lec2/part3/task3.css new file mode 100644 index 0000000..fb69571 --- /dev/null +++ b/lectures/lec2/part3/task3.css @@ -0,0 +1,26 @@ +div > a > img{ + width: 10vw; + min-width: 170px; +} +div > a { + min-width: 170px; +} +div { + display: flex; +} +@media (max-width: 600px) { + div { + flex-direction: column; + align-items: center; + } + div > a { + width: 80vw; + max-width: 300px; + min-width: 0; + } + div > a > img { + width: 80vw; + max-width: 300px; + min-width: 0; + } +} \ No newline at end of file diff --git a/lectures/lec2/part4/task1.html b/lectures/lec2/part4/task1.html new file mode 100644 index 0000000..a332c01 --- /dev/null +++ b/lectures/lec2/part4/task1.html @@ -0,0 +1,24 @@ +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
+ + \ No newline at end of file diff --git a/lectures/lec2/part4/task2.html b/lectures/lec2/part4/task2.html new file mode 100644 index 0000000..15defce --- /dev/null +++ b/lectures/lec2/part4/task2.html @@ -0,0 +1,38 @@ + + + +
+
+ + + + + +
+
\ No newline at end of file diff --git a/lectures/lec2/part4/task3.html b/lectures/lec2/part4/task3.html new file mode 100644 index 0000000..ce753d4 --- /dev/null +++ b/lectures/lec2/part4/task3.html @@ -0,0 +1,46 @@ + +
+
+ + + + + +
+
\ No newline at end of file diff --git a/lectures/lec3/task1.html b/lectures/lec3/task1.html new file mode 100644 index 0000000..ca43caf --- /dev/null +++ b/lectures/lec3/task1.html @@ -0,0 +1,34 @@ + + + + + + + Bootstrap Template + + + + + + +
+

aboba

+

aboba

+

aboba

+

aboba

+

aboba

+

aboba

+
+ + + + + \ No newline at end of file diff --git a/lectures/lec3/task2.html b/lectures/lec3/task2.html new file mode 100644 index 0000000..21e5e94 --- /dev/null +++ b/lectures/lec3/task2.html @@ -0,0 +1,38 @@ + + + + + + + Bootstrap Template + + + + + + + +
+
Ворота на запад
+

192-метровая арка в Сент-Луисе (штат Миссури, США)

+ +
+
+
Ворота на запад
+

192-метровая арка в Сент-Луисе (штат Миссури, США)

+ +
+ + + + + \ No newline at end of file diff --git a/lectures/lec3/task3.html b/lectures/lec3/task3.html new file mode 100644 index 0000000..64c3f00 --- /dev/null +++ b/lectures/lec3/task3.html @@ -0,0 +1,44 @@ + + + + + + + Bootstrap Template + + + + + +
+
+
+ Строка 1, столбец 1 +
+
+ Строка 1, столбец 2 +
+
+
+
+ Строка 2, столбец 1 +
+
+ Строка 2, столбец 2 +
+
+ + + + + + \ No newline at end of file diff --git a/lectures/readme.md b/lectures/readme.md index 5ee7336..218ac02 100644 --- a/lectures/readme.md +++ b/lectures/readme.md @@ -4,18 +4,20 @@ так-же расказано про браузерные войны и про победу Chrome, WEB1.0 - WEB3.0 ## 1 HTML -Синтаксис, правила оформления, информация по существующим тегам для html4( я не уверен), не мало было сказано про формы +Синтаксис, правила оформления, информация по существующим тегам для html4( я не уверен), не мало было сказано про формы и лейблы привязанные к инпутам задачи: 1. исправить код 2. написать свой продублировав страничку с картинки ## 2 CSS +### p1 Описание синтаксиса, правил форматирования, процесс применения селекторов, приоретизация стилей id > class >tag блочное\строчное\блочно-строчное отображение элемента элемент и его padding border margin обобщённые свойства (border background margin font ) какие атрибуты применимы на блочные, а какие на строчные + задачи: 1. отформатировать код css 2. отчистить код от атрибутов внутри тегов @@ -23,3 +25,46 @@ id > class >tag 4. скопировать страницу 5. добавить меню на скопированную страницу +### p2 +В другом документе и этого же раздела фокус сделан на селекторе и псевдоклассах (:nth-child) и псевдоэлемтах (::first-line) + +задачи: +1. практика на селекторы, выбор элемента из кода +2. практика на селекторы, выбор элемента из кода +3. практика на селекторы, выбор элемента из кода + +### p3 +В третем документе рассказыается про динамическую вёрстку, vw vh vmin vmax и про атрибуты min\max-width\height. так-же затрагиваются медиа запросы + + +задачи: +1. применить vh +2. ограничение max-width +3. медиазапрос + +### p4 +В четвёртом модуле рассказыватется про flex и его исопльзование, атрибуты выравнивание внутри контейнера и внутри элементов контейнеров, перенос\запрет преноса и тд, а ну и про gap тоже разумеется row-gap , column-gap + +задачи: +1. осознать что когда запрет на wrap то wrap очевидно запрещается +2. изменеие направления flex на медиазапросе, включение отключение переноса +3. то-же что и 2 но с другим min-width в атрибуте у одного из элементов + +### p5 +Информация про гриды, начиная про определение и общие атрибуты +рассказывается про еденицы размеров ячейки (fr) про repeat и про min-max, и заканчивается обзор формированием зон в таблицах и установкой позиций элементов вне зависимости от положения тэга в дереве + + +## 3 Bootstrap +Определение фреймворка, примеры того как им пользоваиться +описание 12 колоночной вёрстки и связанных с ней предварительно готовых классо, концепция контрольныз точек (sm md ls xl xxl). +так-же затронуты контейнеры, они имеют фиксированый max-width который определяется соотв. атрибутом чекпоинта. +так-же немного расказано о внутрянке самого фрейморка (контейнеры построены на flex) и опять-же про аналог алинга айтемов как в гридах или флексе. +В Bootstrap существует три уровня: базовый (контейнеры и сетка), компоненты (кнопки, формы, карточки) и утилиты (классы для быстрого изменения внешнего вида). Так-же описывается создание атомарных классов и можификаторов цветов... + + + +задачи: +1. задача на чекпоинты и их понимание +2. применение разных дисплеев +3. задача на align и чекпоинты