آموزش های مقدماتی تکنولوژی های مختلف برنامه نویسی تحت وب فراوان یافت می شوند و تعداد بسیار کمی از این آموزش ها به صورت کاربردی به این تکنولوژی ها می پردازند. به همین منظور، برای استفاده کاربردی از سه تکنولوژی HTML5 ,CSS3 و jQuery آموزشی را تهیه کردیم تا کاربرد این سه تکنولوژی وب را به صورت عملی تدریس نموده و زمینه استفاده کاربردی از مقدمات را فراهم نماییم. بخش یکم آموزش نیز بر همین مبنا پایه ریزی شده بود و مثال های متنوعی در آن ارائه شده بود. در این قسمت، مثال های متنوع تری را ارائه می کنیم تا تسلط شما بر استفاده کاربردی از این سه تکنولوژی افزایش یابد.
آموزش کاربردی HTML5, CSS3, jQuery در طراحی وب - بخش دوم
زمینه کاری ایشان به صورت تخصصی Front-End Web Developer است و تسلط خوبی بر روی تکنولوژی‌های این بخش نظیر: HTML5, CSS3, Sass, jQuery, Bootstrap و جاوا اسکریپت خصوصا فریم‌ورک Vue.js دارند. ایشان همچنین سابقه کار با فریم‌ورک AngularJS را هم در کارنامه خود دارند.
توضیحات تکمیلی
آموزش های مقدماتی تکنولوژی های مختلف برنامه نویسی تحت وب فراوان یافت می شوند و تعداد بسیار کمی از این آموزش ها به صورت کاربردی به این تکنولوژی ها می پردازند. به همین منظور، برای استفاده کاربردی از سه تکنولوژی HTML5 ,CSS3 و jQuery آموزشی را تهیه کردیم تا کاربرد این سه تکنولوژی وب را به صورت عملی تدریس نموده و زمینه استفاده کاربردی از مقدمات را فراهم نماییم.
بخش یکم آموزش نیز بر همین مبنا پایه ریزی شده بود و مثال های متنوعی در آن ارائه شده بود. در این قسمت، مثال های متنوع تری را ارائه می کنیم تا تسلط شما بر استفاده کاربردی از این سه تکنولوژی افزایش یابد. همچنین در این فرادرس سعی شده است بدون استفاده از پلاگین های jQuery، این مثال ها ارائه شوند ولی در تعدادی از قسمت ها، پلاگین هایی برای انجام مثال ها معرفی می گردند تا دانشجویان با راه های مختلف حل مثال ها آشنا شوند. در آخر نیز بر این مساله تاکید داریم که اگر آموزش ها به صورت مقدماتی باشند و حتی از این مقدمات نیز در جهت تولید یک محصول نهایی بهره گیری نشود، هیچ فایده ای برای دانشجو نداشته و باعث کسب مهارت نمی شود.
فهرست سرفصل ها و رئوس مطالب مطرح شده در این مجموعه آموزشی، در ادامه آمده است:
- درس یکم: مقدمه
- درس دوم: ساخت یک File Uploader با استایل سفارشی
- درس سوم: نحوه پیاده سازی Preloader
- درس چهارم: ساخت Accordion
- درس پنجم: Password Validation در سمت کلاینت (Client)
- درس ششم: منوی ناوبری گوشه صفحه
- درس هفتم: ساخت Dropdowns Menu
- درس هشتم: گالری عکس به صورت اسلایدشو (Slideshow)
- درس نهم: ایجاد یک عکس Sticky
- درس دهم: ساخت کارت سه بعدی
- درس یازدهم: دکمه کپی متن در Clipboard
- درس دوازدهم: سفارشی سازی Radio Button و Checkbox
- درس سیزدهم: ساخت Toggle Switches
- درس چهاردهم: دکمه نمایش رمز عبور در Input با نوع Password
- درس پانزدهم: نمایش میزان اسکرول شدن صفحه به صورت گرافیکی
- درس شانزدهم: ساخت Tooltip
- درس هفدهم: نمایش متن بر روی عکس به صورت Cutout Text
- درس هجدهم: ساخت Parallax Scrolling
- درس نوزدهم: ساخت اشکال هندسی با CSS
- درس بیستم: ساخت یک لینک دانلود
- درس بیست و یکم: ساخت Scrollbar سفارشی
- درس بیست و دوم: انیمیشن Battery Charging
- درس بیست و سوم: انیمیشن تایپ متن
- درس بیست و چهارم: ساخت ابزار تبدیل واحدهای اندازه گیری مختلف به یکدیگر
- درس بیست و پنجم: تعریف حالت Dark Mode برای وب سایت
- درس بیست و ششم: ساخت افکت روی حرکت ماوس
- درس بیست و هفتم: ساخت Image Hover خلاقانه
- درس بیست و هشتم: حرکت Background در هنگام Scroll
- درس بیست و نهم: ساخت اسلایدر مقایسه عکس
- درس سی ام: ساخت Countdown Timer
مفید برای رشته های
- مهندسی کامپیوتر - نرم افزار
- مهندسی فناوری اطلاعات (IT)
- علوم کامپیوتر
- طراحی سایت
پیش نیاز
آنچه در این آموزش خواهید دید:
نرم افزارهای مرتبط با آموزش
پیش نمایش‌ها
۱.
مقدمه
توجه: اگر به خاطر سرعت اینترنت، کیفیت نمایش پایین‌تر از کیفیت HD ویدئو اصلی باشد؛ می‌توانید ویدئو را دانلود و مشاهده کنید دانلود پیش‌نمایش - حجم: ۳ مگابایت -- (کلیک کنید +))
۲.
ساخت یک File Uploader با استایل سفارشی
توجه: اگر به خاطر سرعت اینترنت، کیفیت نمایش پایین‌تر از کیفیت HD ویدئو اصلی باشد؛ می‌توانید ویدئو را دانلود و مشاهده کنید دانلود پیش‌نمایش - حجم: ۱۲ مگابایت -- (کلیک کنید +))
۳.
نحوه پیاده سازی Preloader
توجه: اگر به خاطر سرعت اینترنت، کیفیت نمایش پایین‌تر از کیفیت HD ویدئو اصلی باشد؛ می‌توانید ویدئو را دانلود و مشاهده کنید دانلود پیش‌نمایش - حجم: ۵ مگابایت -- (کلیک کنید +))
۴.
ساخت Accordion
توجه: اگر به خاطر سرعت اینترنت، کیفیت نمایش پایین‌تر از کیفیت HD ویدئو اصلی باشد؛ می‌توانید ویدئو را دانلود و مشاهده کنید دانلود پیش‌نمایش - حجم: ۹ مگابایت -- (کلیک کنید +))
۵.
Password Validation در سمت کلاینت
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۶.
منوی ناوبری گوشه صفحه
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۷.
ساخت Dropdown Menu
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۸.
گالری عکس به صورت slide show
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۹.
ایجاد یک عکس Sticky
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۰.
ساخت کارت سه بعدی
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۱.
دکمه کپی متن در Clipboard
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۲.
سفارشی سازی Radio Button و Checkbox
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۳.
ساخت Toggle Switch
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۴.
دکمه نمایش رمز عبور در Input با نوع Password
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۵.
نمایش میزان اسکرول شدن صفحه به صورت گرافیکی
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۶.
ساخت Tooltip
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۷.
نمایش متن روی عکس به صورت Cutout Text
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۸.
ساخت Parallax Scrolling
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۱۹.
ساخت اشکال هندسی با CSS
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۲۰.
ساخت یک لینک دانلود
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۲۱.
ساخت Scrollbar سفارشی
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۲۲.
انیمیشن Battery Charging
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۲۳.
انیمیشن تایپ متن
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۲۴.
ساخت ابزار تبدیل واحدهای اندازه گیری مختلف به یکدیگر
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۲۵.
تعریف حالت Dark Mode برای وب سایت
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۲۶.
ساخت افکت روی حرکت ماوس
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۲۷.
ساخت Image Hover خلاقانه
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۲۸.
حرکت Background در هنگام Scroll
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۲۹.
ساخت اسلایدر مقایسه عکس
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۳۰.
ساخت Countdown Timer
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
با تهیه این آموزش، می‌توانید به همه بخش‌ها و جلسات آن، دسترسی داشته باشید.
راهنمای سفارش آموزش‌ها
.svg)
در مورد این آموزش یا نحوه تهیه آن سوالی دارید؟
- با شماره تلفن واحد مخاطبین ۵۷۹۱۶۰۰۰ (پیش شماره ۰۲۱) تماس بگیرید. - تمام ساعات اداری
- با ما مکاتبه ایمیلی داشته باشید (این لینک). - میانگین زمان پاسخ دهی: ۳۰ دقیقه
اطلاعات تکمیلی
| نام آموزش | آموزش کاربردی HTML5, CSS3, jQuery در طراحی وب - بخش دوم |
|---|---|
| ناشر | فرادرس |
| شناسه اثر | ۸–۱۲۴۵۲–۰۷۶۳۳۹ (ثبت شده در مرکز رسانه‌های دیجیتال وزارت ارشاد) |
| کد آموزش | FVWEB9904 |
| مدت زمان | ۴ ساعت و ۵۰ دقیقه |
| زبان | فارسی |
| نوع آموزش | آموزش ویدئویی (نمایش آنلاین + دانلود) |
| حجم دانلود | ۸۱۴ مگابایت (کیفیت ویدئو HD با فشرده سازی انحصاری فرادرس) |
- ۱۰۰ درصد مبلغ پرداختی در حساب کاربری شما شارژ می‌شود.
- و یا ۷۰ درصد مبلغ پرداختی به حساب بانکی شما بازگشت داده می‌شود.
نظرات
اوکی بود. از قبل در حد مقدماتی آشنایی داشتم و بیشتر از نحوه تدریس مدرس راضی هستم. ممنون و خسته نباشید به مجموعه بزرگ فرادرس.
سلام
آموزش خوبی بود ممنون