uni-web-site/old/lectures/readme.md

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

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

В лекции подробно описано происхождение интернета, начиная от проекта ARPANET и его эволюции к современной всемирной сети, которую мы знаем сегодня. Также рассказано про знаменитые браузерные войны между различными компаниями и про окончательную победу Chrome в борьбе за доминирование на рынке браузеров. Лекция охватывает развитие веб-технологий от WEB1.0 (статичные страницы) через WEB2.0 (интерактивные социальные сети) до современного WEB3.0 (децентрализованные технологии и блокчейн).

1 HTML

Лекция посвящена изучению основ языка разметки HTML, включая синтаксис, правила оформления кода и подробную информацию по существующим тегам стандарта HTML4. Особое внимание уделено работе с формами, правильному использованию лейблов и их привязке к элементам ввода (инпутам) для обеспечения доступности и удобства использования веб-страниц. задачи:

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

2 CSS

p1

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

задачи:

1. отформатировать код css
2. отчистить код от атрибутов внутри тегов
3. применить теги на код в нужном порядке
4. скопировать страницу
5. добавить меню на скопированную страницу

p2

Во второй части раздела основной фокус сделан на изучении различных типов селекторов CSS, включая сложные псевдоклассы типа :nth-child, :hover, :focus и другие. Также подробно рассматриваются псевдоэлементы (::first-line, ::before, ::after), которые позволяют стилизовать части элементов без добавления дополнительной разметки в HTML.

задачи:

1. практика на селекторы, выбор элемента из кода
2. практика на селекторы, выбор элемента из кода
3. практика на селекторы, выбор элемента из кода

p3

В третьей части подробно рассказывается про адаптивную и динамическую вёрстку, включая использование viewport-единиц измерения: vw (viewport width), vh (viewport height), vmin и vmax для создания отзывчивых макетов. Также изучаются ограничивающие свойства min/max-width и min/max-height, а также основы работы с медиа-запросами для создания адаптивного дизайна под разные устройства и размеры экрана.

задачи:

1. применить vh
2. ограничение max-width
3. медиазапрос

p4

p4 - Flexbox

В четвёртом модуле рассказыватется про flex и его использование, атрибуты выравнивания внутри контейнера и внутри элементов контейнеров, перенос\запрет переноса и т.д., а ну и про gap тоже разумеется row-gap, column-gap. Также затрагиваются такие свойства, как flex-grow, flex-shrink и flex-basis, которые определяют, как элементы растягиваются, сжимаются или занимают пространство в контейнере. Рассматриваются различные значения для justify-content, align-items и align-self. Так-же упоминается order, позволяющий изменять порядок элементов в контейнере.

задачи:

1. осознать что когда запрет на wrap то wrap очевидно запрещается
2. изменеие направления flex на медиазапросе, включение отключение переноса
3. то-же что и 2 но с другим min-width в атрибуте у одного из элементов

p5

Пятая часть посвящена изучению CSS Grid Layout - мощной системы двумерного макетирования, начиная с основных определений, свойств контейнера и общих атрибутов грид-системы. Подробно рассказывается про специальные единицы размеров fr (fractional unit), функции repeat() и minmax() для создания гибких сеток, а завершается изучение темой grid-areas - формированием именованных зон в таблицах и размещением элементов в произвольных позициях независимо от их расположения в HTML-дереве.

3 Bootstrap

Определение фреймворка, примеры того как им пользоваиться описание 12 колоночной вёрстки и связанных с ней предварительно готовых классо, концепция контрольныз точек (sm md ls xl xxl). так-же затронуты контейнеры, они имеют фиксированый max-width который определяется соотв. атрибутом чекпоинта. так-же немного расказано о внутрянке самого фрейморка (контейнеры построены на flex) и опять-же про аналог алинга айтемов как в гридах или флексе. В Bootstrap существует три уровня: базовый (контейнеры и сетка), компоненты (кнопки, формы, карточки) и утилиты (классы для быстрого изменения внешнего вида). Так-же описывается создание атомарных классов и можификаторов цветов...

задачи:

1. задача на чекпоинты и их понимание
2. применение разных дисплеев
3. задача на align и чекпоинты

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

p1 - Методологии вёрстки

Лекция посвящена изучению методологии БЭМ (Блок__Элемент--Модификатор) - популярного подхода к именованию CSS-классов, основанного на принципе называния блоков по смыслу и функциональности, которую они выполняют. Кроме БЭМ также рассматриваются альтернативные методологии организации CSS-кода, такие как SMACSS (Scalable and Modular Architecture for CSS) и ECSS (Enduring CSS), каждая из которых предлагает свой подход к структурированию и масштабированию стилей.

задачи:

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, включая различные способы их создания, модификации структуры и обработки содержащихся в них данных. Изучаются методы перебора свойств объектов (for...in, Object.keys(), Object.values(), Object.entries()), техники фильтрации и сортировки данных внутри объектов, а также операции с вложенными структурами и преобразование объектов.

задачи:

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-классов для изображений при наведении мыши