آموزش ویدئویی کامل و پیشرفته فایرباگ و سایر ابزارهای مهم

X
اگر این مطلب را مفید میدانید، لطفا برای حمایت از ما روی این دکمه کلیک کنید.

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

فایرباگ

متاسفانه بسیاری از کسانی که طراحی وب را شروع میکنند با فایرباگ آشنایی ندارند. و حتی کسانی که طراحی وب را به صورت حرفه ای دنبال میکنند، بعضا با فایرباگ آشنایی کامل ندارند و از قابلیت های آن استفاده نمی کنند.

در حالی که استفاده از فایرباگ، بسیار مهم و ضروری است و سرعت برنامه نویسی و توسعه ی UI وب را حتی ده برابر افزایش میدهد. لذا به کلیه ی کسانی که به طراحی UI وب علاقه مند هستند، مشاهده ی این دوره ی آموزشی را اکیدا توصیه میکنم. به هیچ وجه این دوره را از دست ندهید.

در صورتی که نمیخواهید عضویت ویژه خریداری کنید، با مبلغ کمتر می توانید فایل های این دوره را خریداری کنید. و در ضمن محدودیت یک ماهه نیز ندارد و به طور دائم از کلیه ی فایل های این دوره و فایل هایی که بعدا اضافه می شود بهره مند می شوید.

خرید یک بار انجام می شود و دسترسی دائمی داده می شود.

با مشاهده ی این دوره چه مهارت هایی به دست می آورید؟

با مشاهده ی این دوره شما درک عمیقی از ساختار صفحات وب به دست می آورید و توانایی و مهارت تان را در طراحی UI وب افزایش می دهید.
شما با گذراندن این دوره قادر خواهید شد که هر نوع طراحی را به دقت پیاده سازی کنید. هر صفحه ی وب که ببینید را می توانید دقیقا الگو برداری و شبیه سازی کنید.

در این دوره، کلیه ی قابلیت های فایرباگ به صورت دقیق و با جزییات مورد بررسی قرار میگیرند:

  • چگونگی حرکت در صفحه ی وب و انتخاب عناصر
  • چگونگی اعمال تغییر در صفحات وب و کدهای CSS به صورت زنده و آنی
  • ردگیری استایل های CSS در صفحات وب پیچیده
  • کپی کردن و الگوبرداری از صفحات وب و درک عمیق از ساختار صفحات وب
  • اجرای کدهای جاوا اسکریپت به صورت زنده در صفحات وب
  • دیباگ و اشکال زدایی کدهای جاوا اسکریپت
  • اشکال زدایی کدهای CSS به صورت زنده
  • مهارت در نوشتن انتخابگر های CSS به صورت بهینه و سریع
  • اشکال زدایی مشکلات شبکه و اینترنت در صفحات وب
  • ردگیری خطاهای Ajax
  • ردگیری و مدیریت کوکی ها
  • بررسی عمیق درخت DOM
  • و بسیاری موارد دیگر.

همچنین در قسمت های بعدی این دوره، شما با سایر ابزار های ضروری طراحی وب از قبیل WebStorm و Emmet و... آشنا خواهید شد.

سرفصل های موجود (در حال به روز رسانی)

توجه: سرفصل های زیر در حال به روز رسانی است و در آینده به زودی قسمت های جدید اضافه می گردد.

آموزش های رایگان

توجه: آموزش های زیر، برای کلیه ی اعضای سایت طلوع رایگان می باشد.

آموزش های پیشرفته (غیر رایگان)

توجه: آموزش های زیر نیازمند عضویت ویژه کلاس H و یا خرید تکی دوره است.

در صورتی که نمیخواهید عضویت ویژه خریداری کنید، با مبلغ کمتر می توانید فایل های این دوره را خریداری کنید. و در ضمن محدودیت یک ماهه نیز ندارد و به طور دائم از کلیه ی فایل های این دوره و فایل هایی که بعدا اضافه می شود بهره مند می شوید.

خرید یک بار انجام می شود و دسترسی دائمی داده می شود.

دیدگاه‌ها

پیش نیاز

تصویر mamadboss

با سلام به استاد
می خواستم بدونم پیش نیاز این دوره چیست؟
من html css بلدم ولی جاوااسکریپت و jquery بلد نیستم

یه راهنمایی میخام

تصویر ali

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

با عرض سلام و خسته نباشید

تصویر ali

من تو همون مرحله اول (پروژه گوگل) تو یه مرحله موندم، همون پوشه ای که localhost تون هست و تو مرورگره فراخونیش میکنین مال من مسیرو به هیج وجه پیدا نمیکنه ، تو هر درایوی أم images,stylesheet,index رو میسازم بازم نمیدونم کجای کارم اشکال داره؟

سلام دوست عزیز

تصویر احمد حجازی

سلام دوست عزیز
دلیلش اینه که من در این سری ویدئوها، از وب سرور استفاده میکنم.
اگر میخواهید که مثل ویدئو کار کنید، باید وب سرور XAMPP رو نصب کنید.
وگرنه باید آدرس ها رو خودتون اصلاح کنید.
البته فرض این دوره ی آموزشی، این بوده که شما با مبانی طراحی وب آشنایی دارید. و فقط فایرباگ رو آموزش داده ام.
با این حال، برای راهنمایی در نصب وب سرور XAMPP هم مطالب آموزشی مفصلی نوشته ام که در آدرس زیر میتوانید مطالعه کنید:

دقت کنید که مقاله ی زیر چند بخش دارد و لینک بخش های بعدی در زیر همان صفحه وجود دارد.

http://www.hejazee.ir/tutorials/books/%D9%85%D9%82%D8%AF%D9%85%D8%A7%D8%...

موفق باشید.

یه راهنمایی دیگه

تصویر ali

همچنین تو notepad++ شما اون stylesheet , اینارو درس می دازه ولی تو note pad ++ من زیرشون خط قرمز می اندازه که ؟؟ اشکال گرامری می گیره در حالی که notepad++ باید خودش بفهمه ؟

سلام دوست عزیز

تصویر Masoud.Sh.8631

سلام دوست عزیز
میدونم خیلی از تاریخ سوال شما گذشته ولی برای کسانی میگم که ممکنه هنوز جواب نگرفته باشن. در notrpad++ اگر از تب language زبانی رو که در اون لحظه دارید ازش استفاده می کنید رو مشخص کنید (مثلاً java ,++c, ...) دیگه ایراد گرامری نمی گیره. تا قبل از انتخاب زبان notepad++ اینطور فرض میکنه که شما در حال تایپ متن گفتار هستید.

سپاس

تصویر ali

سپاس دوست عزیز از راهنماییتون، بحثی که هس اینه که من با java , .. اینارو هنوز تو note pad++بکار نمیبردم فقط کدهای یا یهتره بگم تگ های html رو بکار میبردم که واس اون ایراد میگرف
بازم ممنون

می توانید SpellChecker رو غیر

تصویر احمد حجازی

می توانید SpellChecker رو غیر فعال کنید. در Notepad+‎+‎ یک آیکون در Toolbar برای این منظور وجود داره که کلیکش کنید غیر فعال میشه
موفق باشید

سلام خسته نباشید مهندس

تصویر ali

با سلام و خسته نباشید
بنده بعد اینکه html file پروژه گوگل رو نوشتم 4 تا لینک ظاهر شد ولی وختی میخستم ببرمشون سمت راست css file به هیج وج نمیتونه فراخوانیش کنه
ul#google-links li {
display: inline;
}
، ینی اعمال نمیشه روش ، واقعا نمدونم مشکل کجاس؟فک کنم تو آدرس دهی مشکل دارم !!
در ضمن از اینکه سوالات زیادی ازتون می پرسم مذرت خاهی می کنم و علتش اینه که واقعت تدریستونو دوستون داریم و به نوبه خودمون حمایتتون می کنیم
سپاس

سلام

تصویر احمد حجازی

سلام
خوشحالم که این دوره آموزشی مورد پسند شما واقع شده.
در بخش هفتم دوره، اگر دانلود کنید، پوشه ای به نام Source code وجود دارد. که کل کدهایی که در ویدئو نوشتم رو شامل میشه.
آن پوشه را باز کنید و فایل index.html رو باز کنید و بررسی کنید تا اشکالاتتون برطرف شود.
موفق باشید.

کمک به طراحی

تصویر ali

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

شما به کمک فایرباگ میتوانید

تصویر احمد حجازی

شما به کمک فایرباگ میتوانید از ساختار خروجی کدهای صفحه ی وب تون سر در بیارید و بفهمید که چطوری میشه بهش استایل داد.
وقتی که به کمک فایرباگ، ساختار کدهای HTML خروجی رو درک کردید، می توانید با دقت و سرعت عالی، استایل های CSS رو بنویسید یا کدهای jQuery بنویسید. و کدهاتون رو داخل قالب جوملا یا هر سیستمی که استفاده میکنید قرار دهید.

طراحی ربات

تصویر ali

سلام
میشه راجع طراحی ربات تو تلگرام هم مقاله یا مطلبی بذارید یا اینکه بفرمیین ابزار لازم واس این کار چیه؟
مرسی

سلام

تصویر احمد حجازی

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