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