تعداد دانشجو
۲۴۹ نفر
هزینه آموزش
۳۲,۰۰۰ تومان

آموزش کاربردی HTML5, CSS3, jQuery در طراحی وب - بخش دوم

آموزش کاربردی HTML5, CSS3, jQuery در طراحی وب - بخش دوم

تعداد دانشجو
۲۴۹ نفر
مدت زمان
۴ ساعت و ۵۰ دقیقه
هزینه آموزش
۳۲,۰۰۰ تومان
محتوای این آموزش
(توضیحات)
آموزش کاربردی 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)
  • علوم کامپیوتر
  • طراحی سایت
مشاهده بیشتر مشاهده کمتر

آنچه در این آموزش خواهید دید:

آموزش ویدئویی مورد تائید فرادرس
فایل برنامه ها و پروژه های اجرا شده
فایل PDF یادداشت‌ های ارائه مدرس

نرم افزارهای مرتبط با آموزش

PhpStorm (آموزش هیچ وابستگی به این نرم افزار ندارد.)

پیش نیاز



پیش نمایش‌ها

۱. مقدمه

توجه: اگر به خاطر سرعت اینترنت، کیفیت نمایش پایین‌تر از کیفیت 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
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.

راهنمای سفارش آموزش‌ها

آیا می دانید که تهیه یک آموزش از فرادرس و شروع یادگیری چقدر ساده است؟

(راهنمایی بیشتر +)

در مورد این آموزش یا نحوه تهیه آن سوالی دارید؟
  • با شماره تلفن واحد مخاطبین ۵۷۹۱۶۰۰۰ (پیش شماره ۰۲۱) تماس بگیرید. - تمام ساعات اداری
  • با ما مکاتبه ایمیلی داشته باشید (این لینک). - میانگین زمان پاسخ دهی: ۳۰ دقیقه


اطلاعات تکمیلی

نام آموزش آموزش کاربردی HTML5, CSS3, jQuery در طراحی وب - بخش دوم
ناشر فرادرس
کد آموزش FVWEB9904
مدت زمان ۴ ساعت و ۵۰ دقیقه
زبان فارسی
نوع آموزش نرم افزار آموزشی
حجم دانلود ۶۷۶ مگابایت     (کیفیت ویدئو HD‌ با فشرده سازی انحصاری فرادرس)

نظرات

تا کنون ۲۴۹ نفر از این آموزش استفاده کرده اند و و هنوز هیچ نظری ثبت نشده است.
برچسب‌ها:
3d card | Accordion | Back End | battery charging | battery charging animation | Bootstrap | CheckBox | client | Client Side | copy to clipboard | countdown timer | CSS | CSS3 | custom file uploder | cutout | cutout text | dark mode | download image | download link | Dropdown | dropdown menu | Effect | file uploader | Front End | HTML | html5 | image hover | image slider | javascript | Jquery | js | light mode | local storage | LocalStorage | mouse move | move background | nav | Navigation | navigation menu | parallax scrolling | password validation | Password Validation در سمت کلاینت | Preloader | Radio Button | Scroll | Scrollbar | scrolling | show password | show password button | slideshow | sticky image | text type | text type animation | toggle switch | Toggle Switches | Tooltip | type | Web | Web Design | web developer | web developing | اچ تی ام ال | اسکرول | اسکرول بار | اسلایدر | اسلایشو | اعتبار سنجی | اعتبارسنجی | افکت | انیمیشن | انیمیشن Battery Charging | انیمیشن تایپ متن | ایجاد Accordion | ایجاد Countdown Timer | ایجاد DropDown Menu | ایجاد Image Hover خلاقانه | ایجاد Parallax Scrolling | ایجاد Scrollbar سفارشی | ایجاد Toggle Switch | ایجاد Tooltip | ایجاد ابزار تبدیل واحدهای اندازه گیری مختلف به یکدیگر | ایجاد اسلایدر مقایسه عکس | ایجاد افکت بر روی حرکت ماوس | ایجاد کارت 3D | ایجاد یک File Uploader | ایجاد یک File Uploader با استایل سفارشی | ایجاد یک عکس Sticky | ایجاد یک لینک دانلود | اینچ به سانتی متر با jquery | برنامه نویسی | برنامه نویسی تحت وب | برنامه نویسی وب | بک اند | پنج ضلعی با css | تعریف حالت Dark Mode برای وب سایت | تول تیپ | جاوااسکریپت | جی کوئری | حالت شب برای سایت | حرکت Background | حرکت Background در هنگام Scroll | دکمه کپی متن در Clipboard | دکمه نمایش پسورد | دکمه نمایش رمز عبور در Input | دکمه نمایش رمز عبور در Input با نوع Password | ذخیره اطلاعات به صورت محلی | ساخت اشکال هندسی با استفاده از CSS | سفارشی سازی | سفارشی سازی Checkbox | سفارشی سازی Radio Button | سفارشی سازی Radio Button و Checkbox | سی اس اس | طراحی | طراحی سایت | طراحی وب | عکس چسبنده | فرانت اند | کارت سه بعدی | کپی در کلیپ بورد | گالری عکس | گالری عکس به صورت اسلایدشو | لوکال استوریج | لینک دانلود | مثلث با css | مربع با css | مستطیل با css | منوی کرکره ای | منوی ناوبری گوشه صفحه | میزان اسکرول | نحوه پیاده سازی Preloader | نمایش متن بر روی عکس | نمایش متن بر روی عکس به صورت Cutout Text | نمایش میزان اسکرول شدن صفحه | نمایش میزان اسکرول شدن صفحه به صورت گرافیکی | هاور | وب
مشاهده بیشتر مشاهده کمتر