این دوره آموزشی با تکیه بر رویکردی عملی و پروژه‌محور، شما را قادر می‌سازد تا دانش نظری خود را مستقیماً در پروژه‌های واقعی به کار ببرید. با یادگیری عمیق HTML و CSS، می‌توانید ساختار و ظاهر هر وب‌سایتی را طراحی کرده و پیاده‌سازی کنید.

• تسلط کامل بر HTML: از ساختاردهی صحیح محتوا و استفاده از تگ‌های معنایی (Semantic HTML) گرفته تا فرم‌ها، جداول، و عناصر چندرسانه‌ای.
• قدرت CSS: یادگیری اصول طراحی ظاهری، انتخابگرهای CSS، مدیریت رنگ‌ها، فونت‌ها، فضاهای خالی، و ایجاد افکت‌های بصری.
• چیدمان‌های مدرن با Flexbox: کاوش در یکی از قدرتمندترین ابزارهای چیدمان برای ایجاد طرح‌بندی‌های انعطاف‌پذیر و واکنش‌گرا در یک بعد (مانند سطر یا ستون).
• پیچیدگی‌های CSS Grid: تسلط بر سیستمی قدرتمند برای چیدمان دو بعدی که امکان ایجاد طرح‌بندی‌های پیچیده و شبکه‌ای را به سادگی فراهم می‌کند.
• طراحی واکنش‌گرا (Responsive Design): یادگیری چگونگی اطمینان از اینکه وب‌سایت شما در تمامی دستگاه‌ها، از موبایل‌های کوچک گرفته تا دسکتاپ‌های بزرگ، به درستی نمایش داده می‌شود.
• بهینه‌سازی و عملکرد: آشنایی با تکنیک‌هایی برای افزایش سرعت بارگذاری و بهبود عملکرد کلی وب‌سایت.

بخش 1: مبانی HTML – اسکلت‌بندی وب

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

• مقدمه‌ای بر وب و تاریخچه HTML
• ساختار یک سند HTML (DOCTYPE, html, head, body)
• تگ‌های اصلی HTML (h1-h6, p, span, div)
• کار با متن: قالب‌بندی، لینک‌ها، تصاویر
• ساخت لیست‌ها (unordered, ordered, definition lists)
• استفاده از جداول برای نمایش داده‌های جدولی
• فرم‌ها در HTML: عناصر ورودی، دکمه‌ها، و اعتبار سنجی
• تگ‌های معنایی (Semantic HTML): header, nav, main, article, section, aside, footer
• عناصر چندرسانه‌ای: video, audio, iframe
• نکات کلیدی برای دسترسی‌پذیری (Accessibility) در HTML

بخش 2: CSS – رنگ‌آمیزی و آراستگی وب

پس از یادگیری ساختار، نوبت به زیباسازی و استایل‌دهی می‌رسد. CSS ابزار شما برای ایجاد ظاهری دلنشین خواهد بود.

• مقدمه‌ای بر CSS و نحوه اتصال آن به HTML
• انتخابگرهای CSS (Selectors): انواع و کاربردها
• قواعد CSS: Property و Value
• مدیریت رنگ، پس‌زمینه، و فونت‌ها
• فضاهای خالی: margin, padding, border
• جعبه مدل (Box Model) و درک آن
• تکنیک‌های تایپوگرافی: فونت‌های وب، وزن، استایل، خط
• ایجاد افکت‌های بصری: shadows, gradients, transitions
• نکته برجسته: تمرکز بر روی Selectors پیشرفته برای کنترل دقیق‌تر استایل‌ها.

بخش 3: Flexbox – انعطاف‌پذیری در چیدمان

Flexbox انقلابی در چیدمان صفحات وب ایجاد کرده است. این بخش به شما یاد می‌دهد چگونه از آن برای ایجاد طرح‌بندی‌های واکنش‌گرا و مدرن استفاده کنید.

• مفهوم چیدمان در یک بعد
• container properties: display: flex, flex-direction, justify-content, align-items, flex-wrap
• item properties: flex-grow, flex-shrink, flex-basis, align-self, order
• ایجاد هدرهای انعطاف‌پذیر، ناوبری، و کارت‌های چیدمان
• مثال عملی: چیدمان منوی ناوبری واکنش‌گرا با Flexbox.

بخش 4: CSS Grid – قدرت چیدمان دو بعدی

CSS Grid ابزار نهایی شما برای ساخت طرح‌بندی‌های پیچیده و شبکه‌ای است. با این بخش، دیگر هیچ محدودیتی در چیدمان نخواهید داشت.

• مفهوم چیدمان در دو بعد
• container properties: display: grid, grid-template-columns, grid-template-rows, gap, justify-items, align-items
• item properties: grid-column, grid-row, justify-self, align-self
• ایجاد شبکه‌های پیچیده برای صفحات وب
• ترکیب Flexbox و Grid برای بهترین نتیجه
• مثال عملی: ساخت یک صفحه اصلی وب‌سایت با استفاده از CSS Grid.

بخش 5: پروژه‌های عملی و تکنیک‌های پیشرفته

در این بخش، آموخته‌های خود را در قالب پروژه‌های واقعی به کار می‌گیرید و با تکنیک‌های تکمیلی آشنا می‌شوید.

• ساخت یک صفحه رزومه حرفه‌ای با HTML و CSS
• پیاده‌سازی یک صفحه محصول با جزئیات کامل
• طراحی یک گالری تصویر واکنش‌گرا
• آشنایی با CSS Variables (Custom Properties)
• مقدمه‌ای بر انیمیشن‌های CSS
• نکات کلیدی: رعایت اصول بهینه‌سازی کد و خوانایی