دوره کامل طراحی وب همراه با 15 پروژه

این دوره شما را از یادگیری مفاهیم مقدماتی به سوی تسلط بر پیشرفته ترین تکنیک های توسعه وب به کمک PHP و MYSQL به همراه HTML و CSS و Javascript و Jquery و Bootstrapسوق می دهد.

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

این دوره به ۱۰ فصل کاملا ساختار یافته شامل ۷۷ ساعت آموزش جذاب عملی تقسیم شده است. شما ابتدا مفاهیم پایه را یاد خواهید گرفت و بعد بلافاصله آموخته های خود را به مثال های عملی و آسان اعمال می کنید. سپس شما به راحتی به مفاهیم پیشرفته هدایت می شوید و از آنها برای ساخت برنامه های کاربردی پیچیده تر استفاده می کنید. زمانی که یک فصل را به پایان رساندید، به چالش بزرگتری منتقل می شوید بطوریکه با مهارت های کسب کرده در این فصل و ترکیب آن با فصل قبل، با اطمینان می توانید یک پروژه کاملا حرفه ای را برای دنیای واقعی ایجاد کنید.

سبک و رهیافت دوره

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

مباحث دوره:

مقدمه – دریافت میزبانی وب نامحدود و رایگان خود – زبان HTML ساختار یک وبسایت راه اندازی پروتکل انتقال فایل (FTP) (با استفاده از Cyberduck) راه اندازی پروتکل انتقال فایل (FTP) (با استفاده از FileZilla) سرصفحه ها یا عنوان ها پاراگراف ها پیوند ها تصاویر تفاوت بین عنصر درون خط ((Inline و عنصر بلاک Block)) نمایش یک صفحه ی وب در صفحه وبی دیگر به کمک Iframes فعالیت: جای گذاری یک ویدئوی از سایت یوتوب در سایت خود لیست های مرتب، لیست های نامرتب و لیست تعریفی جداول موجودیت ها فرم ها – فعالیت: ایجاد یک فرم ورود با سایت فرم ها – فعالیت: ایجاد یک فرم رسید پرداخت خرید از بازار پیرایش متن نظرات استفاده از زبان برنامه نویسی برگه‌های آبشاری (CSS) معرفی برگه ‌های آبشاری درون خطی برگه ‌های آبشاری داخلی برگه ‌های آبشاری خارجی کلاس ها و شناسه ها تک های Div و Spam باکس مدل (Box Model) باکس مدل (Box Model): ویژگی Padding باکس مدل (Box Model): ویژگی Border باکس مدل (Box Model): طرح کلی (Outline) باکس مدل (Box Model): حاشیه (Margin) ویژگی پس زمینه ویژگی شناور ویژگی موقعیت ویژگی نمایش ویژگی آذین بندی متن ویژگی تراز بندی متن ویژگی قلم متن ویژگی افکت متن استفاده از روش تصویر Image Sprites شفافیت تصویر استفاده از روش Styling Lists گرادیان تبدیل یا گذاز دو بعدی تبدیل یا گذاز سه بعدی متحرک سازی تصاویر پروژه حرفه ای: وب سایت آموزش های ریاضیات (HTML و CSS) معرفی سربرگ (۱) سربرگ (۲) فهرست مقدمه در مورد کادر یا جعبه نوار کناری یا سایدبار (۱) نوار کناری یا سایدبار (۲) پاورقی و تبریک و تهنیت جاوااسکریپت معرفی دکمه ها تغییر محتوای HTML تغییر سبک HTML متغیرها و انواع داده ها تغییر HTML با استفاده از متغیرها – فعالیت: تولید رنگ تصادفی توابع: فعالیت: مبادله محتوای دو div اشیاء ایجاد اشیاء با استفاده از کلمه کلیدی “new” سازنده های شی آرایه ها دستورالعمل های if و switch – – فعالیت: کنترل سرعت بزرگراه حلقه for حلقه while – فعالیت: صرف ۱۰۰۰ دلار به صورت تصادفی در یک بازار عبارات های با قائده خطاها (۱) خطاها (۲) – فعالیت: تایید اعتبار کلمه عبور تنظیم فاصله زمانی و تابع SeTimeout – فعالیت: ایجاد یک شمارنده ساده شی Window و شی screen استفاده از Alert Boxe برای نمایش پیام هشدار کوکی ها پروژه حرفه ای: بازی ریاضی (HTML، CSS و جاوا اسکریپت) معرفی ساختار صفحه و استفاده از یک سبک یا یک ظاهر طراحی شده (۱) ساختار صفحه و استفاده از یک سبک یا یک ظاهر طراحی شده (۲) ساختار صفحه و استفاده از یک سبک یا یک ظاهر طراحی شده (۳) ساختار صفحه و استفاده از یک سبک یا یک ظاهر طراحی شده (۴) منطق بازی با استفاده از یک فلوچارت تصویری کد جاوااسکریپت (۱) کد جاوااسکریپت (۲) کد جاوااسکریپت (۳) کد جاوااسکریپت (۴) و تبریک کتابخانه جِی‌کوئری (jQuery) معرفی و بارگیری کتابخانه جِی‌کوئری (jQuery) انتخاب عناصر HTML (1) انتخاب عناصر HTML (2) پاسخ به رخدادها تغییر ویژگی ها و محتوای HTML (1) تغییر ویژگی ها و محتوای HTML (2) تغییر سبک (۱) تغییر سبک (۲) – فعالیت: توابع تولید کننده وضعیت و رنگ تصادفی اثرات جِی‌کوئری (jQuery) ایجکس (AJAX) معرفی واسط کاربری ایجکس (AJAX) استفاده از دستور های Draggable و Droppable برای کشیدن و رها کردن (۱) – فعالیت: Leave me alone! Please drop me استفاده از دستور های Draggable و Droppable برای کشیدن و رها کردن (۲) – فعالیت: Drag Items to your basket استفاده از تابع resizable برای تغییر اندازه استفاده از تابع Selectable – فعالیت: اضافه کردن ماشین انتخابی به کارد استفاده از تابع Sortable – فعالیت: مرتب سازی و تبادل ماشین انتخابی بین دو گروه قابل مرتب شدن – فعالیت: مرتب سازی و تبادل اتومبیل بین دو گروه انجام می شود کنترل Accordion – فعالیت: ایجاد کنترل قابل تغییر اندازه با بخش های قابل انعطاف آکاردئون – فعالیت: ایجاد آکوردئون قابل تغییر اندازه با بخش های جمع شدنی (collapsible) ویژگی تکمیل خودکار Autocomplete – فعالیت: ورودی شهر با گزینه های از پیش انتخاب شده دکمه فیلد Date Picker – فعالیت: انتخاب تاریخ عزیمت و بازگشت پرواز درست مانند Expedia کادر محاوره Dialog – فعالیت: آیا مطمئن هستید که می خواهید به صفحه قبلی بروید؟ فهرست نوار پیشرفت – فعالیت: نوار پیشرفت متحرک از ۰٪ تا ۱۰۰٪ تگ Select Menu افزونه Slider – فعالیت: محدوده مسافت پیموده شده خودرو با استفاده از یک اسلایدر افزونه More Widgets: Spinners، Tabs و Tooltips پروژه حرفه ای: بازی تکه های میوه (HTML، CSS و jQuery) معرفی ساختار صفحه و یک استفاده از یک ظاهر از پیش طراحی شده یا سبک منطق بازی با استفاده از یک فلوچارت گویا کد جی کوئری (۱) کد جی کوئری (۲) کد جی کوئری (۳) کد جی کوئری (۴) فریم ورک Twitter Bootstrap معرفی استفاده از سیستم جدول بندی Grid System)) استفاده تایپوگرافی (Typography) برای طراحی و فرمت متن جداول فرم ها (۱) – فعالیت: فرم دورن خطی افقی و واکنش گرا برای و ورود فرم ها (۲) فرم ها (۳) دکمه ها تصاویر کلاس های Nav – فعالیت: طراحی وب سایت با استفاده از Nav Tabs و Neil Pills کامپوننت های navbar – فعالیت: طراحی وب سایت با استفاده از یک نوار ناوبری وانکنش گرا / جمع شدنی صفحه بندی (pagination) – فعالیت: نمونه های صفحه بندی و پیجر مانند گوگل / ای بی استفاده از Jumbotron استفاده از ویژگی Thumbnails برای نمایش تصاویر و ویدئوهای بندانگشتی استفاده از منو های آبشاری Dropdown menus کامپوننت های Modal (1) – فعالیت: من در مورد سفارش خود تقاضای استعلام دارم کامپوننت های Modal (2) – فعالیت: من در مورد سفارش خود تقاضای استعلام دارم پلاگین Scrollspy تب ها پیام راهنما یا توضیح مختصر Tooltip پلاگینِ Popovers – فعالیت: ایجاد یک popover (توضیح مختصر) درست مثل آنچه که در IPAD می بینید هشدارها (Alerts) – فعالیت: ایجاد کادر هشدار برای نشان دادن یک پیام اخطار یا موفقیت پلاگین دکمه Button- فعالیت: در حال بارگیری … تکمیل دانلود پلاگین محتوای کشویی Collapse اسلایدر Carousels – فعالیت: ایجاد اسلایدر تعاملی Carousels پلاگینِ Affix – فعالیت: وب سایت تعاملی با محتوا قفل شده به یک منو پروژه حرفه ای: برنامه صفحه فرود (HTML، CSS و بوت استرپ) معرفی سربرگ و محتوای ویژه (۱) سربرگ و مطالب ویژه (۲) سربرگ و محتوای ویژه (۳) بخش آزمایشی، پاورقی و تبریک پروژه حرفه ای: وب سایت شرکت (HTML، CSS و بوت استرپ) معرفی ساختار کار ما پس زمینه کامپوننت Navbar بخش سربرگ و آیکون دکمه تماس و پاورقی پروژه حرفه ای: Our Lovely Course (HTML، CSS، jQuery و Bootstrap) معرفی ساختار کار ما اضافه کردن یک ویدیو پس زمینه نوار ناوبری با ظاهر پیشرفته بخش Home درباره بخش اسلایدر Carousel (1) اسلایدر Carousel (2) سازگاری برای دستگاه های کوچک اضافه کردن ویژگی ScrollSpy به Navbar و Congratulations پروژه حرفه ای: برنامه Stopwatch (HTML، CSS، jQuery و Bootstrap) معرفی اپلیکیشن Skeleton و Decoration (1) اپلیکیشن Skeleton و Decoration (2) اپلیکیشن logic با استفاده از یک فلوچارت تصویری کد جی کوئری (۱) کد جی کوئری (۲) کد جی کوئری (۳) پروژه حرفه ای: طراحی برنامه (HTML، CSS، jQuery UI، Canvas، ذخیره سازی محلی) معرفی پلیکیشن Skeleton و Decoration (1) اپلیکیشن Skeleton و Decoration (2) اپلیکیشن Skeleton و Decoration (3) یادگیری HTML5 Canvas اپلیکیشن logic با استفاده از یک فلوچارت تصویری کد jQuery ساختار کد jQuery کد jQuery (1) کد jQuery (2) کد jQuery (3) PHP مقدمه درونی سازی PHP در HTML متغیرهای PHP انواع داده ها: رشته ها انواع داده ها: اعدد صحیح و شناور انواع داده ها: بولین انواع داده ها: آرایه ها انواع داده ها: اشیاء انواع داده: NULL انواع داده ها: منابع توابع رشته ای دستورالعمل if و switch حلقه for حلقه while توابع متد های GET و POST توابع آرایه (۱) توابع آرایه (۲) ارسال ایمیل ها – فعالیت: ارسال یک ایمیل styled email در قالب HTML فیلتر کردن ورودی کاربر (۱) – محافظت از خود در مقابل هکرها فیلتر کردن ورودی کاربر (۲) – تایید اعتبار ورودی کاربر فعالیت: ایجاد یک فرم تماس واکنش گرا با استفاده از PHP و Bootstrap (1) فعالیت: ایجاد یک فرم تماس واکنش گرا با استفاده از PHP و Bootstrap (1) فعالیت: ایجاد یک فرم تماس واکنش گرا با استفاده از PHP و Bootstrap (1) تاریخ و زمان (۱) تاریخ و زمان (۲) – فعالیت: روز هفته ای که متولد شدید؟ تاریخ در ۱۰۰۰ روز؟ قرار دادن فایل های PHP کار با فایل ها (۱): باز کردن – خواندن – نوشتن – بستن کار با فایل ها (۲): باز کردن – خواندن – نوشتن – بستن آپلود فایل ها با استفاده از PHP (1) – فعالیت: آپلود فایل های PDF و متن کمتر از ۳Mo. آپلود فایل ها با استفاده از PHP (1) – فعالیت: آپلود فایل های PDF و متن کمتر از ۳Mo. کوکی ها مدیریت خطا ها (۱) مدیریت خطا ها (۲) – فعالیت: ثبت خطاهای پی اچ پی در یک فایل / ارسال خطا ها به ایمیل جلسات MySQL معرفی ایجاد پایگاه داده با استفاده از PHP MYADMIN MySQL راه دور (۱) MySQL راه دور (۲) ایجاد پایگاه داده با استفاده از PHP و MySQL اضافه کردن یک جدول به یک پایگاه داده قرار دادن داده در جدول پایگاه داده فعالیت: قرار دادن داده در پایگاه داده هنگامی که کاربر یک فرم را ارائه می کند (۱) فعالیت: قرار دادن داده در پایگاه داده هنگامی که کاربر یک فرم را ارائه می کند (۲) فعالیت: قرار دادن داده در جدول HTML با استفاده از داده های پایگاه داده (۱) فعالیت: قرار دادن داده در جدول HTML با استفاده از داده های پایگاه داده (۱) به روز رسانی پایگاه داده حذف اطلاعات پایگاه داده پروژه حرفه ای: برنامه یادداشت آنلاین (HTML، CSS، Bootstrap، PHP، MySQL، AJAX) مقدمه و کد منبع اپلیکیشن Skeleton وDecoration (1) – فرود صفحه اپلیکیشن Skeleton وDecoration (2) – فرود صفحه اپلیکیشن Skeleton وDecoration (3) – فرود صفحه اپلیکیشن Skeleton وDecoration (4) – فرود صفحه اپلیکیشن Skeleton وDecoration (5) – فرود صفحه اپلیکیشن Skeleton وDecoration (6) – فرود صفحه اپلیکیشن logic – ثبت نام، ورود به سیستم، به یاد داشته باشید، فراموشی رمز عبور ساختار کد ثبت نام / ورود به سیستم (۱) ساختار کد ثبت نام / ورود به سیستم (۱) کد ثبت نام (۱) کد ثبت نام (۲) کد ثبت نام (۳) کد ثبت نام (۴) کد ثبت نام (۵) کد ورود به سیستم کد مرا به یاد داشته باشید (۱) کد مرا به یاد داشته باشید (۲) کد مرا به یاد داشته باشید (۳) و کد خروج از سیستم کد فراموشی رمز عبور (۱) کد فراموشی رمز عبور (۲) کد فراموشی رمز عبور (۳) کد فراموشی رمز عبور (۴) مدیریت یادداشت ها: منطق برنامه مدیریت یادداشت ها: ساختار کد بار گذاری یادداشت ها: کد (۱) بار گذاری یادداشت ها: کد (۲) ایجاد یادداشت ها : کد (۱) ایجاد یادداشت ها: کد (۲) ویرایش یادداشت ها: کد (۱) ویرایش یادداشت ها: کد (۲) حذف یادداشت ها: کد (۱) حذف یادداشت ها: کد (۲) به روز رسانی کد نام کاربری (۱) به روز رسانی کد نام کاربری (۲) به روز رسانی کد کلمه عبور (۱) به روز رسانی کد کلمه عبور (۲) به روز رسانی کد ایمیل (۱) به روز رسانی کد ایمیل (۲) وردپرس (سه صفحه وب حرفه ای: Blog + About Page + Contact Page) معرفی نصب و راه اندازی – فعالیت: ایجاد اولین وبلاگ پست های وبلاگ و نظرات تم ها صفحات و منو ها سفارشی سازی صفحات (۱) سفارشی سازی صفحات (۲) CSS سفارشی پلاگین ها فعالیت: یک About Page زیبا (اضافه کردن محتوا به یک صفحه وردپرس) فعالیت: یک About Page زیبا (تایپوگرافی) فعالیت: یک About Page زیبا (آرم ها) فعالیت: یک About Page زیبا (دکمه ها) فعالیت: ایجاد یک صفحه تماس بسیار عالی همراه با یک نقشه گوگل و فرم تماس Google Maps API رابط برنامه ‌نویسی کاربردی گوگل برای نقشه ها Google Maps API معرفی و قراردادن نقشه گوگل در وب سایت نشانگرها (Markers) و پنجره InfoWindows نمایش، مخفی کردن یا حذف نشانگرها متحرک سازی افتادن مارکرها سرویس جهت یابی – فعالیت: فاصله و زمان رانندگی بین نیویورک و تورنتو ترجمه آدرس به یک مکان بر روی نقشه (Geocoding) با استفاده از رابط برنامه ‌نویسی کاربردی جاوااسکریپت – فعالیت: دریافت ترجمه های یک آدرس برای نقشه گوگل ترجمه آدرس به یک مکان بر روی نقشه (Geocoding) با استفاده از رابط برنامه ‌نویسی کاربردی جاوااسکریپت (۱) – فعالیت: قالب بندی آدرس و دریافت کد پستی ترجمه آدرس به یک مکان بر روی نقشه (Geocoding) با استفاده از رابط برنامه ‌نویسی کاربردی جاوااسکریپت (۲) – فعالیت: قالب بندی آدرس و دریافت کد پستی جستجوی نزدیک (Nearby Search) تکمیل خودکار پروژه حرفه ای: فاصله بین شهرهای (HTML، CSS، jQuery، Google Maps) معرفی اپلیکیشن Skeleton و Decoration منطق برنامه با استفاده از یک فلوچارت تصویری کد جاوا اسکریپت پروژه حرفه ای: وب سایت با ابزارک های اجتماعی (فیس بوک، پلاگین و توییتر) معرفی اپلیکیشن Skeleton و Decoration ابزارک فیس بوک ابزارک گوگل پلاس دکمه تویت گاهشمار توییتر برنامه کاربردی برای IOS و آندروید موبایل با استفاده از jQuery Mobile معرفی صفحات، محاوره ها و گذار ها کامپوننت های navbar سیستم شبکه ای نمایش مشخصات فرم های ورودی رخداد ها پروژه حرفه ای: اپلیکیشن کتاب خوان Speed Reader برای IOS و آندروید معرفی اپلیکیشن Skeleton و Decoration (1) اپلیکیشن Skeleton و Decoration (2) اپلیکیشن logic با استفاده از یک فلوچارت تصویری اپلیکیشن Start Reading (1) اپلیکیشن Start Reading (2) مکث، ادامه پخش، راه اندازی مجدد تغییر اندازه قلم تغییر سرعت خواندن کنترل پیشرفت خواندن: رفتن به عقب و جلو منتشر کردن برنامه خود در Google Play انتشار برنامه خود بهIOS App Store (1) انتشار برنامه خود بهIOS App Store (۲) پروژه حرفه ای: وب سایت اشتراک گذاری خودرو (JavaScript، PHP، MySQL، AJAX، JSON) معرفی ثبت نام / کد ورود (۱) ثبت نام / کد ورود (۲) ثبت نام / کد ورود (۳) جستجوی صفحات اپلیکیشن Skeleton و Decoration (1) جستجوی صفحات اپلیکیشن Skeleton و Decoration (2) جستجوی صفحات اپلیکیشن Skeleton و Decoration (3) جستجوی صفحات اپلیکیشن Skeleton و Decoration (4) جستجوی صفحات اپلیکیشن Skeleton و Decoration (5) کد تصویر پروفایل (۱) کد تصویر پروفایل (۲) کد تصویر پروفایل (۳) کد تصویر پروفایل (۴) صفحات سیاحتی اپلیکیشن Skeleton و Decoration (1) صفحات سیاحتی اپلیکیشن Skeleton و Decoration (2) صفحات سیاحتی اپلیکیشن Skeleton و Decoration (3) منطق وبسایت ایجاد یک صفحات سیاحتی کد (۱) ایجاد یک صفحات سیاحتی کد (۲) ایجاد یک صفحات سیاحتی کد (۳) ایجاد یک صفحات سیاحتی کد (۴) بارگذاری صفحات سیاحتی کد (۱) بارگذاری صفحات سیاحتی کد (۲) ویرایش / حذف صفحات سیاحتی کد (۱) ویرایش / حذف صفحات سیاحتی کد (۲) ویرایش / حذف صفحات سیاحتی کد (۳) ویرایش / حذف صفحات سیاحتی کد (۴) جستجوی صفحات سیاحتی کد (۱) جستجوی صفحات سیاحتی کد (۲) جستجوی صفحات سیاحتی کد (۳) جستجوی صفحات سیاحتی کد (۴) جستجوی صفحات سیاحتی کد (۵) جستجوی صفحات سیاحتی کد (۶) جستجوی صفحات سیاحتی کد (۷) جستجوی صفحات سیاحتی کد (۸) کد اسپینر (۱) کد اسپینر (۲) پایان دوره و تبریک

The Complete Web Development Course – Build 15 Projects [Video] Publisher:Packtpub Author:Issam Duration:67 hours 15 minutes

HTML, CSS, Javascript, jQuery, Bootstrap, PHP, MySQL, WordPress, API’s (Google, Facebook, Twitter), and Mobile
The course will take you from learning the basics to mastering the most advanced web development techniques. Taking this course will help you be ready to build powerful and responsive websites to a highly professional degree using today’s most advanced and up to date web technologies within a few weeks from now. This course is divided into 10 perfectly structured chapters consisting of 77 hours of crystal clear and 100% hands on engaging lectures. You will first learn the basic concepts, and straight after that apply them in easy practical examples. Then you will easily navigate to more advanced concepts and use them to build more complex applications. Once you have finished the chapter, you will then move to a bigger challenge where you will confidently build a real life full professional project using the skills you acquired in that chapter combined with previous ones.
Style and Approach
There is absolutely no pre-knowledge required. This is a 100% comprehensive web development course that will take you from zero-skills to a cash-earning web developer, step-by-step with no steps skipped.
Released: Tuesday, June 19, 2018
Introduction – Get your free Unlimited Web Hosting – HTML
Introduction
Structure of a website
Your first website
Get your free unlimited web hosting
Set up FTP (Cyberduck Version)
Set up FTP (FileZilla Version)
Headings
Paragraphs
Links
Images
Inline vs Block Elements
Iframes – Activity: Embed a nice relaxing YouTube video to your website
Unordered Lists
Ordered Lists
Description Lists
Tables
Entities
Forms (1) – Activity: Create a simple Login Form
Forms (2) – Activity: Create a Marketplace Checkout Form
Text Decoration
Comments
CSS
Introduction
Inline CSS
Internal CSS
External CSS
Classes and IDs
Div and Span
Box Model
Box Model: Padding
Box Model: Border
Box Model: Outline
Box Model: Margin
Background
Floating
Positioning
Display
Text Decoration
Text Align
Text Font
Text Effects
Image Sprites
Image Opacity
Styling Lists
Styling Links
Gradients
2D Transforms
3D Transforms
Transitions
Animations
Professional Project: Mathematics Tutorials Website (HTML CSS)
Introduction
Header (1)
Header (2)
Menu
Introduction Box
Sidebars (1)
Sidebars (2)
Footer Congratulations
JavaScript
Introduction
Buttons
Change HTML Content
Change HTML Style
Variables and Data Types
Change HTML Using Variables – Activity: Random Color Generator
Functions: Activity: Swap the content of two divs
Objects
Create Objects using the “new” keyword
Object constructors
Arrays
If and Switch Statements – Activity: Motorway Speed Control
For Loops
While Loops – Activity: Spend $1000 randomly in a marketplace
Regular Expressions
Errors (1)
Errors (2) – Activity: Password Validation
Set Interval SeTimeout – Activity: Create a simple counter
Window and Screen
Alert Boxes
Cookies
Professional Project: Maths Game (HTML, CSS JavaScript)
Introduction
Page Structure Styling (1)
Page Structure Styling (2)
Page Structure Styling (3)
Page Structure Styling (4)
Game Logic using an illustrative flowchart
JavaScript Code (1)
JavaScript Code (2)
JavaScript Code (3)
JavaScript Code (4) Congratulations
jQuery
Introduction and Loading JQuery
Select HTML Elements (1)
Select HTML Elements (2)
Respond to Events
Change HTML Content and Attributes (1)
Change HTML Content and Attributes (2)
Change Styling (1)
Change Styling (2) – Activity: Random Position and Color Generator
JQuery Effects
Ajax
JQuery UI Introduction
Draggable and Droppable (1) – Activity: Leave me alone! Please drop me!
Draggable and Droppable (2) – Activity: Drag Items to your basket
Resizable
Selectable – Activity: Append selected Car Makes to a Box
Sortable – Activity: Sort and exchange Car makes between two groups
Accordion – Activity: Create a resizable accordion with collapsible sections
Autocomplete – Activity: City Input with prepopulated options
Button
Date Picker – Activity: Outbound and return Flight Date Picker just like Expedia
Dialog – Activity: Are you sure you want to go to the previous page?
Menu
Progress Bar – Activity: Animated progress bar filled from 0% to 100%
Select Menu
Slider – Activity: Car Mileage Range using a Slider
More Widgets: Spinners, Tabs and Tooltips
rofessional Project: Fruits Slice Game (HTML, CSS JQuery)
Introduction
Page Structure and Styling
Game Logic using an illustrative flowchart
jQuery Code (1)
jQuery Code (2)
jQuery Code (3)
jQuery Code (4)
Twitter Bootstrap
Introduction
Grid System
Typography
Tables
Forms (1) – Activity: Inline and Horizontal Responsive Login Forms
Forms (2)
Forms (3)
Buttons
Images
Navs – Activity: Website Design using Nav Tabs and Nav Pills
Navbars – Activity: Website Design using a responsive/collapsible navigation bar
Pagination – Activity: Pagination and Pager Examples like Google/Ebay
Jumbotron
Thumbnails
Dropdown menus
Modals (1) – Activity: I have an inquiry about my order
Modals (2) – Activity: I have an inquiry about my order
Scrollspy
Tabs
Tooltips
Popovers – Activity: Create a popover just like the one you see on an IPAD
Alerts – Activity: Create an alert Box to show a warning or success message
Button plugin – Activity: Loading … Download Complete
Collapse plugin
Carousels – Activity: Create an interactive carousel slider
Affix plugin – Activity: Interactive Website with Content Affixed to a Menu
Professional Project: App Landing Page (HTML, CSS Bootstrap)
Introduction
Header and Featured Content (1)
Header and Featured Content (2)
Header and Featured Content (3)
Trial Section, Footer Congratulations
Professional Project: Company Website (HTML, CSS Bootstrap)
Introduction
Structure of our work
Background
Navbar
Header icons section
Contact Button Footer
Professional Project: Our Lovely Course (HTML, CSS, jQuery Bootstrap)
Introduction
Structure of our work
Add a background video
Navigation bar with advanced styling
Home Section
About Section
Carousel Slider (1)
Carousel Slider (2)
Adapt for Small Devices
Add ScrollSpy feature to navbar Congratulations
Professional Project: Stopwatch App (HTML, CSS, jQuery Bootstrap)
Introduction
App Skeleton and Decoration (1)
App Skeleton and Decoration (2)
App Logic using an illustrative flowchart
jQuery Code (1)
jQuery Code (2)
jQuery Code (3)
Professional Project: Drawing App (HTML, CSS, jQuery UI, Canvas, Local Storage)
Introduction
App Skeleton and Decoration (1)
App Skeleton and Decoration (2)
App Skeleton and Decoration (3)
Learn HTML5 Canvas
App Logic using an illustrative flowchart
jQuery Code Structure
jQuery Code (1)
jQuery Code (2)
jQuery Code (3)
PHP
Introduction
Embed PHP in HTML
PHP Variables
Data Types: Strings
Data Types: Integers and Floats
Data Types: Booleans
Data Types: Arrays
Data Types: Objects
Data Types: NULL
Data Types: Resources
String Functions
If and Switch Statements
For Loops
While Loops
Functions
GET POST
Array Functions (1)
Array Functions (2)
Send Emails – Activity: Send a styled email in HTML format
Filter User Inputs (1) – Protect Yourself from Hackers
Filter User Inputs (2) – User Input Validation
Activity: Create a responsive Contact Form using PHP Bootstrap (1)
Activity: Create a responsive Contact Form using PHP Bootstrap (2)
Activity: Create a responsive Contact Form using PHP Bootstrap (3)
Date and Time (1)
Date and Time (2) – Activity: Day of the week you were born? Date in 1000 days?
Include PHP files
File Handling (1): Open – Read – Write – Close
File Handling (2): Open – Read – Write – Close
Upload Files Using PHP (1) – Activity: Upload PDF Text Files Less than 3Mo.
Upload Files Using PHP (2) – Activity: Upload PDF Text Files Less than 3Mo.
Cookies
Error Handling (1)
Error Handling (2) – Activity: Log PHP errors in a file / Trigger error emails
Sessions
MySQL
Introduction
Create a database using PHP MYADMIN
Remote MySQL (1)
Remote MySQL (2)
Create a database using PHP MySQL
Add a table to a database
Populate a database table
Activity: Populate Database once the user submits a form
Activity: Populate Database once the user submits a form (2)
Activity: Populate an HTML table using Database Data (1)
Activity: Populate an HTML table using Database Data (2)
Update Database Data
Delete Database Data
Professional Project: Online Notes App (HTML, CSS, Bootstrap, PHP, MySQL, AJAX)
Introduction Source Code
App Skeleton and Decoration (1) – Landing Page
App Skeleton and Decoration (2) – Landing Page
App Skeleton and Decoration (3) – Landing Page
App Skeleton and Decoration (4) – Landing Page
App Skeleton and Decoration (5) – My Notes Page
App Skeleton and Decoration (6) – Profile Page
App Logic – Signup, Login, Remember Me, Forgot Password
Signup/Login Code Structure (1)
Signup/Login Code Structure (2)
Signup Code (1)
Signup Code (2)
Signup Code (3)
Signup Code (4)
Signup Code (5)
Login Code
“Remember me” Code (1)
“Remember me” Code (2)
“Remember me” Code (3) and Logout Code
“Forgot Password” Code (1)
“Forgot Password” Code (2)
“Forgot Password” Code (3)
“Forgot Password” Code (4)
Notes Management: Logic
Notes Management: Code Structure
Load Notes: Code (1)
Load Notes: Code (2)
Create Notes: Code (1)
Create Notes: Code (2)
Edit Notes: Code (1)
Edit Notes: Code (2)
Delete Notes: Code (1)
Delete Notes: Code (2)
Update Username Code (1)
Update Username Code (2)
Update Password Code (1)
Update Password Code (2)
Update Email Code (1)
Update Email Code (2)
WordPress (3 Professional Webpages: Blog + About Page + Contact Page)
Introduction
Installation – Activity: Create your first Blog
Blog Posts and Comments
Themes
Pages and Menus
Customise pages (1)
Customise pages (2)
Custom CSS
Plugins
Activity: Beautiful About Page (Add Content to a WordPress Page)
Activity: Beautiful About Page (Typography)
Activity: Beautiful About Page (Logos)
Activity: Beautiful About Page (Buttons)
Activity: Create an Awesome Contact Page with a Google Map and Contact Form
Google Maps API’s
Introduction Embed Google Map to your Website
Markers and InfoWindows
Show, Hide or Delete Markers
Animated drop of Markers
Direction Service – Activity: Driving distance time between New York Toronto
Geocoding using the Javascript API – Activity: Get Geocoordinates of an address
Geocoding using the geocoding API (1) – Activity: format Address get postcode
Geocoding using the geocoding API (2) – Activity: format Address get postcode
Nearby Search
Autocomplete
Professional Project: Distance between Cities (HTML, CSS, jQuery, Google Maps)
Introduction
Skeleton and decoration
App Logic using an illustrative flowchart
JavaScript Code
Professional Project: Website with Social Widgets (Facebook, Google+ Twitter)
Introduction
Skeleton and decoration
Facebook Widgets
Google plus Widgets
Tweet Button
Twitter Timeline
IOS and Android Mobile Applications using jQuery Mobile
Introduction
Pages, Dialogs and Transitions
Navbars
Grid System
List Views
Form Inputs
Events
Professional Project: Speed Reader for IOS and Android
Introduction
App Skeleton and Decoration (1)
App Skeleton and Decoration (2)
Logic of the App using an illustrative flowchart
Start Reading (1)
Start Reading (2)
Pause, Resume, Restart
Change the font size
Change the reading speed
Control Reading Progress: Go backwards and forward
Publish your app to Google Play
Publish your app to the IOS App Store (1)
Publish your app to the IOS App Store (2)
Professional Project: Car Sharing Website (JavaScript, PHP, MySQL, AJAX, JSON)
Introduction
Signup/Login Code (1)
Signup/Login Code (2)
Signup/Login Code (3)
Search Page Skeleton Decoration (1)
Search Page Skeleton Decoration (2)
Search Page Skeleton Decoration (3)
Search Page Skeleton Decoration (4)
Search Page Skeleton Decoration (5)
Profile Picture Code (1)
Profile Picture Code (2)
Profile Picture Code (3)
Profile Picture Code (4)
Trips Page Skeleton Decoration (1)
Trips Page Skeleton Decoration (2)
Trips Page Skeleton Decoration (3)
Website Logic
“Create a Trip” Code (1)
“Create a Trip” Code (2)
“Create a Trip” Code (3)
“Create a Trip” Code (4)
“Load Trips” Code (1)
“Load Trips” Code (2)
“Edit/Delete Trips” Code (1)
“Edit/Delete Trips” Code (2)
“Edit/Delete Trips” Code (3)
“Edit/Delete Trips” Code (4)
“Search Trips” Code (1)
“Search Trips” Code (2)
“Search Trips” Code (3)
“Search Trips” Code (4)
“Search Trips” Code (5)
“Search Trips” Code (6)
“Search Trips” Code (7)
“Search Trips” Code (8)
Spinner” Code (1)
“Spinner” Code (2)
Finishing Touches Congratulations

منبع