قیمت این دوره: رایگانــ
  • مدرس دوره : حمید جان درمیان
  • تعداد ویدیوها : 21 ویدیو
  • مدت زمان دوره : 5:50:00
  • سطح دوره : مقدماتی
  • وضعیت دوره : در حال برگزاری
آموزش پله اول ثروت‌ سازی با وردپرس

آموزش پله اول ثروت‌ سازی با وردپرس

دوره رایگان «پله اول ثروت‌سازی با وردپرس» – از کدنویسی تا طراحی قالب حرفه‌ای

آیا به دنبال یک مسیر عملی برای ورود به دنیای طراحی وب و کسب درآمد از اینترنت هستید؟ دوره رایگان «پله اول ثروت‌سازی با وردپرس» نقطه شروع ایده‌آلی برای شماست. در این دوره، بدون نیاز به دانش قبلی، قدم‌به‌قدم با اصول طراحی قالب وردپرس، کدنویسی HTML و CSS، و پیاده‌سازی یک پروژه واقعی شبیه به دیجی‌کالا آشنا می‌شوید.

در این دوره رایگان چه می‌آموزید؟

 

فصل اول: نقشه راه و آماده‌سازی ابزارها

معرفی مسیر شغلی و درآمدزایی از طریق طراحی سایت با وردپرس

پاسخ به چالش‌های بازار کار مثل تأثیر هوش مصنوعی (AI) و اشباع بازار برنامه‌نویسی

نصب و تنظیم VS Code به همراه افزونه‌های کلیدی برای افزایش سرعت کدنویسی

 

فصل دوم: الفبا و اسکلت‌بندی سایت با HTML5

آشنایی با تگ‌های اصلی و ساختار استاندارد HTML

کار با تیترها, پاراگراف‌ها، تصاویر، لیست‌ها و منوها

آموزش تگ‌های معنایی (Semantic HTML) برای بهینه‌سازی سئو

ساخت فرم‌ها و المان‌های تعاملی (Inputs)

 

فصل سوم: زیباسازی صفحات وب با CSS3

اصول استایل‌دهی، رنگ‌ها، متون و Box Model

موقعیت‌دهی پیشرفته (Absolute, Relative, Fixed)

کنترل نمایش المان‌ها با Display (Block, Inline-Block)

 

فصل چهارم: چیدمان با فلکس‌باکس (Flexbox)

مفاهیم پدر و فرزندی در Flexbox

تراز کردن المان‌ها، توزیع فضا و حل چالش‌های عملی چیدمان

 

فصل پنجم: چیدمان با گرید (CSS Grid)

ورود به دنیای دو بعدی با CSS Grid

ساخت گریدبندی‌های پیچیده، مدیریت ردیف‌ها و ستون‌ها در قالب‌های واقعی

حل چالش‌های عملی ساختارهای چندستونی مدرن

 

فصل ششم: ریسپانسیو سازی (Responsive Design)

آشنایی با مفهوم طراحی واکنش‌گرا برای موبایل و تبلت

کار با Media Queryها و اصول طراحی Mobile-First

 

فصل هفتم: آموزش تیلویند (Tailwind CSS v4)

تیلویند چیست و چرا باید فریم‌ورک‌های سنتی را کنار بگذاریم؟

آماده‌سازی پیکربندی Tailwind در پروژه و کار با Utility Classها

پیاده‌سازی سریع رنگ‌ها، فاصله‌ها، دکمه‌ها و مدیریت المان‌ها بدون نوشتن کدهای طولانی CSS

 

فصل هشتم: جاوااسکریپت (JS) کاربردی ویژه طراحان وب

آشنایی با مفاهیم پایه‌ای جاوااسکریپت و نحوه اتصال آن به HTML

کار با DOM (انتخاب المان‌های صفحه و دستکاری آن‌ها با JS)

مدیریت رویدادها (Events) مثل کلیک، اسکرول و هاور

پویا کردن قالب: ساخت منوهای همبرگری موبایل، پاپ‌آپ‌ها (Modal) و تب‌های محتوایی

 

فصل نهم: پروژه پایانی و طراحی قالب مدرن دیجی‌کالا با تیلویند سی‌اس‌اس

آنالیز حرفه‌ای ساختار و چیدمان سایت دیجی‌کالا

کدنویسی فوق‌سریع و بهینه‌شده هدر و منوهای ناوبری با Tailwind

طراحی اسلایدر، بنرهای تبلیغاتی و باکس محصولات پویا با ترکیب Tailwind و JavaScript

پیاده‌سازی کامل فوتر ریسپانسیو، استاندارد و مدرن




فهرستـــ ویدیوها

مدت زمان دوره 5:50:00
  • با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.

1
  • معرفی دوره

00:06:00

معرفی دوره

2
  • درآمدزایی با قالب وردپرس؛ چالش AI و مسیر شغلی برنامه‌نویسی

00:28:38

پاسخ به چالش‌های بازار کار مثل تأثیر هوش مصنوعی (AI) و معرفی مسیر درآمدزایی از طریق برنام نویسی قالب وردپرس

3
  • نصب و تنظیم VS Code و آشنایی با تگ‌های اصلی و ساختار استاندارد HTML

00:15:07

نصب و تنظیم VS Code به همراه افزونه‌های کلیدی برای افزایش سرعت کدنویسی و الفبا و اسکلت‌بندی سایت با HTML5

4
  • آشنایی با تگ‌های h1 تا h6 ، تگ p ، تگ b ،تگ i و تگ br

00:18:21

این تگ‌ها ابزارهای پایه‌ای HTML برای ساختاردهی به متن (با تیتر و پاراگراف) و زیباسازی ظاهر آن (با بولد، کج کردن و شکستن خطوط) در صفحات وب هستند.

5
  • کار با تصاویر، لینک‌ها و ساخت اولین منوی سایت در HTML

00:24:55

آموزش کار با تصاویر، لینک‌ها، لیست‌ها و پیاده‌سازی عملی اولین منوی ناوبری سایت در HTML.

6
  • لیست‌های تعریفی (dl/dt/dd) و جداول (Rowspan/Colspan) در html

00:18:44

در این جلسه، پرونده‌ی کار با تگ table و ادغام پیچیده‌ی سلول‌ها را به‌طور کامل می‌بندیم و با کاربرد و لیست‌های تعریفی در وب مدرن آشنا می‌شویم.

7
  • آشنایی با تگ‌های معنایی (Semantic HTML) در HTML5

00:11:26

در این جلسه با مفهوم HTML معنایی و کاربرد تگ‌های ساختاری مانند header ، main , section , footer  آشنا می‌شوید و یاد می‌گیرید که چطور معماری کدهای خود را برای مرورگرها و موتورهای جستجو استانداردسازی کنید.

8
  • آموزش کار با فرم‌ها - قسمت اول

00:10:44

در این جلسه با ساختار اصلی فرم‌ها در وب، متدهای ارسال اطلاعات (GET و POST) و نحوه گرفتن ورودی‌های متنی و رمز عبور از کاربر آشنا می‌شوید.

9
  • آموزش کار با فرم‌ها - قسمت دوم (لیبل‌ها و گزینه‌های انتخابی)

00:12:08

در این جلسه یاد می‌گیریم که چطور با استفاده از تگ label فرم‌های خود را کاملاً استاندارد و کاربرپسند کنیم. همچنین به صورت کاملاً عملی و با مثال‌های واقعی، نحوه ساخت دکمه‌های رادیویی (Radio) برای انتخاب‌های تکی و چک‌باکس‌ها (Checkbox) برای انتخاب‌های چندگانه‌ را بررسی خواهیم کرد.

10
  • آموزش کار با فرم‌ها - قسمت سوم و آخر

00:16:55

در این جلسه با یادگیری تگ‌های ساختاری fieldset و legend، یاد می‌گیریم چطور فرم‌های طولانی را کاملاً استاندارد و حرفه‌ای گروه‌بندی کنیم. همچنین فیلدهای متنی چندخطی (textarea)، منوهای کشویی پیشرفته و کنترل‌های مدرنی مثل انتخاب رنگ، عدد و آپلود فایل را به صورت کاملاً عملی و بر اساس استانداردهای MDN بررسی خواهیم کرد.

11
  • آموزش کار با عناصر مولتی‌مدیا (Audio ،Video ، Img و تگ پیشرفته Picture)

00:17:14

در این جلسه به سراغ یادگیری بومی عناصر صوتی و ویدیویی در HTML رفته‌ایم و با اتریبیوت‌های حیاتی آن‌ها مثل controls و poster آشنا می‌شویم. همچنین در بخش دوم، تگ فوق‌العاده کاربردی و پیشرفته‌ی

12
  • آموزش کار با عناصر ساختاری div و span

00:16:34

در این جلسه به بررسی دو تگ کلیدی و پرکاربرد div و span می‌پردازیم و یاد می‌گیریم که چطور از این عناصر برای گروه‌بندی کدهای HTML و ساختاردهی به صفحات وب استفاده کنیم. همچنین تفاوت‌های اساسی این دو تگ را در حالت‌های Block-level و Inline کاملاً بررسی خواهیم کرد.

13
  • مقدمه‌ای بر CSS ؛ چرایی پیدایش و قوانین نام‌گذاری Class و ID

00:17:05

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

14
  • آشنایی با سلکتور تگ‌ها در CSS و کاربرد عملی Class و ID

00:07:19

این جلسه با نحوه هدف‌گیری و استایل‌دهی مستقیم به تگ‌های HTML از طریق سلکتورها آشنا می‌شویم. همچنین به صورت کاملاً عملی و پروژه‌محور بررسی می‌کنیم که در چه موقعیت‌هایی باید از ویژگی‌های Class و ID برای مدیریت چیدمان صفحه استفاده کرد.

15
  • آشنایی با سلکتورهای ترکیبی (Combinators) در CSS و کاربرد آن‌ها

00:08:43

در این جلسه به بررسی روابط میان تگ‌ها در HTML پرداخته و نحوه استفاده از سلکتورهای ترکیبی (Combinators) را یاد می‌گیریم. همچنین با مثال‌های عملی بررسی می‌کنیم که چطور به کمک این انتخاب‌گرها، کدهایی تمیزتر، بهینه‌تر و حرفه‌ای‌تر بنویسید.

16
  • آموزش شبه‌کلاس‌های تعاملی در CSS (Hover, Focus, Active, Visited)

00:16:11

در این ویدیو به بررسی کامل شبه‌کلاس‌های تعاملی پرداخته‌ایم تا یاد بگیرید چگونه به رفتارهای کاربر مثل نگه‌داشتن موس، فوکوس روی فرم‌ها و کلیک روی دکمه‌ها استایل‌های داینامیک و حرفه‌ای بدهید. با درک درست این مفاهیم، می‌توانید تجربه کاربری (UX) فرم‌ها و المان‌های سایت خود را چندین لول ارتقا دهید.

17
  • آموزش شبه‌کلاس‌های ساختاری (Structural Pseudo Classes)

00:17:10

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

18
  • آموزش شبه المان‌ها (Pseudo-elements) در CSS

00:19:41

سلام به همه رفقای مسیر توسعه. توی این بخش می‌ریم سراغ یکی از جذاب‌ترین و کاربردی‌ترین مباحث طراحی فرانت‌اند، یعنی سودو المان‌ها (Pseudo-elements). حتماً بارها توی سایت‌های بزرگ دیدید که بدون اضافه کردن کدهای HTML اضافی، المان‌های زیبایی مثل آیکون‌های خاص، خطوط دکوراتیو زیر عناوین، یا افکت‌های انیمیشنی شیک خلق می‌شن. راز همه این‌ها در درک درست سودو المان‌هاست. در این پارت به صورت کاملاً عملی یاد می‌گیرید: سودو المان‌ها چی هستند و چه تفاوتی با سودو کلاس‌ها دارند؟ تسلط کامل روی دو ابزار قدرتمند ::before و ::after. نحوه مدیریت محتوا با ویژگی content در CSS.

19
  • آموزش Position ها در CSS

00:16:33

در این آموزش با مقادیر مختلف position مانند static، relative، absolute، fixed و sticky آشنا می‌شوید و نحوه چینش دقیق المان‌ها در صفحه را با استفاده از top، right، bottom و left فرا می‌گیرید.

20
  • آموزش کامل رنگ ها در CSS

00:34:12

در این فیلم به مبحث رنگ بصورت حرفه ای و کامل پرداخته ایم . مثل HEX , RGB , HSL

21
  • آموزش background

00:16:41

آموزش background


نظرات کاربران در رابطه با این دوره

لطفا سوالات خود را راجع به این آموزش در این بخش پرسش و پاسخ مطرح کنید به سوالات در قسمت نظرات پاسخ داده نخواهد شد و آن نظر حذف میشود.
جهت ثبت نظر باید در سایت عضو شوید و یا وارد سایت شده باشید .