- مدرس دوره : حمید جان درمیان ( رزومه )
- تعداد ویدیوها : 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با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.
درآمدزایی با قالب وردپرس؛ چالش AI و مسیر شغلی برنامهنویسی
پاسخ به چالشهای بازار کار مثل تأثیر هوش مصنوعی (AI) و معرفی مسیر درآمدزایی از طریق برنام نویسی قالب وردپرس
نصب و تنظیم VS Code و آشنایی با تگهای اصلی و ساختار استاندارد HTML
نصب و تنظیم VS Code به همراه افزونههای کلیدی برای افزایش سرعت کدنویسی و الفبا و اسکلتبندی سایت با HTML5
آشنایی با تگهای h1 تا h6 ، تگ p ، تگ b ،تگ i و تگ br
این تگها ابزارهای پایهای HTML برای ساختاردهی به متن (با تیتر و پاراگراف) و زیباسازی ظاهر آن (با بولد، کج کردن و شکستن خطوط) در صفحات وب هستند.
کار با تصاویر، لینکها و ساخت اولین منوی سایت در HTML
آموزش کار با تصاویر، لینکها، لیستها و پیادهسازی عملی اولین منوی ناوبری سایت در HTML.
لیستهای تعریفی (dl/dt/dd) و جداول (Rowspan/Colspan) در html
در این جلسه، پروندهی کار با تگ table و ادغام پیچیدهی سلولها را بهطور کامل میبندیم و با کاربرد و لیستهای تعریفی در وب مدرن آشنا میشویم.
آشنایی با تگهای معنایی (Semantic HTML) در HTML5
در این جلسه با مفهوم HTML معنایی و کاربرد تگهای ساختاری مانند header ، main , section , footer آشنا میشوید و یاد میگیرید که چطور معماری کدهای خود را برای مرورگرها و موتورهای جستجو استانداردسازی کنید.
آموزش کار با فرمها - قسمت اول
در این جلسه با ساختار اصلی فرمها در وب، متدهای ارسال اطلاعات (GET و POST) و نحوه گرفتن ورودیهای متنی و رمز عبور از کاربر آشنا میشوید.
آموزش کار با فرمها - قسمت دوم (لیبلها و گزینههای انتخابی)
در این جلسه یاد میگیریم که چطور با استفاده از تگ label فرمهای خود را کاملاً استاندارد و کاربرپسند کنیم. همچنین به صورت کاملاً عملی و با مثالهای واقعی، نحوه ساخت دکمههای رادیویی (Radio) برای انتخابهای تکی و چکباکسها (Checkbox) برای انتخابهای چندگانه را بررسی خواهیم کرد.
آموزش کار با فرمها - قسمت سوم و آخر
در این جلسه با یادگیری تگهای ساختاری fieldset و legend، یاد میگیریم چطور فرمهای طولانی را کاملاً استاندارد و حرفهای گروهبندی کنیم. همچنین فیلدهای متنی چندخطی (textarea)، منوهای کشویی پیشرفته و کنترلهای مدرنی مثل انتخاب رنگ، عدد و آپلود فایل را به صورت کاملاً عملی و بر اساس استانداردهای MDN بررسی خواهیم کرد.
آموزش کار با عناصر مولتیمدیا (Audio ،Video ، Img و تگ پیشرفته Picture)
در این جلسه به سراغ یادگیری بومی عناصر صوتی و ویدیویی در HTML رفتهایم و با اتریبیوتهای حیاتی آنها مثل controls و poster آشنا میشویم. همچنین در بخش دوم، تگ فوقالعاده کاربردی و پیشرفتهی
آموزش کار با عناصر ساختاری div و span
در این جلسه به بررسی دو تگ کلیدی و پرکاربرد div و span میپردازیم و یاد میگیریم که چطور از این عناصر برای گروهبندی کدهای HTML و ساختاردهی به صفحات وب استفاده کنیم. همچنین تفاوتهای اساسی این دو تگ را در حالتهای Block-level و Inline کاملاً بررسی خواهیم کرد.
مقدمهای بر CSS ؛ چرایی پیدایش و قوانین نامگذاری Class و ID
در این جلسه با فلسفه و دلایل پیدایش زبان CSS آشنا میشویم تا ساختار و ظاهر کدهایمان را کاملاً از هم تفکیک کنیم. همچنین به بررسی عمیق دو ویژگی کلیدی Class و ID، کاربرد آنها در طراحی بخشهای مختلف سایت دیجیکالا و قوانین سفتوسخت نامگذاری آنها طبق استانداردهای جهانی میپردازیم.
آشنایی با سلکتور تگها در CSS و کاربرد عملی Class و ID
این جلسه با نحوه هدفگیری و استایلدهی مستقیم به تگهای HTML از طریق سلکتورها آشنا میشویم. همچنین به صورت کاملاً عملی و پروژهمحور بررسی میکنیم که در چه موقعیتهایی باید از ویژگیهای Class و ID برای مدیریت چیدمان صفحه استفاده کرد.
آشنایی با سلکتورهای ترکیبی (Combinators) در CSS و کاربرد آنها
در این جلسه به بررسی روابط میان تگها در HTML پرداخته و نحوه استفاده از سلکتورهای ترکیبی (Combinators) را یاد میگیریم. همچنین با مثالهای عملی بررسی میکنیم که چطور به کمک این انتخابگرها، کدهایی تمیزتر، بهینهتر و حرفهایتر بنویسید.
آموزش شبهکلاسهای تعاملی در CSS (Hover, Focus, Active, Visited)
در این ویدیو به بررسی کامل شبهکلاسهای تعاملی پرداختهایم تا یاد بگیرید چگونه به رفتارهای کاربر مثل نگهداشتن موس، فوکوس روی فرمها و کلیک روی دکمهها استایلهای داینامیک و حرفهای بدهید. با درک درست این مفاهیم، میتوانید تجربه کاربری (UX) فرمها و المانهای سایت خود را چندین لول ارتقا دهید.
آموزش شبهکلاسهای ساختاری (Structural Pseudo Classes)
شبهکلاسهای ساختاری به شما کمک میکنند عناصر HTML را بر اساس جایگاه و ترتیب آنها در ساختار صفحه انتخاب و استایلدهی کنید، بدون اینکه نیازی به اضافه کردن class یا id داشته باشید. این قابلیت باعث میشود کدهای CSS تمیزتر، منعطفتر و حرفهایتر شوند.
آموزش شبه المانها (Pseudo-elements) در CSS
سلام به همه رفقای مسیر توسعه. توی این بخش میریم سراغ یکی از جذابترین و کاربردیترین مباحث طراحی فرانتاند، یعنی سودو المانها (Pseudo-elements). حتماً بارها توی سایتهای بزرگ دیدید که بدون اضافه کردن کدهای HTML اضافی، المانهای زیبایی مثل آیکونهای خاص، خطوط دکوراتیو زیر عناوین، یا افکتهای انیمیشنی شیک خلق میشن. راز همه اینها در درک درست سودو المانهاست. در این پارت به صورت کاملاً عملی یاد میگیرید: سودو المانها چی هستند و چه تفاوتی با سودو کلاسها دارند؟ تسلط کامل روی دو ابزار قدرتمند ::before و ::after. نحوه مدیریت محتوا با ویژگی content در CSS.
آموزش Position ها در CSS
در این آموزش با مقادیر مختلف position مانند static، relative، absolute، fixed و sticky آشنا میشوید و نحوه چینش دقیق المانها در صفحه را با استفاده از top، right، bottom و left فرا میگیرید.
مخصوص اعضای ویژه
نظرات کاربران در رابطه با این دوره