Привет, я Алексей 👋
Фронтенд-энтузиаст и создаю современные веб-интерфейсы
Этот сайт — мой учебный проект, где я применяю знания HTML, CSS и JavaScript на практике. Здесь собраны мои работы, навыки и контакты. Навигация вверху переключает разделы без перезагрузки — как настоящий SPA (одностраничное приложение).
📖 Что внутри?
Четыре раздела: главная, портфолио, мои навыки и контакты. Реализована тёмная тема, активная навигация и адаптивный дизайн.
💡 Цель обучения
Освоить верстку компонентов, управление DOM, работу с событиями и хранение состояния темы в localStorage.
🚀 Технологии
HTML5, CSS3 (Flex/Grid, переменные), JavaScript (модульная логика переключения страниц и темы).
⭐ «Сайт написан в одном файле index.html без внешних библиотек — идеально для старта и понимания основ фронтенда»
🖼️ Мои учебные проекты
📱 ToDo-лист
Приложение для заметок с добавлением, удалением и локальным хранилищем. Практика работы с массивами и событиями.
HTML/CSS/JS🌤️ Погодный виджет
Интеграция с публичным API (демо). Отработка fetch, async/await, отображение данных карточками.
API, JS🎨 Генератор градиентов
Позволяет подобрать CSS-градиент, копировать код. Интерактивные ползунки и вывод результата.
CSS + JS📄 Лендинг-портфолио
Адаптивный лендинг с анимациями, сеткой работ и формой связи — прототип этого сайта.
Flex/Grid🔧 Пример кода (HTML структура)
<div class="card">
<h3>Название проекта</h3>
<p>Краткое описание</p>
<a href="#">Подробнее →</a>
</div>Каждый проект в портфолио — это мини-приложение, демонстрирующее навыки фронтенда.
⚙️ Технические навыки
За время обучения я освоил фундаментальные технологии веб-разработки. Ниже — таблица с основными HTML-тегами и их назначением.
| Тег | Описание | Пример использования |
|---|---|---|
| <h1>...<h6> | Заголовки разных уровней | <h1>Заголовок страницы</h1> |
| <p> | Параграф текста | <p>Текст абзаца</p> |
| <a> | Гиперссылка | <a href="#">Ссылка</a> |
| <img> | Вставка изображения | <img src="photo.jpg" alt="описание"> |
| <div> / <span> | Блочный / строчный контейнеры | <div class="wrapper">...</div> |
| <ul> <ol> | Маркированный / нумерованный список | <ul><li>пункт</li></ul> |
📊 Процент владения инструментами
HTML5: ▰▰▰▰▰▰▰▰▰▰ 90%
CSS3 / Flex/Grid: ▰▰▰▰▰▰▰▰▰ 85%
JavaScript (ES6+): ▰▰▰▰▰▰▰▰ 80%
Адаптивный дизайн: ▰▰▰▰▰▰▰▰ 85%
📌 Курсы и сертификаты (в процессе)
- HTML Academy: «Профессиональный HTML и CSS»
- JavaScript: алгоритмы и структуры данных (freeCodeCamp)
- Практикум по React (в планах)
📬 Свяжитесь со мной
📝 Написать сообщение
💬 Другие способы связи
✉️ Email: study.web@example.com
💼 GitHub: github.com/webstudy-dev
📱 Telegram: @web_learner
📍 Я открыт для фриланс-проектов, стажировок и совместного обучения. Буду рад фидбеку!