uni-web-site/lectures/readme.md

#Сборник конспектов лекций

0 История интернета и начало HTML

в лекции описано происхождение интернета и arpanet к томук, что мы знаем так-же расказано про браузерные войны и про победу Chrome, WEB1.0 - WEB3.0

1 HTML

Синтаксис, правила оформления, информация по существующим тегам для html4( я не уверен), не мало было сказано про формы и лейблы привязанные к инпутам задачи:

1. исправить код
2. написать свой продублировав страничку с картинки

2 CSS

p1

Описание синтаксиса, правил форматирования, процесс применения селекторов, приоретизация стилей id > class >tag блочное\строчное\блочно-строчное отображение элемента элемент и его padding border margin обобщённые свойства (border background margin font ) какие атрибуты применимы на блочные, а какие на строчные

задачи:

1. отформатировать код css
2. отчистить код от атрибутов внутри тегов
3. применить теги на код в нужном порядке
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 и чекпоинты

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. миксины и выисление