index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pepet</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body class="container">
    
    <header>
        <h3>МОИ КОНСПЕКТЫ</h3>
        </header>

    <nav></nav>

    <login>
        <div>
            <button>
            <a class="btn" href="/login/login-form.html" class="button" target="_blank">
                <span class="btn-size">Log in</span>
            </a>
            </button>
        </div>
        </login>

    <aside></aside>

    <main>

<h2>Front-End</h2>

    <button class="accordion">HTML</button>
    <div class="panel">
        <ul>
            <li><button class="btn">1. База | Иконка | Усл комм | Скрипт</button></li>
            <li><button class="btn">2. Семантические теги</button></li>
            <li><button class="btn">3. Заголовок | Шрифт</button></li>
            <li><button class="btn">4. Список</button></li>
            <li><button class="btn">5. Картинка</button></li>
            <li><button class="btn">6. Таблица</button></li>
            <li><button class="btn">7. Ссылки</button></li>
            <li><button class="btn">8. Теги</button></li>
            <li><button class="btn">9. Структура</button></li>
            <li><button class="btn">10. Формы для заполнения и выбора</button></li>
            <li><button class="btn">11. Типы полей ввода input</button></li>
            <li><button class="btn">12. Видео и аудио</button></li>
            <li><button class="btn">13. Атрибуты | id</button></li>
        </ul>
                </div>
    </div>

    <button class="accordion">CSS</button>
    <div class="panel">
        <button class="accordion">CSS Grid</button>
        <div class="panel">
            <ul>
                <li><button class="btn">0. Теория</button></li>
                <li><button class="btn">1. (База) Применение сетки | Размер | Позиция</button></li>
                <li><button class="btn">2. Выравнивание (внутри контейнера и элементов)</button></li>
                <li><button class="btn">3. Порядок (управл. порядком эл. внутри контейнера)</button></li>
                <li><button class="btn">4. Вложенность</button></li>
                <li><button class="btn">5. Гибкость (респонсив)</button></li>
                <li><button class="btn">1 упражнение (строим сетку)</button></li>
                <li><button class="btn">2 упражнение (простой макет)</button></li>
            </ul>
        </div>
        <button class="accordion">CSS Flexbox</button>
        <div class="panel">
        <ul>
            <li><button class="btn">Список свойств</button></li>
        </ul>
        </div>
        <button class="accordion">CSS Basics</button>
        <div class="panel">
        <ul>
            <li><button class="btn">0. Вес | Специфичность | Приоритет | Селекторы</button></li>
            <li><button class="btn">1. Применение стилей</button></li>
            <li><button class="btn">2. Селекторы | Базовый синтаксис</button></li>
            <li><button class="btn">3. Псевдоэлементы и псевдоклассы</button></li>
            <li><button class="btn">4. Каскадность и наследование</button></li>
            <li><button class="btn">5. Блочные и строчные элементы</button></li>
            <li><button class="btn">6. Позиционирование и размеры</button></li>
            <li><button class="btn">7. Уровни, слои, единицы и переполнение</button></li>
            <li><button class="btn">8. float | редко исп. плавающие элем. очистка потока</button></li>
            <li><button class="btn">9. Шрифты и текст</button></li>
            <li><button class="btn">10. Обводка | Границы | Тени</button></li>
            <li><button class="btn">11. Скругление углов | Списки | Цвет</button></li>
            <li><button class="btn">12. Скрыть элемент | Вендерные префиксы</button></li>
            <li><button class="btn">13. Фон</button></li>
            <li><button class="btn">14. Градиент</button></li>
            <li><button class="btn">15. Фильтр</button></li>
            <li><button class="btn">16. Трансформация</button></li>
            <li><button class="btn">17. Трансформация, плавные переходы</button></li>
            <li><button class="btn">18. Трансформация | Анимация</button></li>
            <li><button class="btn">19. Таблицы | Курсор</button></li>
            <li><button class="btn">20. Предел текста div | Колонки</button></li>
            <li><button class="btn">21. Медиазапросы | Ориентация экрана | Активация функции при опр усл</button></li>
            <li><button class="btn">22. Спрайты CSS</button></li>
        </ul>
        </div>
    </div>

    <button class="accordion">JavaScript</button>
    <div class="panel">
        <p>learn.javascript</p>
            <button class="accordion">Основы</button>
            <div class="panel">
                <ul>
                <li><button class="btn">0. alert | Всплывающее уведомление</button></li>
                <li><button class="btn">1. Переменные</button></li>
                <li><button class="btn">2. Типы данных</button></li>
                <li><button class="btn">3. alert | prompt | confirm (вспл увед)</button></li>
                <li><button class="btn">4. Преобразование типов</button></li>
                <li><button class="btn">5. Базовые операторы, математика</button></li>
                <li><button class="btn">6. Операторы сравнения</button></li>
                <li><button class="btn">7. Условное ветвление if</button></li>
                <li><button class="btn">8. Логические операторы (или, и, !)</button></li>
                <li><button class="btn">9. Оператор нулевого слияния ??</button></li>
                <li><button class="btn">10. Циклы while и for</button></li>
                <li><button class="btn">11. Конструкция switch</button></li>
                <li><button class="btn">12. Функции</button></li>
            </ul>
            </div>
            <button class="accordion">Качество кода</button>
            <div class="panel">
            <ul>
                <li><button class="btn"></button></li>
                <li><button class="btn"></button></li>
                <li><button class="btn"></button></li>
            </ul>
            </div>
        <p>WebDev - YouTube</p>
            <button class="accordion">Видеоуроки</button>
            <div class="panel">
            <ul>
                <li><button class="btn">0. Введение</button></li>
                <li><button class="btn">1. Подключение JS</button></li>
                <li><button class="btn">2. Массив-перебирающие методы</button></li>
            </ul>
            </div>
    </div>

    <button class="accordion">Emmet</button>
    <div class="panel">
        <ul>
            <li><button class="btn">Сокращение кода HTML и CSS</button></li>
        </ul>
    </div>

    

<h2>Python</h2>

    <button class="accordion">Конспект</button>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <button class="accordion">Практика</button>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

<h2>Git</h2>

    <button class="accordion">Основные команды</button>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

</main>

<footer>Hey, you!</footer>

<script src="/script.js"></script>
</body>
</html>