درس دهم: پروژه نهایی و جمع‌بندی (ساخت کارت پروفایل)

درس دهم: پروژه نهایی و جمع‌بندی (ساخت کارت پروفایل)

در این پروژه پایانی، ما یک کارت پروفایل می‌سازیم که در حالت دسکتاپ و موبایل عالی نمایش داده شود و دارای انیمیشن‌های ظریف باشد. این تمرین تمام دانش CSS شما را به چالش می‌کشد.

🏗️ ساختار کد پروژه

ما از یک Container به عنوان والد و از Flexbox برای چیدمان استفاده می‌کنیم:

/* ظرف اصلی کارت */
.profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border-radius: 20px;
    background: white;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

/* افکت انیمیشن هنگام نگه داشتن موس */
.profile-card:hover {
    transform: translateY(-10px);
}

/* عکس پروفایل */
.profile-img {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* دایره‌ای کردن */
    border: 3px solid #6c5ce7;
}

📱 هماهنگی با موبایل

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

@media (max-width: 600px) {
    .profile-card {
        width: 90%;
        margin: auto;
    }
    .profile-img {
        width: 80px;
        height: 80px;
    }
}

🎓 تبریک! شما یک طراح فرانت‌اند مقدماتی هستید

دوره CSS به پایان رسید. حالا شما ابزارهای لازم برای تبدیل طرح‌های ذهنی به واقعیت را در اختیار دارید. نقشه راه آینده شما شامل موارد زیر است:

  • JavaScript: برای افزودن منطق و تعاملات پیچیده.
  • Tailwind یا Bootstrap: برای سرعت بخشیدن به کدنویسی با فریم‌ورک‌ها.
  • React یا Vue: برای ساخت اپلیکیشن‌های پیشرفته وب.

پایان دوره آموزش جامع CSS

پرچم موفقیت را بالا بردید!

حالا وقت آن است که پروژه‌های شخصی خود را شروع کنید و نمونه کارهای خود را در CSLearn.ir به اشتراک بگذارید.