Първи проект: Лична уеб страница
📚 Това съдържание е част от личния архив и база знания на Тони Ангелчовски, създадено в рамките на проекта WIKI-TONI. Уики платформата е достъпна само за четене. Не се поддържат регистрации или външни редакции. ⚠️ Забранява се копирането, възпроизвеждането или използването на текстовете без предварително писмено разрешение от автора. Благодарим, че уважаваш авторството и вдъхновението зад всяка дума.
🛠️ Първи проект: Лична уеб страница с HTML, CSS и JavaScript
🌟 Време е да създадеш нещо свое
Това не е просто урок. Това е **твоят първи уеб проект**. Ще съчетаем всичко, което научи – в една стилна, интерактивна и изцяло твоя уеб страница.
🔗 Какво ще включва страницата?
• Заглавие и представяне • Лични умения и интереси • Контактна информация • Динамичен бутон с JavaScript • Елементарен, но красив CSS стил
💡 Код на проекта
<!DOCTYPE html>
<html lang="bg">
<head>
<meta charset="UTF-8">
<title>Тони Ангелчовски – Моето дигитално начало</title>
<style>
body {
background: linear-gradient(to bottom, #eaf6ff, #ffffff);
font-family: 'Segoe UI', sans-serif;
padding: 40px;
color: #333;
}
h1 {
color: #004080;
text-transform: uppercase;
border-bottom: 2px solid #00ccff;
padding-bottom: 10px;
}
ul {
list-style: none;
padding-left: 0;
}
ul li::before {
content: "🔥 ";
}
a {
color: #e60039;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
button {
background-color: #004080;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0066cc;
}
</style>
<script>
function поздрав() {
alert("👋 Здравей! Радвам се, че посети моята страница!");
}
</script>
</head>
<body>
<h1>Тони Ангелчовски</h1>
<p>Създател на WIKI-TONI, дигитален творец и ковач на знание.</p>
<h2>💡 Моите умения:</h2>
<ul>
<li>Заваряване и инженеринг</li>
<li>Системна администрация (Linux, Windows, Apple)</li>
<li>Уеб програмиране и AI интеграции</li>
</ul>
<p>📬 Свържи се с мен: <a href="mailto:toni@example.com">toni@example.com</a></p>
<p style="margin-top:30px;">
<button onclick="поздрав()">👉 Натисни, ако вярваш в силата на знанието</button>
</p>
</body>
</html>
🧭 Какво научи с този проект?
✅ Обедини основни технологии: HTML + CSS + JS ✅ Изгради реална страница с ясна структура и стил ✅ Създаде интеракция – сайтът ти **реагира**
🔥 Накратко:
Това е **твоето начало като създател на уеб съдържание**. С всяка нова страница ще се доближаваш до свободата да изразиш себе си напълно.
–––––––––––––––––––––––––––––––––––––––––
Следваща крачка: Как да качиш своята страница онлайн