معرفی دوره

این دوره آموزشی بی‌نظیر، که توسط یکی از برجسته‌ترین مدرسان کدنویسی، Mosh Hamedani، ارائه شده است، یک سفر یادگیری عمیق و کاربردی در دنیای HTML و CSS را برای شما فراهم می‌آورد. با تمرکز بر مفاهیم مدرن و تکنیک‌های عملی، این مجموعه آموزشی اطمینان حاصل می‌کند که شما نه تنها ساختار صفحات وب (HTML) و سبک‌دهی آن‌ها (CSS) را فرا می‌گیرید، بلکه قادر خواهید بود پروژه‌های واقعی و چشم‌نوازی را خلق کنید.

ارائه این دوره بر روی فلش مموری 32 گیگابایتی، دسترسی آسان و بدون نیاز به دانلود حجم بالای فایل‌ها را تضمین می‌کند. این روش، ذخیره‌سازی و دسترسی به محتوای آموزشی را برای شما بسیار راحت‌تر می‌سازد و امکان یادگیری در هر زمان و مکانی را فراهم می‌آورد.

آنچه در این دوره فرا خواهید گرفت

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

• اصول HTML5: یادگیری معنایی (Semantic HTML)، تگ‌های کلیدی، فرم‌ها، جداول، عناصر چندرسانه‌ای (صدا و تصویر)، و نحوه ساختاردهی صحیح صفحات وب.
• مبانی CSS3: انتخابگرها (Selectors)، خاصیت‌ها (Properties)، مقادیر (Values)، مدل جعبه‌ای (Box Model)، موقعیت‌دهی (Positioning)، طرح‌بندی (Layout) با Flexbox و Grid، و تکنیک‌های پیشرفته CSS.
• طراحی واکنش‌گرا (Responsive Design): ایجاد وب‌سایت‌هایی که در تمامی دستگاه‌ها، از دسکتاپ گرفته تا موبایل، به خوبی نمایش داده می‌شوند، با استفاده از Media Queries.
• انیمیشن‌ها و ترنزیشن‌ها در CSS: افزودن جلوه‌های بصری جذاب به صفحات وب و ایجاد تجربیات کاربری پویا.
• مفاهیم پیشرفته CSS: مانند CSS Variables، Pseudo-classes، Pseudo-elements، و تکنیک‌های سازماندهی CSS.
• بهینه‌سازی و عملکرد: نکاتی برای سریع‌تر کردن بارگذاری صفحات و بهبود تجربه کاربری.
• کار با ابزارها: آشنایی با ابزارهای توسعه‌دهنده مرورگر برای اشکال‌زدایی و تست.

هر بخش با مثال‌های عملی و پروژه‌های کوچک همراه است تا مفاهیم آموخته شده را تثبیت کند.

ساختار دوره و سرفصل‌های کلیدی

این دوره به بخش‌های مختلفی تقسیم شده است تا یادگیری به صورت مرحله به مرحله و منطقی انجام شود:

بخش اول: مقدمه‌ای بر توسعه وب و HTML

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

  ` تا `

  `، `

  `، ``، ``، `

  `، `
  `، `
  1. `.
  2. نحوه اضافه کردن لینک‌ها و تصاویر.
  3. معنایی‌سازی (Semantics) در HTML5 و اهمیت آن.
  4. ایجاد فرم‌ها و عناصر ورودی (``, ``, `<select>`).</li> <li>استفاده از تگ‌های جدید HTML5 مانند `<article>`, `<nav>`, `<aside>`, `<footer>`.</li> </ul> <h3>بخش دوم: اصول CSS و استایل‌دهی</h3> <ul> <li>نحوه افزودن CSS به صفحات HTML (Inline, Internal, External).</li> <li>انتخابگرهای CSS: تگ، کلاس، ID، انتخابگرهای صفات (Attribute Selectors).</li> <li>خاصیت‌های رایج CSS: `color`, `background`, `font-family`, `font-size`, `text-align`.</li> <li>مدل جعبه‌ای (Box Model): `margin`, `border`, `padding`, `content`.</li> <li>نحوه استفاده از `display: block`, `display: inline`, `display: inline-block`.</li> <li>خاصیت `position` و مقادیر آن: `static`, `relative`, `absolute`, `fixed`, `sticky`.</li> </ul> <h3>بخش سوم: طرح‌بندی مدرن با Flexbox و Grid</h3> <ul> <li>مقدمه‌ای بر Flexbox برای چیدمان یک‌بعدی.</li> <li>ویژگی‌های Flex Container و Flex Items.</li> <li>مثال‌های کاربردی از Flexbox برای طراحی چیدمان.</li> <li>آشنایی با CSS Grid برای چیدمان دو‌بعدی.</li> <li>مفاهیم Grid Container و Grid Items.</li> <li>تعریف ردیف‌ها و ستون‌ها در Grid.</li> <li>ساخت Layoutهای پیچیده با Grid.</li> </ul> <h3>بخش چهارم: طراحی واکنش‌گرا (Responsive Design)</h3> <ul> <li>اهمیت طراحی واکنش‌گرا.</li> <li>استفاده از Viewport Meta Tag.</li> <li>کار با Media Queries برای تنظیم استایل‌ها بر اساس اندازه صفحه.</li> <li>ایجاد Layoutهای انعطاف‌پذیر با واحد‌های نسبی (%, vw, vh).</li> <li>تصاویر واکنش‌گرا.</li> </ul> <h3>بخش پنجم: انیمیشن‌ها، ترنزیشن‌ها و مباحث پیشرفته</h3> <ul> <li>ایجاد ترنزیشن (Transition) برای افکت‌های بصری نرم.</li> <li>استفاده از انیمیشن‌های CSS (Keyframes) برای ایجاد حرکات پیچیده‌تر.</li> <li>CSS Variables (Custom Properties) برای مدیریت بهتر کد.</li> <li>Pseudo-classes و Pseudo-elements و کاربرد آن‌ها.</li> <li>نکات مربوط به سازماندهی و نوشتن CSS تمیز و قابل نگهداری.</li> <li>معرفی روش‌های مدرن برای نام‌گذاری کلاس‌ها (مانند BEM).</li> </ul> </div> <div class='section-box'> <h2>مزایای شرکت در این دوره</h2> <p>با تهیه و گذراندن این دوره جامع، شما به مجموعه‌ای از مهارت‌های ارزشمند دست خواهید یافت:</p> <ul> <li><span class="highlight">مهارت عملی:</span> تسلط بر ساخت و استایل‌دهی وب‌سایت‌ها با استفاده از آخرین استانداردها.</li> <li><span class="highlight">تمرکز بر پروژه‌های واقعی:</span> یادگیری از طریق ساخت پروژه‌هایی که می‌توانید در نمونه کارهای خود قرار دهید.</li> <li><span class="highlight">آموزش از یک متخصص برجسته:</span> بهره‌مندی از تجربه و دانش Mosh Hamedani.</li> <li><span class="highlight">دسترسی آسان و ماندگار:</span> فلش مموری 32 گیگابایتی، امکان یادگیری بدون محدودیت اینترنت و دسترسی دائمی به محتوا را فراهم می‌کند.</li> <li><span class="highlight">پایه قوی برای یادگیری بیشتر:</span> این دوره، مقدمه‌ای ایده‌آل برای یادگیری زبان‌های برنامه‌نویسی سمت کاربر مانند JavaScript و فریم‌ورک‌های مدرن است.</li> <li><span class="highlight">افزایش فرصت‌های شغلی:</span> تسلط بر HTML و CSS، درهای بسیاری را در دنیای کار برای شما باز خواهد کرد.</li> </ul> </div> <div class='section-box'> <h2>پیش‌نیازها</h2> <p>این دوره برای طیف وسیعی از علاقه‌مندان مناسب است. هیچ پیش‌نیاز تخصصی برای شروع این دوره وجود ندارد. تنها چیزی که نیاز دارید، اشتیاق به یادگیری و یک کامپیوتر برای تمرین است. آشنایی اولیه با کامپیوتر و نحوه استفاده از فایل‌ها کافی است.</p> </div> <div class='section-box'> <h2>نتیجه‌گیری</h2> <p>دوره جامع آموزش HTML و CSS - سری 2022، یک سرمایه‌گذاری ارزشمند برای هر کسی است که به توسعه وب علاقه‌مند است. با محتوای جامع، تدریس حرفه‌ای و روش ارائه کاربردی (فلش مموری 32 گیگابایتی)، این دوره به شما این امکان را می‌دهد تا دانش و مهارت‌های لازم برای خلق وب‌سایت‌های زیبا و کارآمد را کسب کنید. فرصت را از دست ندهید و سفر خود را به دنیای توسعه وب با این دوره استثنایی آغاز کنید.</p> </div> </article> </section> <section id="reviews" class="woocommerce-Reviews mt-16"> <h2 class="woocommerce-Reviews-title text-2xl font-bold mb-6">نظرات</h2> <p class="woocommerce-noreviews text-gray-500">هنوز نظری ثبت نشده است.</p> <p class="mt-6"><a href="/login" class="text-primary">وارد شوید</a> تا نظر ثبت کنید.</p> </section> </main> <footer class="bg-gray-900 text-gray-300 mt-auto"> <div class="container mx-auto px-4 py-8 space-y-8"> <div class="footer-row grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="footer-column space-y-4"> <div class="footer-module"> <h4 class="text-white font-semibold mb-3">MAPress</h4> <div class="footer-module-body"><p class="text-sm">فروشگاه و وبلاگ</p></div> </div> </div> <div class="footer-column space-y-4"> <div class="footer-module"> <h4 class="text-white font-semibold mb-3">دسترسی سریع</h4> <div class="footer-module-body"><ul class="space-y-2 text-sm"><li><a href="/shop" class="text-gray-200 hover:text-white transition-colors">فروشگاه</a></li><li><a href="/categories" class="text-gray-200 hover:text-white transition-colors">دسته‌بندی‌ها</a></li><li><a href="/blog" class="text-gray-200 hover:text-white transition-colors">وبلاگ</a></li></ul></div> </div> </div> <div class="footer-column space-y-4"> <div class="footer-module"> <h4 class="text-white font-semibold mb-3">نماد</h4> <div class="footer-module-body"><a referrerpolicy='origin' target='_blank' href='https://trustseal.enamad.ir/?id=22928&Code=lI9NBguCNyRimkdy9DczLabUuPirp1D9'><img referrerpolicy='origin' src='https://trustseal.enamad.ir/logo.aspx?id=22928&Code=lI9NBguCNyRimkdy9DczLabUuPirp1D9' alt='' style='cursor:pointer' code='lI9NBguCNyRimkdy9DczLabUuPirp1D9'></a></div> </div> </div> </div> <div class="border-t border-gray-800 pt-6 text-center text-sm"> © 2026 MAPress. تمامی حقوق محفوظ است. </div> </div> </footer> </body> </html>