این دوره با هدف ساختن یک پایه مستحکم برای شما در طراحی وب، به گونه‌ای طراحی شده است که تمام جنبه‌های ضروری HTML و CSS را پوشش دهد. پس از اتمام این دوره، شما قادر خواهید بود:

• ساختاردهی قدرتمند با HTML5: با جدیدترین تگ‌های معنایی HTML5 آشنا می‌شوید که به شما کمک می‌کند وب‌سایت‌هایی با ساختار منطقی، قابل فهم برای موتورهای جستجو و دسترس‌پذیر برای همه کاربران بسازید. از تگ‌های <header> و <nav> گرفته تا <section>، <article> و <footer>، همه را به صورت عملی یاد خواهید گرفت.
• طراحی فرم‌های تعاملی و کاربردی: نحوه ساخت فرم‌های ثبت‌نام، ورود، تماس و سایر فرم‌های پیچیده را با استفاده از انواع ورودی‌ها، ویژگی‌ها و اعتبارسنجی‌های HTML5 فرا می‌گیرید.
• مدیریت حرفه‌ای محتوای چندرسانه‌ای: یاد می‌گیرید چگونه تصاویر را بهینه‌سازی و اضافه کنید، ویدئوها و فایل‌های صوتی را جاسازی نمایید و از آن‌ها برای افزایش جذابیت بصری وب‌سایت خود بهره ببرید.
• زیباسازی وب‌سایت با CSS مدرن: با تمامی مفاهیم اصلی CSS از جمله انتخابگرها (Selectors)، مدل جعبه‌ای (Box Model)، خصوصیات متنی و رنگ‌ها آشنا می‌شوید و یاد می‌گیرید چگونه سبک‌های بصری منحصر به فردی برای وب‌سایت خود ایجاد کنید.
• تسلط بر تکنیک‌های چیدمان پیشرفته: به صورت عمیق با دو ابزار قدرتمند Flexbox و CSS Grid آشنا خواهید شد. این بخش‌ها به شما امکان می‌دهند پیچیده‌ترین طرح‌بندی‌ها را برای صفحات وب پیاده‌سازی کنید، از چیدمان‌های ساده یک ستونه گرفته تا طرح‌های شبکه‌ای پیچیده و واکنش‌گرا. مثال‌های عملی بی‌شماری برای درک کامل این مباحث ارائه خواهد شد.
• طراحی واکنش‌گرا (Responsive Design): یاد می‌گیرید چگونه با استفاده از Media Queries وب‌سایت‌هایی طراحی کنید که در انواع دستگاه‌ها، از موبایل‌های کوچک گرفته تا مانیتورهای عریض، به بهترین شکل نمایش داده شوند.
• افزودن پویایی با Transitions و Animations: با استفاده از CSS، به عناصر وب‌سایت خود حرکت و جذابیت بصری اضافه کنید تا تجربه کاربری دلپذیرتری را برای بازدیدکنندگان فراهم آورید.
• بهبود کارایی و سازماندهی کد: با مفاهیمی مانند متغیرهای CSS (Custom Properties) و سازماندهی کد آشنا می‌شوید که به شما کمک می‌کند کدی تمیزتر، قابل نگهداری‌تر و مقیاس‌پذیرتر بنویسید.
• ساخت پروژه‌های واقعی: در طول دوره، با ساخت پروژه‌های عملی مانند یک صفحه فرود (Landing Page) مدرن، کارت‌های محصول، بخش‌هایی از یک فروشگاه آنلاین و نمونه کارهای شخصی، دانش خود را به صورت کاربردی به کار خواهید گرفت.

• محتوای به‌روز و جامع: تمامی مطالب بر اساس جدیدترین استانداردها و بهترین شیوه‌های توسعه وب در سال ۲۰۲۴ تدوین شده‌اند.
• یادگیری پروژه‌محور: به جای تئوری صرف، دانش خود را در قالب پروژه‌های عملی و واقعی به کار می‌گیرید که به شما اعتماد به نفس لازم برای شروع به کار را می‌دهد.
• پایه قوی برای آینده: این دوره سنگ بنای ورود شما به دنیای فرانت‌اند و یادگیری فریم‌ورک‌های پیشرفته‌تر مانند React، Angular یا Vue.js خواهد بود.
• انعطاف‌پذیری در یادگیری: با توجه به ارائه دوره بر روی فلش مموری، شما می‌توانید در هر زمان و مکانی، بدون نیاز به اینترنت و با سرعت دلخواه خود، به یادگیری بپردازید.
• آمادگی برای بازار کار: مهارت‌هایی که در این دوره کسب می‌کنید، شما را برای ورود به بازار کار به عنوان یک طراح یا توسعه‌دهنده فرانت‌اند مقدماتی آماده می‌سازد.

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

• آشنایی اولیه با کامپیوتر: توانایی کار با سیستم عامل (ویندوز، مک یا لینوکس) و انجام کارهای پایه مانند کپی و پیست فایل‌ها.
• اشتیاق به یادگیری: اراده و علاقه به ورود به دنیای طراحی و توسعه وب.
• یک کامپیوتر شخصی: لپ‌تاپ یا دسکتاپ برای نصب و اجرای ویرایشگر کد و مرورگر وب.
• ویرایشگر کد: ما استفاده از Visual Studio Code (VS Code) را به شدت توصیه می‌کنیم، که در بخش‌های اولیه دوره نحوه نصب و تنظیم آن آموزش داده خواهد شد.

• بخش ۱: شروع سفر در دنیای وب
  • مقدمه‌ای بر اینترنت و نحوه کارکرد وب
  • معرفی و نصب ویرایشگر کد Visual Studio Code
  • آشنایی با ابزارهای توسعه‌دهندگان (Developer Tools) در مرورگرها
  • مروری بر HTML و CSS و ارتباط آن‌ها
• بخش ۲: تسلط بر HTML5 (ساختاردهی محتوا)
  • ساختار یک سند HTML و تگ‌های پایه
  • تگ‌های معنایی HTML5 (Header, Nav, Main, Section, Article, Aside, Footer)
  • کار با متن و پاراگراف‌ها
  • افزودن تصاویر، ویدئوها و فایل‌های صوتی
  • ساخت لیست‌ها و جداول
  • لینک‌ها و مسیریابی در وب‌سایت
  • فرم‌ها در HTML5: انواع ورودی‌ها و ویژگی‌های آن‌ها
  • اعتبارسنجی فرم‌ها و بهبود دسترسی‌پذیری (Accessibility)
• بخش ۳: قدرت‌نمایی با CSS مدرن (زیباسازی و چیدمان)
  • مقدمه‌ای بر CSS و روش‌های اتصال آن به HTML
  • انتخابگرها (Selectors) در CSS: کلاس، ID، عنصر، ترکیبی و شبه‌کلاس‌ها
  • مدل جعبه‌ای (Box Model): Margin, Border, Padding, Content
  • خصوصیات نمایش (Display Properties): Block, Inline, Inline-Block, None
  • کار با رنگ‌ها و پس‌زمینه‌ها
  • تایپوگرافی (Typography): فونت‌ها، اندازه، وزن و استایل متن
  • Flexbox: چیدمان انعطاف‌پذیر برای اجزای صفحه (Container & Items Properties)
  • CSS Grid: چیدمان شبکه‌ای قدرتمند برای ساختار کلی صفحه (Grid Template, Areas, Gaps)
  • طراحی واکنش‌گرا (Responsive Design) با Media Queries
  • انتقال‌ها (Transitions) و انیمیشن‌های ساده CSS
  • متغیرهای CSS (Custom Properties) برای کدهای تمیزتر
  • شبه‌عناصر (Pseudo-Elements) برای افکت‌های خاص
• بخش ۴: پروژه‌های عملی و کاربردی
  • پروژه ۱: ساخت یک صفحه فرود (Landing Page) زیبا و واکنش‌گرا
  • پروژه ۲: طراحی و پیاده‌سازی کارت‌های محصول با جزئیات
  • پروژه ۳: ساخت طرح‌بندی (Layout) یک وب‌سایت نمونه کار (Portfolio)
  • پروژه ۴: پیاده‌سازی بخشی از یک وب‌سایت تجارت الکترونیک
  • نکات و ترفندهای حرفه‌ای برای توسعه‌دهندگان فرانت‌اند

دوره «HTML و CSS مدرن از پایه (ویرایش ۲۰۲۴)» بیش از یک مجموعه آموزش ساده است؛ این یک سرمایه‌گذاری بر روی آینده شغلی شما در یکی از پرتقاضاترین حوزه‌های فناوری است. با گذراندن این دوره، شما نه تنها مهارت‌های فنی لازم را کسب می‌کنید، بلکه با رویکرد حل مسئله و تفکر طراحی آشنا می‌شوید که در مسیر توسعه‌دهندگی وب ضروری است.

فرصت را از دست ندهید و با این دوره که بر روی یک فلش مموری ۳۲ گیگابایتی ارائه می‌شود و نیازی به دانلود ندارد، اولین قدم خود را به سوی ساخت وب‌سایت‌های خیره‌کننده بردارید. آماده شوید تا ایده‌های خود را به واقعیت تبدیل کنید و در دنیای دیجیتال بدرخشید!