longer lectures

This commit is contained in:
2026-01-03 22:59:02 +10:00
parent 051052a75f
commit 5c751400cb

View File

@@ -1,10 +1,9 @@
#Сборник конспектов лекций #Сборник конспектов лекций
## 0 История интернета и начало HTML ## 0 История интернета и начало HTML
в лекции описано происхождение интернета и arpanet к томук, что мы знаем В лекции подробно описано происхождение интернета, начиная от проекта ARPANET и его эволюции к современной всемирной сети, которую мы знаем сегодня. Также рассказано про знаменитые браузерные войны между различными компаниями и про окончательную победу Chrome в борьбе за доминирование на рынке браузеров. Лекция охватывает развитие веб-технологий от WEB1.0 (статичные страницы) через WEB2.0 (интерактивные социальные сети) до современного WEB3.0 (децентрализованные технологии и блокчейн).
так-же расказано про браузерные войны и про победу Chrome, WEB1.0 - WEB3.0
## 1 HTML ## 1 HTML
Синтаксис, правила оформления, информация по существующим тегам для html4( я не уверен), не мало было сказано про формы и лейблы привязанные к инпутам Лекция посвящена изучению основ языка разметки HTML, включая синтаксис, правила оформления кода и подробную информацию по существующим тегам стандарта HTML4. Особое внимание уделено работе с формами, правильному использованию лейблов и их привязке к элементам ввода (инпутам) для обеспечения доступности и удобства использования веб-страниц.
задачи: задачи:
1. исправить код 1. исправить код
2. написать свой продублировав страничку с картинки 2. написать свой продублировав страничку с картинки
@@ -27,7 +26,7 @@ id > class >tag
5. добавить меню на скопированную страницу 5. добавить меню на скопированную страницу
### p2 ### p2
В другом документе и этого же раздела фокус сделан на селекторе и псевдоклассах (:nth-child) и псевдоэлемтах (::first-line) Во второй части раздела основной фокус сделан на изучении различных типов селекторов CSS, включая сложные псевдоклассы типа :nth-child, :hover, :focus и другие. Также подробно рассматриваются псевдоэлементы (::first-line, ::before, ::after), которые позволяют стилизовать части элементов без добавления дополнительной разметки в HTML.
задачи: задачи:
1. практика на селекторы, выбор элемента из кода 1. практика на селекторы, выбор элемента из кода
@@ -35,7 +34,7 @@ id > class >tag
3. практика на селекторы, выбор элемента из кода 3. практика на селекторы, выбор элемента из кода
### p3 ### p3
В третем документе рассказыается про динамическую вёрстку, vw vh vmin vmax и про атрибуты min\max-width\height. так-же затрагиваются медиа запросы В третьей части подробно рассказывается про адаптивную и динамическую вёрстку, включая использование viewport-единиц измерения: vw (viewport width), vh (viewport height), vmin и vmax для создания отзывчивых макетов. Также изучаются ограничивающие свойства min/max-width и min/max-height, а также основы работы с медиа-запросами для создания адаптивного дизайна под разные устройства и размеры экрана.
задачи: задачи:
@@ -44,7 +43,8 @@ id > class >tag
3. медиазапрос 3. медиазапрос
### p4 ### p4
В четвёртом модуле рассказыватется про flex и его исопльзование, атрибуты выравнивание внутри контейнера и внутри элементов контейнеров, перенос\запрет преноса и тд, а ну и про gap тоже разумеется row-gap , column-gap ### p4 - Flexbox
В четвёртом модуле рассказыватется про flex и его использование, атрибуты выравнивания внутри контейнера и внутри элементов контейнеров, перенос\запрет переноса и т.д., а ну и про gap тоже разумеется row-gap, column-gap. Также затрагиваются такие свойства, как flex-grow, flex-shrink и flex-basis, которые определяют, как элементы растягиваются, сжимаются или занимают пространство в контейнере. Рассматриваются различные значения для justify-content, align-items и align-self. Так-же упоминается order, позволяющий изменять порядок элементов в контейнере.
задачи: задачи:
1. осознать что когда запрет на wrap то wrap очевидно запрещается 1. осознать что когда запрет на wrap то wrap очевидно запрещается
@@ -52,8 +52,8 @@ id > class >tag
3. то-же что и 2 но с другим min-width в атрибуте у одного из элементов 3. то-же что и 2 но с другим min-width в атрибуте у одного из элементов
### p5 ### p5
Информация про гриды, начиная про определение и общие атрибуты Пятая часть посвящена изучению CSS Grid Layout - мощной системы двумерного макетирования, начиная с основных определений, свойств контейнера и общих атрибутов грид-системы. Подробно рассказывается про специальные единицы размеров fr (fractional unit), функции repeat() и minmax() для создания гибких сеток, а завершается изучение темой grid-areas - формированием именованных зон в таблицах и размещением элементов в произвольных позициях независимо от их расположения в HTML-дереве.
рассказывается про еденицы размеров ячейки (fr) про repeat и про min-max, и заканчивается обзор формированием зон в таблицах и установкой позиций элементов вне зависимости от положения тэга в дереве
## 3 Bootstrap ## 3 Bootstrap
Определение фреймворка, примеры того как им пользоваиться Определение фреймворка, примеры того как им пользоваиться
@@ -70,7 +70,7 @@ id > class >tag
## 4 Препроцессоры ## 4 Препроцессоры
### p1 - Методологии вёрстки ### p1 - Методологии вёрстки
Лекция в основном про БЭМ (блок__элемент--модификатор), про принцип называния блоков по смыслу того что они делают. Кроме этого обозреваются другие методолгии (SMACSS\ECSS) Лекция посвящена изучению методологии БЭМ (Блок__Элемент--Модификатор) - популярного подхода к именованию CSS-классов, основанного на принципе называния блоков по смыслу и функциональности, которую они выполняют. Кроме БЭМ также рассматриваются альтернативные методологии организации CSS-кода, такие как SMACSS (Scalable and Modular Architecture for CSS) и ECSS (Enduring CSS), каждая из которых предлагает свой подход к структурированию и масштабированию стилей.
задачи: задачи:
1. задача на вёрстку по БЭМ ( похоже тут старая версия, расходится с тем, что я писал на лекции, то что писал и показывал на лекции было утеряно в одной из веток гита ... ) 1. задача на вёрстку по БЭМ ( похоже тут старая версия, расходится с тем, что я писал на лекции, то что писал и показывал на лекции было утеряно в одной из веток гита ... )
@@ -118,8 +118,7 @@ id > class >tag
8. arrow functions 8. arrow functions
### p2 - структуры данных ### p2 - структуры данных
Изучение работы с массивами и строками в JavaScript. filter, map, reduce, sort, работа со строками Лекция посвящена изучению работы с основными структурами данных в JavaScript - массивами и строками, включая освоение функциональных методов обработки массивов. Подробно рассматриваются методы высшего порядка: filter() для фильтрации элементов, map() для преобразования данных, reduce() для агрегации значений, sort() для сортировки, а также различные методы работы со строками для парсинга и обработки текстовой информации.
остальные затронутые темы видны из названия задач
задачи: задачи:
@@ -129,8 +128,7 @@ id > class >tag
4. фильтрация, преобразование и сортировка чисел из строки 4. фильтрация, преобразование и сортировка чисел из строки
### p3 - объекты ### p3 - объекты
Работа с объектами в JavaScript, их создание, модификация и обработка, перебор свойств объектов, фильтрация и сортировка данных в объектах. Лекция охватывает комплексную работу с объектами в JavaScript, включая различные способы их создания, модификации структуры и обработки содержащихся в них данных. Изучаются методы перебора свойств объектов (for...in, Object.keys(), Object.values(), Object.entries()), техники фильтрации и сортировки данных внутри объектов, а также операции с вложенными структурами и преобразование объектов.
остальные затронутые темы видны из названия задач
задачи: задачи:
1. фильтрация свойств объекта по типу значений 1. фильтрация свойств объекта по типу значений