Практический курс по React JS для начинающих

Практический курс по React JS - это курс, который покажет вам все шаги создания простого приложения на JavaScript и React. Курс подойдет как и для полных новичков, так и для более опытных программистов.

В курсе нет теории вообще, все разбирается на практике, по мере необходимости использования того или иного функционала. Также все реализовано на новом синтаксисе JavaScript - ECMAScript 6, про который тоже будет идти отдельный разговор: https://Hottab.programsite.ru/freereactjs

В процессе курса будет создано динамическое приложение-игра “Крестики-нолики”, с возможностью просматривать историю ходов и перехода к каждому из них, и с автоматическим обновлением статусы игры: чей ход, кто победил и т.д.

Вы узнаете как максимально быстро создать рабочее окружение для разработки на React: сервер автоматической "life" перезагрузки браузера, компиляцию стилей, бандлинг и много другое: https://Hottab.programsite.ru/freereactjs

📘 Полное руководство по PHP – Глава 35: Работа с файлами и загрузка данных на сервер 🐘

В этой главе мы рассмотрим, как работать с файлами в PHP, включая загрузку файлов на сервер, чтение и запись данных, а также управление файловой системой. Эти навыки необходимы для создания функциональных веб-приложений.

---

### 1. Загрузка файлов на сервер
PHP позволяет загружать файлы на сервер через HTML-форму.

#### HTML-форма

<form action="upload.php" method="post" enctype="multipart/form-data">
    Выберите файл: <input type="file" name="file">
    <input type="submit" value="Загрузить">
</form>

#### Обработка загрузки (upload.php)

<?php
if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
    $upload_dir = 'uploads/';
    $upload_file = $upload_dir . basename($_FILES['file']['name']);

    if (move_uploaded_file($_FILES['file']['tmp_name'], $upload_file)) {
        echo "Файл успешно загружен!";
    } else {
        echo "Ошибка при загрузке файла!";
    }
} else {
    echo "Ошибка: " . $_FILES['file']['error'];
}
?>

---

### 2. Чтение и запись файлов
PHP предоставляет функции для работы с файлами.

#### Чтение файла

<?php
$file = fopen("example.txt", "r") or die("Не удалось открыть файл!");
echo fread($file, filesize("example.txt"));
fclose($file);
?>

#### Запись в файл

<?php
$file = fopen("example.txt", "w") or die("Не удалось открыть файл!");
$text = "Привет, мир!";
fwrite($file, $text);
fclose($file);
?>

---

### 3. Работа с директориями
PHP позволяет создавать, удалять и переименовывать директории.

#### Создание директории

<?php
if (!file_exists("new_dir")) {
    mkdir("new_dir");
    echo "Директория создана!";
} else {
    echo "Директория уже существует!";
}
?>

#### Удаление директории

<?php
if (file_exists("new_dir")) {
    rmdir("new_dir");
    echo "Директория удалена!";
} else {
    echo "Директория не существует!";
}
?>

#### Переименование директории

<?php
if (file_exists("old_dir")) {
    rename("old_dir", "new_dir");
    echo "Директория переименована!";
} else {
    echo "Директория не существует!";
}
?>

---

### 4. Работа с CSV
CSV (Comma-Separated Values) — это формат для хранения табличных данных.

#### Чтение CSV

<?php
$file = fopen("data.csv", "r");
while (($data = fgetcsv($file, 1000, ",")) !== FALSE) {
    print_r($data);
}
fclose($file);
?>

#### Запись в CSV

<?php
$file = fopen("data.csv", "w");
$data = [
    ["Иван", 25],
    ["Мария", 30]
];
foreach ($data as $row) {
    fputcsv($file, $row);
}
fclose($file);
?>

---

### 5. Работа с JSON
JSON (JavaScript Object Notation) — это популярный формат для обмена данными.

#### Чтение JSON

<?php
$json = '{"name": "Иван", "age": 25}';
$array = json_decode($json, true);
print_r($array);
?>

#### Запись JSON

<?php
$array = ["name" => "Иван", "age" => 25];
$json = json_encode($array);
echo $json;
?>

---

### 6. Управление файловой системой
PHP предоставляет функции для работы с файловой системой.

#### Проверка существования файла

<?php
if (file_exists("example.txt")) {
    echo "Файл существует!";
} else {
    echo "Файл не существует!";
}
?>

#### Получение размера файла

<?php
echo "Размер файла: " . filesize("example.txt") . " байт";
?>

#### Удаление файла

<?php
if (unlink("example.txt")) {
    echo "Файл удалён!";
} else {
    echo "Ошибка при удалении файла!";
}
?>

---

🎯 Что дальше?
В следующей главе мы изучим работу с сессиями и куками, а также управление состоянием пользователя. Продолжайте изучать PHP, и вы сможете создавать мощные веб-приложения! 🚀

#PHP #Файлы #Загрузка #Программирование #Телеграм

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

Joomla 3 с Нуля до Гуру
Сколько стоит сайт на Joomla?

Если вы будете создавать сайты на базе CMS Joomla, то вам, наверное, будет интересно узнать сколько берут за сайт другие разработчики.

Разработчиков можно поделить как минимум на 4 группы:
- Новички
- Новички со стажем
- Специалисты
- Профи

Новички создают несложные сайты на бесплатных CMS и на бесплатных шаблонах. В основном без какого-либо планирования, без изучения аудитории и тому подобных «не нужных» работ. Как правило такие сайты редко поднимаются в ТОП и не приносят никакой пользы заказчику. Стоимость таких сайтов в районе 4-6 тысяч рублей (стоимость в регионах).

Новички со стажем, тоже создают несложные сайты на готовых CMS, иногда с правкой готовых шаблонов. Планирование, проектирование сайта и изучение аудитории тоже не входит в перечень работ, и в итоге получается обычный сайт, как и миллионы других. Тексты пишут сами или заказывают у других фрилансеров. Но толку от этого нет, если не знаешь для кого пишешь текст, то такой текст никогда не будет эффективным. Среди этих разработчиков встречаются даже веб-студии. Но сколько человек в них работает – никто не знает) Стоимость типового сайта в районе 10-15 т.р.

Специалисты.
Это уже совсем другой ценовой диапазон и совсем другие возможности. Проектирование сайта, изучение аудитории – здесь как правило заложено в тех.процессе или же выполняется по желанию заказчика. Маркетинг здесь уважают. Дизайн и шаблоны собственные и уникальные. Расширения или переделываются под задачи или пишутся с нуля. Стоимость таких проектов от 30 - 50 тыс.рублей и выше. Обычно эти разработчики дополняют свой спектр смежными услугами, за счёт которых стоимость сайта заметно повышается.

Профи.
Создают сайты на CMS системах собственной разработки или пишут всё с нуля. Редко, но используют готовые CMS. Сценарии и аватары пользователей, проектирование сайта – это для них обязательные работы. Стоимость обычно не указана на их сайтах, так как она заоблачная. Сайты меньше 50-70 т.р. им просто не интересны. Как-то раз встречал ценник в 6 млн. рублей))

Поэтому чтобы создавать дорогие сайты, нужно:
- уметь работать с готовыми CMS (или хотя бы одной, но мощной)
- уметь создавать собственные шаблоны и знать HTML/CSS
- учиться проектировать сайты
- учиться оптимизировать сайты под поисковые системы
- учиться делегировать задачи

Видеокурс “Joomla 3 с Нуля до Гуру” поможет вам в этом: https://Hottab.programsite.ru/joomla

Курс спроектирован таким образом, что подходит как для опытных вебмастеров, так и для новичков.

К видеокурсу прилагаются бонусы, это:
- создание интернет-магазина на базе JoomShopping,
- лёгкий и быстрый адаптивный шаблон, построенный на HTML5 и CSS3
- комплект модулей для Joomla 3
- дисконт на кроссплатформенный скрипт автоматических бекапов для сайта

Кроме этого много дополнительных материалов, которые помогают при создании сайта. Поэтому обязательно переходите по ссылке и повышайте свой уровень веб-мастерства: https://Hottab.programsite.ru/joomla

📘 Полное руководство по PHP – Глава 36: Работа с сессиями и куками 🐘

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

---

### 1. Сессии
Сессии позволяют хранить данные на сервере для каждого пользователя. Каждая сессия имеет уникальный идентификатор, который передаётся через куки.

#### Начало сессии

<?php
session_start();
?>

#### Сохранение данных в сессии

<?php
session_start();
$_SESSION['username'] = "Иван";
echo "Данные сохранены в сессии!";
?>

#### Получение данных из сессии

<?php
session_start();
if (isset($_SESSION['username'])) {
    echo "Привет, " . $_SESSION['username'] . "!";
} else {
    echo "Сессия не найдена!";
}
?>

#### Удаление данных из сессии

<?php
session_start();
unset($_SESSION['username']);
echo "Данные удалены из сессии!";
?>

#### Завершение сессии

<?php
session_start();
session_destroy();
echo "Сессия завершена!";
?>

---

### 2. Куки
Куки позволяют хранить данные на стороне клиента. Они могут быть использованы для персонализации или отслеживания пользователей.

#### Установка куки

<?php
setcookie("username", "Иван", time() + 3600, "/");
echo "Кука установлена!";
?>

#### Получение данных из куки

<?php
if (isset($_COOKIE['username'])) {
    echo "Привет, " . $_COOKIE['username'] . "!";
} else {
    echo "Кука не найдена!";
}
?>

#### Удаление куки

<?php
setcookie("username", "", time() - 3600, "/");
echo "Кука удалена!";
?>

---

### 3. Пример: Авторизация с использованием сессий
#### Форма входа

<form action="login.php" method="post">
    Имя пользователя: <input type="text" name="username">
    Пароль: <input type="password" name="password">
    <input type="submit" value="Войти">
</form>

#### Обработка входа (login.php)

<?php
session_start();

$username = $_POST['username'];
$password = $_POST['password'];

// Проверка логина и пароля (пример)
if ($username === "Иван" && $password === "12345") {
    $_SESSION['username'] = $username;
    echo "Вход выполнен!";
} else {
    echo "Неверные данные!";
}
?>

#### Проверка авторизации

<?php
session_start();

if (isset($_SESSION['username'])) {
    echo "Привет, " . $_SESSION['username'] . "!";
} else {
    echo "Пожалуйста, войдите в систему.";
}
?>

#### Выход из системы

<?php
session_start();
session_destroy();
echo "Вы вышли из системы!";
?>

---

### 4. Пример: Запоминание пользователя с использованием кук
#### Установка куки при входе

<?php
$username = $_POST['username'];
$password = $_POST['password'];

if ($username === "Иван" && $password === "12345") {
    setcookie("username", $username, time() + 3600, "/");
    echo "Вход выполнен!";
} else {
    echo "Неверные данные!";
}
?>

#### Проверка куки

<?php
if (isset($_COOKIE['username'])) {
    echo "Привет, " . $_COOKIE['username'] . "!";
} else {
    echo "Пожалуйста, войдите в систему.";
}
?>

---

### 5. Безопасность
- Сессии: Используйте session_regenerate_id() для предотвращения фиксации сессии.
- Куки: Устанавливайте флаг HttpOnly и Secure для защиты от XSS и перехвата.

  setcookie("username", "Иван", time() + 3600, "/", "", true, true);
  

---

🎯 Что дальше?
В следующей главе мы изучим работу с базами данных, включая PDO и ORM. Продолжайте изучать PHP, и вы сможете создавать мощные веб-приложения! 🚀

#PHP #Сессии #Куки #Программирование #Телеграм

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

Как открыть свою Web-студию

Все, кто увлекается сайтостроением, в конечном итоге, приходят к мысли, чтобы ещё зарабатывать на этом. Наиболее оптимальный вариант - это создание сайтов на заказ, тем более, что спрос огромен, а вот предложение, несмотря на его количество, оставляет желать лучшего. Практически любой, кто когда-нибудь заказывал сайт, сталкивался с низким качеством, со срывом сроков, высокими ценами и просто обманом. Поэтому реальной конкуренции в сфере создания сайтов в Рунете нет вообще.

Однако, новичок не знает, как открыть свою Web-студию. И вот тут на помощь приходит очень полезный бесплатный курс от Михаила Русакова: https://Hottab.programsite.ru/freeweb55

Данный курс Вам расскажет о том, каких результатов достиг сам Михаил, тем более, что он занимается созданием сайтов на заказ с 2011-го года. Так же Вы узнаете, как найти специалистов, которые Вам создадут качественный сайт, как правильно продвигать сайт Вашей Web-студии, как общаться с заказчиками, чтобы добиться максимальной конверсии из заявок в клиенты, и многое-многое другое.

Получить курс совершенно бесплатно можно здесь: https://Hottab.programsite.ru/freeweb55

Safety🪬, [02.04.2025 16:00]
🚀 Полное руководство по PHP – Глава 38

📌 Тема: Безопасность в PHP – Защита от SQL-инъекций и XSS

Привет, кодеры! 👨‍💻 В этой главе разберём ключевые аспекты безопасности PHP-приложений.

### 🔒 1. Защита от SQL-инъекций
Используйте подготовленные выражения (Prepared Statements) вместо прямой вставки переменных в SQL-запросы.

Пример с PDO:

$stmt = $pdo->prepare("SELECT * FROM users WHERE email = :email");
$stmt->execute(['email' => $email]);
$user = $stmt->fetch();

Пример с MySQLi:

$stmt = $mysqli->prepare("SELECT * FROM users WHERE email = ?");
$stmt->bind_param("s", $email);
$stmt->execute();
$result = $stmt->get_result();

### 🛡 2. Защита от XSS (Cross-Site Scripting)
Всегда экранируйте вывод с помощью htmlspecialchars():

echo htmlspecialchars($user_input, ENT_QUOTES, 'UTF-8');

### 🔐 3. Валидация и фильтрация данных
Используйте filter_var():

$email = filter_var($_POST['email'], FILTER_VALIDATE_EMAIL);
if ($email === false) {
    die("Некорректный email!");
}

### 🚫 4. Защита от CSRF (межсайтовая подделка запроса)
Используйте CSRF-токены:

session_start();
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (!isset($_POST['csrf_token']) || $_POST['csrf_token'] !== $_SESSION['csrf_token']) {
        die("Ошибка CSRF-токена!");
    }
    // Обработка формы
}
$_SESSION['csrf_token'] = bin2hex(random_bytes(32));

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

#PHP #Безопасность #WebDev #Программирование #SQL #XSS

HTML и CSS для начинающих

Не секрет, что в 21-м веке наибольшим спросом пользуются IT-специалисты, причём во всём мире. И Web-мастера здесь занимают далеко не последнюю роль, достаточно посмотреть, сколько сайтов и сервисов в Интернете, и насколько они облегчают нашу жизнь. И таких сервисов придумают ещё уйму, и делать их будут как раз Web-мастера.

И если Вас интересует IT-тематика и если Вы хотите стать Web-мастером и делать сайты: самостоятельно на заказ или на работе, или, быть может, у Вас есть какая-то идея сайта, - то Вам в обязательном порядке придётся осваивать HTML и CSS.

И сегодня я хочу порекомендовать один бесплатный, но при этом очень подробный курс, который просмотрел я сам: https://Hottab.programsite.ru/freemakeup2

Данный курс содержит несколько часов видеоуроков (больше 6-ти) по HTML и CSS, и он даст Вам всё необходимое, что нужно знать по этим Web-технологиям. К курсу так же идут упражнения, что очень полезно и очень удивительно для бесплатного курса.

Поэтому данный курс я рекомендую абсолютно всем, кто хочет заниматься сайтостроением: https://Hottab.programsite.ru/freemakeup2

🚀 Полное руководство по PHP – Глава 39

📌 Тема: Работа с файлами и загрузка файлов на сервер

Привет, разработчики! 👨‍💻 В этой главе разберём, как безопасно работать с файлами в PHP и реализовать загрузку файлов на сервер.

### 📂 1. Основы работы с файлами
Чтение файла:

$content = file_get_contents('example.txt');
echo $content;

Запись в файл:

file_put_contents('example.txt', 'Hello, PHP!');

Проверка существования файла:

if (file_exists('example.txt')) {
    echo "Файл существует!";
}

### ⚠️ 2. Безопасная загрузка файлов
Пример обработки загружаемого файла:

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
    $uploadDir = 'uploads/';
    $fileName = basename($_FILES['file']['name']);
    $filePath = $uploadDir . $fileName;
    $fileType = strtolower(pathinfo($filePath, PATHINFO_EXTENSION));

    // Проверка типа файла (например, только изображения)
    $allowedTypes = ['jpg', 'png', 'jpeg', 'gif'];
    if (!in_array($fileType, $allowedTypes)) {
        die("Недопустимый тип файла!");
    }

    // Проверка размера файла (например, не более 2MB)
    if ($_FILES['file']['size'] > 2 * 1024 * 1024) {
        die("Файл слишком большой!");
    }

    // Перемещение файла в нужную директорию
    if (move_uploaded_file($_FILES['file']['tmp_name'], $filePath)) {
        echo "Файл успешно загружен!";
    } else {
        echo "Ошибка загрузки файла!";
    }
}

### 🔒 3. Безопасность при работе с файлами
- Проверяйте MIME-тип файла ($_FILES['file']['type']).
- Генерируйте случайные имена для файлов, чтобы избежать перезаписи.
- Ограничивайте права доступа к папке загрузок (chmod).
- Используйте `is_uploaded_file()` для проверки легитимности файла.

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

#PHP #Файлы #WebDev #Безопасность #Программирование #ЗагрузкаФайлов

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

🚀 Полное руководство по PHP – Глава 40

📌 Тема: Аутентификация и авторизация в PHP

Привет, кодерам! 👋 В этой главе разберём, как правильно реализовать вход пользователей и управление их правами.

### 🔑 1. Базовая аутентификация
Хранение паролей:
Всегда используйте password_hash() и password_verify()!

// Регистрация  
$hashedPassword = password_hash($_POST['password'], PASSWORD_DEFAULT);  
// Сохраняем $hashedPassword в БД  

// Вход  
$user = getUserFromDB($_POST['login']);  
if ($user && password_verify($_POST['password'], $user['password'])) {  
    $_SESSION['user_id'] = $user['id'];  
    header('Location: /dashboard.php');  
} else {  
    die('Неверный логин или пароль!');  
}  

### 🛡 2. Защита сессий

session_start([  
    'cookie_secure' => true,    // Только HTTPS  
    'cookie_httponly' => true,  // Запрет JS-доступа  
    'use_strict_mode' => true   // Защита от фиксации  
]);  

// Регенерация ID сессии после входа  
session_regenerate_id(true);  

### 🔐 3. Ролевая модель (авторизация)

// Проверка прав  
function checkPermission($requiredRole) {  
    if ($_SESSION['user_role'] !== $requiredRole) {  
        header('HTTP/1.0 403 Forbidden');  
        die('Доступ запрещён!');  
    }  
}  

// Использование  
checkPermission('admin');  

### ⚠️ 4. Защита от bruteforce

// Ограничение попыток входа  
if ($_SESSION['login_attempts'] > 5) {  
    die('Превышено число попыток. Попробуйте позже.');  
}  

### 🔥 Бонус: JWT-авторизация (для API)

use Firebase\JWT\JWT;  

// Генерация токена  
$payload = [  
    'user_id' => 123,  
    'exp' => time() + 3600 // 1 час  
];  
$jwt = JWT::encode($payload, 'your_secret_key', 'HS256');  

// Проверка токена  
try {  
    $decoded = JWT::decode($jwt, 'your_secret_key', ['HS256']);  
} catch (Exception $e) {  
    http_response_code(401);  
    die('Недействительный токен!');  
}  

📢 Больше о безопасности: [Safety_Y](https://t.me/Safety_Y)
#PHP #Безопасность #Аутентификация #JWT #WebDev #Программирование

P.S. В следующей главе разберём OAuth-интеграцию! 💡

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