#Сборник конспектов лекций
## 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 и чекпоинты

## 4 Препроцессоры

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

## 5 JavaScript

### p1 - операторы языка
Введение в основы JavaScript, синтаксис языка, базовые операторы и конструкции. Рассматриваются способы вывода информации (alert, document.write), работа с переменными и типами данных, шаблонные строки, условные операторы, циклы и функции. Особое внимание уделяется тернарному оператору, различным способам объявления функций (function declaration, function expression, arrow functions) и работе с аргументами функций.

задачи:
1. вывод с помощью alert и document.write
2. работа с переменными и шаблонными строками
3. условные операторы и проверка чисел
4. тернарный оператор 
5. циклы for и создание HTML-элементов
6. объявление функций и работа с arguments
7. function expression 
8. arrow functions 

### p2 - структуры данных
Изучение работы с массивами и строками в JavaScript. filter, map, reduce, sort, работа со строками 
остальные затронутые темы видны из названия задач


задачи:
1. извлечение и сумма чисел из строки 
2. извлечение текста из HTML-тегов 
3. на понимание работы оператора filter
4. фильтрация, преобразование и сортировка чисел из строки

### p3 - объекты
Работа с объектами в JavaScript, их создание, модификация и обработка, перебор свойств объектов, фильтрация и сортировка данных в объектах. 
остальные затронутые темы видны из названия задач

задачи:
1. фильтрация свойств объекта по типу значений 
2. обновление объекта с добавлением или увеличением значений
3. unford вложенныз свойств
4. сортировка объекта по значениям свойств 

## 6 JS  (DOM, Events)

### p1 - DOM
В лекции описано взаимодействие с древом документа, методы поиска элементов (getElementsByTagName, getElementsByName, getElementById), работа с атрибутами элементов (hasAttribute, removeAttribute), манипуляция с классами (classList.add), создание и вставка новых элементов (createElement, insertBefore), удаление элементов (removeChild), навигация по DOM-дереву (children, firstElementChild, nextElementSibling).

задачи:
1. поиск элементов с определенным количеством дочерних элементов
2. скрытие элементов списка через изменение display
3. удаление устаревших атрибутов (align, width, height) у всех элементов
4. удаление размерных атрибутов у изображений и добавление CSS-класса
5. динамическое создание и вставка параграфов в документ
6. полная очистка содержимого элемента через removeChild

### p2 - Events
Изучение системы событий в JavaScript, последовательность срабатывания событий мыши и клавиатуры, работа с обработчиками событий через addEventListener. Рассматриваются события мыши (mousedown, mousemove, mouseup, mouseover, mouseout), события ввода текста (focus, keydown, input, keyup, change, blur, paste), динамическое изменение стилей элементов при взаимодействии пользователя.

задачи:
1. описание последовательности событий мыши
2. описание последовательности событий при вводе текста
3. изменение размеров родительского элемента при наведении/убирании мыши
4. добавление/удаление CSS-классов для изображений при наведении мыши