🏆 پروژه نهایی HTML: صفحه وب شخصی حرفه‌ای

🎯 هدف این پروژه: ساخت یک صفحه وب شخصی کامل با استفاده از تمام مباحث HTML و CSS

سلام دوست عزیز! 👋

به پروژه نهایی دوره HTML خوش آمدی! 🎉 توی این پروژه، همه چیزهایی که توی ۶ درس گذشته یاد گرفتی رو کنار هم می‌ذاریم و یه صفحه وب شخصی حرفه‌ای می‌سازیم.

توی این پروژه، از این مباحث استفاده می‌کنیم:

✅ ساختار HTML و تگ‌های پایه
✅ تگ‌های متنی و فرمت‌دهی برای محتوای جذاب
✅ لینک‌ها و تصاویر برای ارتباط با جهان
✅ لیست‌ها و جداول برای نمایش منظم اطلاعات
✅ فرم‌ها برای ارتباط با کاربران
✅ CSS برای زیبایی و جذابیت

📋 بخش ۱: توضیح پروژه

برنامه‌ای می‌نویسیم که یک صفحه وب شخصی کامل باشد و شامل موارد زیر باشد:

هدری با لوگو و منوی ناوبری
بخش معرفی با تصویر و توضیحات
بخش مهارت‌ها با لیست و نوار پیشرفت
بخش نمونه کارها با تصاویر و لینک
بخش تماس با فرم ارتباطی
فوتر با اطلاعات تماس و لینک‌های اجتماعی

🔧 بخش ۲: کد پروژه

🌐
صفحه وب شخصی

HTML
v5


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحه شخصی من</title>
    <style>

        /* ============================================
           تنظیمات کلی
           ============================================ */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Vazir", "Arial", sans-serif;
            background: #f8fafc;
            color: #1e293b;
            direction: rtl;
            line-height: 1.8;
        }

        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 20px;
        }

        section {
            background: white;
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 2px 16px rgba(0,0,0,0.05);
            margin-bottom: 30px;
            border: 1px solid #e2e8f0;
        }

        h2 {
            color: #2563eb;
            border-bottom: 3px solid #2563eb;
            padding-bottom: 10px;
            margin-bottom: 20px;
            display: inline-block;
        }

        /* ============================================
           هدر و ناوبری
           ============================================ */

        header {
            background: white;
            border-bottom: 1px solid #e2e8f0;
            padding: 15px 0;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: #2563eb;
        }

        nav {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        nav a {
            color: #475569;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }

        nav a:hover {
            color: #2563eb;
        }

        /* ============================================
           بخش معرفی
           ============================================ */

        .intro {
            display: flex;
            align-items: center;
            gap: 40px;
            flex-wrap: wrap;
        }

        .intro-text {
            flex: 1;
            min-width: 280px;
        }

        .intro-text h1 {
            font-size: 2.8rem;
            color: #0f172a;
        }

        .intro-text p {
            font-size: 1.1rem;
            color: #475569;
        }

        .intro-image {
            flex-shrink: 0;
        }

        .intro-image img {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #2563eb;
        }

        /* ============================================
           مهارت‌ها
           ============================================ */

        .skills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 20px;
        }

        .skill-item {
            background: #f8fafc;
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #e2e8f0;
        }

        .skill-bar {
            height: 8px;
            background: #e2e8f0;
            border-radius: 10px;
            margin-top: 8px;
            overflow: hidden;
        }

        .skill-fill {
            height: 100%;
            background: linear-gradient(90deg, #2563eb, #7c3aed);
            border-radius: 10px;
            transition: width 1s ease;
        }

        /* ============================================
           نمونه کارها
           ============================================ */

        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
        }

        .project-card {
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .project-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(0,0,0,0.1);
        }

        .project-card img {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }

        .project-card .project-info {
            padding: 20px;
        }

        /* ============================================
           فرم تماس
           ============================================ */

        .contact-form input,
        .contact-form textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            font-size: 1rem;
            margin-bottom: 15px;
            font-family: inherit;
        }

        .contact-form button {
            background: #2563eb;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 8px;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.3s;
        }

        .contact-form button:hover {
            background: #1d4ed8;
        }

        /* ============================================
           فوتر
           ============================================ */

        footer {
            background: #0f172a;
            color: #cbd5e1;
            text-align: center;
            padding: 20px;
            margin-top: 30px;
        }

        .social-links a {
            color: #cbd5e1;
            margin: 0 10px;
            font-size: 1.2rem;
            text-decoration: none;
            transition: color 0.3s;
        }

        .social-links a:hover {
            color: #2563eb;
        }

        /* ============================================
           واکنش‌گرا
           ============================================ */

        @media (max-width: 768px) {
            .intro {
                flex-direction: column-reverse;
                text-align: center;
            }

            .header-content {
                flex-direction: column;
                text-align: center;
            }

            .intro-text h1 {
                font-size: 2rem;
            }

            section {
                padding: 20px;
            }
        }
    </style>
</head>
<body>

    <!-- ============================================
    هدر و ناوبری
    ============================================ -->

    <header>
        <div class="container header-content">
            <div class="logo">🚀 من</div>
            <nav>
                <a href="#about">درباره من</a>
                <a href="#skills">مهارت‌ها</a>
                <a href="#projects">نمونه کارها</a>
                <a href="#contact">تماس با من</a>
            </nav>
        </div>
    </header>

    <!-- ============================================
    بخش معرفی
    ============================================ -->

    <div class="container">
        <section id="about">
            <div class="intro">
                <div class="intro-text">
                    <h1>سلام! من یونس هستم 👋</h1>
                    <p>
                        من عاشق یادگیری و آموزش هستم. 
                        توی <strong>رجستری آکادمی</strong> 
                        دوره‌های برنامه‌نویسی رو یاد می‌گیرم و به دیگران آموزش می‌دم.
                    </p>
                    <p>
                        هدف من اینه که یادگیری برنامه‌نویسی رو برای همه ساده و لذت‌بخش کنم.
                        <em>همیشه در حال یادگیری و رشد هستم.</em>
                    </p>
                </div>
                <div class="intro-image">
                    <img src="profile.jpg" 
                         alt="یونس رجستری">
                </div>
            </div>
        </section>

        <!-- ============================================
        بخش مهارت‌ها
        ============================================ -->

        <section id="skills">
            <h2>💪 مهارت‌های من</h2>
            <div class="skills-grid">
                <div class="skill-item">
                    <strong>HTML & CSS</strong>
                    <div class="skill-bar">
                        <div class="skill-fill" style="width: 90%"></div>
                    </div>
                    <span>۹۰٪</span>
                </div>
                <div class="skill-item">
                    <strong>پایتون</strong>
                    <div class="skill-bar">
                        <div class="skill-fill" style="width: 75%"></div>
                    </div>
                    <span>۷۵٪</span>
                </div>
                <div class="skill-item">
                    <strong>جاوااسکریپت</strong>
                    <div class="skill-bar">
                        <div class="skill-fill" style="width: 60%"></div>
                    </div>
                    <span>۶۰٪</span>
                </div>
                <div class="skill-item">
                    <strong>React</strong>
                    <div class="skill-bar">
                        <div class="skill-fill" style="width: 45%"></div>
                    </div>
                    <span>۴۵٪</span>
                </div>
            </div>
        </section>

        <!-- ============================================
        بخش نمونه کارها
        ============================================ -->

        <section id="projects">
            <h2>🖼️ نمونه کارهای من</h2>
            <div class="projects-grid">
                <div class="project-card">
                    <img src="project1.jpg" 
                         alt="پروژه ۱">
                    <div class="project-info">
                        <h3>وب‌سایت شخصی</h3>
                        <p>یک وب‌سایت شخصی با HTML و CSS</p>
                        <a href="#">مشاهده پروژه →</a>
                    </div>
                </div>
                <div class="project-card">
                    <img src="project2.jpg" 
                         alt="پروژه ۲">
                    <div class="project-info">
                        <h3>فرم تماس</h3>
                        <p>یک فرم تماس حرفه‌ای با HTML و CSS</p>
                        <a href="#">مشاهده پروژه →</a>
                    </div>
                </div>
                <div class="project-card">
                    <img src="project3.jpg" 
                         alt="پروژه ۳">
                    <div class="project-info">
                        <h3>صفحه فرود</h3>
                        <p>یک صفحه فرود جذاب برای معرفی محصول</p>
                        <a href="#">مشاهده پروژه →</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- ============================================
        بخش تماس
        ============================================ -->

        <section id="contact">
            <h2>📩 تماس با من</h2>
            <form class="contact-form">
                <input type="text" 
                       placeholder="نام و نام خانوادگی" 
                       required>
                <input type="email" 
                       placeholder="ایمیل" 
                       required>
                <input type="text" 
                       placeholder="موضوع">
                <textarea rows="5" 
                          placeholder="پیام شما..." 
                          required></textarea>
                <button type="submit">📤 ارسال پیام</button>
            </form>
        </section>
    </div>

    <!-- ============================================
    فوتر
    ============================================ -->

    <footer>
        <div class="container">
            <p>© ۱۴۰۴ - تمامی حقوق محفوظ است.</p>
            <div class="social-links">
                <a href="#">📸 اینستاگرام</a>
                <a href="#">💻 گیت‌هاب</a>
                <a href="#">📧 ایمیل</a>
                <a href="#">🔗 لینکدین</a>
            </div>
        </div>
    </footer>

</body>
</html>

📖 بخش ۳: توضیح کد پروژه

بیا با هم بررسی کنیم که توی این پروژه از چه مباحثی استفاده کردیم:

۱. هدر و ناوبری

با استفاده از تگ‌های <header> و <nav> یک نوار ناوبری حرفه‌ای ساختیم که کاربران رو به بخش‌های مختلف صفحه هدایت می‌کنه.

۲. بخش معرفی

با استفاده از flexbox یک بخش معرفی جذاب ساختیم که شامل تصویر پروفایل و توضیحات است.

۳. بخش مهارت‌ها

با استفاده از grid و nth-child کارت‌های مهارت رو طراحی کردیم. هر کارت شامل نوار پیشرفت است که سطح مهارت رو نشون می‌ده.

۴. بخش نمونه کارها

با استفاده از grid و hover افکت‌ها، کارت‌های نمونه کار رو طراحی کردیم.

۵. فرم تماس

با استفاده از تگ‌های <form> و <input> یک فرم تماس کامل ساختیم.

۶. فوتر

با استفاده از <footer> یک فوتر با اطلاعات تماس و لینک‌های اجتماعی ساختیم.

🎯 بخش ۴: تمرین برای شما

📝 تمرین: بهبود پروژه

قابلیت‌های زیر رو به پروژه اضافه کنید:

🎨 تم تاریک: با یک دکمه، تم صفحه رو به تاریک تغییر بدید.
📱 منوی همبرگری: برای موبایل، یک منوی همبرگری طراحی کنید.
✨ انیمیشن‌ها: به کارت‌های نمونه کار، انیمیشن ورود اضافه کنید.
📊 آمار: یک بخش آمار با تعداد پروژه، مشتری و … اضافه کنید.

🧩 جمع‌بندی دوره

تبریک می‌گم! 🎉 تو یک دوره کامل HTML رو با موفقیت به پایان رسوندی. بیا با هم مرور کنیم که چی یاد گرفتی:

📚 خلاصه درس‌های دوره

درس	عنوان	مباحث اصلی
۱	آشنایی با HTML	ساختار صفحه، تگ‌های پایه
۲	تگ‌های متنی	h1-h6, p, strong, em, mark
۳	لینک‌ها و تصاویر	a, img, target=”_blank”
۴	لیست‌ها و جداول	ul, ol, table, tr, td
۵	فرم‌ها	form, input, checkbox, radio
۶	آشنایی با CSS	رنگ‌ها، فونت‌ها، فاصله‌ها

🎯 مسیر ادامه یادگیری

توی این دوره، پایه‌های HTML رو یاد گرفتی. حالا می‌تونی به سراغ مباحث پیشرفته‌تر بری:

📚 CSS پیشرفته – Flexbox، Grid، انیمیشن‌ها
📊 جاوااسکریپت – تعامل با کاربر
🌐 فریم‌ورک‌های CSS – Bootstrap، Tailwind
🤖 React – ساخت اپلیکیشن‌های تک صفحه‌ای

🔗 لینک‌های مرتبط

⬅️
درس قبل: آشنایی با CSS

🚀
دوره بعد: CSS

🏠
صفحه دوره‌ها

👤

نویسنده

📅

تاریخ انتشار 19 مرداد 1405

🔄

آخرین بروزرسانی 19 مرداد 1405

دنیای تکنولوژی
از یادگیری شروع می‌شود

پروژه نهایی HTML: صفحه وب شخصی حرفه‌ای