پروژه نهایی

ساخت یک صفحه وب کامل با همه آموخته‌ها: Portfolio شخصی

پروژه نهایی: ساخت Portfolio شخصی

در این پروژه نهایی، تمام آموخته‌های خود را در یک صفحه وب کامل به کار می‌گیریم و یک Portfolio شخصی حرفه‌ای می‌سازیم.

نیازمندی‌های پروژه

ساختار معنایی کامل: header, nav, main, section, article, aside, footer
بخش Hero: معرفی با تصویر، عنوان و دکمه CTA
بخش درباره من: bio، تصویر، متن معرفی
بخش مهارت‌ها: لیست مهارت‌ها با progress bar
بخش پروژه‌ها: کارت‌های پروژه با تصویر و توضیحات
بخش تجربه کاری: تایم‌لاین یا لیست
فرم تماس: با اعتبارسنجی کامل
لینک‌های شبکه اجتماعی: آیکون‌های شبکه‌های اجتماعی
متادیتای سئو: title, description, keywords, Open Graph
دسترس‌پذیری: ARIA labels، alt برای تصاویر، keyboard navigation
طراحی واکنش‌گرا: viewport، media queries، تصاویر responsive

مراحل ساخت

اسکلت HTML: ساختار معنایی را با تگ‌های HTML5 بسازید
محتوا: محتوای هر بخش را اضافه کنید
تصاویر: تصاویر را با alt و srcset مناسب قرار دهید
فرم: فرم تماس را با label و اعتبارسنجی بسازید
متادیتا: متادیتای head را برای سئو کامل کنید
دسترس‌پذیری: ARIA attributes و semantic HTML را اضافه کنید
واکنش‌گرا: viewport meta tag و استایل‌های responsive
اعتبارسنجی: کد را با HTML Validator اعتبارسنجی کنید
تست: در مرورگرهای مختلف و دستگاه‌های مختلف تست کنید

ساختار پیشنهادی

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolio من | توسعه‌دهنده وب</title>
  <meta name="description" content="Portfolio شخصی توسعه‌دهنده وب">
  <meta name="keywords" content="HTML, CSS, JavaScript, Portfolio">
  <meta property="og:title" content="Portfolio من">
  <meta property="og:description" content="Portfolio شخصی">
  <meta property="og:image" content="https://example.com/og-image.jpg">
</head>
<body>
  <header>
    <nav>...</nav>
  </header>
  
  <main>
    <section class="hero">...</section>
    <section class="about">...</section>
    <section class="skills">...</section>
    <section class="projects">...</section>
    <section class="experience">...</section>
    <section class="contact">...</section>
  </main>
  
  <footer>...</footer>
</body>
</html>

نکات طلایی

Semantic HTML: همیشه از تگ‌های معنایی استفاده کنید
Accessibility: همه تصاویر alt مناسب داشته باشند
Forms: همه فیلدها label داشته باشند
Headings: عنوان‌ها به ترتیب و بدون پرش باشند
Code Quality: کد تمیز، کامنت‌دار و قابل خواندن بنویسید
SEO: متادیتای سئو را کامل کنید
Performance: تصاویر را بهینه کنید
Mobile First: ابتدا برای موبایل طراحی کنید

چالش‌های پیشنهادی

اضافه بخش "آموزش" با دوره‌های یادگیری
اضافه بخش "توصیفات" با نکات جالب
اضافه بخش "هزینه‌ها" برای خدمات
اضافه بخش "نظرات کاربران" (با JavaScript)
اضافه بخش "آمار" (با Web APIs)
اضافه حالت Dark Mode (با localStorage)

تبریک! شما HTML را کامل یاد گرفتید. حالا وقت آن است که با CSS ظاهر صفحات را زیبا کنید و با JavaScript تعاملات را اضافه کنید!

این مبحث بخشی از دوره آموزش کامل HTML است.