rm -r

🚀 Веб-разработка с нуля: Урок 1

Привет, будущие разработчики! 👋
Сегодня мы начинаем наш увлекательный путь в мир веб-разработки. Готовы погрузиться в создание сайтов и приложений? Тогда поехали!

📌 Что такое веб-разработка?
Веб-разработка — это процесс создания веб-сайтов или веб-приложений. Она делится на две основные части:
1. Frontend — то, что видит пользователь (дизайн, кнопки, анимации).
2. Backend — то, что работает на сервере (базы данных, логика сайта).

🛠 С чего начать?
1. HTML — основа любого сайта. Это язык разметки, который создает структуру страницы.
2. CSS — добавляет стили: цвета, шрифты, отступы.
3. JavaScript — делает сайт интерактивным.

📝 Практика:
Создайте свою первую HTML-страницу!

<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый шаг в веб-разработке.</p>
</body>
</html>

Сохраните файл с расширением .html и откройте его в браузере. Поздравляю, вы создали свой первый сайт! 🎉

👉 В следующем уроке:
Разберем, как добавить стили с помощью CSS и сделать ваш сайт красивым.

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

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

5 views06:00

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 views06:03

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 views06:02

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 views06:02

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 views06:04

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 views06:03

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 views06:02

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 views06:02

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 views06:03

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 views06:00

About

Blog

Apps

Platform