Урок 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 #Программирование

Урок 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 #Программирование

Урок 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 #Программирование

🚀 Веб-разработка с нуля: Урок 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

🚀 Веб-разработка с нуля: Урок 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

🚀 Веб-разработка с нуля: Урок 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

🚀 Веб-разработка с нуля: Урок 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

Привет, будущие разработчики! 👋
В прошлом уроке мы познакомились с адаптивной версткой и научились делать сайты удобными для любых устройств. Сегодня мы изучим 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

🚀 Веб-разработка с нуля: Урок 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

🚀 Веб-разработка с нуля: Урок 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

🚀 Веб-разработка с нуля: Урок 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

🚀 Веб-разработка с нуля: Урок 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