rm -r
@rm_programmer
12 subscribers
182 photos
3 videos
212 links
Programmer - Курсы программирования. Канал для тех, кто не хочет остаться на задворках цивилизации.
Download Telegram
About
Blog
Apps
Platform
Join
rm -r
12 subscribers
rm -r
Урок 1: Введение в CSS3 — Основы стилизации

Привет, друзья! 👋 Сегодня мы начинаем наш увлекательный путь в мир CSS3 — технологии, которая делает веб-страницы красивыми и современными. Давайте разберем основы!

---

### Что такое CSS3?
CSS (Cascading Style Sheets) — это язык стилей, который используется для описания внешнего вида HTML-документов. CSS3 — это последняя версия, которая добавляет множество новых возможностей, таких как анимации, градиенты, тени и многое другое.

---

### Как подключить CSS к HTML?
Есть три способа подключения стилей:
1. Внутри тега `<style>` 

   <style>
       body {
           background-color: lightblue;
       }
   </style>


2. Через внешний файл
Создайте файл styles.css и подключите его в HTML: 

   <link rel="stylesheet" href="styles.css">


3. Инлайн-стили (внутри тегов) 

   <p style="color: red;">Этот текст красный.</p>


---

### Основы синтаксиса CSS
CSS состоит из селекторов и правил.
Пример: 
селектор {
    свойство: значение;
}



- Селектор — указывает, к какому элементу применяются стили (например, h1, .class, #id).
- Свойство — что именно мы меняем (например, color, font-size, background).
- Значение — как мы это меняем (например, red, 20px, #ffffff).

Пример: 
h1 {
    color: blue;
    font-size: 24px;
}



---

### Популярные свойства CSS3
1. Цвет текста 

   color: red;


2. Размер шрифта 

   font-size: 16px;


3. Фон элемента 

   background-color: yellow;


4. Границы 

   border: 2px solid black;


5. Тени 

   box-shadow: 5px 5px 10px gray;


---

### Практика
Попробуйте создать простой HTML-документ и добавить стили:
1. Задайте цвет фона страницы.
2. Измените цвет заголовка.
3. Добавьте тень к параграфу.

---

В следующем уроке мы разберем селекторы и каскадность в CSS. Оставайтесь с нами! 🚀

Если есть вопросы, пишите в комментариях! 😉

#CSS #ВебРазработка #УрокиCSS #Программирование
8 views
rm -r
Урок 2: Селекторы и каскадность в CSS3

Привет, друзья! 👋 Продолжаем изучать CSS3. Сегодня мы разберем селекторы и каскадность — ключевые понятия, которые помогут вам управлять стилями на вашей веб-странице. Поехали! 🚀

---

### Что такое селекторы?
Селекторы — это шаблоны, которые позволяют выбрать элементы HTML для применения стилей. Вот основные типы селекторов:

1. Селектор по тегу
Применяет стили ко всем элементам с указанным тегом. 

   p {
       color: green;
   }


2. Селектор по классу
Используется для элементов с определенным классом (указывается через точку). 

   .text-red {
       color: red;
   }
   



   <p class="text-red">Этот текст красный.</p>


3. Селектор по ID
Применяется к элементу с уникальным идентификатором (указывается через решетку). 

   #header {
       font-size: 30px;
   }
   



   <h1 id="header">Заголовок</h1>


4. Универсальный селектор
Применяет стили ко всем элементам на странице. 

   * {
       margin: 0;
       padding: 0;
   }


5. Комбинированные селекторы
Можно комбинировать селекторы для более точного выбора:
- Вложенные элементы: 

     div p {
         color: blue;
     }


- Несколько классов: 

     .text-bold.text-large {
         font-weight: bold;
         font-size: 20px;
     }


- Дочерние элементы: 

     ul > li {
         list-style: none;
     }


---

### Каскадность в CSS
Каскадность — это механизм, который определяет, какие стили будут применены к элементу, если на него влияют несколько правил. Вот основные принципы:

1. Приоритеты:
- Стили, указанные через !important, имеют наивысший приоритет.
- Инлайн-стили (внутри тега) имеют приоритет над внешними стилями.
- Селекторы по ID имеют больший вес, чем классы, а классы — больше, чем теги.

Пример: 

   p {
       color: blue !important; /* Этот стиль применится */
   }
   p {
       color: red;
   }


2. Порядок объявления:
Если приоритеты равны, применяется последнее объявленное правило.

---

### Практика
1. Создайте HTML-документ с несколькими элементами: заголовками, параграфами и списками.
2. Используйте разные типы селекторов для стилизации:
- Измените цвет всех параграфов.
- Добавьте класс для изменения шрифта заголовка.
- Используйте ID для задания фона определенному блоку.

---

### Домашнее задание
Попробуйте создать страницу с использованием всех типов селекторов. Поделитесь результатами в комментариях! 😉

В следующем уроке мы разберем блочную модель CSS и научимся работать с отступами и границами. Оставайтесь с нами! 💪

#CSS #ВебРазработка #УрокиCSS #Программирование
11 views
rm -r
Урок 3: Блочная модель CSS — Отступы, границы и размеры

Привет, друзья! 👋 Сегодня мы погрузимся в одну из самых важных тем в CSS — блочную модель. Это основа верстки, которая поможет вам контролировать размеры, отступы и границы элементов. Давайте разбираться! 🚀

---

### Что такое блочная модель?
Каждый элемент на веб-странице представляет собой прямоугольный блок. Блочная модель описывает, как вычисляются размеры этого блока, включая:
1. Содержимое (content) — область, где отображается текст или другие элементы.
2. Внутренние отступы (padding) — пространство между содержимым и границей.
3. Границы (border) — рамка вокруг элемента.
4. Внешние отступы (margin) — пространство между элементом и другими элементами.

---

### Свойства блочной модели

1. Ширина и высота (width, height)
Задают размеры содержимого элемента. 

   div {
       width: 300px;
       height: 200px;
   }


2. Внутренние отступы (padding)
Добавляют пространство внутри элемента, вокруг содержимого. 

   div {
       padding: 20px; /* Отступы со всех сторон */
       padding-top: 10px; /* Индивидуально */
   }


3. Границы (border)
Задают рамку вокруг элемента. 

   div {
       border: 2px solid black; /* Толщина, стиль, цвет */
       border-radius: 10px; /* Закругленные углы */
   }


4. Внешние отступы (margin)
Создают пространство между элементами. 

   div {
       margin: 15px; /* Отступы со всех сторон */
       margin-bottom: 30px; /* Индивидуально */
   }


---

### Как рассчитывается общий размер элемента?
По умолчанию общий размер элемента складывается из:
- Ширина = width + padding + border
- Высота = height + padding + border

Чтобы изменить это поведение, можно использовать свойство box-sizing:
- box-sizing: content-box; (по умолчанию) — размеры учитывают только содержимое.
- box-sizing: border-box; — размеры включают padding и border.

Пример: 
div {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: border-box; /* Общая ширина останется 300px */
}


---

### Практика
1. Создайте блок с заданными размерами (width, height).
2. Добавьте внутренние отступы (padding) и границу (border).
3. Поэкспериментируйте с внешними отступами (margin), чтобы расположить блоки на странице.
4. Используйте box-sizing: border-box;, чтобы упростить расчеты.

---

### Домашнее задание
Создайте макет из нескольких блоков:
- Заголовок с отступами и границей.
- Текстовый блок с внутренними отступами.
- Изображение с внешними отступами.

Поделитесь результатами в комментариях! 😉

В следующем уроке мы разберем позиционирование элементов — как управлять расположением блоков на странице. Оставайтесь с нами! 💪

#CSS #ВебРазработка #УрокиCSS #Программирование
9 views
rm -r
Урок 4: Позиционирование элементов в CSS

Привет, друзья! 👋 Сегодня мы изучим, как управлять расположением элементов на веб-странице с помощью позиционирования в CSS. Это мощный инструмент, который позволяет точно размещать элементы и создавать сложные макеты. Поехали! 🚀

---

### Типы позиционирования

В CSS есть несколько способов позиционирования элементов:

1. Статическое позиционирование (`static`)
Это значение по умолчанию. Элементы отображаются в обычном потоке документа. 

   div {
       position: static;
   }


2. Относительное позиционирование (`relative`)
Элемент смещается относительно своего обычного положения. Остальные элементы остаются на своих местах. 

   div {
       position: relative;
       top: 20px; /* Смещение вниз */
       left: 30px; /* Смещение вправо */
   }


3. Абсолютное позиционирование (`absolute`)
Элемент удаляется из обычного потока документа и позиционируется относительно ближайшего родительского элемента с position: relative, absolute, fixed или sticky. Если такого родителя нет, элемент позиционируется относительно <html>. 

   div {
       position: absolute;
       top: 0;
       right: 0;
   }


4. Фиксированное позиционирование (`fixed`)
Элемент фиксируется относительно окна браузера и не двигается при прокрутке страницы. 

   div {
       position: fixed;
       bottom: 10px;
       right: 10px;
   }


5. Липкое позиционирование (`sticky`)
Элемент ведет себя как relative, пока не достигнет определенной точки при прокрутке, после чего становится fixed. 

   div {
       position: sticky;
       top: 0;
   }


---

### Свойства для позиционирования
Для управления позицией элемента используются свойства:
- top, bottom, left, right — задают смещение относительно краев.
- z-index — управляет порядком наложения элементов (работает только с position: relative, absolute, fixed, sticky).

Пример: 
div {
    position: absolute;
    top: 50px;
    left: 100px;
    z-index: 10; /* Элемент будет поверх других */
}


---

### Примеры использования

1. Кнопка "Наверх" 

   .to-top {
       position: fixed;
       bottom: 20px;
       right: 20px;
       padding: 10px;
       background-color: blue;
       color: white;
   }


2. Липкий заголовок 

   header {
       position: sticky;
       top: 0;
       background-color: white;
       z-index: 100;
   }


3. Наложение элементов 

   .image-container {
       position: relative;
   }
   .overlay {
       position: absolute;
       top: 0;
       left: 0;
       background-color: rgba(0, 0, 0, 0.5);
   }


---

### Практика
1. Создайте блок с относительным позиционированием и сместите его.
2. Добавьте фиксированную кнопку в нижний правый угол страницы.
3. Сделайте липкий заголовок, который остается наверху при прокрутке.

---

### Домашнее задание
Создайте макет с использованием всех типов позиционирования:
- Относительное позиционирование для смещения элемента.
- Абсолютное позиционирование для наложения текста на изображение.
- Фиксированное позиционирование для кнопки "Наверх".
- Липкое позиционирование для заголовка.

Поделитесь результатами в комментариях! 😉

В следующем уроке мы разберем Flexbox — мощный инструмент для создания гибких макетов. Оставайтесь с нами! 💪

#CSS #ВебРазработка #УрокиCSS #Программирование
7 views
rm -r
Урок 5: Flexbox — Гибкие макеты в CSS

Привет, друзья! 👋 Сегодня мы изучим Flexbox — одну из самых мощных и удобных технологий для создания гибких и адаптивных макетов. С помощью Flexbox вы сможете легко выравнивать элементы, распределять пространство и управлять порядком отображения. Поехали! 🚀

---

### Что такое Flexbox?
Flexbox (гибкий контейнер) — это модуль CSS, который позволяет создавать макеты с предсказуемым поведением, даже если размеры элементов динамические или неизвестны.

Основные понятия:
- Flex-контейнер — элемент, который содержит дочерние элементы (flex-элементы).
- Flex-элементы — дочерние элементы внутри flex-контейнера.

---

### Как создать Flex-контейнер?
Чтобы превратить элемент в flex-контейнер, используйте свойство display: 
.container {
    display: flex;
}



Теперь все дочерние элементы становятся flex-элементами.

---

### Основные свойства Flexbox

#### Для контейнера:
1. Направление оси (`flex-direction`)
Определяет, как элементы располагаются внутри контейнера:
- row (по умолчанию) — слева направо.
- row-reverse — справа налево.
- column — сверху вниз.
- column-reverse — снизу вверх.

Пример: 

   .container {
       flex-direction: column;
   }


2. Выравнивание по главной оси (`justify-content`)
Распределяет элементы вдоль главной оси:
- flex-start (по умолчанию) — элементы прижимаются к началу.
- flex-end — элементы прижимаются к концу.
- center — элементы по центру.
- space-between — равное расстояние между элементами.
- space-around — равное пространство вокруг элементов.

Пример: 

   .container {
       justify-content: space-between;
   }


3. Выравнивание по поперечной оси (`align-items`)
Выравнивает элементы вдоль поперечной оси:
- stretch (по умолчанию) — элементы растягиваются на всю высоту.
- flex-start — элементы прижимаются к началу.
- flex-end — элементы прижимаются к концу.
- center — элементы по центру.

Пример: 

   .container {
       align-items: center;
   }


4. Многострочность (`flex-wrap`)
Позволяет элементам переноситься на новую строку, если они не помещаются:
- nowrap (по умолчанию) — элементы не переносятся.
- wrap — элементы переносятся.
- wrap-reverse — элементы переносятся в обратном порядке.

Пример: 

   .container {
       flex-wrap: wrap;
   }


---

#### Для элементов:
1. Гибкость (`flex`)
Управляет тем, как элемент растягивается или сжимается относительно других:
- flex-grow — определяет, насколько элемент может растягиваться.
- flex-shrink — определяет, насколько элемент может сжиматься.
- flex-basis — задает начальный размер элемента.

Пример: 

   .item {
       flex: 1; /* Элемент растягивается на все доступное пространство */
   }


2. Порядок (`order`)
Позволяет изменить порядок отображения элементов. 

   .item {
       order: 2; /* Элемент будет отображаться вторым */
   }


3. Выравнивание отдельного элемента (`align-self`)
Позволяет переопределить выравнивание для конкретного элемента. 

   .item {
       align-self: flex-end;
   }


---

### Практика
1. Создайте flex-контейнер и добавьте в него несколько элементов.
2. Поэкспериментируйте с justify-content, align-items и flex-direction.
3. Используйте flex-wrap, чтобы элементы переносились на новую строку.
4. Попробуйте изменить порядок элементов с помощью order.

---

### Домашнее задание
Создайте макет страницы с использованием Flexbox:
- Шапка с логотипом и меню.
- Основной контент с боковой панелью.
- Футер с выравниванием по центру.

Поделитесь результатами в комментариях! 😉

В следующем уроке мы разберем Grid Layout — еще более мощный инструмент для создания сложных макетов. Оставайтесь с нами! 💪

#CSS #ВебРазработка #УрокиCSS #Программирование
9 views
rm -r
Урок 6: CSS Grid — Создание сложных макетов

Привет, друзья! 👋 Сегодня мы изучим CSS Grid — мощный инструмент для создания сложных и адаптивных макетов. Если Flexbox — это про одномерные макеты (строка или столбец), то Grid позволяет работать с двумерными сетками (строки и столбцы одновременно). Поехали! 🚀

---

### Что такое CSS Grid?
CSS Grid — это система для создания сеточных макетов. Она позволяет легко управлять строками, столбцами и промежутками между ними, а также размещать элементы в любом месте сетки.

Основные понятия:
- Grid-контейнер — элемент, который содержит дочерние элементы (grid-элементы).
- Grid-элементы — дочерние элементы внутри grid-контейнера.
- Строки и столбцы — определяют структуру сетки.

---

### Как создать Grid-контейнер?
Чтобы превратить элемент в grid-контейнер, используйте свойство display: 
.container {
    display: grid;
}



Теперь все дочерние элементы становятся grid-элементами.

---

### Основные свойства Grid

#### Для контейнера:
1. Определение строк и столбцов (`grid-template-rows`, `grid-template-columns`)
Задайте количество и размеры строк и столбцов: 

   .container {
       display: grid;
       grid-template-columns: 100px 200px auto; /* 3 столбца */
       grid-template-rows: 100px 300px; /* 2 строки */
   }



Можно использовать единицы измерения: px, %, fr (доля свободного пространства).

2. Промежутки между элементами (`gap`)
Задайте расстояние между строками и столбцами: 

   .container {
       gap: 10px; /* Промежутки между всеми элементами */
       row-gap: 15px; /* Только между строками */
       column-gap: 20px; /* Только между столбцами */
   }


3. Выравнивание элементов (`justify-items`, `align-items`)
- justify-items — выравнивание по горизонтали.
- align-items — выравнивание по вертикали.

Пример: 

   .container {
       justify-items: center; /* По горизонтали */
       align-items: end; /* По вертикали */
   }


4. Автоматическое создание строк и столбцов (`grid-auto-rows`, `grid-auto-columns`)
Если элементов больше, чем задано строк/столбцов, Grid автоматически создаст новые: 

   .container {
       grid-auto-rows: 100px; /* Высота новых строк */
   }


---

#### Для элементов:
1. Размещение элемента в сетке (`grid-row`, `grid-column`)
Укажите, где должен располагаться элемент: 

   .item {
       grid-row: 1 / 3; /* Элемент занимает строки 1 и 2 */
       grid-column: 2 / 4; /* Элемент занимает столбцы 2 и 3 */
   }


2. Выравнивание отдельного элемента (`justify-self`, `align-self`)
Переопределите выравнивание для конкретного элемента: 

   .item {
       justify-self: start; /* По горизонтали */
       align-self: center; /* По вертикали */
   }


3. Именованные области (`grid-template-areas`)
Создайте именованные области и разместите элементы в них: 

   .container {
       display: grid;
       grid-template-areas:
           "header header"
           "sidebar content"
           "footer footer";
   }
   .header { grid-area: header; }
   .sidebar { grid-area: sidebar; }
   .content { grid-area: content; }
   .footer { grid-area: footer; }


---

### Практика
1. Создайте grid-контейнер с 3 столбцами и 2 строками.
2. Разместите элементы в разных частях сетки.
3. Используйте gap, чтобы добавить промежутки между элементами.
4. Попробуйте создать макет с именованными областями.

---

### Домашнее задание
Создайте макет страницы с использованием CSS Grid:
- Шапка (header) на всю ширину.
- Боковая панель (sidebar) и основной контент (content).
- Футер (footer) на всю ширину.

Поделитесь результатами в комментариях! 😉

В следующем уроке мы разберем анимации и трансформации в CSS. Оставайтесь с нами! 💪

Подписывайтесь на наш канал: [https://t.me/Safety_Y](https://t.me/Safety_Y)

#CSS #ВебРазработка #УрокиCSS #Программирование
10 views
rm -r
Урок 7: Анимации и трансформации в CSS

Привет, друзья! 👋 Сегодня мы изучим, как оживить ваши веб-страницы с помощью анимаций и трансформаций в CSS. Эти инструменты помогут вам создавать плавные переходы, вращение, масштабирование и другие эффекты. Поехали! 🚀

---

### Трансформации в CSS
Трансформации позволяют изменять форму, размер и положение элемента. Основные свойства:

1. Перемещение (`translate`)
Сдвигает элемент по осям X и Y: 

   .box {
       transform: translate(50px, 20px); /* Вправо на 50px, вниз на 20px */
   }


2. Масштабирование (`scale`)
Увеличивает или уменьшает размер элемента: 

   .box {
       transform: scale(1.5); /* Увеличивает элемент в 1.5 раза */
   }


3. Вращение (`rotate`)
Поворачивает элемент на заданный угол: 

   .box {
       transform: rotate(45deg); /* Поворот на 45 градусов */
   }


4. Наклон (`skew`)
Наклоняет элемент по осям X и Y: 

   .box {
       transform: skew(20deg, 10deg); /* Наклон по X и Y */
   }


5. Множественные трансформации
Можно комбинировать несколько трансформаций: 

   .box {
       transform: translate(50px, 20px) rotate(45deg) scale(1.2);
   }


---

### Переходы (`transition`)
Переходы позволяют плавно изменять свойства элемента при наведении или других событиях.

1. Свойства перехода:
- transition-property — указывает, какое свойство анимировать (например, background-color, transform).
- transition-duration — длительность перехода (например, 1s).
- transition-timing-function — функция скорости (например, ease, linear).
- transition-delay — задержка перед началом перехода.

Пример: 

   .box {
       background-color: blue;
       transition: background-color 0.5s ease, transform 1s;
   }
   .box:hover {
       background-color: red;
       transform: scale(1.2);
   }


---

### Анимации (`@keyframes`)
Анимации позволяют создавать сложные последовательности изменений.

1. Создание анимации:
Используйте @keyframes, чтобы задать этапы анимации: 

   @keyframes slide {
       0% { transform: translateX(0); }
       50% { transform: translateX(200px); }
       100% { transform: translateX(0); }
   }


2. Применение анимации:
Используйте свойство animation, чтобы применить анимацию к элементу: 

   .box {
       animation: slide 3s infinite; /* Название, длительность, повтор */
   }


3. Свойства анимации:
- animation-name — название анимации.
- animation-duration — длительность.
- animation-timing-function — функция скорости.
- animation-delay — задержка перед началом.
- animation-iteration-count — количество повторений (infinite для бесконечности).
- animation-direction — направление (normal, reverse, alternate).

---

### Практика
1. Создайте кнопку, которая увеличивается при наведении.
2. Добавьте плавный переход для изменения цвета фона.
3. Создайте анимацию, чтобы элемент двигался по кругу.

---

### Домашнее задание
Создайте страницу с использованием анимаций и трансформаций:
- Кнопка с эффектом наведения.
- Блок, который вращается при клике.
- Текст, который плавно появляется при загрузке страницы.

Поделитесь результатами в комментариях! 😉

В следующем уроке мы разберем адаптивный дизайн и медиазапросы. Оставайтесь с нами! 💪

Подписывайтесь на наш канал: [https://t.me/Safety_Y](https://t.me/Safety_Y)

#CSS #ВебРазработка #УрокиCSS #Программирование
9 views
rm -r
Урок 8: Адаптивный дизайн и медиазапросы

Привет, друзья! 👋 Сегодня мы изучим, как сделать ваши веб-страницы адаптивными, чтобы они отлично выглядели на любых устройствах — от смартфонов до больших мониторов. Для этого мы будем использовать медиазапросы и другие техники. Поехали! 🚀

---

### Что такое адаптивный дизайн?
Адаптивный дизайн — это подход к верстке, при котором страница автоматически подстраивается под размер экрана устройства. Это важно, ведь пользователи заходят на сайты с разных устройств: смартфонов, планшетов, ноутбуков и десктопов.

---

### Медиазапросы (`@media`)
Медиазапросы позволяют применять стили в зависимости от характеристик устройства, таких как ширина экрана, ориентация и разрешение.

#### Основной синтаксис: 
@media (условие) {
    /* Стили, которые применяются при выполнении условия */
}



#### Примеры условий:
1. Ширина экрана: 

   @media (max-width: 768px) {
       body {
           background-color: lightblue;
       }
   }


Этот стиль применится, если ширина экрана меньше или равна 768px.

2. Ориентация устройства: 

   @media (orientation: portrait) {
       body {
           font-size: 18px;
       }
   }


Этот стиль применится, если устройство находится в портретной ориентации.

3. Минимальная и максимальная ширина: 

   @media (min-width: 480px) and (max-width: 1024px) {
       .container {
           width: 90%;
       }
   }


Этот стиль применится для экранов от 480px до 1024px.

---

### Подходы к адаптивному дизайну

1. Mobile First
Сначала создаются стили для мобильных устройств, а затем добавляются медиазапросы для более широких экранов.

Пример: 

   body {
       font-size: 14px;
   }
   @media (min-width: 768px) {
       body {
           font-size: 16px;
       }
   }


2. Использование относительных единиц
Используйте %, em, rem, vw, vh вместо фиксированных значений (px), чтобы элементы масштабировались пропорционально.

Пример: 

   .container {
       width: 100%; /* Занимает всю ширину экрана */
       padding: 2rem; /* Отступы в зависимости от размера шрифта */
   }


3. Гибкие изображения
Чтобы изображения не выходили за пределы контейнера: 

   img {
       max-width: 100%;
       height: auto;
   }


---

### Практика
1. Создайте простую страницу с текстом и изображением.
2. Добавьте медиазапросы, чтобы:
- На экранах меньше 768px текст был больше, а изображение занимало всю ширину.
- На экранах больше 1200px контент был центрирован и занимал 60% ширины.

---

### Домашнее задание
Создайте адаптивную страницу:
- На мобильных устройствах элементы должны отображаться в один столбец.
- На планшетах — в два столбца.
- На десктопах — в три столбца.

Поделитесь результатами в комментариях! 😉

В следующем уроке мы разберем препроцессоры CSS (SASS/SCSS). Оставайтесь с нами! 💪

Подписывайтесь на наш канал: [https://t.me/Safety_Y](https://t.me/Safety_Y)

#CSS #ВебРазработка #УрокиCSS #Программирование
6 views
rm -r
Урок 9: Препроцессоры CSS — SASS/SCSS

Привет, друзья! 👋 Сегодня мы познакомимся с препроцессорами CSS, такими как SASS/SCSS. Эти инструменты делают написание стилей проще, удобнее и мощнее. Вы узнаете, как использовать переменные, вложенности, миксины и многое другое. Поехали! 🚀

---

### Что такое SASS/SCSS?
SASS (Syntactically Awesome Style Sheets) — это препроцессор, который расширяет возможности CSS. Он добавляет функции, которых нет в обычном CSS, такие как:
- Переменные.
- Вложенности.
- Миксины (функции).
- Импорт файлов.

SCSS — это синтаксис SASS, который полностью совместим с обычным CSS.

---

### Основные возможности SASS/SCSS

#### 1. Переменные
Переменные позволяют хранить значения (цвета, размеры и т.д.) для повторного использования.

Пример: 
$primary-color: #3498db;
$font-size: 16px;

body {
    color: $primary-color;
    font-size: $font-size;
}



#### 2. Вложенности
Вложенности позволяют писать более читаемый и структурированный код.

Пример: 
nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    li {
        display: inline-block;
    }
    a {
        text-decoration: none;
    }
}



#### 3. Миксины (Mixins)
Миксины — это функции, которые позволяют повторно использовать блоки кода.

Пример: 
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.button {
    @include border-radius(10px);
}



#### 4. Импорт файлов
Вы можете разбивать стили на несколько файлов и импортировать их в основной файл.

Пример: 
@import 'variables';
@import 'buttons';
@import 'layout';



#### 5. Наследование (`@extend`)
Наследование позволяет повторно использовать стили одного элемента для другого.

Пример: 
.message {
    padding: 10px;
    border: 1px solid #ccc;
}

.success {
    @extend .message;
    border-color: green;
}



#### 6. Математические операции
SASS поддерживает математические операции прямо в стилях.

Пример: 
.container {
    width: 100% / 3; /* Ширина будет 33.333% */
}



---

### Как использовать SASS/SCSS?
1. Установите SASS через npm (Node.js): 

   npm install -g sass



2. Создайте файл .scss и напишите в нем стили.

3. Скомпилируйте SCSS в CSS: 

   sass input.scss output.css



4. Подключите скомпилированный CSS-файл к вашему HTML.

---

### Практика
1. Создайте файл styles.scss.
2. Используйте переменные для цветов и размеров.
3. Добавьте вложенности для структурирования стилей.
4. Создайте миксин для градиентного фона.

---

### Домашнее задание
Создайте проект с использованием SASS/SCSS:
- Разделите стили на несколько файлов (например, variables.scss, buttons.scss, layout.scss).
- Используйте миксины для создания кнопок с разными стилями.
- Подключите скомпилированный CSS к HTML.

Поделитесь результатами в комментариях! 😉

В следующем уроке мы разберем BEM-методологию для написания чистого и поддерживаемого CSS. Оставайтесь с нами! 💪

Подписывайтесь на наш канал: [https://t.me/Safety_Y](https://t.me/Safety_Y)

#CSS #ВебРазработка #УрокиCSS #Программирование
8 viewsedited  
rm -r
Урок 10: Методология BEM — Пишем чистый и поддерживаемый CSS

Привет, друзья! 👋 Сегодня мы изучим BEM (Block, Element, Modifier) — методологию, которая помогает писать чистый, понятный и легко поддерживаемый CSS-код. BEM особенно полезен в больших проектах, где важно избегать конфликтов стилей и упрощать работу в команде. Поехали! 🚀

---

### Что такое BEM?
BEM — это подход к организации CSS-кода, который делит интерфейс на независимые блоки. Это делает код более модульным и предсказуемым.

Основные понятия:
1. Блок (Block)
Независимый компонент, который имеет смысл сам по себе (например, кнопка, меню, карточка).

2. Элемент (Element)
Часть блока, которая не имеет смысла вне его (например, заголовок или иконка внутри карточки).

3. Модификатор (Modifier)
Свойство, которое изменяет внешний вид или поведение блока/элемента (например, кнопка может быть большой или красной).

---

### Синтаксис BEM
BEM использует строгую нотацию для именования классов:

1. Блок
Название блока пишется одним словом (например, .menu, .button).

2. Элемент
Название элемента отделяется от блока двойным подчеркиванием __ (например, .menu__item, .button__icon).

3. Модификатор
Название модификатора отделяется от блока или элемента двойным дефисом -- (например, .button--large, .menu__item--active).

---

### Пример использования BEM

#### HTML: 
<div class="card">
    <img class="card__image" src="image.jpg" alt="Image">
    <h2 class="card__title">Заголовок</h2>
    <p class="card__description">Описание карточки.</p>
    <button class="card__button card__button--primary">Кнопка</button>
</div>



#### CSS: 
/* Блок */
.card {
    border: 1px solid #ccc;
    padding: 20px;
}

/* Элементы */
.card__image {
    width: 100%;
    height: auto;
}

.card__title {
    font-size: 24px;
    margin-bottom: 10px;
}

.card__description {
    font-size: 16px;
    color: #666;
}

/* Модификатор */
.card__button--primary {
    background-color: blue;
    color: white;
}



---

### Преимущества BEM
1. Модульность
Каждый блок независим, что позволяет легко переиспользовать код.

2. Понятность
Имена классов четко описывают структуру и назначение элементов.

3. Отсутствие конфликтов
Уникальные имена классов предотвращают случайные переопределения стилей.

4. Масштабируемость
BEM отлично подходит для больших проектов и командной работы.

---

### Практика
1. Создайте блок header с элементами logo, menu и search.
2. Добавьте модификатор для активного пункта меню.
3. Напишите стили, используя BEM-нотацию.

---

### Домашнее задание
Создайте страницу с использованием BEM:
- Блок header с логотипом и навигацией.
- Блок card с изображением, заголовком и кнопкой.
- Добавьте модификаторы для кнопок (например, primary и secondary).

Поделитесь результатами в комментариях! 😉

На этом наш курс по CSS подходит к концу. Мы изучили основы, Flexbox, Grid, анимации, адаптивный дизайн, препроцессоры и методологию BEM. Теперь вы готовы создавать современные и красивые веб-страницы! 🎉

Подписывайтесь на наш канал: [https://t.me/Safety_Y](https://t.me/Safety_Y)

#CSS #ВебРазработка #УрокиCSS #Программирование
9 views
rm -r
🚀 Веб-разработка с нуля: Урок 2

Привет, будущие разработчики! 👋
В прошлом уроке мы создали свою первую HTML-страницу. Сегодня мы добавим ей стилей с помощью CSS и сделаем наш сайт красивым!

📌 Что такое CSS?
CSS (Cascading Style Sheets) — это язык стилей, который отвечает за внешний вид вашего сайта: цвета, шрифты, отступы, анимации и многое другое.

🛠 Как подключить CSS к HTML?
Есть три способа:
1. Inline-стили — прямо в HTML-теге.
2. Внутри HTML-файла — с помощью тега <style>.
3. Отдельный файл — самый удобный способ.

📝 Практика:
Давайте подключим CSS к нашей странице и добавим стили.

1. Создайте файл styles.css и подключите его к HTML: 
<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый шаг в веб-разработке.</p>
</body>
</html>



2. Добавьте стили в файл styles.css: 
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    text-align: center;
    padding: 50px;
}

h1 {
    color: #333;
    font-size: 2.5em;
}

p {
    color: #666;
    font-size: 1.2em;
}



Сохраните файлы и откройте HTML-страницу в браузере. Теперь ваш сайт выглядит стильно! 🎨

👉 В следующем уроке:
Мы добавим интерактивности с помощью JavaScript и сделаем сайт динамичным.

Подписывайтесь на канал, чтобы не пропустить новые уроки: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими результатами в комментариях! 💬

#вебразработка #css #html #программирование #rm_programmer
4 views
rm -r
🚀 Веб-разработка с нуля: Урок 3

Привет, будущие разработчики! 👋
В прошлых уроках мы создали HTML-страницу и добавили ей стили с помощью CSS. Сегодня мы сделаем наш сайт интерактивным с помощью JavaScript!

📌 Что такое JavaScript?
JavaScript — это язык программирования, который позволяет добавлять динамику на ваш сайт: анимации, обработку кликов, взаимодействие с пользователем и многое другое.

🛠 Как подключить JavaScript к HTML?
Есть два основных способа:
1. Inline-скрипт — прямо в HTML-файле с помощью тега <script>.
2. Отдельный файл — самый удобный способ.

📝 Практика:
Давайте добавим простой скрипт, который будет показывать сообщение при клике на кнопку.

1. Создайте файл script.js и подключите его к HTML: 
<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый шаг в веб-разработке.</p>
    <button id="myButton">Нажми на меня</button>
    <script src="script.js"></script>
</body>
</html>



2. Добавьте скрипт в файл script.js: 
document.getElementById("myButton").addEventListener("click", function() {
    alert("Вы нажали на кнопку! 🎉");
});



Сохраните файлы и откройте HTML-страницу в браузере. Теперь при нажатии на кнопку вы увидите сообщение! 🚀

👉 В следующем уроке:
Мы начнем изучать основы работы с DOM (Document Object Model) и узнаем, как динамически изменять содержимое страницы.

Подписывайтесь на канал, чтобы не пропустить новые уроки: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими результатами в комментариях! 💬

#вебразработка #javascript #html #css #программирование #rm_programmer
5 views
rm -r
🚀 Веб-разработка с нуля: Урок 4

Привет, будущие разработчики! 👋
В прошлом уроке мы добавили интерактивности на сайт с помощью JavaScript. Сегодня мы углубимся в работу с DOM (Document Object Model) и научимся динамически изменять содержимое страницы.

📌 Что такое DOM?
DOM — это программный интерфейс, который позволяет JavaScript взаимодействовать с HTML-документом. С его помощью можно изменять структуру, стили и содержимое страницы "на лету".

🛠 Основные методы работы с DOM:
1. Выбор элементов:
- document.getElementById("id") — выбор элемента по id.
- document.querySelector(".class") — выбор элемента по классу или тегу.
2. Изменение содержимого:
- element.textContent — изменение текста внутри элемента.
- element.innerHTML — изменение HTML-содержимого.
3. Добавление и удаление элементов:
- document.createElement("div") — создание нового элемента.
- element.appendChild(newElement) — добавление элемента в DOM.

📝 Практика:
Давайте создадим кнопку, которая будет добавлять новый элемент на страницу.

1. Обновите ваш HTML-файл: 
<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый шаг в веб-разработке.</p>
    <button id="addButton">Добавить элемент</button>
    <div id="container"></div>
    <script src="script.js"></script>
</body>
</html>



2. Добавьте стили в styles.css (по желанию): 
#container {
    margin-top: 20px;
}

.new-element {
    background-color: #e0e0e0;
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
}



3. Напишите скрипт в script.js: 
document.getElementById("addButton").addEventListener("click", function() {
    // Создаем новый элемент
    const newElement = document.createElement("div");
    newElement.textContent = "Новый элемент добавлен!";
    newElement.classList.add("new-element");

    // Добавляем его в контейнер
    document.getElementById("container").appendChild(newElement);
});



Сохраните файлы и откройте HTML-страницу в браузере. Теперь при нажатии на кнопку "Добавить элемент" на странице будут появляться новые блоки! 🎉

👉 В следующем уроке:
Мы начнем изучать основы адаптивной верстки и сделаем наш сайт удобным для мобильных устройств.

Подписывайтесь на канал, чтобы не пропустить новые уроки: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими результатами в комментариях! 💬

#вебразработка #javascript #DOM #html #css #программирование #rm_programmer
6 views
rm -r
🚀 Веб-разработка с нуля: Урок 5

Привет, будущие разработчики! 👋
В прошлом уроке мы научились работать с DOM и динамически изменять содержимое страницы. Сегодня мы поговорим о адаптивной верстке — сделаем наш сайт удобным для просмотра на любых устройствах: от смартфонов до компьютеров.

📌 Что такое адаптивная верстка?
Адаптивная верстка — это подход, при котором сайт автоматически подстраивается под размер экрана устройства. Это достигается с помощью медиазапросов (Media Queries) в CSS.

🛠 Основы адаптивной верстки:
1. Метатег viewport:
Добавьте этот тег в <head> вашего HTML-файла, чтобы сайт корректно отображался на мобильных устройствах: 

   <meta name="viewport" content="width=device-width, initial-scale=1.0">



2. Медиазапросы:
Медиазапросы позволяют применять стили в зависимости от ширины экрана. Например: 

   @media (max-width: 768px) {
       body {
           background-color: lightblue;
       }
   }



📝 Практика:
Давайте сделаем наш сайт адаптивным.

1. Обновите ваш HTML-файл: 
<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый шаг в веб-разработке.</p>
    <button id="addButton">Добавить элемент</button>
    <div id="container"></div>
    <script src="script.js"></script>
</body>
</html>



2. Добавьте адаптивные стили в styles.css: 
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    text-align: center;
    padding: 20px;
}

h1 {
    color: #333;
    font-size: 2.5em;
}

p {
    color: #666;
    font-size: 1.2em;
}

#container {
    margin-top: 20px;
}

.new-element {
    background-color: #e0e0e0;
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
}

/* Медиазапрос для мобильных устройств */
@media (max-width: 768px) {
    h1 {
        font-size: 2em;
    }

    p {
        font-size: 1em;
    }

    .new-element {
        padding: 8px;
        font-size: 0.9em;
    }
}



3. Проверьте результат:
Откройте сайт на разных устройствах или измените размер окна браузера. Вы увидите, как стили адаптируются под размер экрана! 📱💻

👉 В следующем уроке:
Мы начнем изучать Flexbox — мощный инструмент для создания гибких макетов.

Подписывайтесь на канал, чтобы не пропустить новые уроки: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими результатами в комментариях! 💬

#вебразработка #адаптивнаяверстка #css #html #программирование #rm_programmer
6 views
rm -r
🚀 Веб-разработка с нуля: Урок 6

Привет, будущие разработчики! 👋
В прошлом уроке мы познакомились с адаптивной версткой и научились делать сайты удобными для любых устройств. Сегодня мы изучим Flexbox — мощный инструмент для создания гибких и современных макетов.

📌 Что такое Flexbox?
Flexbox (Flexible Box Layout) — это модуль CSS, который позволяет легко управлять расположением элементов на странице: выравнивание, распределение пространства, порядок отображения и многое другое.

🛠 Основы Flexbox:
1. Flex-контейнер:
Чтобы сделать элемент flex-контейнером, добавьте свойство: 

   display: flex;



2. Основные свойства Flexbox:
- justify-content — выравнивание по горизонтали.
- align-items — выравнивание по вертикали.
- flex-direction — направление элементов (ряд или колонка).
- flex-wrap — перенос элементов на новую строку.

📝 Практика:
Давайте создадим простой макет с использованием Flexbox.

1. Обновите ваш HTML-файл: 
<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>



2. Добавьте стили с Flexbox в styles.css: 
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    justify-content: space-between; /* Равномерное распределение */
    align-items: center; /* Выравнивание по центру */
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    margin: 20px;
}

.item {
    background-color: #007bff;
    color: #fff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    font-size: 1.5em;
    flex: 1; /* Равномерное распределение пространства */
    margin: 0 10px; /* Отступы между элементами */
}



3. Проверьте результат:
Откройте страницу в браузере. Вы увидите, как элементы равномерно распределились по контейнеру и выровнялись по центру! 🎉

👉 В следующем уроке:
Мы углубимся в изучение Flexbox и создадим более сложные макеты.

Подписывайтесь на канал, чтобы не пропустить новые уроки: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими результатами в комментариях! 💬

#вебразработка #flexbox #css #html #программирование #rm_programmer
5 views
rm -r
🚀 Веб-разработка с нуля: Урок 7

Привет, будущие разработчики! 👋
В прошлом уроке мы познакомились с основами Flexbox и создали простой макет. Сегодня мы углубимся в изучение Flexbox и создадим более сложный и функциональный макет.

📌 Что нового мы изучим?
1. Управление порядком элементов:
Свойство order позволяет менять порядок отображения элементов.
2. Гибкость элементов:
Свойства flex-grow, flex-shrink и flex-basis управляют тем, как элементы растягиваются или сжимаются.
3. Многострочные контейнеры:
Свойство flex-wrap позволяет элементам переноситься на новую строку.

📝 Практика:
Давайте создадим макет с несколькими элементами, которые будут менять порядок и адаптироваться под размер экрана.

1. Обновите ваш HTML-файл: 
<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
    </div>
</body>
</html>



2. Добавьте стили с Flexbox в styles.css: 
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-wrap: wrap; /* Перенос элементов на новую строку */
    justify-content: space-between; /* Равномерное распределение */
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    margin: 20px;
}

.item {
    background-color: #007bff;
    color: #fff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    font-size: 1.5em;
    margin: 10px;
    flex: 1 1 200px; /* Гибкость элементов */
}

.item-1 {
    order: 2; /* Меняем порядок */
}

.item-2 {
    order: 1;
}

.item-3 {
    order: 3;
}

.item-4 {
    order: 5;
}

.item-5 {
    order: 4;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .item {
        flex: 1 1 100%; /* Элементы занимают всю ширину */
    }
}



3. Проверьте результат:
Откройте страницу в браузере и измените размер окна. Вы увидите, как элементы меняют порядок и адаптируются под размер экрана! 📱💻

👉 В следующем уроке:
Мы начнем изучать CSS Grid — еще более мощный инструмент для создания сложных макетов.

Подписывайтесь на канал, чтобы не пропустить новые уроки: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими результатами в комментариях! 💬

#вебразработка #flexbox #css #html #программирование #rm_programmer
5 views
rm -r
🚀 Веб-разработка с нуля: Урок 8

Привет, будущие разработчики! 👋
В прошлом уроке мы углубились в Flexbox и создали адаптивный макет. Сегодня мы познакомимся с CSS Grid — мощным инструментом для создания сложных и гибких макетов.

📌 Что такое CSS Grid?
CSS Grid — это система для создания двумерных макетов. В отличие от Flexbox, который работает в одном направлении (ряд или колонка), Grid позволяет управлять как строками, так и столбцами одновременно.

🛠 Основы CSS Grid:
1. Создание сетки:
Используйте свойство display: grid; для контейнера.
2. Определение столбцов и строк:
- grid-template-columns — задает количество и размер столбцов.
- grid-template-rows — задает количество и размер строк.
3. Размещение элементов:
- grid-column и grid-row — определяют, где будет расположен элемент.

📝 Практика:
Давайте создадим простой макет с использованием CSS Grid.

1. Обновите ваш HTML-файл: 
<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
    </div>
</body>
</html>



2. Добавьте стили с CSS Grid в styles.css: 
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 столбца */
    grid-template-rows: repeat(2, 150px); /* 2 строки */
    gap: 10px; /* Расстояние между элементами */
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    margin: 20px;
}

.item {
    background-color: #007bff;
    color: #fff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    font-size: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-1 {
    grid-column: 1 / 3; /* Занимает первые два столбца */
}

.item-2 {
    grid-column: 3 / 4; /* Занимает третий столбец */
    grid-row: 1 / 3; /* Занимает две строки */
}

.item-3 {
    grid-column: 1 / 2; /* Занимает первый столбец */
    grid-row: 2 / 3; /* Занимает вторую строку */
}

.item-4 {
    grid-column: 2 / 3; /* Занимает второй столбец */
    grid-row: 2 / 3; /* Занимает вторую строку */
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr; /* Один столбец */
        grid-template-rows: auto; /* Автоматическая высота строк */
    }

    .item {
        grid-column: 1 / 2; /* Все элементы занимают один столбец */
        grid-row: auto; /* Автоматическое размещение строк */
    }
}



3. Проверьте результат:
Откройте страницу в браузере и измените размер окна. Вы увидите, как элементы адаптируются под размер экрана, создавая красивый и функциональный макет! 📱💻

👉 В следующем уроке:
Мы углубимся в изучение CSS Grid и создадим более сложные макеты.

Подписывайтесь на канал, чтобы не пропустить новые уроки: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими результатами в комментариях! 💬

#вебразработка #CSSGrid #css #html #программирование #rm_programmer
6 views
rm -r
🚀 Веб-разработка с нуля: Урок 9

Привет, будущие разработчики! 👋
В прошлом уроке мы познакомились с CSS Grid и создали простой макет. Сегодня мы углубимся в изучение Grid и создадим более сложный и функциональный макет, который можно использовать для реальных проектов.

📌 Что нового мы изучим?
1. Именованные области:
С помощью grid-template-areas можно задавать именованные области для элементов.
2. Автоматическое размещение:
Свойство grid-auto-flow управляет тем, как элементы заполняют сетку.
3. Минимальная и максимальная высота строк:
Используйте minmax() для гибкости строк и столбцов.

📝 Практика:
Давайте создадим макет страницы с шапкой, боковой панелью, основным содержимым и футером.

1. Обновите ваш HTML-файл: 
<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header class="header">Шапка</header>
        <aside class="sidebar">Боковая панель</aside>
        <main class="content">Основное содержимое</main>
        <footer class="footer">Футер</footer>
    </div>
</body>
</html>



2. Добавьте стили с CSS Grid в styles.css: 
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.container {
    display: grid;
    grid-template-columns: 200px 1fr; /* Боковая панель и основное содержимое */
    grid-template-rows: 80px 1fr 60px; /* Шапка, содержимое, футер */
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
    gap: 10px; /* Расстояние между элементами */
    height: 100vh; /* На всю высоту экрана */
    padding: 10px;
}

.header {
    grid-area: header;
    background-color: #007bff;
    color: #fff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    font-size: 1.5em;
}

.sidebar {
    grid-area: sidebar;
    background-color: #333;
    color: #fff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    font-size: 1.2em;
}

.content {
    grid-area: content;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    font-size: 1.2em;
}

.footer {
    grid-area: footer;
    background-color: #007bff;
    color: #fff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    font-size: 1.2em;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr; /* Один столбец */
        grid-template-rows: 80px auto 1fr 60px; /* Автоматическая высота для боковой панели */
        grid-template-areas:
            "header"
            "sidebar"
            "content"
            "footer";
    }
}



3. Проверьте результат:
Откройте страницу в браузере и измените размер окна. Вы увидите, как макет адаптируется под разные устройства, сохраняя свою структуру! 📱💻

👉 В следующем уроке:
Мы начнем изучать JavaScript более глубоко и добавим интерактивности на наш сайт.

Подписывайтесь на канал, чтобы не пропустить новые уроки: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими результатами в комментариях! 💬

#вебразработка #CSSGrid #css #html #программирование #rm_programmer
7 views
rm -r
🚀 Веб-разработка с нуля: Урок 10

Привет, будущие разработчики! 👋
В прошлых уроках мы изучили основы HTML, CSS, Flexbox и CSS Grid, создавая макеты и адаптивные страницы. Сегодня мы переходим к JavaScript и добавим интерактивности на наш сайт!

📌 Что такое JavaScript?
JavaScript — это язык программирования, который позволяет "оживить" ваш сайт: добавлять анимации, обрабатывать действия пользователя, взаимодействовать с сервером и многое другое.

🛠 Основы JavaScript:
1. Переменные:
Используйте let, const или var для хранения данных.
2. Функции:
Функции позволяют выполнять код по требованию.
3. События:
JavaScript может реагировать на действия пользователя, например, клики или наведение мыши.

📝 Практика:
Давайте создадим кнопку, которая будет менять цвет фона страницы при нажатии.

1. Обновите ваш HTML-файл: 
<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Привет, мир!</h1>
        <button id="colorButton">Изменить цвет фона</button>
    </div>
    <script src="script.js"></script>
</body>
</html>



2. Добавьте стили в styles.css: 
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    text-align: center;
}

h1 {
    color: #333;
    font-size: 2.5em;
}

button {
    padding: 10px 20px;
    font-size: 1.2em;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}



3. Добавьте JavaScript в script.js: 
const button = document.getElementById("colorButton");
const colors = ["#ffcccc", "#ccffcc", "#ccccff", "#ffccff", "#ccffff"];
let currentIndex = 0;

button.addEventListener("click", function() {
    document.body.style.backgroundColor = colors[currentIndex];
    currentIndex = (currentIndex + 1) % colors.length; // Переход к следующему цвету
});



4. Проверьте результат:
Откройте страницу в браузере и нажмите на кнопку. Фон страницы будет меняться при каждом клике! 🎨

👉 В следующем уроке:
Мы изучим, как работать с DOM (Document Object Model) и динамически изменять содержимое страницы.

Подписывайтесь на канал, чтобы не пропустить новые уроки: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими результатами в комментариях! 💬

#вебразработка #javascript #html #css #программирование #rm_programmer
5 views