diff --git a/lectures/lec4/part1/task1.html b/lectures/lec4/part1/task1.html new file mode 100644 index 0000000..9e99317 --- /dev/null +++ b/lectures/lec4/part1/task1.html @@ -0,0 +1,22 @@ +... + + +
+
+
Заголовок
+
Рисунок
+
+
+ +
+
Заголовок
+
+
+ +
+
Рисунок
+
Заголовок
+
+
+
+ \ No newline at end of file diff --git a/lectures/lec4/part2/task1.pug b/lectures/lec4/part2/task1.pug new file mode 100644 index 0000000..fc434db --- /dev/null +++ b/lectures/lec4/part2/task1.pug @@ -0,0 +1,10 @@ +ol#list(type="I") + li Препроцессоры HTML + ul(type="disc") + li.first + a(href="#") Haml + li Pug + li Препроцессоры CSS + ul(type="circle") + li.first SAAS + li Stylus \ No newline at end of file diff --git a/lectures/lec4/part2/task2.pug b/lectures/lec4/part2/task2.pug new file mode 100644 index 0000000..b02cf32 --- /dev/null +++ b/lectures/lec4/part2/task2.pug @@ -0,0 +1,9 @@ +ol#list(type="I") + li Препроцессоры HTML + ul(type="disc") + li.first: a(href="#") Haml + li Pug + li Препроцессоры CSS + ul(type="circle") + li.first SAAS + li Stylus \ No newline at end of file diff --git a/lectures/lec4/part2/task3.pug b/lectures/lec4/part2/task3.pug new file mode 100644 index 0000000..a6619fb --- /dev/null +++ b/lectures/lec4/part2/task3.pug @@ -0,0 +1,10 @@ +- var tag = 'h' +- var i = 1 + +#{tag+i} Уровень #{i} +- i++ +#{tag+i} Уровень #{i} +- i++ +#{tag+i} Уровень #{i} +- i++ +#{tag+i} Уровень #{i} \ No newline at end of file diff --git a/lectures/lec4/part2/task4.pug b/lectures/lec4/part2/task4.pug new file mode 100644 index 0000000..80e1702 --- /dev/null +++ b/lectures/lec4/part2/task4.pug @@ -0,0 +1,6 @@ +- var products ={"Товар":"Цена","ручка":30.5, "карандаш":50, "альбом":156, "тетрадь":21.5, "ластик":10.2} +table + each name,price in products + tr + td= name + td= price diff --git a/lectures/lec4/part2/task5.pug b/lectures/lec4/part2/task5.pug new file mode 100644 index 0000000..cff3feb --- /dev/null +++ b/lectures/lec4/part2/task5.pug @@ -0,0 +1,8 @@ +table + - for(var i=0;i<10;i++) + tr + - for(var j=0;j<10;j++) + - if((i + j) % 2 == 0) + td.white + - else + td.black \ No newline at end of file diff --git a/lectures/lec4/part2/task6.pug b/lectures/lec4/part2/task6.pug new file mode 100644 index 0000000..e75eb54 --- /dev/null +++ b/lectures/lec4/part2/task6.pug @@ -0,0 +1,12 @@ +mixin createList(listType, items, tag) + - var dispListType = "ul" + - if (listType == "ol") + - dispListType = "ol" + + #{dispListType}.list + each item in items + li + #{tag} #{item} + +// Вызов миксина ++createList('ul', ['Python', 'JavaScript', 'Java'], 'strong') diff --git a/lectures/lec4/part3/task1.styl b/lectures/lec4/part3/task1.styl new file mode 100644 index 0000000..37e82fa --- /dev/null +++ b/lectures/lec4/part3/task1.styl @@ -0,0 +1,5 @@ +size=1% +section + box-shadow: size size (2*size) rgba(0,0,0,0.5) + padding:size*2 + margin:size*4 \ No newline at end of file diff --git a/lectures/lec4/part3/task2.styl b/lectures/lec4/part3/task2.styl new file mode 100644 index 0000000..95caca9 --- /dev/null +++ b/lectures/lec4/part3/task2.styl @@ -0,0 +1,10 @@ +.block + display flex + flex-wrap wrap + p + display inline-block + background gray + &:hover + color green + &:hover + color red \ No newline at end of file diff --git a/lectures/lec4/part3/task3.css b/lectures/lec4/part3/task3.css new file mode 100644 index 0000000..8b22ddf --- /dev/null +++ b/lectures/lec4/part3/task3.css @@ -0,0 +1,19 @@ +.block { + color: blue; +} + +.block .menu { + color: navy; +} + +.block .menu a { + color: red; +} + +.block .menu h1 { + color: green; +} + +.block:hover { + color: white; +} \ No newline at end of file diff --git a/lectures/lec4/part3/task4.styl b/lectures/lec4/part3/task4.styl new file mode 100644 index 0000000..45816ff --- /dev/null +++ b/lectures/lec4/part3/task4.styl @@ -0,0 +1,7 @@ +style-tag(tagName, color_) + & {tagName} + color: color_ + +div + style-tag(ul,Navy) + diff --git a/lectures/lec4/part3/task5.styl b/lectures/lec4/part3/task5.styl new file mode 100644 index 0000000..093e013 --- /dev/null +++ b/lectures/lec4/part3/task5.styl @@ -0,0 +1,8 @@ +color-inv(r,g,b) + color: rgb(255 - r,255 - g ,255 - b) + + +a + color-inv(1,2,3) + +// оказывается пробелы обязательны при вычилеениях, иначе парсер ругается. неожиданно получислоь \ No newline at end of file diff --git a/lectures/lecture3.txt b/lectures/lecture3.txt index 7b88eb3..83488dc 100644 --- a/lectures/lecture3.txt +++ b/lectures/lecture3.txt @@ -1,15 +1,3 @@ -ol#list(type="I") - li Препроцессоры HTML - ul(type="disc") - li.first - a(href="#") Haml - li Pug - li Препроцессоры CSS - ul(type="circle") - li.first SAAS - li Stylus - - diff --git a/lectures/readme.md b/lectures/readme.md index 218ac02..96f53b6 100644 --- a/lectures/readme.md +++ b/lectures/readme.md @@ -10,6 +10,7 @@ 2. написать свой продублировав страничку с картинки ## 2 CSS + ### p1 Описание синтаксиса, правил форматирования, процесс применения селекторов, приоретизация стилей id > class >tag @@ -54,7 +55,6 @@ id > class >tag Информация про гриды, начиная про определение и общие атрибуты рассказывается про еденицы размеров ячейки (fr) про repeat и про min-max, и заканчивается обзор формированием зон в таблицах и установкой позиций элементов вне зависимости от положения тэга в дереве - ## 3 Bootstrap Определение фреймворка, примеры того как им пользоваиться описание 12 колоночной вёрстки и связанных с ней предварительно готовых классо, концепция контрольныз точек (sm md ls xl xxl). @@ -62,9 +62,41 @@ id > class >tag так-же немного расказано о внутрянке самого фрейморка (контейнеры построены на flex) и опять-же про аналог алинга айтемов как в гридах или флексе. В Bootstrap существует три уровня: базовый (контейнеры и сетка), компоненты (кнопки, формы, карточки) и утилиты (классы для быстрого изменения внешнего вида). Так-же описывается создание атомарных классов и можификаторов цветов... - - задачи: 1. задача на чекпоинты и их понимание 2. применение разных дисплеев 3. задача на align и чекпоинты + +## 3 Препроцессоры + +### p1 - Методологии вёрстки +Лекция в основном про БЭМ (блок__элемент--модификатор), про принцип называния блоков по смыслу того что они делают. Кроме этого обозреваются другие методолгии (SMACSS\ECSS) + +задачи: +1. задача на вёрстку по БЭМ ( похоже тут старая версия, расходится с тем, что я писал на лекции, то что писал и показывал на лекции было утеряно в одной из веток гита ... ) + +### p2 - препорцессоры HTML + +Идея препроцессоров - инструмент преобразующий код из одного вида в другой в рамках однго языка, используется для сокращения кода который пишет разработчик и для упрощения жизни в целом. +в лекции упомянуты несколько препроцессоров, но основной фокус идёт на pug (JADE), далее речь в основном о нём +Вся лекция в целом описывает работу , начиная от создания структуры и комментариями и заканчивая атрибутами и разными нюансами, далее основаня информация в названии задач. +после всех задач была рассмотрена концепция шаблонов для упрощеня создания повторяющихся страниц + +задачи: +1. базовая структура + атрибуры +2. структура атрибуты shothand для классов +3. переменные, инкрементация и подстановка текста +4. each, подстановка занчений по рано +5. циклы, вложенность? +6. mixin - местный аналог макроса из C + +### p3 - препроцессоры CSS +Упомянуто несолкьо препроцессоров, фокус на stylus. +в целом содержание лекции видно в задачах +хотя в заданиях не затрагивался момент с возвращением значениев из миксинов, но всё равно инетересно +задачи: +1. переменные +2. вложенность +3. опять вложенность и на осознание принципов компиляции и частичных ссылок +4. миксины и вложенность +5. миксины и выисление