Создайте свой первый репозиторий на GitHub и свой первый сайт: пошаговое руководство

Создание своего первого репозитория на GitHub и разработка сайта — это увлекательный процесс, который открывает двери в мир веб-разработки. В этой статье мы пошагово разберем, как создать репозиторий, разработать сайт, добавить контент, стили, адаптивную верстку, интерактивные элементы и даже научимся работать с JavaScript. Давайте начнем!

1. Создание репозитория на GitHub

GitHub — это платформа для хранения и управления кодом. Чтобы создать свой первый репозиторий:

Зарегистрируйтесь на GitHub, если у вас еще нет аккаунта.
Нажмите на кнопку New в левом верхнем углу.
Укажите имя репозитория (например, my-first-website).
Выберите, будет ли репозиторий публичным или приватным.
Поставьте галочку Add a README file, чтобы создать файл README.md.
Нажмите Create repository.

Теперь у вас есть репозиторий, куда можно загружать файлы вашего сайта.

2. Создание базовой структуры сайта

Для создания сайта вам понадобятся три основных файла:

index.html — основной файл HTML.
style.css — файл стилей.
script.js — файл JavaScript.

Создайте эти файлы на своем компьютере и добавьте их в репозиторий на GitHub.

Пример `index.html`:

Код: Выделить всё

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мой первый сайт</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Добро пожаловать на мой сайт!</h1>
    <p>Это мой первый сайт, который я создал с нуля.</p>
    <script src="script.js"></script>
</body>
</html>

Пример `style.css`:

Код: Выделить всё

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    text-align: center;
    padding: 50px;
}

h1 {
    color: #007BFF;
}

Пример `script.js`:

Код: Выделить всё

console.log("Скрипт подключен!");

3. Добавление контента и стилей

Дополните сайт контентом: добавьте разделы, изображения, ссылки. Используйте CSS для украшения сайта. Например:

Код: Выделить всё

<section>
    <h2>Обо мне</h2>
    <p>Я начинающий веб-разработчик, который учится создавать сайты.</p>
    <img src="image.jpg" alt="Мое фото">
</section>

Код: Выделить всё

section {
    margin: 20px 0;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

4. Адаптивная верстка

Чтобы сайт корректно отображался на всех устройствах, добавьте адаптивную верстку. Используйте медиа-запросы:

Код: Выделить всё

@media (max-width: 768px) {
    body {
        padding: 20px;
    }

    h1 {
        font-size: 24px;
    }
}

5. Добавление интерактивности с помощью JavaScript

Подключите скрипт к странице и добавьте простой функционал. Например, создайте кнопку, которая меняет текст:

Код: Выделить всё

<button id="changeTextButton">Нажми меня</button>
<p id="text">Привет, мир!</p>

Код: Выделить всё

const button = document.getElementById('changeTextButton');
const text = document.getElementById('text');

button.addEventListener('click', () => {
    text.textContent = "Текст изменен!";
});

6. Работа с DOM: создание To Do листа

Создайте простой список задач (To Do List):

Код: Выделить всё

<input type="text" id="taskInput" placeholder="Введите задачу">
<button id="addTaskButton">Добавить задачу</button>
<ul id="taskList"></ul>

Код: Выделить всё

const taskInput = document.getElementById('taskInput');
const addTaskButton = document.getElementById('addTaskButton');
const taskList = document.getElementById('taskList');

addTaskButton.addEventListener('click', () => {
    const taskText = taskInput.value;
    if (taskText) {
        const li = document.createElement('li');
        li.textContent = taskText;
        taskList.appendChild(li);
        taskInput.value = '';
    }
});

7. Дебаггинг кода

Используйте console.log() для отладки кода. Например:

Код: Выделить всё

console.log("Значение input:", taskInput.value);

8. Создание формы регистрации и валидация

Добавьте форму регистрации с валидацией:

Код: Выделить всё

<form id="registrationForm">
    <input type="text" id="username" placeholder="Имя пользователя" required>
    <input type="email" id="email" placeholder="Email" required>
    <input type="password" id="password" placeholder="Пароль" required>
    <button type="submit">Зарегистрироваться</button>
</form>
<p id="errorMessage" style="color: red;"></p>

Код: Выделить всё

const form = document.getElementById('registrationForm');
const errorMessage = document.getElementById('errorMessage');

form.addEventListener('submit', (event) => {
    event.preventDefault();
    const username = document.getElementById('username').value;
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;

    if (username && email && password) {
        errorMessage.textContent = "Регистрация успешна!";
    } else {
        errorMessage.textContent = "Заполните все поля!";
    }
});

9. Асинхронность и работа с сервером

Используйте fetch для отправки запросов на сервер:

Код: Выделить всё

fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => response.json())
    .then(data => {
        console.log("Данные с сервера:", data);
    })
    .catch(error => {
        console.error("Ошибка:", error);
    });

Заключение

Теперь у вас есть базовый сайт с интерактивными элементами, адаптивной версткой и даже возможностью работы с сервером. Продолжайте учиться, экспериментировать и улучшать свои навыки. Веб-разработка — это бескрайний мир возможностей, и вы только в начале пути! Удачи!

Форум с Михаилом Молчановым

Форум с Михаилом Молчановым